Scroll to top
USA
651 N Broad St, Suite 206,
MiddleTown, New Castle,
Delaware - 19709
Canada
635 Ashprior Avenue,
Mississauga, Ontario,
Canada - L5R3N6
India
34, Shiwanshu Bunglows
Vadodara, Gujarat - 390007

Google core web vitals for WordPress websites

69 / 100

Ever wondered why your WordPress website is still not ranking high enough on Google SERP? Even after properly optimized content and with proper keyword relevance, working in and outs doing everything you can but still no results? 

Well, you might be missing out on a very important hidden key factor that impacts the SERP ranking of any website. Pagespeed score is a very crucial factor for ranking any website on the GOOGLE SERP page. Pagespeed score measures the performance of your website on various metrics( it is discussed later in this article).

core web vitals for wordpress

Now one might ask why is Pagespeed score a very crucial factor? Let us understand in simple words, just imagine a user visiting your website and needs to wait too long to view the image that is loading your site or waiting for a piece of content to load. The user will prefer switching to another website instead of waiting for your site to load. This will increase the bounce rate of your website and also decrease user engagement because of this reasons Google has set up metrics that determine the performance of your website and this page speed score influences your SERP Ranking.

Google Core web vitals or simply known as Core web vitals this provides us with metrics and the scores about our page performance. It helps us to identify the area where improvement needs to be done. This is a Google initiative to help the developers understand the issues and address them for the upliftment of their website.

What are Google core web vitals?

Core web vitals are the performance metrics set by Google that helps in measuring user experience (UX). There are various web vitals and this list is further going to expand but currently, the focus is on 3 main aspects and all these three aspects have their performance metric to quantify the evaluation :

  • Loading: Largest contentful paint(LCP) is the metric that is used for measuring the loading time of the page. LCP is the time taken by the page to be likely fully loaded. It measures the time taken by the largest image or text block to load. It is the perceived time I.e. the time taken when the user sees the content. An LCP of 2.5 seconds is generally considered a good score.
  • Visual stability: Cumulative layout shift(CLS) is the metric used for measuring the visual stability of the page. CLS is the measure of the time taken by your website to make layout shifts i.e. changes in UI because of themes and widgets that are not provoked by the user. So if your website is a static website without any layout shifts then CLS will be 0. A good score for CLS will be 0.1 seconds!
  • Interactivity: First Input Delay(FID)  is the metric used to measure the interactivity of your page. FID is measured in milliseconds. FID is the measure of time delay that occurs between any user action like clicking a link or clicking a button and the time taken by your browser to start processing that request.  So in simple words, FID helps you measure the clunkiness of your website.

How to measure Core Web vitals? 

Now after understanding the metrics that contribute to page speed score let us understand some good and easy-to-use tools for measuring Core web vitals.

  • Google Pagespeed insights
  • Google search console
  • WebPage Test

Google Pagespeed insights :

This tool ranks 1st on our list for various reasons. It is a widely used tool by many users because of its simple design and the method of providing reports. This tool is a web-based tool and doesn’t require any installation.

This tool is generally used to measure page speed but it also provides a detailed report for the metrics that form the core web vitals i.e. LCP, CLS, FID. We only need to enter the URL of the website to get a detailed performance report.

pagespeed data

Under the lab data section, we can observe the different metrics that are used to determine the Web Core vitals.

The main reason why Google pagespeed insights are first on our list is that it provides us necessary suggestions and areas of improvement on our website and also denotes the approx time that can be saved on the website by implementing the recommended changes.

pagespeed data

In this way, it provides us Opportunities for improvement on our website where we can improve to increase the pagespeed insight score of our website. This data is based on real-time browser data.

Google Search Console :

Google Search Console is the next important tool that one can consider using for improving their web core vitals. This tool is not only restricted to checking core web vitals it is a tool that is used to check the indexing of the website and optimizing the visibility of the site. Earlier Google web console was also known as webmasters but after the update with new UI and enhancements, it was released as google web console.

Google web console provides data that is based on real-world data or in other words past user experience data. The core web vitals report is available in the web enhancements section.

Google search console dashboard

Note: If you want to use google web console you must first integrate your website with a google search console for that you need to have verified ownership of your website.

Now Google search console is a google owned product so it leverages its chrome browser, the report provided by the google web console uses the data provided by chrome user experience report also know as CRUX report. It provides you all the places of suggestion, It highlights pages on the website that needs improvement, and also a very unique handy feature of the Google search console is that it provides us LCP for the whole website instead of individual pages.

