How can I improve my site's LCP score with hero images?

How can I improve my site's LCP score with hero images?

nagendran25
Shopify Partner
1 0 0

My site hero image content html output is below

 

<img fetchpriority="high" class="image-fit hero__image hero__image--1523298253705-0 lazyautosizes lazyloaded" src="" data-aspectratio="1.5633724176437744" data-sizes="auto" data-parent-fit="cover" alt="" data-srcset="//xxx.co/cdn/shop/files/home-top-banner_180x.webp?v=1707280087 180w, //xxx.co/cdn/shop/files/home-top-banner_360x.webp?v=1707280087 360w, //xxx.co/cdn/shop/files/home-top-banner_540x.webp?v=1707280087 540w, //xxx.co/cdn/shop/files/home-top-banner_720x.webp?v=1707280087 720w, //xxx.co/cdn/shop/files/home-top-banner_900x.webp?v=1707280087 900w, //xxx.co/cdn/shop/files/home-top-banner_1080x.webp?v=1707280087 1080w, //xxx.co/cdn/shop/files/home-top-banner_1296x.webp?v=1707280087 1296w, //xxx.co/cdn/shop/files/home-top-banner_1512x.webp?v=1707280087 1512w, //xxx.co/cdn/shop/files/home-top-banner_1728x.webp?v=1707280087 1728w, //xxx.co/cdn/shop/files/home-top-banner_1944x.webp?v=1707280087 1944w, //xxx.co/cdn/shop/files/home-top-banner_2160x.webp?v=1707280087 2160w, //xxx.co/cdn/shop/files/home-top-banner_2376x.webp?v=1707280087 2376w, //xxx.co/cdn/shop/files/home-top-banner_2592x.webp?v=1707280087 2592w, //xxx.co/cdn/shop/files/home-top-banner_2808x.webp?v=1707280087 2808w, //xxx.co/cdn/shop/files/home-top-banner_3024x.webp?v=1707280087 3024w" sizes="1485.2037967615854px" srcset="//xxx.co/cdn/shop/files/home-top-banner_180x.webp?v=1707280087 180w, //xxx.co/cdn/shop/files/home-top-banner_360x.webp?v=1707280087 360w, //xxx.co/cdn/shop/files/home-top-banner_540x.webp?v=1707280087 540w, //xxx.co/cdn/shop/files/home-top-banner_720x.webp?v=1707280087 720w, //xxx.co/cdn/shop/files/home-top-banner_900x.webp?v=1707280087 900w, //xxx.co/cdn/shop/files/home-top-banner_1080x.webp?v=1707280087 1080w, //xxx.co/cdn/shop/files/home-top-banner_1296x.webp?v=1707280087 1296w, //xxx.co/cdn/shop/files/home-top-banner_1512x.webp?v=1707280087 1512w, //xxx.co/cdn/shop/files/home-top-banner_1728x.webp?v=1707280087 1728w, //xxx.co/cdn/shop/files/home-top-banner_1944x.webp?v=1707280087 1944w, //xxx.co/cdn/shop/files/home-top-banner_2160x.webp?v=1707280087 2160w, //xxx.co/cdn/shop/files/home-top-banner_2376x.webp?v=1707280087 2376w, //xxx.co/cdn/shop/files/home-top-banner_2592x.webp?v=1707280087 2592w, //xxx.co/cdn/shop/files/home-top-banner_2808x.webp?v=1707280087 2808w, //xxx.co/cdn/shop/files/home-top-banner_3024x.webp?v=1707280087 3024w">

 

I add below prepload at header

