Do you want to optimise and improve indicators Core Web Vitals For your WordPress website? If not it's either because you've already done it, or because you don't yet know how important it can be for your online business. In today's text, we'll look at what Web Vitals metrics are, why they're so important and how you can improve them.

What is Core Web Vitals

Core Web Vitals, is a Google initiative that helps website owners improve the experience of users hitting the site, as well as its quality. These signals are crucial to the success of any website no matter what its nature.

Google Core Web Vitals, are a set of page performance metrics that Google considers important to the overall user experience. They will more than likely impact your SEO rankings very soon. Take a peek at the article "Google to introduce new ranking factors" for more details.

The truth is that no one likes a slow-loading website, including and perhaps especially Google. Even if your site loads relatively quickly, it doesn't mean it meets the three most important performance indicators.

Core indicators of Web Vitals

Web Vitals indicators help you measure how quickly your website loads, becomes visible and how quickly it is ready for users using it. Three tests:

LCP - largest content area
FID - delay of the first input
CLS - system shift

The names of these tests may sound a bit technical, but what they measure is pretty easy to understand.

LCP (Largest Contentful Paint), checks how quickly the main content (e.g. image, article, description) becomes visible to the user. For example, your page may load quickly, but the top content may not appear on the visitor's screen as quickly as other page elements.

FID (First Input Delay) measures the time it takes for the user's browser to start processing event handlers in response to an interaction.

In simple language, let's assume that a user is on a page with a contact form. He fills out the form and clicks on the Send button. FID will measure how quickly your page processes this interaction. An even simpler example would be the time from when the user clicks on the link to when their browser starts processing the next sequence of events.

CLS (Cumulative Layout Shift) measures the time it takes for a page to become visually stable.

When a page starts up, some elements of the page take a little longer to load than others. During this time, the content of your page may move around on the screen. I'm sure you've seen this effect more than once. The page behaves as if its elements are jumping from one place to another.

For example, if a user is reading a paragraph on a mobile device and a video suddenly loads above the paragraph, all the content they are reading moves down. This can be really frustrating if the user is trying to perform some action that is important to them, such as adding a product to their basket, where the button moves down because of other elements loading on the page.

How do you test the Google Core Web Vitals score for your site?

The easiest way to test the Google Core Web Vitals score is to use the Google PageSpeed Insights. Simply enter the URL you want to test and click on the Analyse button. You'll get a number of results, but among them you'll also see whether your site meets or fails to meet basic web metrics (Web Vitals).

Web Vitals indicators in Google PageSpeed test results

It used to be that you could find out if a site was fast, medium fast or slow. With the introduction of Web Vitals, we have a simplified evaluation system and now either a site meets the basic indicators or it doesn't - there is nothing intermediate.

The three most important metrics are marked with a blue flag, as you can see in the screenshot above. LCP is at 1.5 seconds, FID is at 34 ms, and CLS offset is at 0.02. These results make the page as a whole meet the most important metrics for Google. It is good.

WebPage Test

This is another tool that analyses Web Vitals metrics. Go to https://www.webpagetest.orgEnter your domain, additionally you can indicate the location from where the test will be run and run it:

WebPageTest, another tool to help you check your website's quality score.

After a while you should see the results. The test is performed three times with this tool and the result looks more or less like this:

Web Vitals indicators in the WebPageTest results

Here as you can see the tested page does not meet all the conditions, the problem is only with the LCP indicator. What does it mean for the website? It means that in all probability Google analytics will confirm these results and the page will not receive a label saying that it meets the basic web metrics.

Maximum allowed values for Web Vitals indicators

It is worth knowing what maximum values are allowed for particular indicators in order to gain the status of a website meeting all the most important conditions. Well, all of them! As you have read above it is not enough to provide good results for one or two indicators. Absolutely all three must generate a level that satisfies Google. What levels?

LCP - max 2.5 seconds
FID - less than 100 milliseconds
CLS - less than 0.1

Build the site and then do the testing. I am sure that in most cases it will not meet all the above criteria. You need to do something about it.

How to track changes without continuous testing

The easiest way is to take a look from time to time at the statistics collected in Google Search Console. Here you can instantly check if your site meets the basic metrics or not. The result below is for one of the pages I recently optimised.

Analysis of important indicators directly in Google Search Console

Here's what you can see in the charts above from GSC. The first one is about mobile devices. We can see that more or less until mid-January the site met the general metrics, then it got a bit worse and admittedly it wasn't a tragedy, but the site according to Google needed to be optimised.

The second graph, on the other hand, is computers. You may be surprised that they performed worse than mobile devices, as it is usually the other way around. In this case, however, this was the case. Since the beginning of the year, the site was clearly not meeting the conditions to be considered optimal for users. When changes were made, it took a while. Remember that this does not happen overnight. First the orange colour appeared, which means something started to change for the better, and then the majority of the site's pages were positively classified as properly optimised. This is what we are aiming for.

At the moment, the Project is well prepared for Google's May announcements related to the introduction of Web Vitals metrics as another factor influencing positions in search results. It remains to wait for the effects 🙂 .

Why are Core Web Vitals indicators important?

Because they reflect how your website performs when a user is using it. Web Vitals metrics focus not only on how fast a page loads, but also how fast users can use it, which is not quite the same thing.

According to a StrangeLoop study, 1 second of delay in page load time can lead to 7% decrease in conversions, 11% less page views and 16% decrease in customer satisfaction. That's just one inconspicuous second!

A fast site but with a poor user experience will still cost you further conversions, fewer page views and low potential customer satisfaction. Improving your core Web Vitals metrics can remedy this. The question is how to do it?

