14 February 2022
Google Core Web Vitals: Everything You Need to Know
Google has always valued the needs of its users. They’ve always worked for a better user experience, from keyword stuffing to introducing website load speed, a ranking consideration to mobile-first ranking. Another step in that approach is Core Web Vitals.
What Are Core Web Vitals?
Google uses a combination of significant metrics to rank pages, and Core Web Vitals is one. They analyze the site’s usability, speed of loading, visual stability, and information relevancy. When users search on the internet, all Google Core Web Vitals strive to guarantee that the user receives the best and most relevant results.
Web Vitals metrics are divided into two parts: Core Web Vitals and non-Core Web Vitals.
The Core Web Vitals are:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
And the non-Core Web Vitals are:
- Total Blocking Time (TBT)
- First Contentful Paint (FCP)
- Speed Index (SI)
- Time to Interactive (TTI)
But, before we go through all of the Web Vitals, let’s talk about why they’re so important.
Why Are Core Web Vitals important?
The importance of Core Web Vitals is that they reflect how your website performs for users. It is concerned with the speed with which a website loads and how quickly visitors can connect.
According to recent research, a 1s delay in page load time can result in a 7% drop in conversions, an 11% drop in page visits, and a 16% drop in customer satisfaction.
As a result, it’s critical to speed up and improve the performance of your website. On the other hand, most performance measurement methods did not consider the quality of the user experience.
Conversions, page views, and customer satisfaction all suffer from a faster website with a bad user experience. Improving core Web Vitals can help you solve this problem.
In SEO rankings, user experience is also a significant factor. Google has previously said that starting in May 2021, page experience will be one of the ranking factors in the search algorithm update.
The Three Components of Google’s Core Web Vitals
Now, let’s take a look at each of the three Google Core Web Vitals components:
Large Contentful Paint (LCP)
Largest Contentful Paint is a core web vitals metric that measures the time it takes for a page to load. It calculates the time it takes to render the largest content element inside a user’s viewable area. It does not measure the entire page.
What is a Good LCP score?
According to Google, your site should have an LCP of 2.5 seconds or less to give the best user experience.
LCP is graded on a scale of “good” to “poor,” much like the other Core Web Vitals metrics:
- Good: Any LCP of fewer than 2.5 seconds is considered good.
- Needs Improvement: Scores between 2.5 and 4.0 seconds need to be improved.
- Poor: LCP over 4.0 seconds is poor, and as a result, your users have a terrible experience when they visit your website.
Why is Largest Contentful Paint (LCP) Important?
This element is supposed to be the first thing a person sees when they visit a page. LCP dramatically impacts the user experience since a good score will make the user think the site loads faster, but a bad score will make them frustrated. It’s also been established that this score will affect SEO rankings in the future.
What Could be Causing a Poor LCP score?
Following are the reason for the bad LCP score:
- Slow Response Time.
- Render Blocking CSS.
- Render Blocking Javascript.
- Client-side Rendering.
- Unoptimized and Uncleaned CSS and JS Files.
- Non-visible Fonts During Page Loading.
- Unoptimized Images.
- Unoptimized Resource Load Order.
How to Improve Your LCP score?
Following are the ways to improve your LCP score:
- Remove any unnecessarily third-party scripts.
- Minify your CSS.
- Set up lazy loading of images.
- Upgrade to a faster web host.
- Install a CDN.
- Cache assets.
- Remove large page elements that take more time to load.
- Follow Google’s advice for your specific URL.
First Input Delay (FID)
First Input Delay is the time it takes between when a user first interacts with a website (i.e., clicking a link, tap a button, or using a custom, JavaScript-powered control) and when the browser can start processing event handlers in response to that interaction.
What is a Good FID Score?
A reaction time of 100ms or less is perceived as instantaneous by users. This indicates that a technical SEO agency should try for a First Input Delay of fewer than 0.1 seconds for all web pages.
FID is graded on a scale of “good” to “poor,” much like the other Core Web Vitals metrics:
- Good: Any FID of fewer than 100ms is considered good.
- Needs Improvement: Scores between 100 and 300ms need to be improved.
- Poor: FID over 300ms is poor.
Why is First Input Delay (FID) Important?
If a user seeks to engage with a website and does not reply promptly, they will likely feel dissatisfied. It is critical to reduce annoyance to improve the website experience. In a future page experience SEO algorithm upgrade, this measure will directly influence SEO rank.
What Could be Causing a Poor FID Score?
The most common causes of a poor FID are:
- Long tasks where a browser must pause.
- Lengthy Javascript execution.
- Heavy Javascript bundles.
- Render-blocking Javascript.
How to Improve Your FID Score?
Following are the common ways to improve your FID score:
- Optimize the Resource Load Order.
- Optimize the Javascript Execution Time.
- Reduce the Third-party Javascript Amount.
- Defer the uncritical Javascript Assets for execution.
- Improve the server response time.
- Decrease the asset request count and size.
- Use Server-side Rendering along with Server-side Cache.
- Split the code and use critical CSS for the above-the-fold section of the web page.
- Minimize the Browser’s Main Thread Processing Work.
- Use Web-workers along with Service-worker.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift refers to the sudden movement of webpage components while the page is still downloading. Fonts, images, videos, contact forms, buttons, and other types of content are examples of elements that induce shift.
You should keep CLS to a minimum because shifting pages might lead to a bad user experience.
What is a Good CLS Score?
CLS scores start at 0 for totally static web pages and grow as the layout of the page changes.
Your layout is more stable if you have a lower score. Google’s performance tools utilize the following official CLS scores:
- Good: Any CLS below 0.1 is considered good.
- Needs Improvement: Scores between 0.1 and 0.25 need to be improved.
- Poor: CLS above 0.25 is poor.
Why is Cumulative Layout Shift (CLS) Important?
When content moves unexpectedly, it’s one of the most frustrating experiences for end-users. This might lead a user to lose focus of where they are in the processor to click or press on the wrong object. It’s very frustrating and harmful to the user experience, prompting Google to consider it a ranking factor.
What Could be Causing a Poor CLS Score?
According to Google, the following are the reasons why Cumulative Layout Shift happens:
- Images with no dimensions.
- Dynamically inserted content.
- Web fonts cause FOIT/FOUT.
- Ads, embeds, and iframes with no dimensions.
- Before changing the DOM, actions await a network response.
How to Improve Your CLS Score?
Following are the ways to improve your CLS score:
- Avoid pop-ups or banners that cause the screen layout to shift when the site is first loading.
- Set size attribute dimensions for any media (images, GIFs, etc.), so the user’s browser understands how much space they’ll take up and doesn’t modify the dimensions unexpectedly.
- Put all ads in reserved spaces, so they don’t appear suddenly, causing content to shift.
- Follow Google’s advice for your specific URL (See how to measure Core Web Vitals below).
Other Web Vitals
While Core Web Vitals are becoming ranking signals, additional web vitals should not overlook. Taking care of these metrics is the same as caring for the User Experience.
Other Web Vitals:
Total Blocking Time (TBT)
Total Blocking Time (TBT) is the length of time that Long Tasks (all tasks running more than 50ms) block the main thread and decrease page usability. It displays how static a page is before it becomes completely interactive.
What is a Good TBT Score?
In an average device and network connection, a decent Total Blocking Time is less than 300 milliseconds. Lighthouse calculates Total Blocking Time by adding the total blocking impact of the Long Tasks and comparing it to the TBT Score of the top 10.000 websites. This measurement includes 404 pages and assets.
Total Blocking Time classifying thresholds:
- Good: Any TBT below 300ms is considered good.
- Needs Improvement: Scores between 300 and 600ms need to be improved.
- Poor: TBT above 600ms is poor.
What Could be Causing a Poor TBT Score?
Following are the reason for the poor TBT score:
- A messy JavaScript code and unused JS.
- A high JS Execution time.
- A high main thread work.
- Heavy use of a third-party code.
How to Improve Your TBT Score?
Following are the ways to improve TBT score:
- Minify CSS and JS.
- Reduce Javascript execution time.
- Remove unused Javascript.
- Reduce the impact of third-party code.
- Eliminate render-blocking resources.
- Enable text compression.
- Minimize main thread work.
First Contentful Paint (FCP)
When a website starts loading, the first content shown on the screen is measured as First Contentful Paint (FCP).
It’s a user-centric statistic since it reveals how a user views a website’s performance (not how speed test tools assess it). FCP should be as low as possible. A quick FCP tells the user that something is going on.
What is a good FCP score?
According to Google’s documentation on calculating metric ratings, they assess FCP times in three categories—good, needs improvement, and poor—and describe how they obtain the percentile scoring utilized by their Lighthouse tool.
- Good: Any FCP between 0 and 1.8s is considered good.
- Needs Improvement: Scores between 1.8 and 3s need to be improved.
- Poor: FCP above 3s is poor.
What Could be Causing a Poor FCP Score?
The reasons for the low FCP score are as follows:
- Render Blocking Scripts And External Stylesheet.
- JavaScript Files.
- Large Text-Based Assets.
How to Improve Your FCP Score?
The following are some suggestions for increasing your FCP score:
- Eliminate render-blocking scripts and stylesheets.
- Remove unused CSS and JavaScript.
- Multiple page redirection should be avoided.
- Avoid an excessive DOM size.
- Avoid showing invisible text.
- Reduce resource counts and transfer sizes.
Speed Index (SI)
The Speed Index (SI) is a page load performance statistic that indicates how soon a page’s contents are visible. It’s the average amount of time it takes for visible sections of the page to load. The lower the score, expressed in milliseconds and depends on the viewport’s size, the better.
What is a Good SI Score?
According to Lighthouse, a decent Speed Index Score must be less than 4.3 seconds. Between 4.4 and 5.8 seconds is the average Speed Index Score. A speed index of more than 5.8 seconds regards as poor. Lighthouse calculated all of the data on this page using HTTP Archive Standards. The good, medium and bad Speed Index Score criteria for Lighthouse will change if the HTTP Archive data changes.
- Good: SI fewer than 4.3s considered good.
- Needs Improvement: Any scores between 4.4 and 5.8s need to be improved.
- Poor: Score above 5.8s is poor.
What Could be Causing a Poor SI Score?
The following are some of the reasons for a low SI score:
- JavaScript code and unused JS.
- JavaScript Execution time.
- Main thread work.
- Third-party code.
How to Improve Your SI Score?
Here are some suggestions for increasing your SI score:
- Remove unused JS.
- Reduce JavaScript execution time.
- Eliminate render-blocking resources.
- Reduce the impact of third-party code.
- Minimize main-thread work.
- Preload key requests.
- Avoid chaining critical requests.
- Keep request counts low and transfer sizes small.
- Reduce TTFB and server response times.
- Make sure you use the images in the files to be uploaded are in the correct format.
Time To Interactive (TTI)
TTI is a performance statistic that evaluates a page’s load responsiveness and helps analyze situations when a website appears to be interactive but isn’t.
TTI identifies whether the page is reliably ready for user interaction following the First Contentful Paint (FCP).
What is a Good TTI Score?
To provide a decent user experience, you should always aim for a Time to Interactive of less than 3.8 seconds. Your TTI score is based on comparing your page’s TTI time to the TTI timings of high-ranking sites, whether viewed on mobile or desktop.
This is how Lighthouse interprets the TTI score:
- Good: TTI fewer than 3.8s considered good.
- Needs Improvement: Any scores between 3.9 and 7.3s need to be improved.
- Poor: Score above 7.3s is poor.
What Could be Causing a Poor TTI Score?
Some of the causes for a poor TTI score are as follows:
- JavaScript Execution time.
- JavaScript code and unused JS.
- Third-party code.
- Main thread work.
How to Improve Your TTI Score?
Here are some ways to help you to improve your TTI score:
- Minify JavaScript files.
- Reduce JavaScript execution time with fewer plugins.
- Optimize images and videos.
- Reduce the impact of third-party code.
- Minimize main thread work.
- Keep server request counts low and transfer sizes small.
- Preload key requests.
How to Measure Core Web Vitals?
Google has made it easy for SEOs and website owners to track Core Web Vitals using various tools.
Core Web Vitals were released only a few weeks ago, and they could only be assessed using the Chrome UX report at the time.
With the news that Core Web Vitals would be included in Google’s ranking algorithm, the firm is enhancing many of its existing tools with measurement capabilities.
Google Core Web Vitals can now be measured using:
Google PageSpeed Insights
When it comes to measuring and assessing Core Web Vitals, Google PageSpeed Insights (PSI) is one of the essential SEO tools. PSI uses Lighthouse and Chrome UX Report to give data from both the lab and the field on mobile and desktop devices. PageSpeed Insights gives detailed advice on how to enhance the site’s speed in addition to providing an overview of field data from real-world users (CrUX).
Google Search Console
Google Search Console can help you examine and discover groupings of pages that may need to be improved or fixed. GSC is based on data from the Chrome UX Report, which is based on real-world field research. The URLs are categorized by their metric type and status (poor, needs improvement, good). The GSC Core Web Vitals report will show you how well all (or most) of your web pages perform in terms of Core Web Vitals.
Google Lighthouse
Google Lighthouse is the most popular tool for testing your website in a lab environment. It lets you audit and evaluates your website in four areas: performance, accessibility, best practices, and SEO. Lighthouse tracks LCP, CLS, TTI, and TBT, among other lab user experience parameters. The tool will provide you with detailed advice on enhancing your site, similar to PSI (primarily based on Lighthouse). Make sure to check out the Lighthouse Scoring Calculator when you’re testing your site with Lighthouse.
Chrome DevTools
Chrome DevTools is a developer tool that comes pre-installed with the Chrome browser. To access it, right-click and select “Inspect,” and Chrome DevTools will appear. You may examine some of the Core Web Vitals indicators using the Chome DevTools Performance panel. Keep an eye on Web Vitals. The part on experience will assist you in analyzing layout adjustments.
Chrome UX Report
Chrome UX Report is a public dataset that provides real-world user experience data from millions of websites. It is not a tool in and of itself. The Chrome User Experience Report data originates from Chrome users who have opted in; thus, it monitors field data for all Core Web Vitals indicators. You can use the CrUX API to measure the field versions of Core Web Vitals in your app if you’re a developer.
GTmetrix
GTmetrix is another important lab tool for assessing your site’s speed and performance. The tool is based on Google Lighthouse data. It tracks parameters like Largest Contentful Paint, Total Blocking Time, Cumulative Layout Shift, and more.
Web Vitals (Chrome Extension)
Web Vitals is a Google Chrome Extension that allows you to monitor Core Web Vitals information in real-time on your desktop. Developers who wish to evaluate and troubleshoot the changes made may find the Web Vitals Chrome Extension helpful. Go to the website and click on the extension to examine the data.
Will Core Web Vitals Affect my Rankings?
Core Web Vitals will become ranking criteria for Google in June 2021; thus, these indicators may influence your SEO performance.
The new Page experience signals will include HTTPS security, safe browsing, mobile-friendliness, and intrusive interstitial guidelines.
Google Core Web Vitals impacts organic results on both mobile and desktop, as well as whether or not your site appears in Top Stories. Previously, if you wanted to appear in Top Stories, you had to utilize AMP. When Google implements the update, this will no longer be the case, but your site will need to satisfy specific minimum Core Web Vitals scores to appear in Top Stories.
Furthermore, it appears that all Core Web Vitals indicators must be satisfied to enhance organic ranking. The Core Web Vitals score for indexed pages may also be necessary.
In summary, boosting your Google Core Web Vital scores is now required if you care about your WordPress SEO performance.
What is a Good Page Speed Score?
There is no formal cut-off point. One of the most popular guidelines is that your website should load in under two seconds. This is most likely due to Google research that found that 47% of mobile users abandon a website that takes longer than two seconds to load.
Although this advice is most likely based on the Speed Index measure, I don’t believe Google has ever stated a specific metric when providing a page speed score. Typically, Google officials’ advice is general, such as “make sites quick for users” or “make sites as fast as feasible.”
Why is Improving Page Speed So Important?
User experience is influenced by page speed, and it may make or break your website. A faster page performance improves the user experience, increasing page visits conversions and lowering bounce rates. Let’s look at the advantages of growing page speed in greater depth.
1. Boost Website Speed to Improve User Experience
According to our study, 47% of customers want a website to load in under two seconds.
After that, every second degrades the user experience. Viewers don’t like to wait for your page to load; therefore, they’ll typically click away to discover a company that offers a better user experience.
2. Increase the Number of Page Views
You may have observed that several of the indicators I discussed before, such as LCP and CLS, impact page ranking on Google. Google adds data evaluating load times to offer high-quality search results for users. As a result, the faster your page loads, the higher your Google rating.
3. Boost Conversions
Users will be happy and more likely to become clients if your sites load fast. HubSpot discovered that cutting page load time by three to seventeen percent boosted conversions in 12 case studies.
The math was done. A one-second page delay may cost you $2.5 million per year if your e-commerce site generates $10,000 daily.
4. Reduced Bounce Rate
According to Think with Google, increasing your website load time from one second to three seconds raises your bounce rate by 32%. If it is increased from one to five seconds, the chance increases by 90%.
A few seconds might mean the difference between retaining and converting users or losing them to competitors.
To know more, see our detailed guide on how to reduce bounce rate in WordPress.
Ways to Boost Page Speed
You can try the following actions to increase page speed:
1. Limit the Number of Redirects
The longer it takes the server to locate and load the correct page, the more redirects you have. Remove any unneeded redirects you can.
2. Include the Slash at the End
Remember to add the trailing slash at the end of the URL. You’re informing the server that there are no file folders to go through and that this page is the ultimate destination.
As a result, your URL should be www.pickupwp.com/blog/ rather than www.pickupwp.com/blog.
It will reduce your load time by a fraction of a second, and every millisecond matters.
3. Images Should be Compressed and Optimized.
Large image files or a large number of photos can significantly increase the time it takes for your website to load. Make sure all of your photos are correctly scaled and compressed.
Images should also be preserved in the correct format. The most readily compressed formats are PNG and JPEG, which are supported by all browsers.
Compressing a picture decreases the file size, which is measured in kilobytes and megabytes. High-quality photos can be reduced by 60 percent to 80 percent on average. You should never use an image that is more than 1MB in size.
The size of the image on the page can be changed by resizing it. Smaller images should be 700 pixels or less, while larger images should take up the whole width of your site (or around 1900 pixels). You can always reduce the size, but increasing the size without pixelating the image is quite challenging.
There are several image optimization plugins available that you can use for image optimization and compression.
4. Make Use of a Content Delivery Network (CDN)
With a CDN, your site is hosted locally by a network of servers, which reduces page load times. A person in Dublin visiting a website located in Los Angeles, for example, would not need to ping the origin server but rather a server closer to home in Ireland.
It decreases the number of requests to the origin server by distributing the content over several servers, slowing download times.
5. Plugins and Other Page Elements Should be kept to a Minimum.
Plugins, JavaScript, and other extra elements increase the time it takes for a page to load. Only include the components that are required for your page.
Some plugins can help with site performance, of course. Page performance may be improved by using plugins that automatically resize images, minify code, and defer JavaScript loading. It would be best to decide whether the extra features provided by these plugins are worth the sacrifice in page performance.
6. Minify Your HTML or CSS
When you minify your website’s code, you remove all of the spaces, notes, and additional markup developers use to make their code more legible and more straightforward to work with later. When a server tries to load a website, it doesn’t require all that to understand HTML, JavaScript, or CSS, and it might get in the way.
7. Make Use of Caching
When a site caches, the server stores copies of its pages so that it doesn’t have to reload the site every time. You may save time by using caching.
You can use WP Rocket, the best caching plugin for WordPress.
8. Carefully select Your Web Hosting Provider.
You get what you pay for when it comes to website hosting. Cheaper plans may not be able to manage as much traffic, resulting in slower website loading times.
There are four types of web hosting providers from which to choose:
- Shared Hosting: Shared hosting can host multiple small sites on a single server. Although shared hosting is inexpensive, increasing traffic to other sites hosted on the same server might cause yours to slow down.
- VPS Hosting: A virtual private server, or VPS, runs many sites, but each has its own virtual “place.” Because it is virtual, it provides you with extra resources, potentially lowering the likelihood of traffic-related site speed difficulties.
- Dedicated Server Hosting: A single server hosts only one website. Although more expensive, it helps to reduce or eliminate the possibility of site speed loss due to traffic surges from other sites.
- Cloud Hosting: Websites are hosted on a virtual and physical servers network, which provide increased resources and flexibility. A virtual host will scale up to increase an unexpected increase in traffic.
Consider the size of your site and your budget when selecting a hosting service for your website.
Conclusion
Core Web Vitals are vital for WordPress SEO since they may help you gain more recognition for your website while keeping it organized and clean.
These metrics can increase your website’s visibility and ranking in browsers and provide a good browsing experience for your visitors.
It is important to begin optimizing your website as soon as possible to avoid receiving negative feedback or ranking lower in search results.
We hope this article helps you to learn about Google Core Web Vitals and how to optimize them. For your next steps, you’ll find these resources helpful:
