5 quick wins for ecommerce website frontend performance

When performance is not a top priority at some point, painfully slow websites on mobile devices need some help under a limited budget.

Fortunately there are 5 quick fixes that usually are not already applied on ecommerce websites. There's an estimated time required for skilled software developers on Magento 2 to implement each of them, for other platforms it should be similar.

1. The hero image - saves the day

Every page has a main image covering most of the viewport on mobile. For an ecommerce website that would be:

• The first product image in a gallery on a product page
• A category page banner or a first product listing image
• The first slider image on the homepage

The LCP - Largest Contentful Paint metric measures the time that is required to download that image. Often browsers discover such images late in the render cycle when they are already using all of the device’s 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: preloading the hero image

Estimated time: 8 - 16 hours

2. Lazy load what is not visible - less is more

This is the most significant quick win on most websites. There are tons of images on typical ecommerce websites.

For example, a product page can contain 10+ product images in the gallery and 10 more images hidden inside CMS blocks like a product description or shipping options. Their combined size could be bigger than all of the assets required to render what is visible. Therefore lazy loading any image that is not visible can greatly improve render times.

Read more: Lazy load iframes and images in Magento 2

There's also a new CSS property that allows the delaying of render and layout for DOM elements Content visibility CSS trick. This can be great for pages that tend to have a long viewport, for example with 90 products in the listing.

Estimated time: 16 - 24 hours

3. Inline what is visible and small - make a great entrance

The typical ecommerce website has 4 images in the initial viewport visible on a mobile device:

• A hamburger icon for the menu
• The shop’s logo
• An account icon
• A cart icon

To render those images, 4 requests with a full round trip are required that delay render by 150 - 200 ms.

By embedding those images as inline SVGs we can improve the loading time and visually make a much better impression on cold render / first hit, reducing bounce rates.

Warning: inline SVGs should add just a few kilobytes to html, if it's more than 10-15 kb images are too detailed and their inline rendering can hurt performance in the end.

Maybe you don't need such detailed icons and graphic designers can work on making them smaller.

Read more: Best ways to embed SVG files

Estimated time: 4 - 6 hours

4. Delay third party scripts - first things first

There are some popular scripts for ecommerce websites such as:

• live chats
• instagram feeds
• review widgets
• social media interactions

Make sure they are loaded after the load event or even lazy loaded until visible in the viewport. While waiting for a load event seems to be a great solution, it could be affected by minor script load issues at random, causing the load event to never occur. It's good practice to add a timeout on waiting for the load event to make sure that after a few seconds the script is loaded.

Estimated time: 8 - 16 hours

5. Custom fonts are cool - their UX impact not so much

Using custom fonts seems to be a must have from a branding and marketing perspective. On the other hand fast loading on a 3g connection page should have less than 500kb total assets.

Every added font is using some of that budget - 5-10%. Based on a particular implementation for a first time visitor, it is often either text blinking (re-rendering) on font loaded or the page being blank for a while until it is fully loaded.

The advice here is to try to reduce the number of fonts to the absolute minimum - 1 for the regular text and 1 for the heading. And work on implementing it the way it looks best on whatever users are using - mobile/desktop.

Estimated time: 8 - 16 hours

Summary

Applying all of the above can reduce the total page load time by half and takes around 2 weeks of a developer’s time. Given how UX and loading time impacts conversion rates, it should pay off fast.

While making quick wins can be a great way to improve speed it could also lead to opposite results with some common pitfalls. In the next article I will gather the most popular mistakes on website optimization. Some more thoughts on this topic can be found in

Some more thoughts on this topic can be found on performance guide by Shopify.