Ensuring sub-second load times for your eCommerce site is hard work. At Layer0, we've tried to make it a much simpler process, and Layer0 is here to help you achieve this milestone. What we've done here is to create a checklist which you can follow to ensure that your production site is blazingly fast, and you spend the least amount of time accomplishing it.
First, let's talk about how we measure speed:
** We used SpeedCurve (SC) in this instance, but you can use WebPageTest or any other product
We are focusing on LCP metrics for our measurements. Our goals are:
- Home Page < 1.5s
- PLP to PDP Navigation: 0.5s
It’s also important to keep in mind the following 3 cases as it affects the consumer experience when (a) going directly to PLPs/PDPs as a result of the organic search traffic and (b) when navigating to cart/checkout pages - crucial for our clients from business perspective:
- PLP as a landing page
- PDP as a landing page
- PWA -> origin/legacy (e.g. to cart/checkout)
Let's start with some basic checks that could really help us get some major speed gains
- Ensure skeletons are used and the layout is stable.
- ‘Waiting for...’ (or similar) message in the browser window (a known issue in WebPageTest that SC uses): Inspect the waterfall images to see if that’s the only cause of degradation in metrics.
- Low resolution image to high resolution image switch could also cause degradation in metrics in SC - inspect the waterfall images to see if that’s the only cause.
- Artifacts from custom components (compared to native RSF components that are built with the best practices in mind) - styling/elements that cause the component(s) to re-render excessively. Again, inspect the waterfall images to see if there are visible artifacts (e.g. low res image -> Image carousel on PLP->PDP transition)
PLP to PDP Navigation
Navigating from the PLP (Search results or Category/Brand Pages) to PDP pages is the most important navigation element of the complete consumer journey. For each purchase made, an average user navigates to 8.8 PDP pages. Even a minor page slowdown in such high frequency can have large detrimental impact on the user experience. Here are some things you can follow to ensure a perfect PLP to PDP User experience:
- Use a skeleton for the Above-the-fold page, and ensure layout stability
- Ensure that Above-the-fold content matches the height of the screen of the user's device.
- Ensure caching is appropriately configured. This means caching generic page data, and also not caching any user specific data points. (Checkout our guide on Caching for more details)
- Use Prefetching (Checkout our guide on Prefetching for more details)
- Use the same instance of thumbnails everywhere to avoid flickering with ForwardThumbnail component
- Pass as much information from PLP to PDP in the page props to display that information on PDP
Home Page Load
Home Page usually is the first interaction a user has with the website. Ensuring a great start to the journey is key to providing a happy user flow through to the checkout & order placement. Following are some of the things you can follow to ensure a great Home Page experience:
- Ensure caching is appropriately configured. This means caching generic page data, and also not caching any user specific data points.
- Lazy load below the fold content
- Use preconnect tag
- Optimize Images
- Delay hydration until page load completes
- Other Improvements
PDP Page Load
Spending time optimizing Home Page & PLP to PDP Navigation would be worthless if the user doesn't have a great experience on the PDP page itself. Ensuring that the most important information is available to the user as soon as possible, and delaying objects which are not immediately visible or actionable is key to optimizing PDP page loads. Below are some of the things to keep in mind when optimizing PDP pages:
- Cache generic assets and data, including API responses to ensure immediate data retrieval, and reduce bottleneck on back-end systems.
- Lazy load content below the fold
- Use an optimized first image to reduce load times.
- Use separate thumbnail, and pinch-and-zoom image, and only load images on request.
PLP Page Load
- Pre-load PDP images for above the fold results.
- Lazy load content below the fold
- Reduce or avoid requests to determine PLP page changes, example for background color changes or other visual elements.
Some more pointers
Methods mentioned above cover most of the things a user interacts with through the journey. But there is more to a platform that what's visible. Making sure the inner workings of the platform is optimized is the next step we need to take. Following are some things to check to retrieve additional gains of performance:
- TTL: Check Bundle size using analyze=True npm run build
- FCP: If a customer chooses to use a WebFont, LH score drops can be experienced.
- Speed Index: Having pop-ups on the screen reduces the speed index of the page
- Avoid long execution tasks in module scope i.e. client-side.
- React hooks are prone to unnecessary re-rendering. Whilst unlikely to affect the metrics, they do make for a sluggish feeling website.
- Use PSI scores for understanding the impact of code changes rather than local machine LH scores and/or SpeedCurve results. Use 4G mode and do it on production build to get the realistic LH scores.