Core Web Vitals Guide: step by step instructions to improve it

Share This Post

Do you wish your website outranks your competitors in Google Search Results? Obviously, yes! And in order to make that happen, you must consider all the Google ranking factors that contribute to making your website appear on Google’s first page. Google has recently updated its ranking algorithm, and now it incorporates the user experience of your web page as a ranking factor.


With this update in the algorithm, Google has also announced the different elements that contribute to the overall experience of a web page. One of the most significant of these various factors is the core web vitals that affect greatly on how the actual end-user looks at your website. In this guide, we take a closer and detailed look at the core web vitals, how crucial they are, how they affect your website, and how you can improve them.


So, let’s dig a little deeper and learn about Core Web Vitals and ways to improve your website’s user experience.

What is Google Lighthouse?

Google Light House
Source: Google

There are various free tools offered by Google that are specifically designed to help us make our websites better. Google Lighthouse is one of these tools that offers excellent insights to help us improve our websites. This tool creates a Lighthouse report, which allows you to scrutinize your web page’s usability, page experience, and other aspects to enhance its overall performance.

Google Lighthouse measures five categories of metrics on your webpage: best practices, accessibility, SEO, performance, and the flexibility of your web app. Measuring these metrics allows you to take a look at how your web page performs in these crucial zones and make improvements accordingly.

google cloud logo

Comply with Core Web Vitals Today

Migrate and test your site for free

What is Google Page Speed Score?

One of the key factors to improve your rankings on Google is the Page speed of your web app. Google offers a handy tool named Google Pagespeed Insights that assesses the user-end performance of your website by measuring its speed. This tool then assigns a score to your webpage based on its analysis. This score is called the Google PageSpeed score of your website and plays a critical part in your Google ranking. This score varies from 0 to 100 points, where a score of more than 85 shows that your page has good performance.

The Google PageSpeed Insight measures different factors to assign the PageSpeed score to your web page. These factors include:

  •   Time taken for loading above-the-fold: This is the time between the user requesting to open a new page till the instant that above-the-fold content is displayed on the browser.
  •   Time taken to load the full page: This is the time between the user requesting to open a new page till the page is completely displayed by the browser.

How Is Google Page Speed Score Calculated?

Source: Google

The Google PageSpeed Score is calculated by running the Lighthouse and is categorized into three areas: fast 90-100, average 50-89, and slow 0-49. This Pagespeed score is explained through the Lighthouse scoring documentation and is calculated by measuring the following metrics:

  • First Contentful Paint (FCP): It is when the opening image or text is appeared or painted.
  • First Meaningful Paint (FMP): It is when the main content of the page is displayed.
  • Speed Index (SI): It estimates how fast the contents of the web page appear.
  • First CPU Idle (FCI): It is when the primary thread is stable enough to take any input.
  • Time to Interactive (TTI): It is when the primary network and thread are silent for a minimum of 5 seconds

What are Google’s Core Web Vitals?

Google’s core web vitals are a group of specific features that are considered crucial and important by Google to determine the overall performance of a web page. In a nutshell, the Core web vitals are a subgroup of Web Vitals that are viable for all web pages in determining their usability, friendliness, and overall user experience.

The factors that make up these core web vitals may evolve with time. However, presently, there are three particular user experiences and page speed measures that make up these Core Web Vitals. These three measures include Largest Contentful paint, first input delay, and cumulative layout shift.

What Is Largest Contentful Paint (LCP)?

largest contentful paint web core vital
Source: Web Dev

Largest Contentful Paint or LCP is the first core web vital, and it can be defined as the time taken for a page to load from the perspective of the end-user. In simple words, LCP is the time between clicking on a link and seeing the majority of the webpage content displayed on the screen. LCP emphasis on the user’s ability to see and interact with your web app, which is really useful in improving the user experience of your web page.

What is First Input Delay (FID) ?

First input delay core web vital factor
Source: Web Dev

First Input Delay or FID is the second core web vital, and it can be defined as the time taken for a user to be able to interact with your web page. These interactions may include clicking on any option from the menu, navigating through the website, opening ‘accordion text’ on mobile, or inputting any data into a field. FID is considered an important ranking factor by Google as it measures how actual users interact with the website.

What is cumulative Layout Shift (CLS)?

CLS google speed factor
Source: Web Dev

Cumulative Layout Shift or CLS is the third core web vital, and it can be defined as the stability of a web page during the time it loads. Having a high CLS shows that your web page is fairly unstable when loading, which results in a poor user experience. When the content of your webpage keeps moving while loading, the user will have to re-assess the links, fields, and other content once the page loads up.

