Google Core Web Vitals For WordPress: How To Measure & Optimize?

To clean your house, you will keep all the things that are creating a mess in the place one by one so that it looks neat and clean, with just a glass or your towel on the sofa won’t make it look clean. Similarly, if you are optimizing your website speed, you need to do all the small changes you need so that your site runs smoothly and doesn’t load slowly.

As per a survey, a mobile user waits for 4 to 8 seconds for a page to load, and if in that meantime the page doesn’t load, they jump to another site. So you need your site to load as quickly as possible. In May 2020 Google announced that they will introduce a ranking factor that will tell you about overall page experience. It will be determined, by page loading speed, is the site mobile-friendly or not? is it visually stable? etc these ranking signals are a set of metrics called Core Web Vitals. And all of this is done to check if your website is providing the proper experience to the users.

What Are Google Core Web Vitals?

Core Web Vitals are a subset of Web Vitals which Google considered very important in a webpage for the overall user experience. The Core Web Vitals helps you to measure the loading speed, your website is visible, and is user interactive, and for that Google does three tests.

Largest Contentful Painting (LCP)

Largest Contentful Painting A.k.a LCP measures how long it took for the largest content to load on your Website. Your site may load faster, but the large content that can be text or a photo may load slower, and that affects your site negatively.

Your site loads in stages first, the name of your company loads, and then the Largest Contentful Painting so that the user gets the crux of your site/ blog, which will reduce the bounce rate. It is said that your site/ blog LCP should load in 2.5 seconds for a better user experience. If your site takes more time than this it will be considered poor and needs improvement.

First Input Delay (FID)

First Input Delay measures the time in milliseconds. FID is determined when the user interacts with your site and how much time your site took to process the interaction.

Let’s understand it by an example, after reading your blog, the user commented on it. FID will measure how much time your site took to process that interaction.

An ideal time for FID is 100 milliseconds. if it is higher, you need to improve your site/ blog.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift mainly focuses on the visual stability of your page. Whenever you load the page and your content starts to appear, the CTA and buttons may shift, it occurs due to the size of the image, animation, etc, and this can annoy the user. Therefore, it is also known as the Annoyance metric.

As per Google, the ideal time of the layout shift is 1 second anything more than that is poor, and it needs improvement.

How To Find Out Your Core Web Vital Score?

If you want to find out your Core Web Vital score, you can do it with the help of the Page Speed Insight tool. All you need to do is enter the URL you want to test, and after that, click on the analyze button. You will be able to see the core vitals results under the ‘Field Data’ section.

Also, Page Speed Insights makes it easier for you. If your page passes the Core web Vital test, you will see a pop-up at the top saying this page passes the Core Web Vital Assessment.

Here I am writing down what score you need to pass the test.

• Largest Contentful Painting (LCP): Less than 2.5 seconds or max 2.5 seconds.
• First Input Delay (FID): 100 milliseconds or less than that.
• Cumulative Layout Shift (CLS): it should be less than 0.1 seconds.

Do Core Web Vitals Affect SEO Ranking?

Let me show you what Google has to say about this when they released a video of Web Vitals and SEO.

“In general, we (Google) prioritize pages with the best information overall even if some aspects of page experience are sub-par. A good page experience doesn’t override having great, relevant content.”

Quality is the king and will remain the king. The page with quality content will still top the list, but user experience will be taken into consideration so with quality content if your page is properly optimized it will for sure be there in the top 10 blue links you are aiming for in SERPs.

Some Tools To Check Your Core Web Vitals

1. Google Lighthouse
2. Google Pagespeed Insights Tool
3. Web Vitals Extension

How To Improve Your Core Web Vitals?

Optimize Your WordPress Hosting:

A hosting provider plays a very important role in how your Website is performing. They optimize your server for WordPress, and I highly recommend WPEngine because it works smoothly without giving any kind of trouble. WPEngine is also partnered with Google, AWS, HubSpot, and Cloudflare to optimize the technology, especially for WordPress.

Static content on your page will automatically be cached by WPEngine. So, it doesn’t matter if your site has ten thousand views in a day or a min it will keep your site fast for all your users.

Optimize Browser Caching:

