Whether you use WordPress or not, you’re going to get sick of reading about what’s called Google Core Web Vitals, or Main Web Metrics, over the next few months.
Core Web Vitals is one of Google’s latest attempts to change the Internet. Google Core Web Vitals are a set of performance and user experience metrics that are going to become a major SEO factor over the next few months and years, and you shouldn’t ignore them.
The idea of Core Web Vitals is to offer a set of uniform criteria under which to measure the user experience when visiting a website, taking into account the usability and loading speed of all its elements.
In this guide, we will see what Google Core Web Vitals are and why they are important for WordPress users. Next, we’ll see how to analyze the performance of Core Web Vitals on your WordPress site and how to improve your scores.
What are Google Core Web Vitals?
Google Core Web Vitals are 3 specific metrics that measure the speed and user experience on your site.
Core Web Vitals are primarily concerned with how your site loads, rather than your overall load times.
For example, measure the following:
- How quickly visitors can view and interact with your content, even if your site hasn’t fully loaded
- Does your site load smoothly or does it jump and change styles as different resources load?
- Are there delays when users try to interact with your site’s content?
Core Web Vitals uses these three metrics:
- Largest Contentful Paint (LCP) – measures the load – how long it takes to load the main content of your page. Not all content just the main content that your visitor sees first. Your LCP should be under 2.5 seconds.
- First Input Delay (FID) – measures interactivity – how long it takes your page to become interactive. That is when a visitor can click on a button or other element. Your FID should be below 100 ms (this number will reflect the delay in processing the interaction).
- Cumulative Layout Shift (CLS) – measures visual stability – how much your content visually changes as it loads. For example, if your content “moves” when an ad is displayed. Your CSL should be below 0.1
Metrics are based on the Lighthouse engine.
Why should I care about Google Core Web Vitals?
I could tell you many reasons, but there are two big reasons why, as a WordPress user, you should catch up and worry about Google Core Web Vitals:
- User Experience
- SEO
The first reason is because, in Google’s opinion, and anyone with a bit of common sense, the main objective when analyzing how your website performs is the user experience.
Considering Core Web Vitals you should be able to get a better browsing experience for your visitors, avoiding usability errors such as them clicking the wrong button for a design jump (CLS), or the button still not working (FID).
The second important reason to consider Core Web Vitals is SEO. Google doesn’t give unintended advice, and when it has “proposed” these measurements with the aim of making webs more accessible and with a better user experience, it takes them into account for the candy that we all want: search engine positioning.
And yes, Core Web Vitals are a positioning factor in Google searches, more and more. Is it fair? is it logical? everyone will have their own opinion, I believe that what one is looking for is valuable content, and I am capable of supporting a badly designed web if the content is worth it, but equally, do we all appreciate a design oriented towards usability and good user experience? is it easier to consume the content in a web with good performance?
In any case, if you prefer, take the Core Web Vitals as performance and usability recommendations that, analyzed and applied with common sense, will in no way ruin your website, but will improve the experience of your visitors.
How do I measure Google Core Web Vitals?
There are 3 fundamental ways to measure Google’s Core Web Vitals
- PageSpeed Insights
- Google Search Console
- Lighthouse in your browser
Pagespeed Insights
A quick way to make an analysis of your website using the Core Web Vitals is to use the Google PageSpeed Insights tool.
Once you put the URL of the page you want to analyze you will see the metrics:
- Largest Contentful Paint (LCP)
- First Input Delay (FID) – Field data only
- Cumulative Layout Shift (CLS)
Google marks the metrics of the Core Web Vitals with a blue flag
You will only be able to view First Input Delay (FID) metrics if your site has enough data to provide field data.
If your site does not yet have much traffic, you will only see lab data, without the First Input Delay (FID) metric, which is based on user interaction and, therefore, dependent on whether your site has enough traffic to provide relevant statistical data.
Google Search Console
Another way for us to understand the performance of our site is the Main Web Metrics report that has been included in the Search Console.
This is a very useful report because, instead of simply testing a URL as we do in PageSpeed Insights, it shows problems throughout your website.
If you click on any of the mobile or desktop reports you will see a list of specific URLs that can be improved in the Core Web Vitals.
Lighthouse in your browser
Finally, you should know that you don’t need to go to external websites or resources, in the same developer console of your browser you have the Lighthouse engine, which is the one used by Google to determine the Core Web Vitals.
Just right-click anywhere on a page and click “Inspect” to open the developer console.
Once there, go to the tab called “Lighthouse” and generate a report.
You can configure which parameters you want to measure (for Core Web Vitals the “Performance” parameter is mandatory) and whether you want to measure for desktop or mobile.
The report generated is very complete, just like in PageSpeed Insights, with all the details, and you can analyze the 3 Core Web Vitals.
Now I know how to measure Core Web Vitals, but how do I improve their results with WordPress?
Well, I think you’ll have clear that to improve your Core Web Vitals, or main web metrics you have to focus on improving the performance and usability of your web, right?
Seriously, you have to understand that Google is not really so worried about how long it takes your website to load completely, which is what we’ve been used to measuring in speed tools, but it’s more focused on how long it takes your visitors to have a good browsing experience and usability of your pages, and for that you don’t always have to wait for your page to load completely.
So, while the load time optimization techniques are likely to improve some of the Core Web Vitals, you need to start focusing more on how your site loads, and not just how long it takes to load.
The right way to approach the analysis of your pages in order to analyze the Core Web Vitals would be as in these examples:
- Is your “core” content optimized to load as quickly as possible?
- In what order do your scripts and CSS load?
- Do you have scripts that block the display of your main content?
- Can you embed the critical CSS to prevent un-styled content jumps?
- Are you serving ads or other resources from external servers that may cause design jumps?
Are you aware of the shift in focus?
Unfortunately, as you will have seen from the examples, things are getting more technical, and you are not always going to simply install a plugin and go, although plugins can help, at least in part.
Once you have applied the basic principles of optimization for WordPress, it’s time to start messing around with specific adjustments to improve the Core Web Vitals metrics, which is what we’re going to look at next in this guide.
How to optimize the Largest Contentful Paint (LCP)
As we saw before, LCP measures how long it takes to load the most important and main content of the page. Whether it’s a cover image or video, or whatever you have on the first scroll of the page. It can be where your logo or image is, the title of the site and the first thing a visitor will see when they arrive at the site.
The best thing you can do to optimize this is to serve the pages as static HTML instead of dynamically generating the pages on each visit. You can do this by using cache plugins or the CloudFlare page cache.
It is also vitally important that your website is hosted in a way that is optimized to provide the best possible performance for sites created with WordPress.
But that’s not all, there are other strategies you can apply to improve your LCP times:
- Using a CDN
- Remove CSS and JavaScript that blocks the display.
- Embed critical CSS and defer the loading of non-critical CSS
- Optimize images.
- Compress the contents using Gzip or Brotli.
Optimize the First Input Delay (FID)
As we have seen, IDF measures the adaptability and interactivity of your site. It measures the time from which a user can interact with your content and generates a response.
To optimize this metric we have to apply load optimization techniques, mainly JavaScript.
Some techniques that can help are:
- Delay the loading of JavaScript.
- Compress JavaScript using Gzip or Brotli.
- Minimize JavaScript.
Optimize the Cumulative Layout Shift (CLS)
Remember, the CLS measures how much your content “jumps” while it loads.
The main problems with the CLS are usually related to:
- Images without specified dimensions.
- Ads or embedded without specified dimensions.
- Web fonts.
As far as images are concerned, WordPress correctly adjusts the dimensions of the images from the editor.
Also, in ads and embedded (videos, etc.) you can specify the dimensions, to avoid design “jumps” in your pages.
And, to avoid problems with misplaced text or poor visualization, it is often helpful to preload your own fonts or external resources.
In this metric, often the biggest difference is the choice of the theme, which shows the contents and loads the resources in a uniform and consistent way.
You know that I always recommend these themes, they are simply the best:
In short: How to optimize Core Web Vitals in just 10 steps
To make a quick list, these would be the 10 main strategies you would have to take into account to optimize the Core Web Vitals and, consequently, the performance and user experience of your website:
- A good hosting, fundamental.
- A well designed, consistent and optimized theme.
- Only the essential plugins.
- Compress all the possible content.
- Deliver static HTML through caching systems and a CDN.
- Postpone the loading of CSS and JavaScript.
- Minimize and optimize all code.
- Optimize all images and deliver new generation formats.
- Simplify site design to facilitate uniform and consistent navigation
- Preload all possible resources and eliminate unnecessary ones.
If you’ve come this far, thank you very much! There is nothing sadder than spending a lot of time preparing content and then having no one read it 🙂
I hope I have at least helped you to…
- Understand what Core Web Vitals are.
- How the way we measure the performance of our websites has changed.
- How to optimize our WordPress sites to get good results on Core Web Vitals, or core web metrics, defined by Google.
Read this post in Spanish: Google Core Web Vitals ¿qué son, cómo puedo usarlas para optimizar mi WordPress?