Several ways to optimise Web Vitalis indicators

On the one hand, it can be said that improving them is not necessarily difficult, but on the other hand, it can prove to be an insurmountable task for a beginner. A lot depends on how you have built your site and what its design is. What plugins you use, what theme and you can go on and on...

Therefore, if you start building your own website or online shop (how to set up an online shop) you should prepare well for this task. For this purpose I have created WordPress course and others to which you are cordially invited.

Optimise your WordPress hosting

Hosting is important when it comes to your website's performance. Its speed plays a key role. This is the first element you should pay attention to, because if the server is slow (you may not even feel it), then all the rest of the activities may not bring the intended results.

Try to choose WordPress hosting, not a substitute. Yes it is a more expensive service, but this price comes from something specific and does not come out of thin air.

I invite you to take a look at the offer on WordPress hostingIf you are looking for offers outside of Germany, I recommend that you take a look at our website, where you, like us and many of our clients, are able to achieve high results. If, on the other hand, you are looking for offers beyond our borders, I recommend you SiteGround or Kinsta.

With each of these hostings, you have access to PREMIUM cache plugins that work best with that particular environment to benefit your business projects. Take advantage of these tools.

Improving LCP - Largest Contentful Paint

If your server is responding quickly, it's time to analyse the LCP indicator and improve it if the need arises.

As I mentioned earlier, LCP (Largest Contentful Paint), is the largest piece of content visible in the browser view area when a page loads. For example, on a blog it could be a featured image or article text. On a homepage it could be a banner graphic or a slider etc... The faster this content loads, the better the LCP score will be.

How do you know which content is considered the largest by Google's test? You need to scroll down on the Google PageSpeed Insights tool page to the details of the test result and expand the 'Element of largest content rendered' tab.

A simple way to identify objects that reduce the quality score for LCP

In the example above, we see that it's a headline. You may want to optimise the graphic better to improve the result in this simple way.

Improving the FID indicator

Hosting plays no small part in this indicator. A good WordPress Hosting is the foundation, while no matter what kind you run, even if you invested in your own powerful dedicated server, it probably won't be enough.
Cache plugins and code optimization plugins are the best way to go to improve FID. I recommend you the plugin WP Rocket. It has a built-in feature that allows you to optimise file delivery and much more.

Once it is installed and configured, you should experience a marked improvement in performance and not just FID, but also LCP and even CLS although in the case of the latter a lot depends on the site design and plugin configuration used.

Improving the CLS indicator

The CLS indicator score is disturbed when different elements on a web page load slowly and cause other objects on the screen to move.
You can see which elements have the biggest impact on your CLS score by expanding the "Avoid large layout shifts" tab in Google PageSpeed Insights results.

A simple way to identify objects that reduce the quality score for FID

This will show you the objects that have the most impact on changing the layout when the page loads.

To ensure that the visual layout of your site does not shift when other elements are loaded, you need to inform the browser of their dimensions (width and height). This includes, for example, images, embedded videos, advertisements and more.

WordPress automatically adds height and width attributes to images you place on a page, but it won't work in every case as you'd like it to. The WP Rocket plugin I mentioned earlier also has a feature that allows you to automatically add the height and width of an object if they are missing, which can help improve your CLS score. Check out this route.

Use CDN

This could be CloudFlare or another proven operator like BunnyNETIt offers great quality at a great price. What is more, BunnyNET can also be used as a tool for optimising images and in this field it will also work perfectly.

Full optimisation combine

Improving Web Vitals to a satisfactory level, despite what some people write is not always a simple operation. You can use a hyper-fast hosting, a top cache plugin and other add-ons responsible for optimising the areas that require it, and it still may not be enough.

When faced with such a problem you have three options:

  1. Redesign the site to use the tools to build it as optimally as possible while giving up some of the gadgets. Simplicity is king.
  2. Outsource this task to a search engine optimisation specialist, which comes at a high cost and will require further fees when you add more plugins or decide to change existing ones.
  3. Use a tool that will take care of all the key optimization elements like code optimization, graphics, fast CDN, etc. By this I mean NitroPackwhich I wrote about in an article some time ago: "NitroPack - optimising your website".

Which option should you choose? You have to decide for yourself. I don't know specifics of the site, your capabilities and budget you have for development. First try the tools you have at hand and provided by your WordPress hosting, and only then if that is not enough reach for e.g. NitroPack.

Summary

The Web Vitals indicators are the most important parameters of page quality and performance that Google will take into account from May 2021 onwards when deciding the rankings of individual pages in the search results.

It will not be the most important ranking factor, but one of many that affect results. It's hard to say definitively now how much this new factor will affect your site and all other search engine rankings. Perhaps we won't notice the changes, or perhaps they will be noticeable. If this is the case, then who will win? The one who has made the effort to ensure that Google, recognises his site as one that meets the most important web metrics, for both mobiles and computers.

Share

See also

Search Console Insights

Google Search Console Insights

"I completely don't know how to read Google Analytics data". How often I hear this 🙂 Indeed, GA is an analytical combo that you have to get used to, which

Free information on JZS news

I invite you to become a subscriber! Thousands of readers already subscribe to news from JZS.

You can unsubscribe at any time. Your address is safe here.

Featured LifeTime Offers!

JivoChat lifetime offer
JivoChat

One of the best chat rooms for websites. Mature with lots of...

Stackable lifetime
Stackable

A set of great blocks for Gutenberg plus a library of ready-made templates.

pcloud lifetime
pCloud

Cloud drive with lifetime access. Save your files and...

Leave a Reply

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