How do Google Core Web Vitals Impact on SEO?

The Google Core Web Vitals and the SEO of your website go hand-in-hand. Either it is your web app or mobile app, improving the core web vitals will greatly affect the rankings on Google as well as any other search engines. The user experience, as quantified by the core web vitals, will become a direct ranking signal for your website. Webpages with poor google’s core web vitals will become disqualified from appearing higher on the search engine results. Moreover, they will not be able to appear in the “Google top stories.”

google cloud logo

Comply with Core Web Vitals Today

Migrate and test your site for free

How to measure Google Core Web Vitals?

When the announcement about Core Web Vitals becoming a ranking factor was made, there was only one tool for measuring them, namely the Chrome UX report. However, Google is quickly giving more and more options and tools for site owners and SEOs to measure these core web vitals. Presently, there are a total of 6 different ways that can be used to measure these vitals. The Core web vitals can now be calculated using the following tools.

The Google PageSpeed Insights has also been updated, enabling it to determine the core web vitals in the lab and field sections of the Lighthouse report.

You can now create a new Core Web vitals report in Search Console, which can help you analyze web pages all across the website. This report assesses the pages that need your attention, on the basis of the real-world data generated by the Chrome UX report.

Google Lighthouse has also been recently updated, and now it includes added audits, new metrics, and a recently upgraded performance score. LCP and CLAS are two of the newly added metrics, which are the lab applications of core web vitals. The third metric added is Total Blocking Time that relates to FID, which is another Core web vitals metric.

Chrome UX Report or CrUX is a report based on the public data about actual user experience on millions of websites. This report determines the field aspect of all the core web vitals, focusing on the real-world data instead of the lab data.

Chrome DevTools has also been upgraded, and now enables website owners to find and solve any visible instability that may be causing the CLS to increase. This tool also measures the Total Blocking Time (TBT) that helps you improve the First input delay of your website.

This is a new extension that can be installed from the Chrome Web Store. It measures all the three core web vitals in real-time.

How to improve Google Core Web Vitals?

Improving the Google Core Web Vitals of your website essentially means improving the user experience of your webpages. We have rounded up few of the most effective ways of enhancing your website’s core web vitals. Read on to learn about them.

  •  Enhance your server response times
  •  Improve your resources load times
  •  Keep the images optimized
  •  Optimize the CSS
  •  Optimize JavaScript
  •  Optimize the rendering paths
  •  Minimize the effects of any third-party code.
  •  Minimize the JavaScript execution time.
  •  Reduce the main thread operations
  •  Make sure to keep the request counts to a minimum.
  • Keep the sizes of transfers low.
  • Avoid any unexpected layout shifts
  • Include size attributes on any embedded media files.
  • Use CSS aspect ratio boxes
  • Try not to insert content above the existing website content.
  • Make sure that the transitions are continuous and in-context.

How BionicWP can help

BionicWP can help you improve your Google Core Web Vitals in the most effective way possible. Our team of WordPress Engineers can help you analyze the existing user experience of your page and then help you improve it accordingly. We focus on the diagnostics, opportunities, and goals of your business website. At BionicWP, we guarantee 90+ Google Page Speed Score for all websites hosted on our platform to provide our clients with the most optimum solutions that will make their website a lot more user-friendly and accessible than ever before.

Conclusion

So, if you want your business website to be successful and rank higher on Google, then improving your page experience is now unavoidable. With the page experience becoming one of the crucial ranking factors on Google, the site speed and usability has become the center point of website owners and SEOs.


Focusing on improving the core web vitals of your website will not only help you improve the ranking of your website, but will also enhance the overall user experience of people coming to your website. Consequently, it will have positive outcomes for you and your business in the short term as well as the long term.

Video Transcript

0:03
Hello, we’re back again, Episode Three of the crazy optimizer. I’m Michael Borgelt.

0:10
I’m Abdul

0:15
we’re still getting used to doing these together, we’re actually trying to new piece of software today to, you know, see how this all works and see how it goes. All we’re going to really talk about today should be a short and sweet video is just PageSpeed scores. And usually things we see that are issues and how we can address them with different tools. So we’re gonna talk about gt metrics, Google pay, or sorry, gt metrics and the PageSpeed score is associated to that. So what I’m going to do is share my screen and then kind of jump back and forth between the results that were able to get but kind of talk about things that we that we see quite often here. And Abdul if you want to talk a little bit about, you know, the PageSpeed scores and some of the things you see that end up happening and the issues and how to address those.