First, let’s understand what browser caching is. A browser stores certain items for a certain amount of time. Items like CSS files, images, etc. so, due to browser caching the items will load faster than the last time. If you want to understand it in a more simplified way. Think about the time you bid farewell to your college, now think about it again after a few days, this time all the scenarios came more quickly to your mind than the last time. Because a few days ago, you already thought about it, so the memory is pretty clear right now.

Now here’s how you will leverage browser caching. For leveraging you need to cache different types of files.

• Image file: PNG, JPEG, JPG
• Static resources: CSS file & javascript
• Media files: animations, videos, PDFs

Now I’ll list down few ways to optimize the browser caching

• Using .htaccess
• Plugins

You can use plugins like W3 Total Cache, Hyper Cache, Comet Cache.

Use CDN Network For A Global Audience:

CDN A.k.a Content Delivery Network is a third-party app. It delivers static content of your website all around the globe. Because it delivers the content from multiple servers all at once a user can download the image, video, or CSS files from their nearest server possible. So, use a better CDN network that doesn’t put a load on your website, and your website can run smoothly.

Optimize Image:

Yeah, yeah, we know we said this hundreds of times, but we will keep saying this until you optimize that one large image on your page or landing pages, which is affecting your page loading time. You can optimize that image in multiple ways.

You can use Tiny PNG or Tiny JPG as per your format. If your format is landscape, use JPG, and if it’s graphic, use PNG.

You can also Adopt a new way of image optimization, which was introduced in the market some time ago that is the WebP image format. WebP image format provides superior lossy image compression to your site/page. It can compress up to 30% more than JPG and PNG.

Speed Up Your Server:

Here is what Google has to say about speeding up your server.

“The longer it takes a browser to receive content from the server, the longer it takes to render anything on the screen. A faster server response time directly improves every single page-load metric, including LCP.”

Optimizing a site is very necessary. Because a complex site deals with many requests all at once, like handling requests, loading files, serving scripts, and many more, it is necessary that your site performs all the tasks with ease without any problem like slowly loading the page, lags, etc.

You can optimize your server in different ways. You can upgrade your hosting plan and go for the one which offers you the best service. You need to use the latest version of PHP. Also, upgrade the hardware if it lacks something, and you find it necessary to upgrade them.

Also, last but not least, check your plugin. Because your plugin comes with extra weight, which can impact your page loading time.

Parsing JavaScript:

First, let’s understand what parsing JavaScript means. When your site is loading, the browser has to render a JS script, and the script has to be processed so that your page loads properly. Your site will tell the user browser to stop downloading parse JavaScript until the main content of your website is loaded. But the user can already see and interact with your page. And because of that, the waiting time to download the parse JavaScript won’t make a negative impact.

There are three methods on how to parse JavaScript in WordPress.

1. Plugin: There are many plugins that can parse JavaScript for you.
2. Varvy method: With the help of Varvy you can manually edit your site code and use the code snippet.
3. php file: To automatically differ the JavaScript you can add Functions.php to your child themes.

Lazy Loading:

You should implement lazy loading. Therefore, when the user is on a specific screen, the content of that specific screen is loaded, and when the user goes to the other screen, then and then only, that page content is loaded. And because of that, your site LCP score will be perfect, and you don’t need to optimize it.

Optimize LCP:

You already know what LCP is and how to optimize LCP.

• Use correct dimensions.
• Use third-party video hosting services.

Optimize FID:

You can optimize FID through.

• Minifying JavaScript.
• Remove unused tracking script on your site through Google Tag Manager.

Optimize CLP:

CLP is very annoying so you need to optimize it otherwise your site’s bounce rates will increase. Listing down a few ways to optimize CLP.

• All assets should have the correct dimension.
• Reduce the number of fonts.
• Use a pre-defined area for showing ads.

Final Thoughts:

Although improving Core Web Vitals is not going to put your site in the first position, every small thing counts. Like we say “A single drop of water is also counted as a contribution in building an ocean”

About the Author:

Rids has been working with WPWebElite since Jan 2019 as Content Manager. He is a passionate content writer and has a love for WordPress so he spends a significant amount of time in writing about it.

Find Me On Facebook