Six tips to improve your Core Web Vitals
Has your site been affected by Google’s latest big algorithm update? Here are six ways you can optimize your Core Web Vitals by improving site speed and user experience.
As we explained in a previous blog post, Core Web Vitals were created by Google last year to measure key aspects of page experience. In June 2021 it began introducing these as a search ranking factor, with the changes due to have been fully implemented by the end of August. So now is the time to check your Core Web Vitals, and make sure your site isn’t being penalized.
Summary
So what exactly are Core Web Vitals?
The metrics that make up Core Web Vitals will evolve over time but initially they are focused on three areas – Interaction to Next Paint (INP), Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). Let’s have a closer look at each.
- Interaction to Next Paint (INP) measures the responsiveness of the website. Differently from the deprecated metric FID which measured the input delay of the first interaction on a page, INP now considers all page interactions. It ranges from 200 milliseconds to 500 milliseconds, with lower values indicating good responsiveness.
- Largest Contentful Paint (LCP) quantifies the loading speed of a website. Specifically, it measures how long it takes for a page’s main block of content – often an image or video – to load. This measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
- Cumulative Layout Shift (CLS) is a measure of visual stability. It quantifies the amount of unexpected layout shifts that occur while the webpage is loading (e.g. text that moves up and down the page, or a link that changes its position while the user is trying to click on it). In a range that goes from 0 (no shifts) to 1 (maximum shifts), according to Google a site provides a good user experience if its CLS is lower than 0.1.
In addition to these Core Web Vitals, there are also three non-core metrics that are not taken into account for compliance. These are:
- First Contentful Paint – how long it takes to render the first bit of content on the page
- Speed Index – how fast content is visually displayed during loading
- Time to interactive – how long it takes for a site to be fully interactive for visitors (i.e. so that they can click on links, etc.)
Six tips to improve your Core Web Vitals
With Core Web Vitals having recently been incorporated into search rankings, it’s important to check how your website is performing. You can do this using Google’s own Search Console or Page Insights, or through a free Core Web Vitals check such as this one from Clickio.
If you find that your site isn’t compliant with Core Web Vitals, here are six useful tips to help you improve your score.
1. Optimize your images
For many sites, the largest contentful paint is likely to be an image – perhaps a large carousel or hero image at the top of the page. First of all, consider whether you really need the image at all – what does it add? If you do, think about compressing it, converting it into a newer format (such as JPEG 2000, JPEG XR, or WebP) or making it responsive.
2. Implement lazy loading
You don’t need to load all images straight away either. Implement lazy loading so that your images only show up at the moment a user scrolls down to that area of the page. It’ll cut down your loading time and increase your LCP score. Plus, it’s likely to keep your visitors on the page and decrease your bounce rate.
3. Optimize your fonts
Fonts can have a much bigger impact on a site’s load times than you might expect. By default, a browser will not immediately render a text element if its associated web fonts have not loaded yet – and if you use a fallback font then that can cause layout shifts when the web font does load. So try to limit fonts to just the ones you actually need – and use a preload command so the font starts loading earlier.
4. Check your third-party scripts
Maybe it’s not even your content slowing down your site. If you’re running third party scripts for ads, analytics trackers, social media buttons or plugins, think about whether you really need them all. Is there any duplication, are there alternative options, or can the script be better optimized?
5. Use a content delivery network
Speed is key with Core Web Vitals, and if you have a global audience then often it can take a while for your content to reach them. Using a global content delivery network, such as Cloudflare, means you can cache your content on proxy servers all around the world, and deliver it quickly to your visitors, wherever they’re based.
6. Reserve space for ads to load into
Ever tried to click on a link to an article only to find the page has suddenly shifted and you’ve ended up clicking on a banner ad instead? It’s a major, and common, cause of frustration for website users, which is why cumulative layout shift is one of the core web vitals.
Stop the shift happening by adding the width and height for the ad slot. That way, the browser will leave space for the image until it loads – eliminating jerkiness on the page. Remember that smaller ads might load within the space though, so make sure to style it accordingly – and use adaptive ad layouts to ensure you’re adapting to the screen size and connection speed of each user.
Need some help?
At Clickio, we continuously monitor the Core Web Vitals of over 500 publishers worldwide who use our advanced, AI-powered advertising platform. With lightweight HTML/CSS, smart lazy loading and full-site caching via a global CDN, our easy-to-implement Prism technology automatically optimizes your site for faster performance and improved user experience.
To find out how Prism could help you improve your Core Web Vitals, click here.