Demystifying Core Web Vitals for publishers
Poor Core Web Vitals scores are a common reason publishers first contact The Code Company. Developed by Google to help rank sites, the metrics prioritise a visitor’s experience on-site, regardless of their location or device. As web technologies became more complicated, so too did Google’s measurement of a site’s “performance”. The result is a sometimes confusing and confounding experience trying to diagnose why a site’s scores are low, and how to fix them.
Core Web Vitals can be affected by everything from a website’s front end to its hosting provider, and can sometimes feel like a black box that can have a significant effect on a publisher’s business.
It’s for this reason publishers often come to us feeling defeated. They fear that their scores will never get in the green, or the only way to get there is to sacrifice core elements of their business such as comprehensive analytics, AdTech, or rich media. This is not always the case, and it’s possible to maintain these technologies while maintaining and even improving Core Web Vitals scores.
In this article, we’ll break down the three specific measurements that make up Core Web Vitals in simple terms, and the practical ways we and others have improved them.
Three specific factors that Google considers essential in a webpage’s overall user experience are:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS).
Largest Contentful Paint (LCP)
LCP measures the time it takes for the largest content element on screen to fully load for a user. This is important because it’s the biggest influence on a user’s perception of how quickly a page loads. If the main image or headline on a page takes too long to load, the user may perceive the site as slow, even if other elements load quickly. LCP is often the most difficult of the three Core Web Vitals scores to fix, because it has so many things that contribute to it, from server load times to asset sizes, and it can take several weeks for a fix to result in an improved score.
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 don’t always have control over the size of files needed for 3rd-party AdTech or WordPress plugins, but can optimise things such as unnecessary or redundant CSS. For example, by prioritising the loading of CSS used to render the above-the-fold content, you can improve the speed at which this content becomes visible to users.
First Input Delay (FID)
FID measures the time from when a user first interacts with your page (like clicking a link or button) to the time the browser responds to that interaction. For example, if a user clicks on a menu item and it takes a while for the site to respond. A good FID score is less than 100 milliseconds.
Google is set to replace FID with Interaction to Next Paint in March 2024.
How to enhance your FID score:
1. Minimise (or defer) JavaScript
Browsers load JavaScript in a single queue, or “thread”, which means a heavy JS execution can delay a browser’s response to a user interaction. (You may have experienced this, when it takes half a second for a popup to load before you can click anywhere on a page.) Minimising the amount of JavaScript on your pages, or deferring non-critical JavaScript until after the page has loaded, can speed up how quickly your site responds to user interactions. There are tools, even those built into Chrome, to help you identify where the biggest blocks are happening with your JS thread.
2. Leverage browser caching
Browser caching stores copies of your site’s files in the user’s browser. When a repeat visitor navigates to your site, these files can be retrieved from the cache rather than being downloaded again, which is much quicker and improves FID.
3. Eliminate unnecessary third-party scripts
Each third-party script your site uses has to be downloaded, parsed, and executed. This could be AdTech, analytics software, or bloated WordPress plugin code, and can significantly slow down your site and negatively impact your FID. Review your third-party scripts and remove any that are not necessary to the functioning of your site.
Cumulative Layout Shift (CLS)
In its simplest terms, CLS measures the sum total of all unexpected shifts to a page’s layout while it’s being viewed. A common example is the frustrating experience where you’re about to click a button and an ad loads at the last minute, pushing the button down.
A good CLS score is less than 0.1.
How to improve your CLS score:
1. Specify size attributes for media
When your site doesn’t know how much space an element will occupy, it can cause a layout shift as it adjusts to accommodate it. Specifying the width and height attributes for images, videos, and other media such as social embeds and iframes ensures the browser knows exactly how much space to allocate, preventing layout shifts.
2. Reserve space for ad elements
Ads that dynamically inject into your page without a reserved space can cause significant layout shifts. This can be a common issue with programmatic ads and can get complicated when accounting for the different ad sizes depending on the variety of devices readers are using (mobile, tablet, desktop etc). The key is assigning space for the largest ad slot for each device.
3. Insert new UI elements below the fold
Adding UI elements above the fold can push content down, causing a layout shift. To avoid this, add new elements below the fold, where they won’t disrupt the user’s experience.
4. Be conscious of fonts and how they are loaded for users
In the time between when a browser loads text and the web font is available, browsers can render a fallback font. You can sometimes see this when text flickers somewhat when the browser switches fonts. If the two fonts differ significantly, it can result in a layout shift. The key is working out how specific fonts are rendered to minimise shift when the desired font is loaded.
Conclusion
People can often be sceptical of how companies such as Google rank content, but Core Web Vitals have important priorities. They preference fast, efficient websites that have good UX. They are beneficial to users, to businesses who see higher engagement, and to the infrastructure of the web.
Unfortunately, Core Web Vitals optimisation is not a case of set-and-forget. As you add new features to your site and web technologies change, consistently hitting benchmarks requires continuous monitoring and optimisation. It’s much easier and quicker to have technical experts diagnose and fix issues in real-time, rather than letting things get out of hand.
Need help with your Core Web Vitals?
