Easy LCP and CLS improvements

Product Guides Audience
1

To improve core web vitals, start by implementing these simple changes to optimize LCP and CLS.

For LCP

Preload Hero Image and Set Fetch Priority to High

Preload the Hero image (the image included in the first viewport and usually specified on structured data) in the <head> as follows:

<link rel="preload" fetchpriority="high" as=”image” href=".." imgsrcset="..." >

Do Not Lazy Load Hero Image

We also recommend that this same Hero Image not be lazy loaded as this causes the resource to load only after layout confirms the image is in the viewport, causing delays. Instead, decode with async and set fetch priority to “high”:

<img decoding="async" fetchpriority="high" ….>

These adjustments to the Hero image can also have a positive impact on CLS.

For CLS

Attribute image size in advance

Some images cause layout shift because they do not reserve their required space in advance. All images should have width and height attributed in order to maintain the correct aspect ratio, adapting the responsive web design accordingly.

Here’s an example from Google’s own documentation:

<!-- set a 640x360 i.e a 16:9 - aspect ratio -->
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons" />

Preload fonts

H1 (title text) and p (body paragraphs) can also cause layout shift when they are displayed using non-standard web fonts. When fonts are pre-loaded, however, rendering is blocked until the font has downloaded or 100 ms has elapsed, thus avoiding layout shift.

Preload fonts in the as follows:

<link rel="preload" href="..." as="font" type="..."/>

Mark fonts as font-display:optional in the font declaration in the CSS. For example:

@font-face {
   font-family: ExampleFont;
   src: url(/path/to/fonts/examplefont.woff) format("woff");
   font-weight: 400;
   font-style: normal;
   font-display: optional;
}
2 Likes