With over 10 million users in Germany, kaufDA provides personalised, interactive, and location-based digital advertising for its retail partners along the customer journey, from planning a shopping trip up to the offline point of sale. With the aim of perfecting the user experience, first and foremost on mobile devices, the kaufDA team tackled a project focusing on optimisations to improve page load times.
“At kaufDA we aim to deliver a perfect user experience,” explains Karsten Lehmann, kaufDA’s CMO. “No matter where users plan their shopping trip, which device they use, and how fast their connection is, mobile-first means mobile fast.”
Thanks to the presence of old code that was not being used anymore, kaufDA felt there was plenty of headroom for improvement. To facilitate progress, the inbound marketing and technical teams were aligned around common goals of improving page loading speed, maintaining KPIs, and helping more users to reach kaufDA’s services.
One of the drivers to success in this project was having a small, agile development team of optimisation enthusiasts within the marketing department. In a large organisation like kaufDA, this setup enabled close collaboration and quick iterations with aligned teams pursuing the same goals.
With the backend already having been optimised in the past, the teams concentrated on the frontend. The kaufDA product team joined the Google PageSpeed Race, a three-month gamified event where developer, product, and marketing teams were invited to learn best practices, tools, and optimisation techniques to increase page performance based on Lighthouse audits.
kaufDA understood that user experience is not defined by a single page performance metric or tool, so they monitored user load time, Lighthouse Performance Score, and real user metrics, while paying close attention to key metrics such as First Meaningful Paint (an audit that identifies the time at which the user feels that the primary content of the page is visible) and critical path length. They also monitored the conversion and bounce rates alongside session duration times.
Lighthouse is an open-source, automated auditing tool for web pages to improve site quality. The tool’s report combines audits with best practices for performance, accessibility, progressive web apps, and search engine marketing. Each URL is tested in a series of audits in a standardised test environment and each audit has a reference document explaining why the audit is important, as well as how to fix certain issues.
Another well known tool PageSpeed Insights now uses Lighthouse as its analysis engine, which allows developers to get the same performance audits and recommendations in a lab testing environment. PageSpeed Insights complements the controlled Lighthouse lab data audits, with field data pulled from the public data set of the Chrome User Experience Report. The field data view surfaces real-world performance metrics such as First Contentful Paint and First Input Delay for the page, its origin, and users.
kaufDA focused in particular on the performance category of the Lighthouse report, which contains many audits, checks latest best practices (like unblocking the critical rendering path, compressing resources, optimising images), and provides detailed insights into core speed metrics like first meaningful paint, time to interactive, JavaScript bootup time, and even DOM size. Besides listing failed audits, Lighthouse estimates speed gains from fixing these problems to make it easy to prioritise efforts. Lighthouse can be used in Chrome DevTools from the command line, or via the PageSpeed Insights API V5.
Prior to the integration of Lighthouse and PageSpeed Insights, kaufDA used both tools to establish their baseline: a 45-point Lighthouse Performance Score and an average 2.5-second load time for the most important content of a page. They optimised page-specific templates as well as the overall layout of the whole website, starting with tasks that were easy to complete. During the project they:
- Removed unused JavaScript code
- Minified JavaScript code
- Removed unused CSS code
- Inlined critical CSS code
- Compressed images
- Used WebP images
- Lazy loaded images
- Removed critical requests
- Introduced a redesign on several pages
At kaufDA we aim to deliver a perfect user experience. No matter where users plan their shopping trip, which device they use, and how fast their connection is, mobile-first means mobile fast.
To account for seasonal variations, kaufDA compared July 2017 with July 2018 – and discovered improvements across all KPIs. “The conversion rate – users who have engaged with a digital ad, which is our main business KPI – increased nearly by 3 percentage points year over year,” Karsten says. “Bounce rate decreased by nearly one percentage point, and our users stayed on average more than 7 seconds longer on our landing pages. Meanwhile, the site achieved a Lighthouse Performance Score of 85 on average across all page types.
Next in the pipeline, kaufDA plans to redesign all pages, reduce layout complexity, reduce the number of DOM nodes, automatically create WebP images, and further clean up the code.
