Demystifying Core Web Vitals for publishers
Poor Core Web Vitals scores remain among the most common reasons publishers first contact The Code Company. Developed by Google to help rank websites, these metrics prioritise a visitor’s experience on-site, regardless of their location or device. As web technologies evolve, Google’s measurement of a site’s performance has become increasingly nuanced. This has led to frustration when diagnosing why a site’s scores are low and determining how to fix them.
Core Web Vitals can be influenced by everything from a website’s front-end code to its hosting provider, and the metrics can sometimes feel like a black box that significantly impacts a publisher’s business.
It’s for this reason publishers often come to us feeling defeated. Many worry that achieving green scores is unattainable, or that the only way to succeed is by sacrificing essential elements of their business, such as comprehensive analytics, AdTech, or rich media. However, this is not always the case. It’s entirely possible to maintain these tools and technologies while improving Core Web Vitals scores.
In this article, we’ll break down the three key metrics that make up Core Web Vitals in simple terms and share practical ways we and others have successfully improved them.
Key Metrics of Core Web Vitals
Google identifies these three key metrics as essential to a webpage’s overall user experience under its Core Web Vitals framework:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS).
While Google measures other performance metrics, such as Total Blocking Time (TBT) and Time to First Byte (TTFB), the three Core Web Vitals are the most critical for improving user experience and search rankings.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) measures the time it takes for the largest visible content element on the screen to load for a user fully. This metric greatly impacts how users perceive a site’s loading speed. If a page’s main image or headline takes too long to load, users may view the site as slow, even if smaller elements load quickly.
LCP is often the most challenging Core Web Vitals metric to optimise due to the many factors involved, including server response times, image optimisation, and asset sizes. It may take several weeks for changes to be reflected in Google’s performance reports.
An excellent LCP score is 2.5 seconds or less.
How to optimise your LCP score:
1. Optimise your images
This is one of the low-hanging fruits when it comes to LCP. Images often represent the largest elements on a page, so ensuring they are as small as possible without compromising quality will improve loading speed. This can involve using next-gen formats like WebP, compressing images, and ensuring the dimensions are correct. Much of this optimisation can be done with WordPress settings and purpose-built WordPress plugins, but also with features in some managed hosting solutions. Mobile designs can also be optimised to use smaller images that represent less screen space, which can help.
2. Upgrade your web host
This can be a more complicated endeavour, especially if migrating to or from a managed hosting provider. A sluggish server response time can make every element on your site slow to render, significantly affecting your LCP score. A fast, reliable web host with server-side caching is ideal, but LCP scores can also be improved with the use of a Content Delivery Network (CDN) such as Cloudflare. A CDN’s global network of servers increases the chances users have a fast experience no matter where they are in the world.
3. Implement lazy loading and preloading
Lazy loading is when objects on a page don’t load until they are onscreen or about to be onscreen for a user. For any object, but especially images, waiting until it’s needed by a user can significantly improve your initial page load times. Preloading core assets (like header images) allows a modern browser to start downloading these files early, so when the page is ready to display, the assets are already downloaded.
4. Minimise CSS
Developers can optimise CSS by removing unused styles, minifying files, and prioritising the loading of critical CSS for above-the-fold content. Tools like PurifyCSS or Chrome’s Coverage feature can help identify and eliminate unnecessary CSS.
Interaction to Next Paint (INP)
Interaction to Next Paint (INP) Google replaced First Input Delay (FID) with Interaction to Next Paint (INP) in March 2024. INP measures the time between a user’s interaction with the page, such as clicking a link or button, and the next visible response on the screen. Unlike FID, which only tracked the delay before the browser processed the interaction, INP evaluates the full user experience of responsiveness, making it a more comprehensive metric.
An excellent INP score is 200 milliseconds or less.
How to enhance your INP score:
1. Optimise (or defer) JavaScript execution
Heavy JavaScript execution can delay browser responsiveness, as scripts are processed in a single thread. Minimising the amount of JavaScript on your pages or deferring non-critical scripts until after the page has loaded can significantly improve INP. Tools like Chrome’s Performance Insights can help identify specific scripts causing delays. Additionally, bundling JavaScript files using tools like Webpack can reduce the number of requests, improving responsiveness.
2. Use browser caching
Browser caching stores site files locally in a user’s browser, allowing faster load times for returning visitors. This reduces the time required for the browser to process interactions, improving INP scores.
3. Audit and remove unnecessary third-party scripts
Third-party scripts, such as analytics tools or AdTech, can introduce delays. Regularly review these scripts and remove any that are not essential to your site’s functionality. Minimising third-party scripts reduces processing time, enhancing your INP score.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) measures the total unexpected shifts in a page’s layout while a user is interacting with it. A common example is the frustrating experience of trying to click a button, only for an ad or image to load and move the button elsewhere. These layout shifts disrupt user experience and can lead to frustration.
A good CLS score is less than 0.1.
How to improve your CLS score:
1. Specify size attributes for media
When images, videos, or embeds are added without defined dimensions, the browser doesn’t know how much space to allocate. This can lead to layout shifts as the content adjusts. Always define width and height attributes for media elements to ensure stability and prevent layout shifts.
2. Reserve space for ads
Programmatic ads that dynamically inject into your page can cause significant layout shifts, especially on mobile devices. Reserving space for ads, by defining the largest possible ad slot for each device type, minimises these disruptions.
3. Insert new UI elements below the fold
Inserting new UI elements above the fold, such as banners or notifications, can push existing content down, causing a layout shift. Instead, add new elements below the fold to preserve the user’s focus.
4. Optimise font loading
Fonts can cause layout shifts when the browser first loads a fallback font and then switches to the correct web font. Use font-display settings like swap, block, or fallback to ensure text remains visible during font loading, reducing layout shifts.
Conclusion
Core Web Vitals prioritise fast, efficient websites that provide an excellent user experience. These metrics not only improve engagement for users but also benefit publishers through better search rankings and higher interaction rates. They’re part of Google’s broader initiative to encourage a better-performing web.
However, Core Web Vitals optimisation is not a one-time task. As new features are added and technologies evolve, maintaining strong scores requires continuous monitoring, regular updates, and technical expertise. By continuously optimising Core Web Vitals, publishers not only improve their search rankings but also enhance user retention and reduce bounce rates. These efforts ensure a better overall experience for readers and greater business success for publishers.
Need help with your Core Web Vitals?
At The Code Company, we specialise in diagnosing and fixing Core Web Vitals issues while preserving the critical tools your business depends on, such as analytics, AdTech, and rich media. Contact us today to learn more about how we can help.
