Ensure sub-second load for your eCommerce site

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 that 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:

Measuring Performance

** 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 a 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 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 a 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 the 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 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 bottlenecks on back-end systems.

• Lazy load content below the fold

• Use an optimized first image to reduce load times.

• Use separate thumbnails and pinch-and-zoom images, 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, for example for, background color changes or other visual elements.

Some more pointers

The methods mentioned above cover most of the things a user interacts with through the journey. But there is more to a platform than what's visible. Making sure the platform's inner workings are optimized is the next step we need to take. Following are some things to check to retrieve additional gains in 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 on production build to get realistic LH scores.