1:00
Okay, so yeah, I think it’s a good good point to start out. So this is like one of our websites that we went last, we just ran an audit on this like a few minutes ago. So as you can see the base bitcoins that have been 99 and why so it’s 98, white loaded in one second. So I think with PageSpeed scores, there are quite a few best practices that people have to follow. And in my experience, I’ve seen some of the some of the there are some reoccurring problems that you see with a lot of websites, because whenever the website has high load times or a low Page Speed goes, there are chances that some problems would be reoccurring, like deafening of parsing of JavaScript, serving scaled images, specifying image dimensions, minification of files. So these are some things that are there in almost all websites, if they have not been optimized. So I think these are some areas where and the thing is that these affect the PageSpeed scores a lot as well because these are high, high high priority items, and that impact the user experience, so Google, mp3 schoolcraft, takeaways etc. So there are a few things that we can talk about, like some of the things that might be the theme that we occur and how we can fix them as well. So I think I think

2:12
the other great place to start, so I think you should probably just identify a couple of them, like you said, maybe it’s the sort of scale images of different parsing of JavaScript and kind of talk about those. Yeah,

2:21
yep. So I think in my and take three up. So in my experiences, these three like have a big impact when it comes to your PHP scores. And not just any code. It’s just a human usability as well, because the point of these courses, not just to have a high score have a high number. But the point is, because we know that these things make the users experience better. So they’re important for the user as well to have some good schools here. So I think the three ones that have a view that that are just there and most of the websites and have a big impact is definitely parsing of JavaScript, serving scaled images and optimizing of images to these three things because have like a big impact. And especially with all these images, high resolution images, people that are having some very high resolution images, dp. So these images have become a big problem these days, because then you have like, a lot of high resolution images that people upload directly to their websites. And then what happens is, now you have six empty images. And if it’s a blog, or if it’s a website with a lot of images, you have a lot of image data that has to be transferred. So and then not using the main so like the problem that comes with certain skill signing images is what happens is you have a very big image when you play if you’re a photographer and you take a pic in you take away beautiful image of, let’s say, the night sky. What happens is this image is like six MB eight, me, and it’s a huge revolution. But when you’re displaying it on a website, you don’t have that much information that you need. So you have to have it in small so what people do is they just upload the big version, and then WordPress in this example, what it does is it uses HTML or CSS or HTML It resizes the image to the size of new needs. So it’s a big image, let’s say 5000 by 5000 pixels, and then you resizing it to like 300 or 250 by 250, or something like that on HTML. So what happens is the whole image image gets loaded first, and then it gets resized. So that has a big impact if you have a lot of images on your website. So one of the reasons why people like specially come to us and say, how did you reduce the php page size? Because people think that Okay, we’ll improve the PHP code and will reduce the load time. But one of the biggest impact that they see is in the paid side FM because they see they will the page size of a five MB fix me before. And then it’s like, like on this one also for 43 kb. So one of the biggest reasons are these images, because we know that these people tend to have huge images on their website. So once you start reducing them, and just having the actual size image that you need on the website. So that’s one of the way big impact a Have you seen.

4:56
Yeah, I think that’s a good point. I think, you know, even on this image, it looks like We get it to be the right size and even get a better score there. Right? We have 100% on our search scale, right. And one thing you do see here, and this is jumping way down to another one of these items down here is using a CDN. Right? You’ll see that we, we use a CDN for serving our employers and our scripts. Do you want to talk a little bit about that as well,

5:22
we can see the CDs I think are we are really, really important, especially if you have a international audience. And even if your audience is nationwide, as well, because if you have a server that’s maybe in Dallas in Dallas data center, but you have nationwide audiences coming in from different cities, so then having a CDN in place really helps us really, really helps you in making sure that your website is fast, especially if you have a lot of images again, because nowadays, websites tend to be very image heavy. So a lot of optimization. focus is on the images side as well. And that’s why they penalize as well, Google penalizes these images that if you optimize them, so that’s why impacted PageSpeed scores as well. So having a good CDN in place, quite a few good providers nowadays, we use Amazon because of their presence because they have one of the largest presence in the cities and we work in and the countries that have customers up. So we use Amazon, definitely some other good ones like maxcdn, there’s key CDN that’s been used this backpack that we’ve also used it in the past, you have to have quite a few good providers. It’s not I think it’s just using them. It’s not it doesn’t matter a lot, especially for normal business to I don’t think they should focus on what kind of provider they want to work with. It’s just having a CDN in base a with any provider. It’s much much better than not having it.

6:42
Yeah, I, I agree. You’re you’re able to leverage their network to serve these things for them much, much quicker. So why don’t we talk a little bit about just different parsing of JavaScript? Yeah,

