2

We are trying to improve the LCP score of our site and one of the elements we want to optimize is the large image used in the hero banner of each page. Is there a way to set this image to be preloaded?

Improve this question

4 Answers 4

Reset to default
2

You can try below things to improve performance of page:

  • Use Dianoga tool for optimize images, you can read more about it on this link.
  • You can use jQuery lazy loader plugin.
  • Apply Sitecore cache on component.
  • Set height and width parameters on image.

You can refer this link as well to get more information Get Optimized Image in sitecore

Improve this answer
1

Image preloading can be achieved by adding <link rel="preload"> with the URL of your LCP image to the <head> section of your HTML page:

<link rel="preload" href="/path/to/hero-banner.jpg" as="image">

The main difficulty is that typically a component with LCP image is rendered in the <body> of HTML page and <link rel="preload"> should be in the <head>.

You can create a separate rendering and place it in the <head> section. This preload rendering will get the LCP image URL based on the context page and application-specific logic. The approach will depend on how your page is built.

For example, you have a product page and the LCP element on this page is the main product image that is defined in the product page item itself. In this case, the preload rendering can simply get the image field from the current product page and use its URL in the <link rel="preload"> element. However, if you LCP image comes from a rendering with a separate data source (e.g. generic hero banner), you should either move the image field to the page template or write additional logic to retrieve the data source of this generic component.

Please note that if you implement preloading for LCP images, there is no point in having lazy-loading for them. The ultimate goal of LCP optimisation is to render the visible part of the page as quickly as possible, and lazy-loading will add unnecessary image rendering delay. So if you currently use image lazy-loading, consider disabling it only for LCP images to improve the largest contentful paint metric. Additional information can be found here.

Improve this answer
0

Try to implement lazy loading hero images so that on page load all the images wont load and on scroll down each image gets loaded. By doing these we can reduce load time of images.

Improve this answer
0

Try converting images to webP Images. This will help to reduce the page load time for large size images. Reference : https://anothersitecoreblog.wordpress.com/2021/03/03/serving-images-in-webp-format/

Improve this answer
1
  • While conversion to webP may be helpful, it doesn't really answer OP question.
    – Marek Musielak ♦
    Commented Jun 2, 2022 at 6:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.