Core Web Vitals Explained and How Page Speed is Now More Important for SEO
Core Web Vitals is a set of page speed metrics that combine to report on the speed of a website.
Google generates the Core Web Vitals reports from field-data (data collected from real-world users), and it includes aspects of user experience a website generates:
- Largest Contentful Paint (LCP). It’s an indication of the visual load performance of the website,
- Cumulative Layout Shift (CLS). It tracks the visual stability of web pages, and
- First Input Delay (FID). It measures a measure of interactivity
Combined with mobile-friendly, HTTPS, Safe Browsing, and no intrusive interstitials to form part of the Page Experience ranking signal.
Using Page Experience, Google can gauge the overall user experience your website delivers to traffic.
As the name would suggest, Core Web Vitals will most likely generate the highest portion of your Page Experience score.
Table of Contents
Understanding The Core Web Vitals
Core Web Vitals is Google’s effort at providing unified guidelines on user experience for webmasters to follow.
Google uses Chrome Users Experience Report (CrUX) to perform the Core Web Vitals check. To this end, Google collects data from Chrome uses who’ve opted-in to assess the metrics on an individual page basis.
If there is not enough data to assess individual pages, they may use the entire website or sections to determine Core Web Vitals.
It’s important to note that to attain a “Good” assessment, at least 75% of your website users should have a good page experience. If the number of users who experience a good user experience drop, your website will be categorized under the “Need improvement” category.
While the Core Web Vitals report classifies results of both desktop and mobile devices, with Google shifting to Mobile-First indexing, only the results from mobile devices go into calculating these metrics.
Another omission in measuring Core Web Vitals is the use of AMP in some categories of results, such as Top Stories.
The reasoning behind this is Google will not have ample data to determine Page Experience for emerging stories.
Elements That Make Up The Core Web Vitals
#1. Largest Contentful Paint
LCP is essentially a measure of how long a website takes to load from the user’s point of view.
In other words, how long does it take to load the single largest element from the time a user clicks a link to the webpage.
This metric measures the ability of users to interact with the web page in a fast manner.
Checking Your Website’s LCP Elements
The largest elements vary from one webpage to the next. For instance, it could be a block of text, a featured image, the h1 tag, or even a background image.
While there are numerous tools you can use to check LCP elements, PageSpeed Insights is the best tool you could use. The data comes from real-world data collected from Google Chrome users.
Alternatively, you could use the Chrome DevTools to diagnose the largest elements an individual webpage loads. In the DevTools, click the “Performance” tab and then check the “Screenshots” box.
Finally, click the “Start profiling and reload page” option. The results of the test will be highlighted in the timing graph under the LCP node.
For site-wide data, use your Search Console to view site-wide LCP data.
An ideal LCP should occur under 2.5 seconds, which Google rates as “Good”.
Anything between 2.5 seconds and 4 seconds is classified as “Need Improvements”, while anything beyond 4 seconds is classified as “Poor”.
Luckily, Google has published ways you can improve your website’s LCP performance.
Optimizing Your Website For LCP
You can read more on Google’s guidelines for LCP optimization here.
That being said, there are common improvements (the low-hanging fruits in LCP optimization) that most websites could implement straight away. They include:
- Preloading featured images or inlining the featured image,
- Removing bulky page elements such as featured images,
- Setting up lazy load,
- Removing unnecessary third-party scrips,
- Upgrading your web host, and
- Using a Content Delivery Network.
#2. First Input Delay – FID
After the user’s browsers load the largest elements, the next consideration in the Core Web Vitals is how long it takes before the user can make input into the website.
In other words, how long does it take for users to interact with elements on the webpage and the webpage actively responds to your commands?
Consider FID as a measure of responsiveness.
Examples of user interactions that fall under FID:
- Clicking a checkbox,
- Selecting an option in the menu,
- Keying in your email,
- Clicking navigation links or buttons, and much more.
As you might appreciate, strictly informational pages might not have to worry about FID.
After all, not all users will interact with the elements found on the page and will instead scroll. Scrolling down does not factor into FID.
Neither does zooming and pinching.
What Causes FID?
The main culprit that affects FID metrics is different JavaScript competing to run tasks on the main thread. When a task is running on the main thread, the web page will not respond to the user’s input.
And the longer the task runs, the longer the delay before the page responds to the input.
Optimizing For FID
Some of the tasks you can perform to optimize your website for FID include:
- Differing JavaScript,
- Minimizing JavaScript,
- Implement browser cache to load webpages even faster, and
- Remove all non-critical third-party scripts.
#3. Cumulative Layout Shift – CLS
CLS, on the other hand, measures the visual stability of your webpage – how elements in the webpage move around or not.
If elements move around while your page is loading, it is considered high CLS, which yields a poor user experience.
In measuring CLS, Google takes into consideration the size of the content and how far it moves.
As far as CLS is concerned, your goal should be to provide a stable loading experience to website users.
In doing this, they do not have to keep learning where the various elements (the table of content, the H-tags, the images, etc.) are located after the website loads.
What Causes High CLS?
Some of the causes of visual instability on web pages include:
- Differing different styles and fonts so that they load later,
- Using images without defining their dimensions,
- Injecting content into the webpage using JavaScript,
- Incorporating iframes, embeds, and ads without defining their dimensions.
- Under PageSpeed Insights, you can check how stable your web pages are.
- Under “Diagnostics,” you will find a list of all the elements that shift. Typically, these elements will be listed in the Core Web Vitals under the “Avoid Large Layout Shifts”.
- If you want a visual illustration of the layout shift, you can use this layout shift GIF tool.
Optimizing CLS
While every website will require unique optimization requirements, some common CLS optimization tasks you can do include:
- Set the sizes of all media, including images, videos, infographics, and GIFs. In doing this, the sizes of the media do not change on the fly.
- Reserve ad space in your webpages, which reduces ads appearing out of nowhere and pushing content down
- Minimize additional styling elements and fonts where possible
It is important to note that Google is still collecting data in this particular metric, and it’s expected it will change in the future.
The Importance Of Core Web Vitals For SEO Today and in The Future
As the last few algorithmic updates have shown, Google is increasing its focus on providing a quality user experience to all search users.
Whether it is page speed to its ranking factor or taking a mobile-first ranking approach, there is a clear intent in ensuring they only show pages that provide stellar user experience in the Search Engine Results Pages (SERPs).
The Core Web Vitals is a continuation of this approach to ranking web pages.
However, chances are it might not yield significant changes to your ranking in the immediate future.
Keep in mind that Google has been using many of the page experience factors independently as signals to influence how it ranks the web pages.
Additionally, SEO researchers estimate that Google has over 200 ranking factors to consider in the final ranking of web pages; hence its impact might be strong to affect your ranking.
That said, there is an argument to be made that Google might be eyeing to make page experience (and core web vitals) a leading ranking factor in the future.
The fact that the search team has expended resources in developing unified guidance regarding quality signals shows that they consider page experience serious.
More from Infintech Designs
The Importance of Business Logos
Reasons Why It’s Still Important to Have a Website for Your Business
Infintech Designs is a digital marketing agency that specializes in helping small and medium-sized businesses succeed online.
Located in New Orleans, Louisiana, we understand the importance of making sure your business gets seen by customers searching for you on Google or other search engines—and this can be done through an effective web design strategy and clever use of ads.
We want to help make it easier for people like yourself with limited resources to get started!