6:53
that that is, I think, one of the biggest years which I in my opinion has given the biggest impact Both in terms of scores in terms of load time and in terms of user experience, and it is the one that is the creepiest of all as well out of all these things, and getting that done. So that is one thing that you see in a lot of websites is not it’s not being done. And it is one of the biggest reasons people get low scores, because the main idea behind it is that nowadays, like we have websites that are very interactive, they have a lot of interaction going on, or images that have to be loaded, lots of interactions or have animations of have to go in. And all of this is powered by JavaScript. So what happens is when you load a page, especially when developers have made the websites, they focus a lot of the interactions, not on the performance side. So what happens is when the page gets loaded, all of these JavaScripts are getting loaded, while at just a starting point. So what happens with what we call it is render blocking scripts. What happens is your page cannot render because scripts are still being loaded. So the script one systems get loaded, then your pH or the remaining page gets loaded. So many times so many scripts that have load that people will have to wait for maybe three, four or five seconds before they can start interacting with the page. So one of the biggest areas impact is definitely these JavaScript. So apart from the essential JavaScript, you we take all the JavaScript, and we make sure that they don’t know, they don’t become render blocking. So they’re not blocking anything, any page or anything from on the page to render. And they are loaded as for the US weather requirements when they need it. So because of this, in this complexity of you can see our script sometimes this is tricky. So none of the Not a lot of people don’t touch that, because that is where you entering into the programming coding territory and like a lot of codebase optimizations, but I think for us, it’s very important and we do it with all of our clients, because it really helps the user experience as well and it helps us get very good scores as well. So

8:50
I think that’s, that’s an important thing to mention is when you’re going and you you know, kind of mess around with JavaScript. You You know, you can break the site that can happen, right?

9:02
Very easy. It’s very easy to do that.

9:05
And I’ve been known to do that as I was doing the optimizations. That’s why I have dual does them now. So one other thing, I think that, that I’ll kind of just go back and share the screen again, real quick is, you know, talking about, you know, enabling compression, right, a very simple thing to get done. But I’ve seen it a lot when I’ve done optimizations that that’s not enabled on a lot of server platforms, right. So maybe you talk a little bit about that how to make sure that gets done and done properly.

9:37
See, there are two ways to have compression enabling the best one is to have it server level. But you rightly said more a lot of hosting providers don’t have it enabled specially the older hosting providers are more remote on the shared hosting environment. I I think all the good providers nowadays in the industry, it’s pretty standard to have it active. But still if if you are using a old shared hosting type hosting environment, there’s a big chance that it’s not enabled. So that WordPress does allow a lot of plugins on WordPress to allow you to have it enabled site on the site level. But it’s not as as impactful as it having it on server level is we do have a lot of server level compression going on, on our servers. But I think it’s best to our own server level. If it’s not on your server, you should get a better host. You should like have enabled at least on the site level, but it won’t be as good lately, if it’s better than having not having it. Yeah,

10:33
yeah, I think that’s, it’s as simple as you know, I feel like it’s as simple as contacting your host and telling them, hey, we need this enabled, right? And they enable it and then usually you get much better scores in that space. So let’s just quickly talk about the type of plugins you like to recommend. I mean, obviously, we have our stack in our set that is you know, proprietary to our, our, our technology information, right. So, but if you if somebody I cannot sign up with us. You know we’ve had I know that we in the past I’ve used WP rocket WP fastest cache w three, see all of those plugins and it always, you know, it’s almost like even with our stack, sometimes we use additional plugins as well. So let’s just talk a little bit about like what you recommend in that space as well. So I

11:21
think you mentioned two of my favorite plugins when if they’re not with us, then I think the with the WP rocket and WP fastest cache are one of my favorite two of my favorite plugins as well. When it comes to the caching part two, they do a lot of stuff. They do a lot of caching. But again, these are mainly focused on the caching side a little bit on the optimization side. They won’t be doing the codebase optimizations, they won’t be doing testing of JavaScript, they won’t be doing that kind of stuff. Because the purpose is these these tools are made for mass use, made for people who can just install it and just one click, they run. So that’s a good thing about these two logins that they just run. You don’t have to do a lot of customization to install them. But I do have my leanings towards WP fastest cache. One reason being that it’s almost free, like most of its features are free. So it’s very easy for people to get in and install. And it’s like it works. You don’t have to you don’t have to do a lot of setting that just works out of the box. You just select a few clicks, and it’s working. But if someone wants to get a premium plugin, then definitely WP rocket is the way to go. So yeah, so I think, coming on the two points that I mentioned earlier on the image side on image optimization and serving scale site. So there’s a plugin for that as well, that we that I really like. And we also have it in our site that we encourage men, I think it’s a good way to give a shout out to short pixel guys because they’ve done a very good job with that. So that helps you with those two things, made optimize images and it has, it makes sure that you’re sending the right side with images you’re selling big images with does a lot. It takes a lot away from the site and it does it on there. So it doesn’t load your service as well. So I think that is something that You should be using it’s a paid plugin, it’s not free, but it’s something that you should have, especially if your website has a lot of images.

