Core Web Vitals are new performance metrics introduced by Google to help highlight aspects of a web page that affect the user experience, such as the page loading time, interactivity and visual stability.
This latest update from Google is of significant importance as it signals a shift in the way websites will be ranking in search results going forward. We’ve covered the basics of what Core Web Vitals are in our ‘Preparing for Google's Core Web Vitals’ post, and we’ll be explaining a bit more in depth here why these metrics are important and why it is essential to optimise your web pages.
Starting May 2021, Google will make the page experience as an official ranking factor. As a matter of fact, Core Web Vitals will make up the biggest part of a web page experience score. These performance metrics are made up of the following measurement:
- Largest Contentful Paint (LCP): time interval between the start of a page load to seeing the majority of the content on-screen
-
First Input Delay (FID): amount of time it takes for a page to be ready for user interactivity
- Cumulative Layout Shift (CLS): shows how stable a page is as it loads (whether elements move around as the page loads or not)
What is Largest Contentful Paint (LCP)?
Google requires the site to hit LCP within 2.5 seconds. LCP measures the time it takes for a page to load, from a user’s point of view. It is common practice for sites to offer comprehensive and qualitative content to users and include all the page’s important information above the fold to make it easier to see, however the page loading time is becoming just as important now.
Keep in mind that if your webpage is slow to load, there’s a high chance users bounce and miss your content altogether.
What is First Input Delay (FID)?
FID is technically a page speed score, but it goes one step beyond as it measures the time it takes for users to be able to interact with the page. This new metric isn’t so important for content-only pages like blog posts, however it is crucial for login pages, pages with forms to fill or any webpage where users need to interact quickly.
Google requires any page to have a FID less than 100 milliseconds to provide a good user experience.
What is Cumulative Layout Shift (CLS)?
Having a high CLS score means that elements on the page move around as the page loads - this is bad for the customer experience, and is usually caused by an image or video with unknown dimensions, a font that renders larger/smaller than its fallback, or dynamic elements like adverts or third-party widgets that resize themselves as the page loads.
These are signs of poor user-experience and Google is aiming to provide the best experience possible to users, hence the requirements for any webpage to have a CLS score lower than 0.1.
How do I check my Core Web Vitals?
Google has already integrated the Core Web Vitals metrics into all its analysis tools - you should be able to view your Core Web Vitals scores on a pager-per-page basis using the PageSpeed Insights tool or get an overall score of how your website is performing on Google Search Console.
It’s important to keep in mind that scores shown in the PageSpeed Insights tool are made up of two different data types: Field data and Lab data. The tool gathers data from real users’ experience on the webpage but also from simulated page loading - this explains why you won’t see the same score for a given page if you test it multiple times.
Now onto the recommendations to help fix various issues your webpages might encounter!
You can head onto your Google Search Console account to get a detailed report of webpages that have a poor score, but a few good habits to keep and that we strongly recommend would be:
How to Improve LCP:
-
Serve HTML pages cache-first: If your HTML doesn't need to change on every request, caching can prevent it from being recreated unnecessarily. Serving HTML pages cache-first makes it possible to cache some or all of the HTML page's content and only update the cache when the content has changed.
-
Serve images in next-gen formats: The recommended formats are WebP, JPEG 2000 and JPEG XR. These image formats offer superior compression and quality characteristics and allow a faster download of the webpage.
How to Improve FID:
-
Remove or reduce third party code as much as possible: Third party code can really impact the load time, therefore you should aim to load all non-essential third party code once the page has finished loading.
-
Eliminate render-blocking resources & Remove unused Javascript: We recommend limiting the amount of JS on the page to reduce the amount of time the browser needs to spend executing JS code - either disable specific JS files that are not needed on the page, or strip out JavaScript comments and extra spaces from the source code.
How to Improve CLS:
-
Properly size media: This is a way to let the browser know exactly the space that the image/video will take up on the page. Adding the <srcset> HTML tag instructs the browser to use specific images, depending on the situation, and also provides the browser with variations of an image (including a fallback image).
-
Pre-allocate space for dynamic content: Avoid inserting content above existing web elements; dynamically inserted content, like banners and adverts should have a reserved space, otherwise they suddenly appear on the page and push content down or up to the side.
-
Font loading improvements: When a browser needs a font from a web server, it displays a fallback font in the font stack until the custom one loads. Any element that uses the custom font will be hidden until the font asset has been downloaded fully. A quick way to fix this would be to add ‘font:display’ values.
Are Core Web Vitals important?
Although it’s unclear how much Core Web Vitals will contribute to the pages’ ranking, they remain very important as they’re meant to provide a better user experience. Google has been putting more emphasis on the user over the years, and it’s become critical today to offer the best customer experience possible. Optimising your Core Web Vitals will give you a good shot at doing that!
What to do next?
We can help you prepare accordingly for this update by carrying a site audit and identifying specific changes to make to offer a greater user experience.
Speak to us now if you’d like us to put a strategy in place for you or if you have any questions regarding the process
- Email [email protected]
- Call 01481 740073 (Guernsey studio) or 01865 686093 (UK studio)
