Top Core Web Vitals Recommendations for 2023: Optimizing LCP, CLS, FID, and INP

Introduction

Google has long provided developers with performance advice, but the sheer volume makes it hard to know which recommendations will deliver the biggest gains for a specific site. This article presents the most important, realistic, and widely applicable suggestions for the four Core Web Vitals: LCP, CLS, FID, and INP.

Largest Contentful Paint (LCP)

LCP is the most common performance problem; about half of sites already meet the recommended threshold. The key steps are to ensure the LCP resource can be discovered in the HTML source and to give it high loading priority.

Make LCP Resources Discoverable

Use standard <img src="..."> or <link rel="preload" href="..."> attributes so the browser can start loading the image immediately.

Prefer server‑side rendering (SSR) over client‑side rendering (CSR) so the full markup, including the LCP image, is present in the initial HTML.

If the image is referenced from external CSS or JS, add a <link rel="preload"> tag; the browser’s preload scanner cannot see URLs inside inline styles.

Avoid lazy‑loading the LCP image with loading="lazy" , which would delay its start time.

Prioritize LCP Loading

Add the new fetchpriority="high" attribute to the <img> or <link rel="preload"> tag to tell Chromium‑based browsers to load the resource first.

For non‑Chromium browsers, place the LCP resource early in the document (before heavy scripts) or use fetchpriority once it becomes widely supported.

Do not apply loading="lazy" to the LCP image, as it reduces priority.

Reduce Time to First Byte (TTFB)

Serve content from a CDN close to the user.

Cache static assets aggressively; consider edge‑computing to move dynamic logic to the CDN.

Cumulative Layout Shift (CLS)

CLS measures visual stability. About a quarter of sites still exceed the recommended threshold.

Set Explicit Sizes

Specify width and height (or CSS equivalents) for all images and embeds.

When exact dimensions are unknown, use the aspect-ratio CSS property to reserve space.

For dynamic content, set a reasonable min-height to avoid large jumps.

Avoid Layout‑Inducing Animations

Do not animate properties that trigger layout (e.g., margin , border-width , top , left ).

Prefer GPU‑composited properties such as transform and opacity for smooth animations.

Lighthouse will warn about non‑composited animations that could affect CLS.

First Input Delay (FID) and Interaction to Next Paint (INP)

FID measures the latency of the first user interaction; most sites score well, but there is still room for improvement, especially on mobile. INP is the upcoming successor metric and shares the same recommendations.

Avoid Long Tasks

Break tasks longer than 50 ms into smaller chunks.

Yield to the main thread using await , requestIdleCallback , or the Scheduler API.

Use isInputPending() to detect pending user input and pause heavy work.

Reduce Unnecessary JavaScript

Use Chrome DevTools Coverage to find and remove dead code.

Apply code‑splitting to load rarely used modules on demand.

Audit tag managers and remove unused tags.

Avoid Large Render Updates

Do not use requestAnimationFrame() for non‑visual work.

Keep the DOM size reasonable; large DOMs increase layout cost.

Leverage CSS contain to isolate complex layout regions.

Back/Forward Cache (bfcache)

bfcache restores pages from memory, eliminating layout work on navigation. Many sites are not bfcache‑eligible; ensure pages meet the criteria and use Chrome’s bfcache tester.

Conclusion

Improving page performance may seem daunting, but focusing on these high‑impact, data‑driven recommendations can significantly boost Core Web Vitals in 2023.

For detailed guidance, see the linked optimization guides for LCP, CLS, FID, and INP.