LCP, CLS, and INP optimization quick wins

Q: How do I improve LCP by preloading the hero image?

Add a preload link in the with fetchpriority set to high, and make sure the hero image is not lazy loaded. Use decoding async and fetchpriority high on the img tag instead.

Q: What causes CLS and how do I fix it?

CLS is caused by images without explicit width and height attributes and by non-standard web fonts loading after initial render. Set dimensions on all images to reserve space, and preload fonts with font-display: optional to block rendering until the font is ready.

These quick fixes target the three Core Web Vitals that directly affect Google rankings: LCP, CLS, and INP. Start here before diving into deeper optimizations.

For each metric, the improvements below require minimal code changes and deliver measurable results. Follow the guidance for LCP, CLS, and INP.

For LCP

Preload the hero image and set fetch priority to high

The hero image is the largest element in the first viewport and often the LCP element. Preloading it tells the browser to fetch it before parsing the rest of the page. Add the following in the <head>:

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

Do not lazy load the hero image

Lazy loading the hero image forces the browser to wait until layout confirms the image is in the viewport. That delay directly increases LCP. Instead, use async decoding and set fetch priority to “high”:

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

These hero image adjustments also reduce CLS, since the image loads faster and reserves its space earlier.

For CLS

Set image width and height in advance

Images without explicit dimensions cause layout shift because the browser cannot reserve the correct space before the image loads. All images should include width and height attributes to maintain the correct aspect ratio while adapting to responsive layouts.

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

Non-standard web fonts on H1 (title text) and body paragraphs cause layout shift when they load after initial render. Preloading fonts blocks rendering until the font has downloaded or 100 ms has elapsed, preventing the shift.

Add the preload in the <head>:

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

Then mark fonts as font-display: optional in the CSS declaration. This ensures the browser either uses the custom font immediately or falls back gracefully:

@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

Too much JavaScript is the most common cause of poor INP scores. Less is more. Start with a cleanup:

Audit tag managers and remove old, unused tags.
Remove plugins you tried once but no longer use.
Limit remaining third-party scripts to the pages where they are actually needed.

INP measures the worst interaction on a page. Once you fix the heaviest offender, scores improve. Use the CWV Offenders feature to identify which elements and scripts are causing the longest input delays.

For a deeper guide, see how to optimize Interaction to Next Paint.

How do I improve LCP by preloading the hero image?

Add a preload link in the <head> with fetchpriority set to high, and make sure the hero image is not lazy loaded. Use decoding="async" and fetchpriority="high" on the <img> tag instead.

What causes CLS and how do I fix it?

CLS is caused by images without explicit width and height attributes and by non-standard web fonts loading after initial render. Set dimensions on all images to reserve space, and preload fonts with font-display: optional to block rendering until the font is ready.

How do I reduce INP caused by too much JavaScript?

Audit your tag managers and remove old tags. Remove unused plugins or limit them to the pages where they are needed. INP measures the worst interaction on a page, so eliminating the heaviest scripts has the biggest impact.