Whether visitors stay or leave is often decided within the first few seconds. Google measures this first impression using three metrics: the Core Web Vitals. These are factored into the user experience score and reveal one key thing in particular: where your website is holding visitors back. In this article, we explain what lies behind LCP, INP and CLS, what values are considered good, and which measures really make a difference.
An overview of the three metrics
- LCP (Largest Contentful Paint) measures when the largest visible element is loaded, usually a cover image or a large headline. Values of up to 2.5 seconds are considered good.
- INP (Interaction to Next Paint) measures how quickly the page visibly responds to clicks, taps and keyboard inputs. A value of up to 200 milliseconds is considered good. INP replaced the previous metric, FID, in March 2024.
- CLS (Cumulative Layout Shift) measures the extent to which content shifts unexpectedly whilst loading. A value of up to 0.1 is considered good.
The assessment is not based on a single session, but on the 75th percentile of actual visits: at least three out of four sessions should be within the acceptable range, broken down by mobile devices and desktop.
How to measure your metrics
- PageSpeed Insights displays field data from real Chrome users for a given URL, provided there are sufficient visits, as well as a lab measurement with specific recommendations.
- Google Search Console groups similar pages together in its Core Web Vitals report. This allows you to identify whether a problem affects an entire template or just a single page.
- Lighthouse in Chrome’s Developer Tools is suitable for quick tests during development. Lab results are a guide; the field data is what matters.
INP can only be measured to a limited extent in a lab environment because no one clicks there. Instead, Lighthouse displays the Total Blocking Time, which is closely related to INP.
Improving LCP: getting to the main content faster
LCP comprises several components: the server’s response time, the loading of the element itself, and the time it takes for the browser to render it. There are therefore opportunities for improvement at every stage.
Speed up the server response
- Use page caching so that not every request has to go through PHP and the database.
- Use a recent version of PHP with OPcache and, for database-intensive systems, an object cache such as Redis.
- Use fast NVMe storage and servers that are not overbooked.
- Deliver static files via a CDN so that images and scripts are served from a location close to the visitors.
Load the LCP element specifically
- Serve images in modern formats such as WebP or AVIF and provide them
srcsetin the appropriate size for provisioning. - Do not delay the cover image using lazy loading; instead,
fetchpriority="high"prioritise it. - Reduce render-blocking CSS and JavaScript; load important CSS early and include scripts using
defer. - Host web fonts yourself and include them using
font-display: swapso that text does not remain invisible.
Improve INP: smooth responsiveness
A poor INP score is almost always caused by the browser: the main thread is occupied with JavaScript and cannot respond to user input immediately.
- Check third-party scripts: chat widgets, tracking, adverts and social media integrations are common bottlenecks. Remove anything nobody uses, and load the rest only when needed.
- Break down long tasks: JavaScript tasks lasting over 50 milliseconds block the page. Complex calculations can be broken down into smaller steps or offloaded to a Web Worker.
- Fewer plugins: In WordPress in particular, many extensions load their own scripts on every page. Every plugin you remove takes the strain off the browser.
- Streamline the page structure: Highly nested pages with thousands of elements make every refresh more resource-intensive. Page builders often create unnecessary bloat here.
Improve CLS: a stable layout
- Always specify the width and height, or a
aspect-ratioso that the browser can reserve the space in advance. - Allocate fixed space for adverts, embeds and notification bars, rather than inserting them above the content afterwards.
- Display cookie and notification banners as overlays, not as elements that push the content down.
- Smooth the transition from fallback fonts to web fonts, for example by using suitable fallback fonts and
size-adjust.
How important are Core Web Vitals for search rankings?
Core Web Vitals are just one factor amongst many. Relevant, helpful content remains the most important factor. However, when content is comparable, a better user experience can tip the balance. Regardless of ranking, the following generally holds true: fast, smooth-loading pages tend to keep visitors on the site for longer and lead to better sales.
How your hosting can help
Many measures relate to the website itself. However, the server lays the foundation for a good LCP score. With our managed hosting, your projects run on NVMe storage with the latest PHP versions. From the Premium plan onwards, we provide Redis as an object cache. With our CDN, static content is delivered from data centres close to your visitors, and ShieldCache combines caching with protection against attacks. You can find further tips in our article on optimising website performance.
Conclusion
Measure first, rather than guessing: PageSpeed Insights and Search Console show which of the three metrics is underperforming on your site. After that, it’s usually worth looking at three things: caching on the server, the featured image and third-party scripts. This alone is often enough for many websites to reach the ‘green’ zone.
