Core Web Vitals are a set of metrics that Google introduced in May 2020. They essentially measure web page speed, responsiveness, and visual stability. These metrics went live to become official Google ranking signals in mid-June 2020.
What is expected by the user from the web will continue to change with every website and context, but there are core things that remain desired across the board. Google has, therefore, identified the most in-demand user experience needs as loading speed, interactivity, and visual stability.
This all-inclusive guide is destined for reading by SEO and digital marketing professionals who want to stay ahead and ensure their websites offer nothing but the best in terms of user experience.
The Core Web Vitals are three metrics applied to score the website in search engines or with respect to the user experience your website delivers. This is a measure of speed, interactivity, and visual stability-all sorts of indices that have come to define Google ranking signals for "page experience.".
Here are the main Core Web Vitals:
In fact, Google turned CWVs into a ranking factor where sites with better scores may appear on top of search results. Also, CWVs directly influence users' perception of performance at your website, leading to increased satisfaction and engagement.
The Page Experience Update from Google in 2021 has cleared stated that it will involve core web vitals to the algorithm. This update is aimed to benefit web pages that offer exception user experience.
Besides CWVs, other factors that go into Google's page experience signals include the following:
Core web vitas provide insights regarding you overall SEO performance on the targeted web pages. It helps in understanding how well your website can score on Google.
The performance of your website in respect to Core Web Vitals directly impacts user experience and search engine ranking. A website that loads fast, is responsive, and has visual stability means the assurance of a seamless and frictionless user experience.
Below are some reasons why core web vitals matter:
Enhancing the core web vitals can optimize the performance of you web pages, including the load times, user experience, and search visibility.
Core Web Vitals represent a big way your application's pages rank in Google. Optimizing the performance, accessibility, best practices, and technical nature of a website enhances the ranking capability in search engines and offers good user experience.
Here are the top SEO factors that are affected by Core Web Vitals:
By paying attention to Core Web Vitals, you will make your application more user-friendly and friendlier to search engines.
LCP actually records the time it takes for users to view the main content of your webpage. It is measured in seconds, and a good LCP is 2.5 seconds or less, meaning that when people come to your site, the primary image, video, or large block of text loads nearly instantly.
An LCP score is an indication that a page loads fast, leading to a better user experience. Google prioritizes websites with a lesser loading time. Thus, a good LCP means an improvement in the ranking of your website in the search results.
LCP Score:
A poor LCP score may frustrate visitors and make them much more likely to leave your site.
CLS indicates the number of elements on the page that are shifted during loading. The score represents that. This should be less than 0.1-ideal state. A low CLS score means stability in the layout of pages; to say more precisely, it becomes easy for users to view content without any dislodgment.
A high CLS is daunting for the user. Just because of these shifts, this can interrupt the user's reading flow; it will be difficult for him to interact with the element.
Google has taken CLS into consideration when factoring in page experience signals that may affect your ranking in its search engine results.
Common CLS Score Ranges:
If your CLS score is high, it is fitting to work on fixing visual stability in your website to enhance the user experience and likely drive better results in search engine rankings.
INP is the newest Core Web Vital metric coming, replacing First Input Delay (FID) henceforth. It refers to the measure of how quickly a webpage responds to the first user interaction in milliseconds.
This is where a page is responsive; with a small INP, users will effortlessly navigate through your web pages. Google looks at INP as part of the page experience signals — areas that affect your website's ranking in their search engine.
INP Score:
Otherwise, a very high INP can be annoying to the users and, on the other hand, will be detrimental to the performance of your site. Then, it will boost up user experience and maybe even improve your SERP rankings because it will be considered as an optimized website for interactivity.
There are several tools that Google has to measure core web vitals, such as:
Let’s understand their working and utilization to track their metrics and optimize for better page experience outcomes.
PageSpeed Insights is one of the useful tools in measuring Core Web Vitals through its field as well as lab data reporting.
If your pages have little traffic, or are new, field data will be sparse. If so, a fallback average field score for the entire site is used when available.
Upon running reports, PageSpeed Insights will give you an actionable list to improve your scores within Core Web Vitals. These will most likely include optimizing images, minifying code, leveraging browser caching, and using a content delivery network (CDN).
Applying PageSpeed Insights recommendations can analyze and improve the Core Web Vitals of a website so much more effectively, thus offering a better user experience and improved ranking in search engines.
While PageSpeed Insights is an excellent tool for debugging and performance auditing, its service is not always handy to deal with. With this said, enter the Web Vitals extension courtesy of the Chrome Web Store.
This extension continuously measures Core Web Vitals metrics in real-time as you browse and gives feedback immediately on the performance of your website. Field data is loaded if available to give you an overall view of the performance of your website across different devices and networks.
This extension gives you the capability to interact with your page and understand which elements on that page degrade the INP metric by looking at the console logs.
For instance, you can click buttons and actually see precisely just how long that interaction took. You can then use that information to understand where to optimize performance in your website.
Lighthouse is an open-source web page performance auditing tool that instantly analyzes the performance of your webpage. It's also available in Chrome's DevTools, making it easily accessible for web developers.
Here are some key features of Lighthouse:
The valuable insights regarding the performance of your website will allow you to make necessary changes and utilize the Lighthouse more productively.
CrUX is a public dataset that contains real user experience data on millions of websites. It's the only way to measure field versions of all Core Web Vitals and to understand real-world performance.
Following are some key features of CrUX:
Image Source: https://developer.chrome.com/docs/crux/dashboard
While PageSpeed Insights, Lighthouse, and the add-on of Web Vitals help to measure individual performance based on a URL, CrUX helps in looking at overall performance on one's website. These allow:
While CrUX does not break down the CWV metrics by country, you can still check out performance metrics by geographical location using other tools.
Apart from this, another important tool to measure the Core Web Vitals metrics of your website is Search Console or GSC. The report highlights groups of pages that need attention from real-world data provided by the Chrome UX report.
The key features of Google Search Console are listed below:
The Search Console report pulls data from CrUX, so URLs with too little reporting data do not make it in. That means there may be pages with poor CWV metrics that are not reported.
Web-vitals.js A JavaScript library that measures Core Web Vitals in a way that's consistent with Chrome and PageSpeed Insights. Your above-mentioned Web Vitals extension uses this library, too, for reporting and logging.
You can also use web-vitals.js in conjunction with GA4 to get granularity performance reports on websites, which have millions of pages.
Here is the HTML code for G-tag integration:
<script async src="https://www.googletagmanager.com/gtag/js?id=G-MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G- MEASUREMENT_ID');
// Web Vitals integration
window.addEventListener('load', function() {
// Register custom metrics
gtag('event', 'lcp', {
'value': performance.getEntriesByType('largest-contentful-paint')[0].startTime
});
gtag('event', 'fid', {
'value': performance.getEntriesByType('first-input-delay')[0].startTime
});
gtag('event', 'cls', {
'value': performance.getEntriesByType('layout-shift')[0].value
});
});
</script>
Integrating web-vitals.js with GA4 provides great actionable insights into Core Web Vitals on your website at scale. This will help you find which improvements to do and improve the user experience.
Most third-party elements load from different locations, which makes them highly prone to causing layout shifts when they appear on the page. The less you use these elements, the less CLS.
Although some of the third-party elements, like advertisements, cannot be completely avoided, the developers can always reserve space on the webpage where such elements are going to load in advance before fetching the actual element. This would prevent any layout shifts and improve overall user experience.
Desktop and PCs have large screen sizes, tablets have medium-sized screens, and smartphones have small-sized screens; therefore, image SEO also need to be implemented. Loading a desktop-optimized image on a smartphone results in layout shifts when the browser toggles to fit its screen dimensions.
Setting height and width of images and videos in your HTML can save room for it while it's loading, preventing the shifting around of page layouts as they load in.
A very useful technique to maintain consistency in layout and avoid shifting layouts in web pages is CSS aspect ratio boxes. You can define an element with its aspect ratio and save space for it before it loads; therefore, when showing up, the page doesn't jump or reflow after its appearance.
Putting efforts to keep your website’s performance up on Google searches is what SEO all about. However, the core web vitals can affect it if you don’t optimize certain factors that come under it – Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP).
Moreover, it can hurt your rankings as well as overall page experience – further resulting in Google penalties and other SEO issues. This guide comprises of every necessary detail you need to optimize core web vitals.
RanksPro, as a comprehensive SEO tool, offers a range of features to help you analyze and optimize your website's Core Web Vitals. These features can provide you insights that are complete focused on optimizing these elements.
By effectively using RanksPro, you can gain valuable insights into your website's performance, identify potential issues related to Core Web Vitals, and act to enhance your user experience and search engine rankings.