It's nothing new that poor user experience will hurt the overall performance of your site. To reflect that, Google has refined its algorithms multiple times regarding user experience over the past decade; In 2020, they made a huge leap forward due to new SEO metrics called "Core Web Vitals."
In this article, we dive into the fundamentals of Core Web Vitals, how to improve your score, and some nifty tools to help you measure and monitor your performance.
What are Core Web Vitals?
Core Web Vitals are three key metrics Google uses to determine the experience users have on your website’s pages.
What Google is trying to measure is:
Loading
Interactivity
Visual stability
The actual names of the metrics to measure the above are:
Largest Contentful Paint (LCP)
First Input Delay (FID)
Cumulative Layout Shift (CLS)
A poor score for any of these implies the user experience isn’t what it should be, which you’ll want to correct.
Google scores you based upon these metrics for every page of your website, and can even include those pages that have a noindex.
So if you have a slow checkout or admin area, it doesn’t matter how fast your homepage is; they’ll still impact how Google evaluates your site's experience.
Will this impact rankings?
The simple answer is yes.
It started to impact rankings in mid-June 2021, and the rollout will be completed by the end of August 2021.
This focus on the user shouldn’t come as a surprise.
Google has encouraged website owners to create sites that provide positive user experiences for years. While the quality of content is a more important ranking factor, how users experience the site is still valued.
It’s also important to understand how Google measures Core Web Vitals. Google is using real-user data sourced from the Chrome User Experience Reports (CrUX). This report contains anonymous data on how fast a site loads for anybody using the Chrome browser.
That means that speed tests aren’t being done as Google crawls and renders your site, it’ll be based upon the actual speeds users experience.
How big will the impact be?
We can't know for sure...
And from the look of it, SEOs are divided on what we expect the impact to be.
So far, there hasn’t been much industry chatter around the update having a noticeable impact.
We can also look at the past and infer the impact.
Previously, UX-based algorithm updates have had a minimal impact on rankings, including:
Google itself has also alluded to the update being a minor one, at least to start with.
I think if you go back and look at how we’ve had these sorts of things over, it really isn’t that okay, then the next day everything completely changes. There’s no intent to try to do that, even though we might say we start using this as a factor. - Danny Sullivan
My opinion is that the update will be another one of those "deciding factors" updates. If all else is equal, having better Core Web Vitals than other sites could tilt the scales in your favor.
I also think Google tends to talk a lot about these updates, even though they’re small, to encourage webmasters to make their sites better for their users.
Often, a site owner will care if something impacts their rankings, but not care if it's "just" a bad experience for their users. Also, a competitor analysis can help identify what they implemented better than you.
Core Web Vitals metrics
As I previously mentioned, Google is basing the algorithm update upon three metrics.
Loading
Interactivity
Visual stability
Here is an overview of how these are measured by the Core Web Vital metrics.
Largest Contentful Paint (LCP)
LCP is the time it takes for the largest above-the-fold HTML element to load.
That can be a header tag, <p> tags, an image, video, or an element with a CSS background-image that uses the url() function.
Why is it important?
The largest element in above-the-fold content loading has a significant impact on a page’s perceived performance.
While no stats have been released, research from Google has found that the largest element being rendered above the fold is the most accurate way to measure when the main content of a page has loaded.
This LCP metric aligns well with what a user experiences on a site as the frustration of slow load times is reduced when something substantial is loaded on a page.
LCP is the successor to an inferior metric called First Meaningful Paint (FMP). FMP measures when anything wasn’t painted above the fold on the site.
The benefits LCP has over FMP are clear; FMP shows when anything loads above the fold (including a simple background color change), LCP shows when the largest above-the-fold element has loaded, which is far more meaningful for users.
What is a good LCP score?
Google’s web.dev site says:
“To provide a good user experience, sites should strive to have Largest Contentful Paint of 2.5 seconds or less. To ensure you're hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.”
Cumulative Layout Shift (CLS)
There’s nothing worse than going to click something, and suddenly, the text shifts, and you miss the button.
But why does this happen?
The cause is different CSS or JS assets loading at various times, which impact how the pages display.
Some examples include:
A third-party lazy-loading ad.
Incorrectly generated critical CSS, causing the page to move around when the entire page’s CSS is loaded.
A lazy-loaded image causes the text to move.
Sites injecting JavaScript into the page HTML structure or CSS used.
CLS measures the amount the page moves around above the fold when it is loading. It is a great metric to discover issues with the less-than-ideal user experience explained above.
What is a good CLS score?
Taken from Google’s web.dev site:
“To provide a good user experience, sites should strive to have a CLS score of 0.1 or less. To ensure you're hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.”
First Input Delay (FID)
FID measures how responsive your site is to interaction.
For example, say you’re on a site and click Blog; the first input delay measures the time it takes for the browser to begin processing the request.
It’s frustrating when you click onto a page over and over, unsure if anything is happening. You’ll likely leave and think, ‘this site doesn’t work.’
It’s not about how quickly a page loads; it’s about how quickly you, as the user, know something is happening.
What is a good FID score?
Google’s web.dev site states:
“To provide a good user experience, sites should strive to have a First Input Delay of 100 milliseconds or less. To ensure you're hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.”
How to improve your Core Web Vitals
Now you know just how important each of the three Core Web Vitals are; the question is, how can you improve them?
There are many tips to improve your site speed, and many articles explain each site speed concept in detail.
Here is an overview of the critical areas of focus to improve each metric and resources for further reading.
Improving Largest Contentful Paint (LCP)
First, optimize the server.
How quickly your server responds significantly impacts paint times (the time it takes for a browser to parse code and render it for a user). No matter how optimized your front-end asset loading is, slow server speeds will make what should be a fast site slow.
If you just want to test in one country, use GTMetrix.
Here are ways to improve your server speed:
Get a more powerful server (an obvious one)
Use a CDN like Cloudflare or Fastly
Set up caching of all assets (images, HTML, CSS)
If you’re serving customers in multiple countries, cache these assets on edge servers (CDNs have servers around the globe). Caching HTML on CDNs is often missed but makes a huge difference to load times.
Once you have a speedy server, look at front-end optimization.
Some examples include:
Use server-side rendering. An excellent choice for React sites is Next.js, which is both SEO-friendly and great for speed.
Defer CSS and inline Critical CSS
Optimize images and lazy load images using native lazy loading
Improving Cumulative Layout shift (CLS)
Here are a few common reasons your page shifts around as it loads:
Missing HTML width and height attributes on images and iFrames
Before an image has loaded, the browser doesn’t know the space needed for it, so no room is given.
When that happens, other HTML elements fill the space, resulting in users seeing the page move around once the image appears.
To fix that, tell the browser to reserve the space on the page until the image can load.
Doing that is as simple as adding the HTML width and height attributes to <img> and <video> HTML elements.
An example before:
And then after:
You can also use CSS aspect ratio boxes, but using the height/width attribute is much simpler.
Custom Fonts
Layout shifts occur with custom fonts, as there is an interim period where backup fonts are displayed, and then the custom fonts are loaded, and the layout is adjusted.
Fixing this issue comes down to font optimization. Here are a few things to do:
Test different font-display options using the ‘optional’ value can help prevent layout shifts.
Self-host Google fonts on your main domain to reduce external requests that add latency.
Embeds and ads
Anything embedded on a page from a third-party website has the potential to cause CLS issues. This is similar to the width and height attribute issue with images; the browser doesn’t know the embedded element’s size until it has loaded.
In this case, it’s best you use the aspect ratio CSS property I mentioned previously. For example, on the containing <div> or the embedded element itself, specify its aspect ration like this:
You could have more issues to fix and Barry Pollard has a more comprehensive list along with their fixes.
Improving First Input Delay (FID)
The main culprit of poor FID is JavaScript.
Behind the scenes, while JavaScript is loaded and parsed, the browser will not respond to user interaction.
If you’re the user, you’re not seeing what’s going on in the background and will assume something’s not working and leave.
The easiest answer is to reduce the amount of JavaScript on each page.
But if you’ve already done that and still not getting the score you want, try:
Code splitting: Breaking JavaScript into smaller chunks and deferring non-critical JS.
Server-side rendering: Fully client-side rendered JavaScript applications move the heavy lifting onto the browser. The amount of JavaScript used tends to increase FID, which is usually solved by statically generating or server-side rendering.
Tools to measure and monitor Core Web Vitals
You’re likely familiar with tools that monitor speed; however, it’s now critical to pick speed tools that report based upon Core Web Vitals. Here are some tools for one-off measurement and ongoing monitoring.
Measuring your Core Web Vitals
One-off measurement of your Core Web Vitals can help quickly diagnose any issues and provide you with a list of actionable, prioritized recommendations for improving them.
There are a lot of great tools out there, and many don’t just measure, but also offer monitoring capabilities.
Here are some of my favorite tools for one-off Core Web Vitals measurements.
PageSpeed Insights
Likely the most popular tool out there, PageSpeed Insights by Google gives you an overview of where you are on each of the three Core Web Vitals.
It uses Google’s Lighthouse tool to measure your site speed upon request and uses the Chrome User Experience Report (CrUX) to provide data on how real users experience your website. Given CrUX data is what Google uses to apply the core web vitals algorithm, this report is definitely what you should use for evaluating your sites speed.
Simply enter the URL, click analyze, and you’ll be given a score. The color indicates how far off from ideal your website is; if you see lots of red = a lot, orange = there are things to improve, and green = you’re doing well!
GTmetrix
GTmetrix is similar to PageSpeed Insights, as it’s providing web vitals reports and using Lighthouse metrics
However, this tool stands out by providing a waterfall report. Waterfall diagrams can be convenient and offer a whole load of information.
You can also use it to see how a site responds from different locations.
If you create an account, you can track changes over time.
Lighthouse
This is a tool already installed in chrome, meaning anyone can go into the Developer Tools area and run the report from any page.
Lighthouse not only helps identify different issues, but also spots opportunities to help improve UX.
Most site speed tools use Lighthouse for reporting, including PageSpeed Insights and GTmetrix.
Web.dev
Web.dev is a brilliant resource for all things to do with site speed. But it’s not just educational; they also have a Core Web Vitals measurement tool that’s easy to use.
You can sign in with your Google account, and it’ll track changes over time.
Monitoring your Core Web Vitals
Now you’ve got your Core Web Vitals scores to where they need to be; the next step is to maintain it by monitoring.
There are tools designed to make monitoring your score a lot easier, rather than running through the tools above again and again.
My CrUX dashboard
One tool that I use for all my clients is my CrUX dashboard.
I’ve released this as a free resource to help sites easily monitor their web vitals over time.
It’s all based within Data Studio, and it’ll provide a monthly summary of CrUX data, allowing you to quickly spot trends on how users experience your site.
Wattspeed
Wattspeed allows you to monitor the performance of your web pages, visualize metrics, and see how your website speed improves over time.
Wattspeed provides:
On-demand or scheduled snapshots to help you identify potential issues or improvements that can be made.
Lighthouse reports on Accessibility, web best practices, SEO, and Progressive Web Apps.
Email and Slack alerts to get notified if the score gets below a specific value you set.
Shareable links that allow other people with the link to access snapshots without signing up for an account.
Browser extensions to check Lighthouse scores and other performance metrics from your browser.
You also get various additional features included, such as:
HTML validation
A request map
DOM tree analysis
Mixed content alerts
Overview of web technologies used
You’ll also see the settings used when running Lighthouse, something that a lot of other tools miss:
Best of all? Once you’ve created an account with Wattspeed, you can track each speed snapshot over time and compare how the speed of your site changes, and it’s all free.
Google Search Console
Google Search Console keeps getting better and better; a recent great addition is a report to monitor Core Web Vitals.
This report lets you know all the individual pages of your site that need improving, which is incredibly useful for finding specific URLs that have a less than ideal user experience.
Calibre
Calibre is my favorite tool when it comes to site speed monitoring.
You can set performance budgets, test profiles that match the devices and locations of your users, and track third-party code.
It really has it all.
SpeedCurve
SpeedCurve is more enterprise, and on the pricier side of monitoring tools; it measures using web vitals and has great reporting capabilities.
They have their own custom-built real user monitoring solution, which is great if you need more detail than the free data you can get out of CrUX.
SpeedMonitor.io
The name says it all; SpeedMonitor.io is dedicated to monitoring the speed of your site.
The great thing about this tool is you can automate it and, ultimately, forget about it. When or if something changes, the tool will notify you via email or Slack.
As you can see, there are tons of not only great but also free tools at your disposal to ensure your Core Web Vitals score is tip-top!
Page Experience
Page Experience is a new Advanced Web Ranking report which provides a web performance overview for your main website’s Index page, helping you quickly assess your site’s performance status and progress right from the app.
Final words
So there you have it; an in-depth look at everything to do with Core Web Vitals.
While it seems likely the update will be a small ranking factor, work on your Core Web Vitals for more than that. Create a great UX that your users will love.
Hopefully, this guide has given you the knowledge and resources to do just that.
