10 Tips To Improve Core Web Vital Scores For Better SEO in 2022
Give your website a health boost by optimising it for Google’s Core Web Vitals now.
It was announced in November 2020 that Google would be rolling out an additional part of its core algorithm in May 2021, a new set of metrics called Core Web Vitals. Whilst it took Google a little longer, rolling our across June and July of 2021, Core Web Vitals have settled into the algorithm, so there’s no better time than the present to learn what Core Web Vitals are, how this can effect your technical SEO, your PPC campaigns and how you can optimise your site to improve your score.
What Are Google’s Core Web Vitals?
To anyone lacking expertise in web development, the name Core Web Vitals doesn’t give a huge amount away. Philip Walton at web.dev sums up what they are in the following quote:
Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.
Essentially, Google’s Core Web Vitals are a group of metrics which make up part of a larger category of page experience signals (known as Web Vitals). These page experience signals are themselves just a part of the full range of signals Google uses to rank pages within the SERPs.
The Core Web Vitals that Google are talking about focus on user experience and are broken into three areas: loading, interactivity and visual stability.
- Largest Contentful Paint (LCP) measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
- First Input Delay (FID) measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds.
- Cumulative Layout Shift (CLS) measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.
These three Core Web Vitals fit into the larger set of signals for page experience that make up part of the search algorithm, including mobile friendliness and the HTTPS protocol.
How To Check Core Web Vitals Scores
There are a couple of ways of checking what your website’s Core Web Vitals scores are, namely through Google Search Console or Google’s Page Speed Insights.
Google Search Console
After logging in to your Google Search Console account, you will find the Core Web Vitals report in the Enhancements section of the sidebar.
This section of your Search Console dashboard gives you a report for both mobile and desktop. Opening each report will give you an idea of which URLs Google classes as ‘Poor’, ‘Needs Improvement’ or ‘Good’, in relation to the three Core Web Vital metrics.
Clicking an issue will give you a list of affected URLs, and links to Google’s Page Speed Insights tool which gives specific recommendations on how to resolve it.
Google’s Page Speed Insights Tool
Google’s Page Speed Insights tool gives detailed recommendations on how to improve the overall speed for a page, but more specifically provides valuable information on the Core Web Vital metrics.
Why Are Core Web Vitals Important For SEO?
Every ranking factor that makes up part of Google’s overall search algorithm is important in one way or another, and Core Web Vitals are no different. In their post that set out the details of Core Web Vitals, Google said:
While all of the components of page experience are important, we will prioritize pages with the best information overall, even if some aspects of page experience are subpar. A good page experience doesn’t override having great, relevant content. However, in cases where there are multiple pages that have similar content, page experience becomes much more important for visibility in Search.
So, making sure your Core Web Vital scores are maxed out could make the difference when you’re trying to outrank competitors with content of a similar quality.
How To Improve Core Web Vitals Scores
How easy it is to improve your Core Web Vitals scores depends on a range of factors including how your website is built, what CMS you use, what your hosting setup is like, and more. With that said, there are some general rules to follow when optimising for Core Web Vitals.
1. Set exact sizing for page media
Cumulative Layout Shift (CLS) is the name for when something on the page moves while the page is loading. For example, you might open a page and see a title and some text, but suddenly an image loads above it and shifts the title and text down the page.
CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.
A layout shift occurs any time a visible element changes its position from one rendered frame to the next.
There are two main causes of CLS issues: assets lacking dimension specifications – such as images, ads, and iframes; and font rendering issues, which can lead to flashes of unstyled or invisible text.
You can tackle both types of issue quite simply with small changes:
- Make sure to always include height and width size attributes for images and videos. Follow this same rule for ads and iframes by reserving enough space for them to load. This ensures browsers can allocate the right space while the media is loading.
- Rendering fonts can cause text to look unstyled or invisible while it’s finished loading, so using font-display in your CSS files can reduce the layout shifts.
@font-face {
font-family: 'NAME GOES HERE';
font-style: normal;
font-weight: 400;
src: url(FONT URL GOES HERE) format('FORMAT GOES HERE');
font-display: swap;
}
You can use the following options with font-display: auto, swap, block, fallback or optional.
2. Implement a CDN and browser caching
Reducing how long it takes for a user to see anything load on your website is going to improve the overall usability of the page.
Largest Contentful Paint (LCP) is a Core Web Vitals metric and measures when the largest content element in the viewport becomes visible. It can be used to determine when the main content of the page has finished rendering on the screen.
A CDN (content delivery network) is distributed hosting platform which stores and serves copies of website assets, such as images and CSS files, thereby lightening the load on your own web hosting platform. Conetnt is delivered to users quickly and efficiently from highly optimised asset servers based as close as possible to the user’s geographic location.
Implementing a CDN and making sure your static assets are served from there can improve the Largest Contentful Paint (LCP) score.
Browser caching is where your browser stores pieces of a website so that it doesn’t have to re-download those assets next time they are required. This results in quicker page loads because rather than having to fetch those items from a remote server across the internet, items are loaded from local storage.
Depending on how often the components of your website change, you can set assets to be cached for up to a year. For example, you might only rarely change images on your blog posts following initial publication, so you could potentially set those assets to cache for a year. However, on an ecommerce site where banner images are replaced frequently with new offers, caching assets for only a few days might be more appropriate.
You can cache assets in a variety of ways through plugins, extensions, or directly through your server configuration.
3. Break up long tasks
The main factor that affects the First Input Delay (FID) score is heavy JavaScript execution.
First Input Delay (FID) is a Core Web Vitals metric that captures a user’s first impression of a site’s interactivity and responsiveness. It measures the time from when a user first interacts with a page to the time when the browser is actually able to respond to that interaction.
Essentially the browser can’t respond to a user interacting with your page while it’s still in the process of loading and executing lots of JavaScript.
Long Tasks are JavaScript execution periods where users may find your UI unresponsive. Any piece of code that blocks the main thread for 50 ms or more can be characterized as a Long Task. Long Tasks are a sign of potential JavaScript bloat (loading and executing more than a user may need right now).
Breaking up larger JavaScript files into smaller files and loading them asynchronously can improve the input delay score.
4. Serve Images In Next-gen Formats
Serving images in next-gen formats means better compression and quality compared to older versions of the JPEG and PNG formats. Converting images to JPEG 2000, JPEG XR or WebP formats means that images will load faster and use less data.
Browser support for WebP is still a bit patchy so it’s important to provide a fall-back option for other browsers.
5. Defer Offscreen Images (Lazy-loading)
Lazy-loading is when you set images or resources to wait to load until they are needed, instead of loading them all immediately.
Usually you would implement lazy-loading on all images that aren’t visible on initial page load such as images that are below the fold.
This can improve how quickly the page loads, improving the LCP score by reducing the number of resources that are loaded with the initial page load.
Most browsers such as Chrome now offer lazy-loading by default without having to load separate code or JavaScript files. Using the following code on images should initiate lazy-loading:
<img src="/image.png" loading="lazy" alt="..." width="..." height="...">
6. Minify CSS, JavaScript, and HTML Files
Minification is the process of reducing file size by removing unnecessary bloat – for example, removing whitespace or replacing long function and variable names with shorter ones whilst maintaining code function.
Minifying CSS, JavaScript, and HTML files can improve your page load performance by reducing payload (thereby reducing transmission and storage overheads) and script parsing time (thereby reducing processing overheads).
Here’s an example of when a CSS file is larger than it needs to be:
h1 {
color: #000000;
font-size: 16px;
font-weight: bold;
}
h2 {
color: #000000;
font-size: 16px;
font-weight: bold;
}This bulky CSS could be reduced to:
h1,h2{color:#000;font-size:16px;font-weight:bold;}These two bits of code are functionally the same, but by not repeating styling for elements that are exactly the same, using the shorthand version of colour codes, and removing whitespace, it uses fewer bytes.
A wide range of plugins and libraries are available for automating the process of minification, so this is often a quick win.
7. Remove Unused CSS and JavaScript
Removing unused CSS and JavaScript can be one of the trickier things to complete when optimising for page speed.
By default, a browser must download, parse, and process all external stylesheets that it encounters before it can display, or render, any content to a user’s screen.
Even if the JavaScript is asynchronous (i.e. not render-blocking), the code competes for bandwidth with other resources while it’s downloading, which has significant performance implications. Sending unused code over the network is also wasteful for mobile users who don’t have unlimited data plans.
If your website loads every CSS and JavaScript file, but the page itself only uses a small section of the CSS and JS within, then page load speed can be unnecessarily long.
Google has a tool within the coverage tab of Chrome DevTools to show you what CSS and JS isn’t used for that page:
You can click on each file within this report and it will show you which bits of CSS or JS are not in use.
Ideally you would load critical CSS and JS inline within the <head> of the site and then load the rest of the CSS and JS asynchronously. Portioning up CSS/JS into separate files based on page type can be a good way to reduce the amount of code that isn’t being used on each page.
Using tools, plugins, or extensions can make it easier to implement changes to minimise unused code.
8. Merge CSS and JavaScript Files
Although we’ve just spoken about splitting files up to use only what’s necessary for that page, doing the opposite (reducing the amount of requests for a page by merging CSS or JS files together) can also help to improve performance in some cases as it reduces the number of separate requests required to load a page.
However, if doing this causes the CSS or JS files to be classed as large files, you might end up seeing a negative impact on your FID score, so only look to do this if you can merge files while still maintaining an overall low file size.
9. Defer Render-blocking Resources
We’ve already covered loading critical CSS and JS within inline <style> and <script> tags in the <head> of the page. Once that’s complete, you can then look to defer or preload the rest of your CSS and JavaScript files as the page already has what it needs to handle the core functionality.
You can defer scripts by using the following async code:
<script src="/scripts.js" async></script>Preloading CSS will do the same trick with the following code:
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
10. Preload Key Requests
We just covered briefly preloading CSS files, but this can be done for a variety of other resources, including JS and font files, too.
By preloading a certain resource, you are telling the browser that you would like to fetch it sooner than the browser would otherwise discover it because you are certain that it is important for the current page.
The browser caches preloaded resources so they are available immediately when needed. (It doesn’t execute the scripts or apply the stylesheets.)
Here are some examples of how you would use the preload tag:
<head>
<link rel="preload" as="script" href="/critical.js">
<link rel="preload" href="/roboto.woff2" as="font" type="font/woff2" crossorigin>
</head>It’s important to note that you should only preload resources that are needed immediately – preloading everything would not be useful. Google Chrome will flag a warning if a resource is using preload but is loaded 3 seconds after load event. This might help determine which resources are needed for preload.
Get Ready For May 2021 Now
These are just some examples of ways to improve your pagespeed and Core Web Vital scores before the algorithm update, expected in May 2021. How exactly you implement these tips will vary website by website, so be sure to do some further research into ways to implement the above tips within your specific setup.
We’ve linked some resources from Google where you can find more detailed implementation recommendations for each point above.
We offer full Core Web Vitals audits as part of our technical SEO service, and also look at this area in detail as part of our paid search quality score initiative.
Resources
https://developers.google.com/search/blog/2020/05/evaluating-page-experience
