Estimated reading time: 6 minutes
On November 10 2020, Google announced that website page experience signals in Google Search ranking would roll out in May 2021. These signals combine Core Web Vitals with existing signals like mobile-friendliness, safe-browsing, HTTPS-security, and intrusive interstitial guidelines. They measure how users perceive the experience of a web page to ensure the best website page experience.
So if you want your website to rank or continue to rank higher on Google Search engine, you got to make sure your website meets the Core Web Vitals requirements. This means website performance optimization will become part of your SEO efforts.
Don’t miss out on how to get a high performance score on PageSpeed Insights for your website.
What are Core Web Vitals?
Web Vitals are quality signals provided by Google for great website user experience. According to Google, Core Web Vitals are the subset of Web Vitals for all web pages and should be measured by all site owners. The current Core Web Vitals metrics include the following.
- Largest Contentful Paint (25% weight in PageSpeed Insights performance scores)
- First Input Delay (correlated with Total Blocking Time which weighs 25% in PageSpeed Insights performance scores)
- Cumulative Layout Shift (5% weight in PageSpeed Insights performance scores)
Largest Contentful Paint (LCP)
It measures load speed. It reports the render time of the largest image or text block visible within the viewport. Websites should strive to have LCP occur within the first 2.5 seconds of the page load.
LCP is affected by the following factors:
- Slow server response times. You can improve it by optimizing your server, using CDN, caching, serving HTML pages cache-first, and establishing third-party connections early.
- Render-blocking JavaScript and CSS. You can improve it by reducing CSS blocking time, minifying CSS, deferring non-critical CSS, inlining critical CSS, and reducing JavaScript blocking time.
- Slow resource load times. You can improve it by optimizing and compressing images, preloading important resources, compressing text files, adaptive serving, and caching assets using a service worker.
- Client-side rendering. You can improve it by minimizing critical JavaScript, using server-side rendering, and using pre-rendering.
First Input Delay (FID)
It measures load responsiveness. It is the time from the time when a user first interacts with a page say by clicking on a button to that when the browser begins processing event handlers in response to that interaction. Websites should strive to have an FID of less than 100 milliseconds.
FID can be improved by:
- Breaking up long tasks,
- Optimizing your page for interaction readiness,
- Using a web worker, and
- Reducing JavaScript execution time by deferring unused JavaScript and minimizing unused polyfills.
Cumulative Layout Shift (CLS)
It measures visual stability. It is the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. Websites should strive to have a CLS score of less than 0.1.
CLS can be improved by:
- Allocating the correct amount of space while the browser is loading the images or videos by:
- Including HTML width and height attributes on all images and videos,
- Allocating the required space with CSS aspect ratio boxes, or
- Setting CSS height: auto and width: 100% if the image is in a container.
- Adding dimensions to ads, embeds, and iframes to eliminate shifts by:
- Styling the element before the ad tag library loads,
- Allocating the slot size if ads are placed in the content flow,
- Avoiding placing ads near the top of the page because it may cause a greater layout shift than those at the middle,
- Avoiding collapsing the reserved space if there is no ad returned when the ad slot is visible by showing a placeholder,
- Reserving the largest possible size for the ad slot but it may have a blank space if a smaller ad creative fills the slot,
- Picking the most likely size for the ad slot based on past data, and
- Getting the dimensions of the embeds and allocating sufficient space for the embeds.
- Avoiding inserting new content above existing content, unless in response to a user interaction,
- Using <link rel=preload> on the key web fonts and combining <link rel=preload> and font-display: optional to avoid flash of unstyled text and invisible text,
- Using <transform> animations to animations of properties that trigger layout changes.
Why is PageSpeed Insights the Best Tool to Measure Core Web Vitals?
Besides the Chrome User Experience Report, website owners can measure Core Web Vitals using PageSpeed Insights, and Search Console’s Core Web Vitals report.
Search Console tells you the groups of pages that require attention whereas PageSpeed Insights identifies opportunities for each page to improve page experience.
PageSpeed Insights measures the performance of a page on both mobile and desktop. It tells you how your users experience the page and recommends actions on how to improve page experience. Core Web Vitals are marked with a blue ribbon in the report.
Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) are Core Web Vitals in the PageSpeed Insights report. Total Blocking Time (TBT) which correlates well with First Input Delay (FID).
Therefore, it is crucial to ensure the LCP, CLS, and TBT metrics are well within Google’s recommended thresholds as described above if you want your web pages to improve your Google Search ranking.
You may use our website speed and performance test site to compare its PageSpeed Insights report with yours.
Summary: Core Web Vitals
Google will include website page experience signals in Google Search ranking in May 2021. These signals include Core Web Vitals. Google wants to give users the best website page experience.
For this reason, if you want to improve your Google Search ranking, your website should meet the Core Web Vitals requirements. The best way to measure Core Web Vitals of your website is using PageSpeed Insights.