Web Page test :

Web page test is an independent tool which also used to measure the performance of the site and gain insights regarding the website performance. This tool provides various customized options to monitor the performance of a website under different conditions like changing network conditions, location of the user, and even performance on the different browsers. It is a very good tool to get reports regarding user experience.

This tool also works in a similar way to google pagespeed insights it is a web-based tool and all we need to do is enter the website URL and press start. After few seconds of analyzing the website, it will provide a detailed performance report.

web vitals for wordpress wesbite

On the results page of the report, there is a special section dedicated to the Web core vitals, it provides a highlighting feature to denote the performance of the core web vitals. Orange in the above example denotes that the value is average, Red in the above example for cumulative layout shift denotes that this metric is having a very bad performance and green is used for the metric that is performing well. You can also access the details of all the requests made during the test scrolling down the results page and get minute insights from the same.

How to improve the web core vitals in a WordPress site?

Now as we have a very sound understanding of web core vitals, why are they an important factor, and how to measure them let us now understand how we can improve the three core web vital’s metrics?

How to improve the largest contentful paint(LCP) :

There may be various causes for a bad LCP score. LCP score problem needs to be addressed based on the cause of it for any particular website but generally, the reason behind this is always a particular part, or a section, or a widget, or maybe an image that is slowing down the loading of the website. 

Here are some of the solutions that you can try to improve the LCP of any page:

  • Working on a particular element: Based on the google pagespeed insights if it is found that there is a particular element that is slowing down the website then if possible try to eliminate that element. otherwise, if that element is very crucial then try to reduce the size of that element and improve loading time.
  • Lazy load plugins: Lazy load is delaying loading of any image on a page only when a user scrolls to that image and not before that, by using this technique we can avoid loading several unnecessary images that the user is not even interested in looking at. This helps in improving the LCP score of a website.
  • Serving Cache HTML pages first:   Enabling Cache loading helps to reduce the loading time of a website, a copy of the website is saved in the user’s browser and only the updated parts of the website are requested from the server such Cache programming can help to reduce the loading of the website when the same user is visiting the website repeatedly.
  • Content delivery network:  Consider using a content delivery network, a content delivery network provides the service of delivering your content from a nearby server to the user. If your web hosting doesn’t use a CDN then if the user is far away from the server it will take more time as the data needs to travel literally around the globe to reach the user.

How to improve Cumulative Layout shifts(CLS) : 

CLS deals with the shifting of layout and changes in the appearance of the website. User likes a dynamic and lively website and gets attracted to such liveliness but again CLS timing must be maintained otherwise the score will take a hit. A few tips and standard practices can help to maintain CLS within optimal limits.

  • Specifying dimensions: Using size attributes to specify dimensions of images, gif, video, or an iframe. If the dimensions of all these elements are predefined then those elements are unlikely to cause a layout shift. 
  • Avoid decorating page with pop-ups and widgets:  If possible avoid using pop-ups and widgets that disturb the alignment of the other objects it just adds to the CLS timing.
  • Using CSS transform elements:  For dynamically changing content or to give animations to the already existing content use CSS transform to animate objects. This can considerably help you save loading time and improve your CLS score.

A good CLS timing is less than 0.1 seconds.

How to improve First input delay(FID):

Optimizing FID is a crucial part of user experience,  Any delay in FID will badly affect the SERP Ranking. The optimal range for FID is less than 100 ms. 

  • Avoid using heavy javascript:  FID is the time elapsed between the user taking any action on the website and the time in which the browser can respond to the request. If there are any heavy javascript to be loaded on the website then it will block the main thread of the browser and because of this browser will not be able to respond to user’s interactions. Splitting up heavy javascript into small tasks can help in reducing the FID.
  • Avoid using third-party applications on a website:  Third-party applications used on a website can increase the FID because of several reasons. Execution of third party application involves the execution of heavy java scripts, many data-driven applications take time to load and thus keep blocking the main thread of the browser, Even due to network connectivity issues on the server of the application provider can increase the FID of a site.
  • Using browser cache: Finally storing the website on browser cache can sometimes help to increase the loading and responding time of a website, A cache stored on the browser can quicken up things and improve loading speed.

Follow WP Uber on Facebook and Instagram for more updates and tutorials about WordPress.

Author avatar
Tim Michaels
I am into WordPress and web development for the last 10 years. I use my experience to help people just starting with WordPress. Follow my blog at WP Uber for everything related to WordPress.
We use cookies to give you the best experience.
Do NOT follow this link or you will be banned from the site!