Do you want to optimize the core web vitals of your WordPress website? So the core web buyers are simply an initiative by Google that will help you as the website owner improve say your speed and usability on your website to improve user engagement and make users happy with interacting with your website.

What are web core web vitals and how does it affect your website?

Well, google core web vitals are a set of website performance metrics that google considers important for websites overall use and satisfaction. The interesting thing is the reason why so many people are jumping on learning about this is because these web vital scores will be a part of Google’s overall experience score. That can and will impact your SEO rankings and honestly.

It just goes into the fact that nobody really likes a slow loading website or even if your website works and is loading can the user interact with your website?

So there’s three main quality test that Google is going to look at that altogether. They form the core web vitals those are

  1. The largest content full paint or LCP.
  2. You’ll see that you also have the first input delay FID
  3. You’ll also have the cumulative layout shift now CLS.

LCP

So the largest content full paint so that’s when your website loads. It is like how quickly does that main content that the user came to consume, how quickly did that load for them. That could be anything as a block of text or an image or a description anything that they have come to see how quickly did that load for them.

So your website might load fast but that largest contentful paint or that block of text that they came to look for it might not be on the screen yet for them.

FID

The next one is the first input delay.
This measures just how much time it takes for the user’s browser to actually be able to begin processing whatever it is that the user did. So for instance it could be as simple as the time when the user clicks on a link to the time their browser starts processing the next sequence of events.

CLS

Then the third one is the cumulative layout shift and I know you’ve probably seen this. You’ve probably been frustrated by this before and that is it the cumulative layout shift measures the time it takes for a website to become visibly stable.

If you ever go and I have one particular website that I go to I on my phone especially I need to log into it. When I go to click on the login screen something shifts and what I’m going to click on moves and then I end up clicking on something else that I didn’t want to do.

So how do you test your core web vitals?
Well, Google has something called the page speed insights that you can go to. So you can go to page speed insights and you want the developers.google.com/speed/pagespeed/insights.

You can enter your website you can enter anyone’s website. Then you can search for it and analyze it and then google will come back and tell you how your website did with mobile. Also, tell you how your website did with desktop and the scores that you need for each in order to pass. The large contentful paint you need at least 2.5 seconds the first input delay you need less than 100 milliseconds and the cumulative layout shift you need less than 0.1 seconds.
Now the page insights allows you to look at one at each time but what you can also do to see how all of your pages are doing.

If you go to your google search console come down to core web vitals. It will tell you how all of your pages are doing it will give you poor needs improvement or good URL’s for it.

Another way you can look at your core web vitals.

If you go to your actual website and if you right-click inspect element or control shift I or command shift I You will open up this area here that gives you a little bit more information about your website and you want.
If you don’t see the tab up you can click on the double icons. You can also go to the lighthouse and from you can generate a report. This will do it you can either choose for mobile or on desktop. It’ll go through and generate the same report for your site. You want to make sure that you’re logged out to get the best performance of it.

Now that we know a little bit about what core web vitals are how do you improve it.

I’ll walk you through seven different tips that you can use to improve your core web vitals.

1. Optimize your WordPress hosting.

Your WordPress Hosting company plays a significant role in your website’s performance. It’s just the same as if you’re trying to speed up your car you’re not going to start with an old clunker that already can’t go very fast because of its limitations and its engine and things like that.

You’re going to start with something that is already really ramped up to go fast and then you’re going to add improvements on the car already.

2. Improving your largest content full paint.

So we talked about what it is it’s basically when a user first comes to your site. What’s the first thing that they’re going to interact? with that is it is it an image on your site is it a wall of text that they need to see.

The largest contentful paint element will tell you what you need to do to improve. Is it a wall of text, can you break up that wall of text with more paragraphs, is it an image can you move that image down a few paragraphs.

So it’s not the first thing that comes up when the user comes to the site or can you make a smaller image.

3. Improving your first input delay score.

The first input delay score again is when somebody does something on your site like click on a button or a link or something and the time it takes between that when they do that and when their browser starts to interact with the elements on your site.

One of the most important tips on how to improve that is by using a really good hosting provider that might have caching already as a part of it for instance when.

If you don’t have that then you can use something like WP rocket.

4. Improving cumulative layout shift.

If you’re a user and you’re going to interact with a website. Then it moves when you just when you go to interact with it and then you click on something else. The cool thing is in the results of your page you can see something like avoid large layout shifts and this is what’s telling you what is causing that the best way to make sure that the visual layout of your page doesn’t shift.

When other items load is you’ll need to tell the browser about the dimensions. Say the width and the height of elements like images or video embeds or ads like Google AdSense and more. WordPress will automaticall add the height and width attributes to an image that you add but you can still check all other media embeds to make sure that they also have height and width.

5. Eliminate render-blocking elements.

So render-blocking elements are just the elements that are slower to load. But are blocking the other elements it’s like going down the road you have somebody in the left-hand lane they’re slower than everybody else but they won’t move over. So they are the render-blocking element for you in traffic and this will affect your overall web vital score.

Sometimes you really can’t change those simply because they are being added by the third-party plugins. So it makes a little bit harder for beginners to remove them if your site is having an issue with render-blocking elements.

6. Properly size the images of your website.

Another huge cause of core web vitals for a low core web vital score are very large images. A lot of times we’ll take them off of our camera we’ll upload them straight to our website and they are massive that will slow everything down. So you want to properly size them before you even upload them now.

7. CDN

CDN is simply a content delivery network and these are usually third-party services. That allows you to serve static content on your website from multiple servers around the globe.

You can either use the free version of Cloudflare CDN or you can also upgrade to their a little bit more robust version.
You also can use something like a cloud firewall app like and this comes with a built-in CDN service. It also helps you block malicious code and spam requests for your website.

So those are two different ones that you could use. Then once you’re working through all of these scores one of the best ways to see how your website is doing in terms of traffic and where your traffic is coming from.