Core Web Vitals: What Are They?
Written by Luke Haslett
Written by Luke Haslett
Core Web Vitals are a set of specific factors that Google considers of critical importance when determining a webpage’s overall user experience. Core Web Vitals are made up of three specific user interaction measurements and page speed metrics: largest contentful paint, first input delay, and cumulative layout shift. In a nutshell, Google’s way of evaluating your page’s UX.
You can find your site’s Core Web Vitals data in the “enhancements” section of your Google search Console account.
Google plans to make page experience an official ranking factor in May 2021.
In Google’s eyes, page experience will be a combination of factors including:
And Core Web Vitals will be a key part of that score. It’s worth noting that a great page experience score won’t be a silver bullet that automatically accelerates you into the #1 spot in the SERPs. It’s approximately one of 200 factors that Google uses to rank sites in search. That being said, Core Web Vitals will make up the lion’s share of your page experience score.
In this article, we’ll break down all three Core Web Vitals components and show you how to optimise each one.
LCP is defined as the time it takes for a page to load from the point of view of an actual user i.e. the time from clicking a link to seeing the majority of the content load on-screen.
LCP differs from other pagespeed measurements like TTFB and First Contextual Paint that don’t necessarily relate to what it’s like for a user to open up a webpage. Rather, LCP focuses on what is at the core of a users UX, being able to see and interact with a page.
You can check your LCP score using Google PageSpeed Insights.
Which is useful, especially when it comes to identifying areas that need optimised. What’s particularly helpful about Google Pagespeed Insights as opposed to using trolls such as webpagetest.org is you can evaluate how your page has performed in the real world (based upon Chrome browser data).
However, we’d recommend looking at your LCP data in Google Search Console as it pulls directly from the Chrome User Experience Report.
Unlike PageSpeed Insights, you can view the LCP data on your entire site. Instead of having to analyse pages on an individual basis, you can get a list of URLS and how they are performing. Google has specific LCP guidelines which they bracket into: Google, Needs Improvement, and Poor.
In short, you want every page on your site to hit LCP within 2.5 seconds which is easier said than done. Particularly with large web pages or pages with lots of features.
Here are some things you can do to improve your site’s LCP:
👉Remove any unnecessarily third-party scripts
👉 Upgrade your web host: Better hosting = faster load times overall (including LCP).
👉 Set up lazy loading: Lazy loading ensures images only load when someone scrolls down your page, meaning you can achieve LCP significantly faster.
👉 Remove large page elements: Google PageSpeed Insights will tell you if your page has an element that’s slowing down your page’s LCP.
Next, let’s explore Google’s second Core Web Vital: First Input Delay.
Now that your page has achieved FCP. But the question becomes: can users actually interact with your page?
That’s exactly what FID measures: the time it takes for a user to begin interacting with the page itself.
Examples of interactions include:
Google considers FID important because it takes into account how real-life users interact with websites.
And like FCP, they have specific criteria for what constitutes an acceptable FID.
For a page that’s 100% content (like a blog post or news articles), FID likely isn’t a priority. The only real “interaction” is scrolling down the page or pinching to zoom in and out.
However, for a login page, sign up page, or other page where users need to quickly click on something, FID is critical.
Here are some things you can do to improve your site’s FID scores.
👉 Remove any non-critical third-party scripts: Just like with FCP, third-party scripts (like Google Analytics, heatmaps etc.) can negatively impact FID.
👉 Use a browser cache: This helps load content on your page faster which helps your user’s browser accelerate through JS loading tasks even faster.
Cumulative Layout Shift (CLS) is how stable a page is as it loads (aka “visual stability”). In other words, if the elements on the page move around during the page load, the CLS is high - which is viewed by Google as a negative experience.
Instead, you want your page elements to be stable as the page loads.
Here are the specific criteria Google has in place for CLS:
Here are some simple things you can do to minimise CLS.
👉 Use set size attribute dimensions for any media (video, images, GIFs, infographics etc.): That way, the user’s browser knows exactly how much space that element will take up on that page and won’t change it as the page fully loads.
👉 Make sure ads elements have a reserved space: Otherwise they can suddenly appear on the page, pushing content down, up or to the side.
👉 Add new UI elements below the fold: That way, they won't push content down that the user “expects” to stay where it is.