Google Core Web Vitals are a set of metrics that measure real-world user experience for loading performance, interactivity, and visual stability of a page.
Beginning mid-June of 2021, they will begin to impact Google Search rankings.
In this article, we will cover what Core Web Vitals are, how they play into your search rankings, and what you can do to improve them.
Need to get your website online fast? Check out our WordPress Website Builder.
- What Are Core Web Vitals?
- Tools to Measure Google Core Web Vitals
- How to Improve Core Web Vitals
What Are Core Web Vitals?
Core Web Vitals are a set of three specific factors or metrics that Google uses to analyze a web page’s overall user experience.
Core Web Vitals are one of Google’s page experience signals, along with mobile-friendliness, safe-browsing, HTTPS-security, and intrusive interstitial guidelines.
Page experience is a set of signals that measure how users perceive the experience of interacting with a web page. Effective mid-June of 2021, Core Web Vitals and the rest of the page experience signals are now included in Google Search rankings.
Core Web Vitals consist of three different metrics.
Largest Contentful Paint (Loading)
The first of the Core Web Vitals is known as Largest Contentful Paint (LCP). LCP measures the loading performance of a page.
This number is assigned based on how long after the user requests the URL it takes to render the largest content element visible in the viewport.
The largest element is usually a video or image, or possibly even a large block-level text element. This element is important because it indicates to the reader that the URL is actually loading.
In order to provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
First Input Delay (Interactivity)
First Input Delay (FID) is the second Core Web Vital, and it measures interactivity. Pages looking to offer a good user experience should have an FID of 100 milliseconds or less.
This measurement is made using the time from when a user first interacts with your page (clicking a link, tapping a button, etc.) to the time when the browser responds to that interaction.
It is taken from whatever interactive element a visiting user clicks first. This measurement matters for pages that require the user to do something, since that moment is when the page has become interactive.
Cumulative Layout Shift (Visual Stability)
The final Core Web Vital is called Cumulative Layout Shift (CLS). It is responsible for measuring the visual stability of a page.
This metric measures the total sum of all individual layout shift scores for every unexpected layout shift that takes place throughout the full lifespan of the page.
A CLS score ranges from zero to any positive number. A zero means no page shifting, while the larger the number, the more the layout shifts on the page.
This is an important metric because page elements that shift while a user is trying to interact with them create a bad user experience. If you are getting a high score in this area but can’t seem to figure out why you’ve been assigned a high value, try interacting with your page and see how that affects the score.
Tools to Measure Google Core Web Vitals
Knowing what the Core Web Vitals are is helpful, but that information isn’t particularly useful unless you know how to measure your Core Web Vitals and improve them once you know their scores.
There are three great tools that can help you easily measure your Core Web Vitals.
Chrome User Experience Report
The Chrome User Experience Report supplies us with real user experience metrics for how real-world Chrome users experience popular pages on the internet. It collects anonymized, real user measurement data for each Core Web Vital.
This report is pulled together by measuring key user experience metrics across the public web. The information within the report is aggregated from users who have opted-in to syncing their browsing history, have not set up a Sync passphrase, and have usage statistic reporting enabled.
The next tool you should be familiar with is PageSpeed Insights.
PageSpeed Insights is a tool that analyzes the content of a web page, then generates suggestions via a report to make that page faster.
The only caveat of this tool is that each URL must be checked manually.
Core Web Vitals Report
The Google Core Web Vitals report is another tool you’ll want to know how to use. This report tells you how your pages perform, and that information is based on real-world usage data (also known as field data).
It displays URL performance which is grouped by status, metric type, and URL group (groups of similar web pages).
Only pages with indexed URLs are able to be used in this report. URLs shown in the report are the actual URLs for which data was recorded.
How to Improve Core Web Vitals
You should now know what Google Core Web Vitals are, how they are measured, and where you can find their measurement reports.
If you find that your Core Web Vital numbers aren’t where you’d like them to be, we will cover how you can improve them below.
Tips to Improve Loading (LCP)
Below are the most common causes of a poor LCP score:
- Slow server response times
- Slow resource load times
- Client-side rendering
So what can you do to improve your LCP score?
- Purge unnecessary third-party scripts: Third-party scripts can slow down your website. If you find any that aren’t needed, delete them.
- Upgrade your web host: The better your web host, the faster your load times. Don’t waste time on a slow, unreliable host. Need fast and reliable hosting? Check us out!
- Use lazy loading: Lazy loading makes pages load faster by only loading images when someone scrolls to where the images are on a page. Lazy loading can make your LCP significantly faster.
- Remove large page elements: Large page elements can take a long time to load, which can really slow down your page speed. As we covered above, PageSpeed Insights will tell you if your page has an element that’s slowing down your page and hurting its LCP.
Tips to Improve Interactivity (FID)
Try these tips:
- Purge unnecessary third-party scripts: Similar to LCP, third-party scripts can really drag down your FID.
Tips to Improve Visual Stability (CLS)
If you have a poor CLS score, these are the causes that are most likely to blame:
- Images without dimensions
- Ads, embeds, and iframes without dimensions
- Dynamically-injected content
- Web Fonts causing FOIT/FOUT
- Actions waiting for a network response before updating DOM
With that in mind, here’s what you can do to minimize CLS:
- Utilize pre-set size attribute dimensions for any media: Doing this means the user’s browser knows exactly how much space an element will take up on that page, which means the browser won’t change it on the fly as the page continues to load.
- Give ads their own space: By reserving a specific spot for ads, you keep them from suddenly appearing on the page, which can move content to a different spot on the page.
- When adding new UI elements, do so below the fold: Keeping new UI elements below the page fold ensures that those elements don’t push content down that the user assumes will stay where it is.
Core Web Vitals have been a part of the overall page experience for a while now, but starting mid-June, they will also begin to impact ranking results in Google Search.
That means the better you understand the metrics that make up Core Web Vitals, how to measure and track that information, and what you can do to improve your scores, the better your chances of boosting your spot in Google’s rankings.
For more details on Google Core Web Vitals and how to make them work for you, check out Google’s web.dev Web Vitals page.