<link rel="preload" as="image" imagesrcset="//xxx.co/cdn/shop/files/home-top-banner_180x.webp?v=1707280087 180w, //xxx.co/cdn/shop/files/home-top-banner_360x.webp?v=1707280087 360w, //xxx.co/cdn/shop/files/home-top-banner_540x.webp?v=1707280087 540w, //xxx.co/cdn/shop/files/home-top-banner_720x.webp?v=1707280087 720w, //xxx.co/cdn/shop/files/home-top-banner_900x.webp?v=1707280087 900w, //xxx.co/cdn/shop/files/home-top-banner_1080x.webp?v=1707280087 1080w, //xxx.co/cdn/shop/files/home-top-banner_1296x.webp?v=1707280087 1296w, //xxx.co/cdn/shop/files/home-top-banner_1512x.webp?v=1707280087 1512w, //xxx.co/cdn/shop/files/home-top-banner_1728x.webp?v=1707280087 1728w, //xxx.co/cdn/shop/files/home-top-banner_1944x.webp?v=1707280087 1944w, //xxx.co/cdn/shop/files/home-top-banner_2160x.webp?v=1707280087 2160w, //xxx.co/cdn/shop/files/home-top-banner_2376x.webp?v=1707280087 2376w, //xxx.co/cdn/shop/files/home-top-banner_2592x.webp?v=1707280087 2592w, //xxx.co/cdn/shop/files/home-top-banner_2808x.webp?v=1707280087 2808w, //xxx.co/cdn/shop/files/home-top-banner_3024x.webp?v=1707280087 3024w" imagesizes="auto">

 

But noting improving my LCP score

 

Screenshot from 2024-03-18 22-48-17.png

Replies 4 (4)

Xipirons
Shopify Partner
136 25 30

Hi @nagendran25 

 

Based on the provided HTML output for your hero image, here are a few suggestions to improve your LCP score:

1. Use the `src` attribute:
Instead of leaving the `src` attribute empty, specify the default image source. This allows the browser to start loading the image immediately without waiting for the `srcset` to be parsed. For example:

 

<img src="//xxx.co/cdn/shop/files/home-top-banner_720x.webp?v=1707280087" ... >

 

2. Optimize the `srcset` and `sizes`:
- Consider reducing the number of image versions in the `srcset`. Having too many versions can increase the parsing time. Focus on the most common viewport sizes.
- Ensure the `sizes` attribute accurately reflects how the image is displayed across different viewport sizes. Use media queries if necessary.

3. Preload the image:
Your `preload` link seems correct, but make sure it is placed in the `<head>` section of your HTML document. Also, add the `fetchpriority="high"` attribute to prioritize its loading. For example:

 

<link rel="preload" as="image" fetchpriority="high" imagesrcset="..." imagesizes="auto">

 

4. Optimize image compression:
Ensure that your hero image is optimally compressed. WebP is a good choice for compression, but you can also consider other formats like AVIF for even better compression.

5. Lazy loading:
If the hero image is not immediately visible above the fold, consider lazy loading it. However, be cautious as lazy loading can negatively impact LCP if not implemented correctly.

6. Minimize other blocking resources:
Ensure that your CSS and JavaScript files are optimized and minified. Defer or asynchronously load any non-critical scripts that may be blocking the rendering of the hero image.

7. Server optimization:
Ensure that your server is properly configured to serve images efficiently. Use caching headers and consider using a Content Delivery Network (CDN) to serve images from a location closer to the user.

 

Remember, LCP is affected by the largest contentful element in the viewport, so optimizing your hero image is crucial. However, also consider other elements that may contribute to LCP, such as large text blocks or other images above the fold.

 

It's important to test your optimizations using tools like Google PageSpeed Insights or Lighthouse to measure the impact on your LCP score. Iterate and fine-tune your optimizations based on the results.

 

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

oreoorbitz
Shopify Partner
257 31 132

7.
Why are you reccomending that a someone check their server configuration for a Shopify store, when they have no controll over the Shopify server, and shopify uses a CDN already?

Available for pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949
Xipirons
Shopify Partner
136 25 30

Hi @oreoorbitz 

 

You raise a good point. For a standard Shopify store, merchants do not have direct control over the server configuration since Shopify manages the hosting and infrastructure, including the built-in Content Delivery Network (CDN).

However, my previous response (bullet 7.) was considering the case of a headless Shopify setup. In a headless architecture, the frontend of the store is decoupled from the backend ecommerce functionality provided by Shopify. This means that while Shopify still handles the backend via APIs, the frontend can be hosted on separate infrastructure that the merchant controls, such as a custom server or a different hosting provider.

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

oreoorbitz
Shopify Partner
257 31 132

So really you should share your site's URL, as the reason that there isn't an improvent could be beyond the implementation of the preload

a load delay of 82% points to possible render blocking resources taking load priority over the LCP image, regardless of if its being preloaded or not.

A preload does exactly as it says, preloads, so its ready to go, before everything else, but if the time it takes to get to rendering the image is delayed due to render blocking resources, then a preload won't do much.

Available for pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949