4 lessons to improve mobile speed, whatever your starting position

Raisa Cuevas, Nuria Gonzalez-Candia / September 2020

Speed isn’t just for the Shelly-Ann Fraser-Pryces or Lewis Hamiltons of this planet. When consumers search for products and services online, they want to find what they need in an instant. Because of this, we know that a fast mobile site can make all the difference in driving conversions.

No wonder then that brands are always searching for ways to shave seconds from their mobile site’s loading time. And whether your performance score on Lighthouse, a tool assessing mobile web page quality, is already high or could do with a boost — these four learnings from brands across the Nordics and Benelux will help you identify new areas for improvement.

When consumers search for products and services online, they want to find what they need in an instant.

Lesson 1: Reduce data transfers to speed up load times

Preventing unnecessary data transfer is a key first step to optimising load times, especially on mobile. This can be achieved with techniques like code splitting to reduce the size of the content that loads on your user's mobile device. Another effective method is lazy-loading, which defers the loading of any asset until it needs to appear on screen.

4 lessons to improve mobile speed, whatever your starting position

With plenty of scope to improve their Lighthouse Performance Score, Belgian telecoms company Proximus began with minimising data transfers. “We already knew a lot about lazy-loading techniques, but the main javascript of our website was packed in one bundle which slowed down the website enormously. By implementing ‘load on demand’ on those components, we were able to reduce the bundle’s weight, which drastically improved the performance,” says Mike Vranckx, front end developer with the brand.

Preventing unnecessary data transfer is a key first step to optimising load times, especially on mobile.

Splitting the large code bundles and loading only the necessary parts at the right time boosted Proximus’ Progressive Web App (PWA) score from 31 to 96 points. Their performance score nearly doubled to 92 points, bringing their website speeds much more in line with their already rapid service.

Lesson 2: Make speed a key performance indicator

As businesses focus on their messaging, imagery, and other priorities, mobile speed can sometimes be a secondary concern. But making it a key performance indicator (KPI) can help brands make real improvements. “Page speed has always been a secondary metric for us, supporting other KPIs,” confirms Steffen Quistgaard, web specialist at EnterCard, a financial company in Sweden.

However, realising that speed determines a purchase more than other factors, EnterCard shifted their mindset. “Now speed is a primary KPI, we are continuously reminded to follow up on it. It required a change of mindset to always consider the value of, for example, adding images to a page, but small changes do add up.” And eventually these small changes led to the launch of their faster, user-friendly and offline-accessible PWA.

With page speed now top-of-mind for EnterCard and their own brand re:member, their Lighthouse score is up 49%, so customers can expect to find financing solutions on their website quickly and seamlessly.

Lesson 3: Introduce a service worker for a smoother experience

4 lessons to improve mobile speed, whatever your starting position

A service worker is a script that your browser runs in the background, to support the mobile page that is being loaded. It allows the site to run app-like features, such as push notifications, offline availability, and caching for faster subsequent loads.

“We had already done a lot of the ‘easy’ fixes for our client,” says Thor Madsen-Holm, senior frontend developer with Vertica, who worked on Danish furniture maker Bolia's e-commerce platform. “So we made a list of additional things to do within the time we had.” First on that to-do list was the creation of an offline page, allowing customers who lose internet connection while browsing to resume their shopping in a seamless way once they regain connection.

Using a service worker to provide offline functionality allows Bolia’s customers to browse for furniture with ease whether on a train or from the comfort of their own home. Combined with other speed and service worker optimisations, this improved their Lighthouse score by 135%, mobile revenue by 32%, and mobile conversions by 52%.

Lesson 4: Even fast-loading sites can do better

The faster your current loading speed, the harder it is to improve. But shaving milliseconds off your load time can still have a positive impact on conversions, even if the fixes are less obvious.

The faster your current loading speed, the harder it is to improve.

“When you start with a higher score it’s a bit more challenging to get you through that final hurdle of a few milliseconds faster,” claims Bernardo Baquero, senior frontend developer with Dutch ticketing company Tiqets. “We realised we were using one big CSS file that included all the styles for all the pages in our website, so we split this out into separate files. This significantly reduced payloads, time to interact, and time to render.”

The Dutch ticketing platform increased their Lighthouse score by 17% and reduced their homepage size by 10% within two months just by reducing the code on each page. Now travellers searching for local attractions on Tiqets can appreciate saving on data costs while purchasing from their lighter, faster website.

Whether you implement lazy-loading or make speed a KPI, introduce a service worker or reduce your homepage size —or even commit to doing all four — a fast mobile site can drive increased conversions. For more information on how best to make your mobile site even faster, check out these helpful guides.

How speeding up your mobile site can improve your bottom line