In this article, we’re going to explore what Core Web Vitals are and what you need to do to help preserve and improve your search ranking.
What are Core Web Vitals?
In a nutshell, Core Web Vitals are metrics defined by Google that relate to user experience and are going to impact SEO and page rankings.
In April 2020, Google announced the Web Vitals initiative, designed to “provide unified guidance for quality signals that are essential to delivering a great experience on the web”. These focus on the performance of the page and avoid some of the frustration users can feel, such as slow page loading times. These areas can also have a massive impact on the success of an e-commerce site, for example, where impatient users will simply go elsewhere if they have a poor experience.
Within the Web Vitals initiative, three metrics have been identified as particularly important – these are the Core Web Vitals defined by Google. These metrics relate to page loading, interactivity and the visual stability of the page, more specifically:
Loading, reflected in the Largest Contentful Paint (LCP) metric: this is a measure of the perceived load speed, and more specifically how long it takes to load the largest piece of content that’s on your page, whether an image, block of text or video.
Interactivity, reflected in the First Input Delay (FID) metric: how long it takes for something to start happening when a user interacts with a page, such as clicking on a link.
Visual Stability: reflected in the Cumulative Layout Shift (CLS) metric: the extent to which page elements shift around while they are still loading, making interaction harder and more frustrating for users.
Whilst the Core Web Vitals are the main focus for the algorithm change, it’s important not to forget the other Web Vitals defined by Google – being mobile-friendly, providing safe browsing, ensuring HTTPS is enabled and having no intrusive interstitials (pop-ups etc.) – that all impact SEO and the user experience.
Let’s take a deeper dive into the three Core Web Vitals.
Largest Contentful Paint (LCP)
Everybody knows how important load speeds are for user experience – they can make or break the success of a site. Google defines a good LCP time as anything under 2.5 seconds, with anything above that needing improvement. If your LPC is above 4 seconds, then this is considered poor and you need to address it as a matter of urgency, although you’ll like already be aware of the issue.
The first step to improving your LCP is to measure it and continue doing so on a regular basis. The good news is that there are multiple tools available to help you measure LCP as well as the other Core Web Vitals, including Lighthouse, PageSpeed Insights, an extension for Chrome relating to Web Vitals and the Chrome user experience report. You can also leverage the LCP API in order to measure using Javascript.
There are a number of potential reasons behind a slow LCP score, and a number of tactics you can follow to optimize it. It may be a content issue due a large image or heavy font, it could be a CSS issue or it could be down to your JavaScript. There are also tactics to apply instant loading or optimize the critical rendering path to ensure the right content is displayed first.
Optimization options can get quite technical, so the best first step is to have a conversation with your digital agency or in-house development or UX team and ask them to investigate with a view to improving the timings. If you’re part of the IT team, also check out the development notes from Google which are an excellent starting point.
First Input Delay (FID)
The First Input Delay measures “load responsiveness”. This is essential as users can get frustrated very quickly when dealing with unresponsive pages, and will simply go elsewhere – first impressions really count in web browsing! The FID metric relates to the time from when a person first interacts with a page to when the browser starts responding to that interaction.
Google rates an optimal FID time as under 100 milliseconds; anything above this means there is room for improvement, while anything above 300 milliseconds is regarded as poor and needs more urgent attention. Again, you can use many of the tools above to measure your FID time.
There are lots of causes for a poor FID time, such as sub-optimal Javascript execution. Marketers and in-house IT teams should start with a conversation with their digital agency partners to discern those causes. In-house developers can also use the Google developer resources relating to FID as well as the guidance on optimizing FID as a starting point. The solutions to improving FID could be more fundamental changes to your website, for example, introducing a Content Development Network (CDN) like Cloudflare that can improve your LCP too.
Cumulative Layout Shift (CLS)
A user is not going to wait to interact with your page until it is fully rendered if there are significant delays. When they do this, there is nothing more irritating than elements of the page moving around, making interaction far more difficult and generally leaving a bad impression. The CLS metric quantifies how often this happens to users; it’s a cumulative score of all the unexpected layout shifts that happen on a page.
Again, you can use some of the tools we’ve already covered in this post to measure CLS. Google defines a score of below 0.1 as good, and anything above this as needing improvement. A score of above 0.25 is considered poor.
Improving CLS is generally a job for your front-end developers who need may need to optimize your CSS by:
· Ensuring there are size attributes on images and elements
· Following sensible approaches to inserting content
· Animating transitions in ways that avoid triggering layout changes.
Again, Google provides a deep dive into CLS and offers robust optimization advice.
Act now!
Ideally, you’ll have already had conversations with your digital agency, in-house developers or UX team about Core Web Vitals. If you haven’t, then act now to ensure your page rankings are not negatively impacted in mid-June.
Need any advice about Core Web Vitals? Then get in touch!