13:06
Yeah, and I think that’s a great point you just made there is part of optimization is taking the load off of the server, right? And that’s where, you know, you don’t want to overload a server and have so many dates on them, you know, we, we definitely say we, hey, we’re going to, you know, be a 50% load or whatever it may be for our servers. But once even after you bring on a site, sometimes you’re able to add another site because the performance has gotten that much better of that site, right. So if you like, we kind of joke around between naughty and nice sites, right? Like when they come over the sites at not acting properly, we got to fix it, get a more optimization, whatever it may be, and then it becomes a nice category and then we don’t have problems with it anymore because it’s it’s it’s performing like it should perform and not eating up resources or whatever it may be. And we’re very active and looking at at that monitoring and having having that stuff almost to the point where I know, we know, there’s issues with data centers before the data center people,

14:06
right? So happens a lot actually. Yeah, we are they monitoring

14:12
their monitoring platform really is our alerts tell us then we tell them and they’re like, Oh, yeah, we need to go look at that node or whatever it may be, and address it at that time. Is there anything else you kind of want to add? As we kind of wrap up Page Speed? Obviously, it’s a big, a big number that people definitely look at on gt metrics. Usually, when you get the 90s, high 90s to 100, you usually see desktop fall in line, Would you say that’s kind of the same or not,

14:39
I think it is becoming is definitely one mobile, it’s a little lower. But we have seen that most of the time. It’s it’s not that different if it’s a 98 on text, or it’s 95 on a phone. So it’s not that different, because the caching technology fulfills also getting a better at doing that as well. So I think just one thing I’d like to add here, that like the page load time is beautiful and This website is one second. So one of the reasons why because this site loads in under one, one second as well, sometimes we’ll get point a second sometimes will get 2.7 seconds. So one of the reason for that is that we have very good server level caching as well, we use Redis. for that. So we have a very optimized. So I think that is one point is that we don’t just rely on the websites, caching plugins are on a stack on the site site level, we have a lot of optimizations done on server level as well, that may that allow us to have these under one second, because we have a lot of sites that are under one second. No thing one of the reason for that is that is which really works. So So I think it’s having a fine tune, having all these things fine tune, making sure that they all working together because that is where the problems start happening. When you have a lot of things start because we have had clients who have to try to do performance optimizations on their own. But the problems happen when you have a lot of things moving parts in WordPress, you have the server you have, say fix Apache nginx. On the server, you have server level caching ready A gadget. And then you have plugins and optimization tool on site. The problem is making sure that they all work together. So I think that’s where that’s the main area to focus on for provider like us that we do.

16:12
Yeah. And I think that’s a big point I just wrote down and maybe that’s a another, you know, video that we create here about server stack optimization, right. Like, I know, a lot of business owners aren’t dealing with that or even agencies, but they need to understand how that works and how, you know, Apache or nginx, versus, you know, Redis, and other caching, lightspeed stuff, all those things that they lay on the server prior to even taking it over to how they interact with those things properly. And that’s where you’re at, you’re a much more of an expert in that space than I am. But I think you know, we covered a great, great deal here with just page speed and how to address a couple of plugins you can use to optimize optimize your site to get you know, higher scores and good gt metrics and Google PageSpeed scores. You know, obviously it anytime you want to talk to us and have us host your site or death. Play open to doing that and getting those scores we’re actually offering right now that we will guarantee getting you into the 90s on gt metrics and Google pay and Google Page Speed score will give you a $25 gift card to Amazon. That’s kind of how confident we are in getting these results right now. Anything else? I don’t

17:21
know, I think I think it’s good. I think we have I think we’ll be covering more technical points as we go forward. But and people should stay tuned.

17:29
Yeah, yeah, we’ll stay tuned. I think we’re gonna bring on some additional people to talk to some industry leaders as this kind of comes on and as we make more partnerships in the space, but until then, obviously, keep your sites running fast and don’t overload servers. All right. Have a good day. You Bye bye.

Let us manage your WordPress Website and attain true peace of mind.

Scale your business today.

Sign up

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore