The Largest Contentful Paint (LCP)

Usually the Hero image is the LCP in the Hero section.

Currently, the hero images for the Home Page and the Consumer Psychology Page are added to the website via a code block.

Why use a code block instead of Squarespace's native image block?

Problem

All images in Squarespace are lazy loaded. This is beneficial because it prevents unnecessary code execution, thereby reducing the initial webpage load time.

However, there's an exception for the hero image or Large Contentful Paint Image. Lazy loading the LCP can negatively impact page speed performance, so it is not recommended.

• Learn more about LCP & lazy loading

Solution

To prevent the hero image from lazy loading, we can use an <img> code block instead. We can increase its initial loading priority using the fetchpriority attribute:

<img class="hero-img" src="image.png" alt="consumer psychology image" fetchpriority="high">

Result