Published
Largest Contentful Paint is usually an image problem
The largest element above the fold is typically a hero image or heading. If that image is uncompressed, served in the wrong format, lazy-loaded, or waiting behind render-blocking scripts, the metric fails.
Serve modern formats, size images to their display dimensions, preload the hero image, and never lazy-load the element that defines the metric.
Interaction to Next Paint is a JavaScript problem
Long tasks on the main thread delay the browser's response to taps and clicks. Third-party tags — chat widgets, heat-mapping, multiple analytics tools, ad scripts — are the most common cause.
Audit what is actually loading. On a typical site, removing or deferring unused third-party scripts is the single largest available improvement.
Cumulative Layout Shift is a discipline problem
Set explicit width and height on images and embeds, reserve space for banners and advertisements, and load fonts with a strategy that does not reflow the page after render.
Layout shift is the cheapest of the three to fix and the most irritating to users when ignored.
Measure field data, not just lab scores
A perfect lab score on a fast connection means little if your real visitors are on mobile networks. Prioritise field data from real users when deciding what to fix.
Track the metrics against conversion, not in isolation. Performance work is worth doing because it earns revenue, not because the score is green.
The short version
Optimise the hero image, cut third-party JavaScript, and reserve layout space. Those three changes resolve most Core Web Vitals failures we encounter.