How to improve core web vitals of WordPress website - Complete Practical Guide.

Table of Contents

Google’s Core Web Vitals are a set of metrics that helps determine whether your website is responsive and fast. Having good web performance is a must for any website – it’s the way your customers will see you! If your site is slow, your customers will switch to a competitor’s website, or they’ll leave your site altogether.

Google Core Web Vitals are the performance metrics used to determine the quality of user experience. They were announced in May 2020 and are expected to become official ranking factors by 2021. Three different metrics make up the score. Each metric is measurable, and all three play a role in Google’s algorithms. These metrics will continue to evolve with time, but you can take steps to increase your site’s performance now.

A poor Core Web Vitals score means that your site’s content isn’t loading fast enough. The good news is that Google recommends optimizing your site for this metric. The tips included in the report can improve your website’s user experience, drive more leads, and increase your bottom line. There are plenty of ways to use these metrics to improve your website.

What is TBT - Total Blocking Time and how to improve it?

Total Blocking Time (TBT) is a measure of how long it takes to completely load a page. Browsers use the main thread to process input, and any task that takes more than 50ms is considered a long task. In other words, a 300ms task will have a 250-ms blocking portion. The blocking portion of each long task is added to calculate TBT. Hence, the longer the total blocking time, the more likely it is that a user is waiting for the website to be interactive.

What is TBT weightage in the overall score?

TBT has the highest weightage of 30% in the overall PageSpeed Score. Optimizing TBT is extremely important for the performance of the website.

How to interpret the TBT score?

  • 0-200 milliseconds score will be Green(fast).

  • 200 – 600 milliseconds will be orange(moderate) – For most of the WordPress based local business websites this score lies between 0 – 400 milliseconds

  • 600 – more will be red(Poor) – If your WordPress website’s score is above 600 for TBT, you really need to optimize your website.

Tips to improve Total Blocking Time - TBT of a website

The tips provided are in order of their effect they have to reduce TBT

  • Delay JS execution of all 3rd party tools like Google Analytics, FB Pixel, Google Ads etc.
  • Lazyloading images except for Above-the-fold images.
  • Removing or delaying unnecessary Javascript from the website.
  • Removing unused JS from the website.

What is LCP - Largest Contentful Paint and how to improve it?

The Largest Contentful Paint measure the speed of the main content on your site. This is the text and media your visitors see when they arrive at your website. The faster your largest contentful paint is loaded, the faster your site will load. This metric is extremely important to your ranking in Google. It can affect your user experience and make or break your conversion rates.

What is LCP weightage in the overall score?

LCP has the second-highest weightage of 25% in the overall PageSpeed Score.

Tips to improve Largest Contentful Pain (LCP) of a website

  • Do not lazy load Above-the-fold images – like hero section images and logo in the header
  • Preload Above-the-fold images and header images
  • Preload fonts.
  • Reduce render blocking CSS and JS.

What is CLS - Cumulative Layout Shift and how to improve it?

Cumulative layout shift occurs when the starting position of a page changes during a user’s session. This change in start position can have negative effects on the UX of a site. A CLS score of less than 0.25 should be considered good, while a CLS score of 0.25 and above is considered poor.

What is CLS weightage in the overall score?

CLS has the third-highest weightage of 15% in the overall PageSpeed Score. 

Tips to improve Cumulative Layout Shift (CLS) of a website

  • Add height and width attributes to images
  • Preload fonts
  • Don’t use many dynamic elements.
  • Make containers for dynamic elements with fixed height and width.

Last 3 Core web vital parameters are TTI, FCP, SI. All 3 have an equal weightage of 10% each in the overall PageSpeed Score.

What is FCP - First Contentful Paint?

The time between the time the user clicks a link and the first contentful is painted on the screen is called the First Contentful Paint.

An FCP score of 1.8 – 2.5 seconds is considered good. Anything above 2.5 seconds is bad and needs optimization.

Tips to improve First Contentful Paint (FCP) of a WordPress website

  • Reduce render blocking CSS
  • Defer render blocking JS
  • Use HTML page caching on the server.

What is TTI - Time To Interactive?

Time To Interactive or TTI measures how quickly a user can interact with your website.

You should aim for TTI to be around 5 seconds. TTI below 3.8 seconds is great and anything above 7 seconds needs optimization.

Tips to improve TTI

  • Delay 3rd party JS execution until user interaction.
  • Compress images
  • Lazyload images to load only when they come in the viewport.

What is Speed Index - SI?

The Speed Index measures how quickly a webpage loads. It takes into account a variety of factors, including the user’s browser and connection speed.

The index also measures the visual completeness of a page by measuring the distribution of colors on the visible portion of the page.

SI score of 3.4 or below is great. You should aim to keep this score below 5 seconds. SI score of above 5 seconds should be improved.

Tips to improve Speed Index (SI).

  • Remove unused JS
  • Use a CDN to speed up resource delivery.
Hi There!
close