In 2021 Google incorporated Page experience as a ranking factor. Its primary purpose is to improve web performance. With Page Experience Update Core Web Vitals have become a vital factor to consider if you want your site to rank in the google search results.
When someone searches on google for a specific keyword, how Google will determine which site it must render on the top and which one at the bottom. Well, no doubt it considers the content first. Content will always dominate the rankings, but apart from content, Google also measures many other elements of the webpage, like keywords, usage of those keywords in your page, backlinks, and many others. Page performance is one of them, too. Google measures page performance by core web vitals.
In this article we will discuss Core Web Vitals and how you can optimize it to rank higher in the search results and acquire more traffic.
What is Core Web Vitals
Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift are the three key performance metrics that make up Core Web Vital, and they measure how quickly and efficiently a page loads for users, as well as how interactive and stable the elements of the website remain throughout the loading process.
Let’s further break it down for a better understanding.
1. LCP (Largest Contentful Paint)
LCP evaluates how quickly the site’s largest element above the fold (pictures, video, animations, text, etc.) can load and appear.
A good LCP is 2.5 seconds, while anything between 2.5-4 second needs improvement and beyond 4 seconds is considered poor by Google.
LARGEST CONTENTFUL PAINT STATISTICS
- Largest Contentful Paint accounts for 25% of your Google Lighthouse Performance Score.
- 43% of mobile and 44% of desktop URLs pass the Largest Contentful Paint benchmark of 2.5 seconds.
- According to research, the average B2B website has a mobile Largest Contentful Paint score of 7.05s, well above the 2.5s score needed to receive a passing grade.
- According to research, the average retail website has a mobile Largest Contentful Paint score of 9.17s, well above the 2.5s score needed to receive a passing grade.
2. FID (First Input Delay)
A page’s FID is the amount of time it takes for the browser to begin processing event handlers in response to the first user interaction with the page, such as a click, tap.
Good FID is below 100ms, while anything between 100-300ms needs improvement, and above 300ms is considered poor.
FIRST INPUT DELAY STATISTICS
- First Input Delay accounts for 25% of your Google Lighthouse Performance Score.
- 89% of mobile and 99% of desktop URLs meet the 100 millisecond First Input Delay benchmark.
3. CLS (Cumulative Layout Shift)
CLS is a useful user-centric metric for measuring visual stability since it helps quantify the frequency with which users encounter unexpected layout alterations. This is an essential aspect of visual stability measurement.
Good CLS is below 0.1, while anything between 0.1 and 0.25 needs improvement and above 0.25 is considered poor
CUMULATIVE LAYOUT SHIFT STATISTICS
- Cumulative Layout Shift accounts for 5% of your Google Lighthouse Performance Score.
- 46% of mobile URLs and 47% of desktop URLs pass the Cumulative Layout Shift benchmark of .1.
Now why Core Web Vitals is important
A tool like Core Web Vitals helps boost your site’s position in search results. They’re crucial since they tell Google how well a site is doing and where it may be enhanced.
The Core Web Vitals undeniably elevate the significance of UX as a ranking element.
Therefore, optimizing for the Core Web Vitals can make a massive difference if you’re competing in a field where content quality is almost comparable, which means that if Google has to show two pages with same content quality then it will prefer the one having a good Core Web Vitals Score. Remember that nothing can take the place of quality content on your website.
What Google’s John Mueller has to say about Core Web Vitals
The other thing to remember with Core Web Vitals is that it’s more than a random ranking factor. It also affects your site’s usability after it ranks (when people visit). If you get more traffic (from other SEO efforts) and your conversion rate is low, that traffic will not be as valuable as when you have a higher conversion rate (assuming UX/speed affects your conversion rate, which it usually does).
Having solid Core Web Vitals is about a lot more than search engine optimization, to put it simply. Every website proprietor should make an effort to enhance their visitors’ overall experience.
Even if your page’s content is excellent, you still need to ensure that every aspect of your website is optimized to receive a high search engine ranking, so that your site is visible to your target audience. Core Web Vitals also emphasizes the importance of the user experience.
How to measure Your Website’s Core Web Vitals
You may examine the Core Web Vitals of your site with the help of several tests, reports, and extensions.
The most important of these are:
- The PageSpeed Insights’ Core Web Vitals assessment;
- The Core Web Vitals report in Google Search Console;
- The Core Web Vitals Chrome extension.
1. Core Web Vitals Assessment in PageSpeed Insights
Google PageSpeed Insights (PSI) is divided into two sections:
- Determine what your actual users are experiencing (Core Web Vitals evaluation)
- Identify performance concerns (lab data, PSI score).
Focus on the first part to improve your Core Web Vitals score. The Field Data report incorporates this analysis. The data for this study is gathered from the Chrome User Experience Report (CrUX). This data is based on actual users’ interactions with your site. Google will consider these field results when determining search engine rankings.
PSI’s “Diagnostics” section is also a good resource for learning more about the factors that can change any of the three metrics:
PSI takes into account real-user metrics and lab data when determining an overall optimization score and offering optimization recommendations.
While this information is helpful, it is gathered in a controlled environment using specific devices and networks in the laboratory. However, some of your site’s guests may use outdated technology or underpowered connections. That’s why comparing lab results to your site’s actual performance is not a good idea.
PSI does not always provide a field summary.
When the CrUX hasn’t gathered enough data from the field, as is often the case with smaller websites, problems like this arise. Thankfully, there are additional sources from which we can collect field data.
2. Core Web Vitals Report in Google Search Console
Two new Core Web Vitals reports, one for mobile and one for desktop, have been added to Google Search Console (GSC).
Each report provides information regarding the field data and performance of groups of URLs.
These reports are excellent for discovering common problems across multiple URLs. Thus, you will receive information on your entire website, not just about one page.
For instance, if you have a large number of identical pages where the largest element is an image, the LCP metric will be the same for each. In this situation, GSC discovers LCP issues on each page.
Briefly, these new GSC reports are the most remarkable approach to tracking the performance of Core Web Vitals throughout your entire site.
3. Using the Chrome User Experience Report (CrUX) to get field data
The CrUX dataset can be accessed in following 2 ways
- The Chrome UX Report API- To access this developer must be familiar with JavaScript and JSON.
- BigQuery – Requires a Google Cloud project and SQL skills.
You’ll need to put in more work than just passing a page through PSI or GSC. But, they offer more options for arranging and visualizing the data. BigQuery, for instance, has functionalities for data slicing and joining with other datasets.
Try both strategies if you have the resources and the technical knowledge to implement them.
Some Vital Stats About Core Web Vitals
- 56% of the top 100 desktop domains pass Core Web Vitals
- Heavy brand effect – major brands rank highly even with poor performance.
- 61% of the mobile top 100 passed Core Web Vitals in February 2022
- In February 2022, the average loading time for the top 100 domains in the US was 2.38 seconds on desktop and 2.32 seconds on mobile – below Google’s reasonable threshold of 2.5 seconds.
- In February 2022, average CLS scores for desktop and mobile were 0.11 and 0.08, respectively – this is the first time that the average CLS on mobile for the top 100 sites has dipped below Google’s suitable threshold of 0.1
- In January 2020, only 22% of desktop and 27% of the mobile top 100 domains passed Core Web Vitals, respectively. Fast forward to February 2022, and this proportion has more than doubled to 56% on desktop and 62% on mobile. This shows that top-performing domains have made significant gains in web performance.
- Top 100, B2B, Healthcare, and Dict/Reference sites have an average LCP of 2.5 seconds or less across both devices.
- On average mobile LCP for Travel is 1.6 times worse than for Dictionary/Reference sites.
- On average, desktop LCP for Travel is 1.5 times worse than for B2B domains.
- URLs in position 1 are 10% more likely to pass a Core Web Vitals assessment than URLs in position 9.
- From position 1 to position 5, there’s a 2% decrease in the pass rate of the Core Web Vitals assessment for each position.
How To Optimize Core Web Vitals For Your Website
Now that we have a firm grasp of Core Web Vitals and how they function, we can turn our attention to some recommended steps for improving Core Web Vitals. Remember that your test results will dictate the steps you need to take to raise your scores. Therefore, it is essential to consider the advice and suggestions made by PageSpeed Insights (or other testing tools that you use).
The following are proven basic strategies for raising your Core Web Vitals scores.
1. Use a Content Delivery Network
Using CDN improves site performance to a great extent. Sites that use CDN load fast comparatively. Why? Because CDN makes data transfer between the server and the end user quick.
CDN is a vast network of interconnected servers. You can store the contents of your website on many servers using the CDN. When a user accesses your site, the geographically closest server renders him the website, reducing data transfer time.
With the use of a CDN, you may decrease users’ LCP loading times. Time-to-First-Byte can also be reduced with its use (TTFB).
2. Optimize Images
Another way to boost LCP is by image optimization. Images are bulky in size if they are of high resolution, and it takes a reasonable amount of time to load, which adversely affects the LCP score.
Using Compressed images makes loading faster. Many sites like TinyJPG can reduce the size of an image for free without hampering its quality. Images can be further be optimized by ensuring that they are the correct size and dimensions.
Therefore, it’s smart to ensure that you’re not using unnecessary image dimensions for certain areas on your site. Including the proper attributes can aid your browser in providing the ideal amount of space for your page’s parts, reducing the need for constant layout shifts.
By making changes to the source code, you can alter the width and height properties of your media files.
3. Implement Lazy Loading
Your LCP and page load time can both benefit from using lazy loading. Smush is only one example of several WordPress plugins offering lazy loading.
Lazy loading, also known as on-demand loading, and is a method for improving the performance of web content.
Lazy loading helps load only the necessary piece and delays loading the rest until it is needed by the user, as opposed to bulk loading, which loads the entire web page at once and renders it in one go.
4. Optimize Your Website Fonts
The fonts you use on your website can affect its load time in the same way that images do. This is because each font weight combination requires the browser to load the entire font family.
Web font optimization is a simple way to boost your site’s speed. This is because optimized web fonts take up less space on a user’s computer and load much faster.
On the other hand, if the relevant web font hasn’t yet loaded, the browser might not automatically render the text components. However, switching to alternative fonts may result in unwanted layout changes, lowering your CLS score.
Be careful when deciding on a font for your website. It’s best to use global fonts to selectively apply the necessary types and weights if you’re utilizing more than two fonts rather than having each one applied to each element. Using this method, you can restrict font downloads to those strictly necessary for the content.
5. Upgrade Your WordPress Hosting
If the site loading time is too long, it might be indication to change the hosting plan. Changing your hosting from shared to dedicated can boost FCP to a great extent.
Rather than choosing the cheapest, choosing the best hosting site that provides all the features you need is a wise decision. The quality of service provided by your WordPress host is crucial to the success of your website. It has far-reaching consequences, from page load time to safety. Especially if you have a large or sophisticated website, this is not a place to cut corners. Instead, upgrading your hosting provider or plan is one of the quickest yet most powerful strategies to optimize your website and enhance loading times.
For Hosting Read: Bluehost Review
6. Eliminate Render-Blocking Resources
Website pages can’t be rendered without the accompanying HTML, CSS, and JavaScript files. These files all include scripts that could prohibit people from accessing the stuff they’re trying to see.
However, you can prevent these scripts from negatively impacting your UX (and, in turn, help boost Core Web Vitals) by removing render-blocking resources and any unneeded CSS or scripts.
Numerous methods exist for accomplishing this. The first is to remove any extra spaces or comments from your JavaScript and CSS. In addition, you can reduce the size of your JavaScript and CSS by merging the files.
7. Defer Loading of JavaScript
It is another way of eliminating render-blocking elements, giving FID a significant boost.
This makes web pages load fast by blocking the loading of JavaScript files.
It loads other content of your pages rather than waiting for the JS files to load. In addition to this, you can configure your site to load critical CSS scripts appearing above the fold quickly. You can achieve this by extracting the material from the primary CSS file and inlining it within the code of your website.
8. Implement Content caching.
When it comes to enhancing the user experience, smart content caching is one of the most powerful tools at your disposal. The HTTP protocol’s central content delivery technique uses caching, or the temporary storage of content from earlier requests. If the content’s caching policies allow it, components at any point in the delivery chain can store copies of it to speed up subsequent requests.
Caching helps a lot in improving Core Web Vital Scores.
9. Preload hero images
Hero Images are usually the most significant element that appears above the fold content. So, if they load faster, then the overall UX is greatly enhanced. LCP can be drastically decreased by using the “rel=preload” link attribute, which is especially useful for hero pictures loaded with CSS or JavaScript.
10. Refrain from prioritizing advertising or pop-ups over other content.
A low CLS score is the outcome of shifting content on a page caused by adding content at the top.
Set aside room for advertisements, iframes, and other forms of dynamic content.
Not allocating specific space for them is a sure-fire way to disrupt the layout, just as it is with images and videos. To avoid content overflowing out of a container, use the overflow: hidden property and choose a container with adequate size.
11. Break up Long Tasks
This must be your top priority. When long tasks delay the Main Thread, it cannot promptly react to requests from the user. Website performance can be significantly enhanced by breaking them up. This reduces FID and enhances UX
12. Stop or postpone running any unnecessary third-party scripts
Your own website scripts may fail to run on time if they conflict with those of a third party. Consider which scripts are most helpful to the end user, and give them higher priority. Ad and pop-up scripts shouldn’t be at the top of the list.
How The top 10 US domains are doing in terms of their Core Web Vitals based on Searchmetrics SEO Visibility.
All metrics and whether or not the domain passes Core Web Vitals are reported monthly at the domain level. In February 2022, 75% of all Wikipedia desktop page loads took less than 1.1 seconds, and the domain scored 0 in both FID (stated in milliseconds) and CLS, passing Core Web Vitals.
| Rank | Domain | LCP (s) | FID (ms) | CLS | Passed CWV? |
| 1 | wikipedia.org | 1.1 | 0 | 0 | Yes |
| 2 | youtube.com | 6.2 | 0 | 0.15 | No |
| 3 | facebook.com | 3.7 | 0 | 0.05 | No |
| 4 | amazon.com | 2.0 | 25 | 0.2 | No |
| 5 | google.com | 1.1 | 0 | 0 | Yes |
| 6 | imdb.com | 2.3 | 0 | 0.15 | No |
| 7 | instagram.com | 3.2 | 0 | 0.1 | No |
| 8 | merriam-webster.com | 2.2 | 25 | 0 | Yes |
| 9 | twitter.com | 3.4 | 0 | 0.05 | No |
| 10 | britannica.com | 2.2 | 25 | 0 | Yes |
The top 10 for mobile devices CWVs based on the Searchmetrics SEO Visibility metric.
Where possible, a mobile version of a domain was used. However, this is mainly dependent on CrUX data collection. A higher share of mobile sites passes Core Web Vitals than desktop.
| Rank | Domain | LCP (s) | FID (ms) | CLS | Passed CWV? |
| 1 | wikipedia.org | 1.3 | 0 | 0 | Yes |
| 2 | m.youtube.com | 2.3 | 0 | 0.1 | Yes |
| 3 | m.facebook.com | 2.9 | 0 | 0 | No |
| 4 | amazon.com | 1.9 | 0 | 0.1 | Yes |
| 5 | instagram.com | 4.4 | 0 | 0.25 | No |
| 6 | imdb.com | 2.3 | 0 | 0 | Yes |
| 7 | google.com | 1.2 | 0 | 0 | Yes |
| 8 | merriam-webster.com | 1.6 | 50 | 0 | Yes |
| 9 | britannica.com | 1.7 | 25 | 0 | Yes |
| 10 | linkedin.com | 1.4 | 0 | 0 | Yes |
Conclusion
Core Web Vitals is a game-changer for improving the web experience for everyone. These measurements will continue to be included in Google’s ranking system.
That’s why it’s essential to keep an eye on them even if you don’t see anything amiss.
To keep a successful website running, constantly enhancing the user experience is crucial. Thanks to the availability of numerous helpful tools and plugins this process can be made much simpler and easier than it otherwise would be. Or if it seems daunting to you then you can hire a developer to do that for you.
