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

nagendran25 · ‎03-18-2024

My site hero image content html output is below

I add below prepload at header

But noting improving my LCP score

Xipirons · ‎03-31-2024

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 · ‎03-31-2024

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 · ‎03-31-2024

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 · ‎03-31-2024

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

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

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

Community Blog Articles