A major Google update is expected to occur in 2021.
Google has announced that their page experience ranking signals, based on Core Web Vitals, will be applied globally to all mobile browsers. This upcoming update is likely to have a significant impact.
You will learn about Core Web Vitals, what they are, and how to measure and prepare for them.
Core Web Vitals
Core web vitals are a set of the three individual metrics that are wrapped up in the overall page experience:
- Largest Contentful Paint (LCP)
- Cumulative Layout Shift (CLS)
- First Input Delay (FID)
Google will measure a number of factors to determine the page experience for a user. Learn more about core web vitals and how to optimize them for a better experience in our blog post here.
Largest Contentful Paint (LCP)
The ‘Largest Contentful Paint’, or LCP for short, is a measurement of the loading speeds and performance of a web page. The optimal loading speed according to Google, should be within 2.5 seconds of when the page first starts loading.
How To Measure LCP
LCP can be measured either in the lab or out in the field.
Field tools:
- Chrome User Experience Report
- PageSpeed Insights
- Search Console (Core Web Vitals report)
- web-vitals JavaScript library
Lab tools:
LCP Score
Sites should try to have a Largest Contentful Paint of 2.5 seconds or less to provide a good user experience.
If you want to make sure that most of your users have a good experience, you should measure the 75th percentile of page loads for mobile and desktop devices.
Potential Causes of a Poor LCP Score
- Slow server response
- Render-blocking JavaScript and CSS
- Slow resource load times
- Client-side rendering
- Lazy Loading
- Animations and sliders
Improving LCP Score
- Check the response of your server. The longer the browser needs to receive content from the server, the longer it will take for the page to load for the user. You can check that by creating a blank HTML page – if it has a high initial server response time, consider upgrading your hosting platform.
- Check if you’re using WordPress plugins for Lazy Loading. WordPress plugins lazy load all the images. It shouldn’t be used for our main image. You can easily disallow it in WordPress.
- Try removing the fading effect from a main image and using one image instead of a slider may help.
- Reduce render-blocking JavaScript and CSS.
- Optimize critical rendering path.
- Optimize your images. Try reducing image sizes, using other formats or preloading the main resources.
First Input Delay (FID)
FID measures interactivity by determining the amount of time it takes for a user’s first interaction with an element on a web page to be processed. This could be something like clicking a link or tapping on an object.
How To Measure FID
A FID score can only be given to a page after a real user has interacted with it. This interaction could be something like clicking a link or button, or scrolling down the page.
Field tools:
What Can Cause Problems
The browser’s main thread is busy parsing and executing JavaScript code.
Improving FID Score
- Minimize work done in the main thread. Facebook Pixel, Facebook Chat, GTM, Hotjar: that’s a lot of JavaScript code you don’t need in the first second when the page is loading.
- Try using web workers to run JavaScript off the browser’s main thread.
- Keep an eye on videos from YouTube – display them as images, not videos (users will need to click on them to load the video). You can use plugins like WP rocket.
- If you remove the JS from initial loading there is more time to load the rest so it will also improve LCP.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) refers to the visual stability of a web page. This means that objects and elements should not move around while the page is loading. CLS is important because it measures the expected layout shifts that may occur during a web page’s lifespan.
How to Measure CLS
Field tools:
- Chrome User Experience Report
- PageSpeed Insights
- Search Console (Core Web Vitals report)
- web-vitals JavaScript library
Lab tools:
What Can Cause a Problem
If images or ads have undefined dimensions, or if new DOM elements are dynamically added to a page above existing content, this can result in the already-loaded content being pushed down.
– Source
Improving CLS Score
- Include size attributes of your images and videos,
- Use placeholder elements for newsletters or special offer banners, relater content blocks or GDPR info positioned as blocks in the main content.
- Preload the fonts or save them on your server.
Other Web Vitals
Total Blocking Time
Total Blocking Time is a lab metric for measuring load responsiveness. It measures the total amount of time when the main thread was blocked for long enough to prevent responsiveness.
The browser cannot respond to the user’s interaction because the main thread is waiting for the task to finish.
If a task takes longer than 50 milliseconds to run, it is considered a long task and the main thread is considered blocked. If the delay lasts that long, it is likely that the user will notice it.
The blocking time for each long task is calculated as the sum of the time it takes for the task to start, plus the time it takes to execute, minus any time the main thread was blocked.
Measuring TBT
The Total Blocking Time metric is more accurately measured in a lab environment, as user interaction can skew the results. Although it is possible to measure this metric in the field, it is not recommended due to the inconsistencies that user interactions can cause.
TBT is a better alternative to FID for measuring the total time that tasks take to complete, as it doesn’t require users to keep interacting with the page.
Lab tools will measure Core Web Vitals with TBT instead of FID.
First Contentfull Paint
Perceived load speed is measured by the time it takes for the first content to appear on the screen.
The metric FCP, or first contentful paint, is important because it shows how long it takes for the user to see something happening on the website- instead of how fast the speed test tools assess it. A low FCP is good because it reassures the user that the website is working.
Measuring FCP
The FCP can either be measured in a laboratory or in the field.
Field tools:
- PageSpeed Insights
- Chrome User Experience Report
- Search Console (Speed Report)
- web-vitals JavaScript library
Lab tools:
Speed index
This text explains what the speed index is. The speed index is a measure of how quickly content is visible during page load.
It evaluates the percentage of visual completion of a page at various points in time, but it is only an accurate measure if the view-port size is consistent.
Lighthouse can be used to measure your page’s speed index in comparison to the speed indices of real websites from their archive.
Measuring speed index
Time to interactive
It’s one of the key metrics used by the Web Core team to track progress on load performance. The Time to Interactive metric measures the amount of time it takes for a page to become responsive to user input after it starts loading. This is one of the key metrics that the Web Core team uses to track progress on load performance.
Measuring TTI
Although it is possible to measure TTI in the field, it is not recommended.
Use lab tools:
Importance of Core Web Vitals
Google has said multiple times that they are going to be changing their ranking system and that website owners need to be prepared. This is important because whenever Google makes any sort of official statement, it is always significant.
There are many factors that influence a website’s ranking in search engines, but this post focuses mainly on the impact of Core Web Vitals.
Google provides two ways to evaluate your Core Web Vitals. The first is through the Enhancements tab in Google Search Console. The second is through the Site Audit tool.
Mobile vs. Desktop
The main notable discoveries found when comparing desktop and mobile are:
- Almost 84% of Core Web Vitals for the URLs that rank in the US in the top 10 on the mobile SERP scored either as all “Poor” or “To improve”. Google notes that pages that receive a score of “Good” on Core Web Vitals are achieving an aspirational level of user experience, and might get a boost in the page experience component of ranking, provided other components of the page experience signal (HTTPS, mobile-friendliness, etc) are deemed OK.
- The overall share of URLs that have all metrics in the “Good” category is 16.2%for mobile and 34.7% for desktop.
- The overall share of URLs with at least one “To improve” metric and the rest are “Good” is 14.5% for mobile and 22.9% for desktop.
- The overall share of URLs with at least one “Poor” metric is 69.3% for mobile and 42.4% for desktop.
- The overall share of URLs that have all metrics in the “Poor” category is 7.8% for mobile and 1.3% for desktop.
- The most optimized URLs (according to share of URLs with all “good” metrics and median values for each metric) lie on the 2nd position for mobile and the 2nd position for desktop.
- On mobile SERPs, starting from position 3, we saw a trend of deterioration for TBT and LCP, however, CLS does decrease.
- On desktop SERPs, starting from position 2, we saw a trend of deterioration for TBT and CLS, while LCP is quite stable with small deterioration.
Core Web Vital Results for Mobile
A total of 78,434 URLs were analyzed for mobile interface problems, and none of the URLs had any problems with collecting the metrics.
The Overall Distribution of URLs for Each Metric
LCP (Largest Contentful Paint)
URLs were mostly within the ‘Good’ LCP value.
TBT (Total Blocking Time — FID)
The majority of URLs have ‘Poor’ TBT.
CLS (Cumulative Layout Shift)
The majority of URLs show a ‘Good’ CLS score.
Combinations of Metrics
We found that the majority of URLs have ‘Good’ LCP & CLS and ‘Poor’ TBT. Only 16.2% of URLs have ‘Good’ for all metrics.
Core Web Vitals Results for Desktop
A total of 78,867 URLs were analyzed for desktop interface perspective.
The overall distribution of URLs for each metric:
LCP (Largest Contentful Paint)
Most URLs had a ‘Good’ LCP value.
TBT (Total Blocking Time — FID)
TBT is better on mobile data than most other URLs.
CLS (Cumulative Layout Shift)
The majority of URLs show a ‘Good’ CLS score.
Most of the URLs (34.7%) are good according to all the metrics. 12.5% of the URLs are good according to TBT but need to improve according to both LCP and CLS.
How to Start Optimizing for Core Web Vitals
Semrush has an report called Core Web Vitals which allows you to check the state of a site’s homepage vitals. You can use Semrush’s Performance Report to find ideas for improving your pages.
To optimize a website for Core Web Vitals, it’s recommended to analyze each URL individually as it may have a different score because a page holds different layouts, content blocks, and elements. Below are the basic steps you — or your dev team — should take first:
- Scale images to the correct placement sizing
- Compress large image files
- Lazy load static content
- Apply a content delivery network to the hosting platform
- Remove any unnecessary render-blocking resources
- Serve images in next-gen formats
- Remove any unused Javascript
Benefit From Core Web Vitals
Visitors who have a better user experience will be happier and more likely to convert.
It is important to focus on improving the quality of the user experience in order to be successful in the long run.
It is beneficial for every website to be prepared for the update and improve their Core Web Vital score. Google will continue to prioritize User Experience in the coming years. Creating a website with great UX will be advantageous for businesses.
0 comments