Easy LCP and CLS improvements

Product Guides Audience
1

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

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 web.dev’s 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;
}

For INP

Poor INP scores are often caused by the proliferation of too much JavaScript on a site. Less is more when it comes to INP. We recommend a spring cleaning:

  • Take a look at tag managers and remove old tags
  • Move those old plugins you tried once but don’t actually use
  • Or limit them to the pages they are being used on

Keep in mind that INP measures the worst interaction on a page, so once that issue is addressed, scores should improve.

Here’s a deeper guide on how to optimize Interaction to Next Paint.

2 Likes