How to optimize frontend performance on an ecommerce website?
Find out how to improve ecommerce website performance, measure the outcome and fit it all into the budget with quick wins.
Faster websites = more traffic, now it is official
Ecommerce website users expect best performance that match user experience of native app and market leaders like Zalando or Instagram. Google is helping developers measure how users see the website performing and push website owners to improve. It is now official that soon this will also officially affect google organic search results - Core Web Vitals become ranking factor from May 2021.
Long story short: the fastest website gets the more organic traffic it gets.
The key is to understand how to research performance issues, how to fix the most popular ones on ecommerce websites and how to measure if the situation is improving. And of course try to squeeze that into always limited budget.
Following research is based on hundreds of hours of optimization of real high traffic ecommerce websites with the aim to give the most effective hints.
How to measure performance ?
Core web vitals
Core web vitals are the metrics to measure and describe performance of the website using real user data from google trackers data. Google provide a way to read the data for past 30 days for any website using Page Speed Insights
Example from our project Eyerim that passes the Core Web Vitals and performs great even with a number of third-party scripts required by the business like Hotjar Facebook Pixel and are affecting the scoring.
Read more about excluding third party scripts from benchmarking.
Supplementary Google Analytics is providing in its behavior section:
- frontend load time that is similar to time to interactive from Page Speed Insights
- server response time to show overall backend performance
- connection times that could point to servers/network issues
The big advantage of using GA is defining segments to answer questions such as: how is the website performing on a mobile device for first-time visitors?
Using the month view is a great way to show the trend, day by day numbers can vary based on third party resources like scripts or audience fluctuations for example first vs returning visitors ratio.
It's a free tool from Google that allows to run a single simulated mobile device performance test on a desktop computer. It can provide great and detailed report and at the some time error of measurement could be absurdly high as well as provided recommendations could be worthless when applied literally.
Under the hood it tries to automate finding the bottlenecks with general algorithms that oversimplify data. It often misses the real cause of performance issues that experienced software developers can reveal within a few hours of research.
There are many tools that bring additional information or different views on the performance data. For example NewRelic Browser can be a great addition to monitor Single Page Apps performance or to track the frontend errors affecting real users.
No matter what you are using, create a spreadsheet and note values to monitor the trend. Saving the data from Page Speed Insights every week or two is a great idea to start tracking the progress.
How to find the performance issues?
There are two resources that limit page speed - CPU and network. Browser tries to use those resources to get a page rendered as soon as possible to the user.
Developers job is to add hints about what is important and has to be loaded first. Common problem is that a CPU or Network is idle because the browser doesn’t know in advance what to process.
Using Google Chrome performance tab to analyze how page is rendered is a great way to find inefficiency in how hardware and bandwidth is used on a particular ecommerce subpage.
Common ecommerce website issues:
- missing lazy loading of images from different sources like cms
- start loading chat/reviews and optional features before core features are loaded
Common optimization introduced issues:
Witch-hunting performance issues can lead to opposite effect when changes applied actually make the situation worse.
Some of the examples:
- applying 3x 2x bigger images designed for high density screens like Retina on iPhone to all the users, even those on fast 3g connection and mid-tier device with no quality different between 3x and 1x images
- lazy loading of in viewport images making them discoverable by the browser late on - after downloading and executing lazy load js library
Top quick wins
A few quick wins from my experience especially helpful for ecommerce websites. One of my favorites is the hero image that surprisingly is rarely used and can give great results in an implementation time to value aspect.
Hero image for LCP (Largest Contentful Paint)
Every page has a main image covering most of the viewport on mobile. For a ecommerce website that would be:
- first product image from gallery on a product page
- category page banner or a first product listing image
- homepage first slider image
LCP metric measures the time that is required to download that image. Often browsers discover such images late in the render cycle when they already using all of the device bandwidth to download other resources like tracking scripts.
By adding a hint for the browser we can make sure that its download will begin early on.
Read more in great article about how to preload hero images
More to come
Coming soon more technical and deep write-up:
- more quick wins for ecommerce websites performance
- how to analyze performance using Google Chrome performance tab
Contact with: Michał Wujas