Core Web Vitals: How to speed up your money pages

Why should you care?

Load speed has a direct impact on purchase behaviour, with a case study from Farfetch finding a 1% increase in revenue per 1 second improvement in page speed.

The main principle when looking at how to improve loading speed is finding areas where data is being unnecessarily sent to a user’s device, that does not positively impact a person’s website experience or likelihood to buy. 

Here are the key, often overlooked areas of a product page where we can reduce that unnecessary data transfer – and help speed up that loading process to benefit your bottom line.

The two main money pages for an ecom site are category pages and product pages – exploration and purchase.

Issue: Your image file sizes are massive

Reason: You’re using the wrong pixel size for the space required

Why is this a problem:

Having images that are large in dimension on a site can make a big impact on how long a page takes to load, and if you have many images on the page this can quickly compound into a . The more data a website needs to transfer, the slower the page will load – and with multiple images on a page, this issue can massively compound.

Solution:
Make sure you’re using the right pixel size for your image. You can use Cloudinary Web Speed Test to find out the true size of image that is required at maximum viewport size. For example, all featured images on a product page template are set specific pixel size. If you resize your image to fit within those dimensions then it will be exactly the maximum size needed for desktop devices.

There are a couple of caveats if you want to have clearer images for 4k screens, you will need to double this figure and Google Discover requires images to be 1200px wide to be eligible to appear here. 

Reason: The image quality is way too high

The main piece of advice you see around product images is that you need “high quality images” for ecommerce. This is true, people do need to be able to see the product they are buying, however, there is a limit to how much detail the human eye can comprehend on a screen.

This is measured in Dots Per Inch (DPI) and for images that need to be printed, this is usually set to 300dpi, which leads to very large file sizes but crisp images for printing. For the web and screens images only need to be 72dpi as we can’t perceive any more detail than that.

Solution: Compress your images

There are different routes available to compress images, and typically there is a trade-off between preserving image quality vs the visual detail of the image. How you weigh this trade-off will depend on how important high quality images are to your brand, sector and price point.

Option 1) use a web based image compression tools

There are many free web based image compression tools, such as TinyPNG and Squoosh.app. Using these web tools is typically a manual process, but you do have more control over the quality of each image.

Squoosh lets you preview the image before and after compression so you have more control over the quality, but you can only compress one image at a time. TinyPNG can compress up to 20 images but does not give you a preview of the compressed image. 

Option 2) Use a compression plugin

The benefit of using a plug-in is they are typically easy to use and require minimal work on your side, just install and go. The drawback of using a plugin is it may overcompress and affect the quality of the images on your site, as it will typically be applying the same settings across every image. You also may find that it’s not compressing images enough that could achieve a lower file size. This can mean you miss out on some performance benefits, however this tradeoff may be worth it depending on how many images you already have across the site. 

Tip: Compress images before they get uploaded. 

It feels like it takes so much extra time when you just really want the item added, but doing this as you go makes it much easier in the long run, rather than spending days going over hundreds or even thousands of images across the site at a later date. 

To avoid this in the future, create a process document for adding products to make sure who is in charge of uploading images or creating pages has steps to follow, which includes compressing before upload, and contains the correct pixel size for each image location within your page templates. 

Bonus Site Speed Tip:
Check images in your pop-ups – the ‘join our mailing list’ pop-up that most ecom sites have might have a rogue giant image in there, making any page the pop up appears on take even longer to load. Use a smaller, more compressed image here to get a quick win across all your site pages. 

Issue: The browser does not load your main image quick enough

Reason: The image load process does not prioritise the main image

Why is this a problem:

People use visual cues to determine whether or not a page is actually loading – being able to see the content within the main viewport and above the fold load in first makes sure a site feels like it is loading lightening quick – keeping our interest, and making sure we’re less likely to get impatient and leave the page. 

The Largest Contentful Paint (LCP) metric is measuring how quickly that main piece of content loads on your site – and especially on product pages where someone wants to immediately see the main item image, so they will actually stay on the page to read the information. Having a low LCP score here can improve conversions.

Solution: Add Fetch Priority to your main product image 

This will make sure the browser will load the main image first – improving LCP scores. To do this, add fetchpriority=”high” on the image element, causing LCP to happen sooner. It might look something like this:

<img src=”main-product-image.jpg” fetchpriority=”high” alt=”product image description”>

Currently, Fetch Priority is only available in Chromium-based browsers (The big ones being Chrome & Edge) – you can read more about this on this Google web.dev Fetch Priority post.

Add this into your product page theme template into the img tag which contains the first, large, hero product image on the page.

Issue: Your product and category images shift page content

Reason: Key images do not have their space reserved in the HTML

Why is this a problem: 

When responsive websites started being created, height and width attributes were no longer required, as images would need to be resized depending on the size of the page and viewport. However, on modern browsers this causes images and other content to load in and push other content down the page.

This leads to people clicking on links or buttons that they didn’t mean to click on and is very frustrating as a user (looking at you news websites) – and they might give up on attempting to navigate the page simply due to the experience.

Google have created a metric called Cumulative Layout Shift (CLS), which measures how much content shifts on the page, and how much this affects a page over the whole load process.

Solution: Add height and width attributes to images

In the product or category image HTML, make sure a height and width are specified within the img tag. The browser can then calculate the space it needs to reserve for the image whilst the rest of the content loads in, and then the CSS will kick in so the browser can then scale it down to the correct rendered size.

The image tag would end up looking something like this for: 

<img src=”main-product-image.jpg” width=”600″ height=”800″ fetchpriority=”high” alt=”product image description”>

This will make sure images have space reserved for the content to load into, and it does not cause the page to jump around so all content is nice and stable throughout the whole loading process.

Category pages are also likely to have issues with CLS, so make sure to add this into the PLP template too.

Tip: Use Google Search Console to identify your key page groups with specific issues and prioritise your fixes for page templates that have more pages with issues or have the largest values.

1. Go to Core Web Vitals tab
2. Click on Mobile or Desktop (with Mobile first indexing, this is usually the best one to focus on first)
3. Click into specific issue, starting with items with Poor scores
4. Check URL groups tab under the graph
5. Click into Example URL with the highest group population
6. Review the types of pages within the highest group population
7. Focus your fixes on the page pattern that appears the most prominently  

Thanks!

Don’t want to do this yourself? At StudioHawk we offer Site Speed Audits where we go through this process and prioritise your fixes so you’re able to work on those which have the most impact. Contact me at sophie@studiohawk.co.uk to learn more.