If you’re a WordPress user, you’re going to start hearing the term Google Core Web Vitals a lot in the coming months and years.
Core Web Vitals are Google’s latest attempt to spearhead change on the Internet. They’re a set of performance and user experience metrics that will become an SEO ranking factor next year, so you shouldn’t just ignore them.
In this post, we’ll introduce you to Google Core Web Vitals and why they matter for WordPress users. Then, we’ll show you how to analyze your WordPress site’s Core Web Vitals performance and improve its scores.
What Are Google Core Web Vitals?
Google Core Web Vitals are three specific metrics that relate to your site’s performance and user experience.
Core Web Vitals are mostly concerned with how your website loads, not your overall page load times. For example:
- How quickly can visitors see and interact with your main content? (Even if the rest of your site isn’t finished loading)
- Does your site load smoothly or does content “jump around” and change styles as new resources are loaded?
- Are there input delays when users try to interact with your site?
Here are the three metrics that currently comprise Core Web Vitals:
- Largest Contentful Paint (LCP) – measures loading – how long it takes your page’s main content to load. Not your entire content – just the main content that visitors see first. Your LCP should be under 2.5 seconds.
- First Input Delay (FID) – measures interactivity – how long it takes for your page to become interactive. That is, when a visitor clicks a button or another element. Your FID should be under 100 ms (this number refers to the delay in processing the event).
- Cumulative Layout Shift (CLS) – measures visual stability – how much your content visually shifts as it loads. For example, if your content “jumps down” when a new ad loads. Your CLS should be under 0.1.
Click the links above to learn much more about each specific metric and see some examples.
In Google’s words, these three metrics are:
A set of real-world, user-centered metrics that quantify key aspects of the user experience. They measure dimensions of web usability such as load time, interactivity, and the stability of content as it loads (so you don’t accidentally tap that button when it shifts under your finger – how annoying!)
Why Should WordPress Users Care About Core Web Vitals?
There are two big reasons why WordPress users should care about Google Core Web Vitals:
- User experience
- Search engine optimization (SEO)
The first reason to care about Core Web Vitals is that they are, at least in Google’s estimation, a very good metric for your site’s user experience when it comes to performance.
Put simply, optimizing your Core Web Vitals should make your visitors have a better experience and eliminate frustrations, such as them accidentally clicking the wrong button because your layout shifted.
The second big reason to care about Core Web Vitals is SEO. In order to push webmasters to optimize Core Web Vitals, Google is using one of the biggest carrots (and sticks) that it has – search rankings.
While Core Web Vitals are not yet a ranking signal when I’m writing this post in July 2020, Google is planning to start using them as a ranking factor sometime in 2021.
So – you have some time to prepare (if you’re still reading this in 2020) – but eventually, your WordPress site’s rankings could be negatively affected if your site doesn’t perform well (or at least adequately) in Core Web Vitals.
How to Analyze Your Site’s Core Web Vitals Performance
There are two ways that you can compare your site against the Core Web Vitals metrics:
- PageSpeed Insights
- Google Search Console
PageSpeed Insights
If you want to quickly test a single page against Core Web Vitals, you can use Google’s PageSpeed Insights test tool.
Once you plug in your URL, you’ll see metrics for:
- Largest Contentful Paint
- Cumulative Layout Shift
Google marks the Core Web Vitals metrics with a blue flag.
You’ll only be able to see First Input Delay if your site has enough real-world data to populate the Origin Summary or Field Data boxes. If your site doesn’t have much traffic, it might not have enough field data to display this report. You’ll see field data metrics for the other Core Web Vitals:
Google will also give you a basic summary of whether or not your site passed Core Web Vitals.
Google Search Console
To help you understand how your site currently performs, Google has also added a new Core Web Vitals report to Search Console.
If you haven’t set up Search Console yet, check out our guide on how to add a WordPress site to Google Search Console.
This report is useful because, rather than just testing a single URL like PageSpeed Insights, it will find problems across your entire website.
If you click into either the Mobile or Desktop reports, you can view more information as well as a list of specific URLs that are failing to match Core Web Vitals:
How to Improve WordPress Core Web Vitals Performance
If you want to improve your Google Core Web Vitals, you’ll generally want to focus on improving your site’s performance.
However, it’s important to understand that Google isn’t just looking at the number you get when you plug your site into a speed test tool. While different tools use different speed test measures, most speed test tools are using some variation of a “fully loaded” metric.
Remember – Google isn’t so much concerned with how long it takes your site to fully load. Instead, they’re more focused on how long it takes visitors to start having a good experience (which might not always mean your site is fully loaded).
So while optimizing your page load times will probably also have a beneficial effect on your Core Web Vitals, you really need to be focusing more on how your site loads, not just how long it takes for your site to load.
For example:
- Is your “main” content optimized to load as quickly as possible?
- In what order do your scripts and CSS load?
- Do you have any render-blocking scripts?
- Could you inline critical CSS to avoid flashes of unstyled content?
- Are you serving ads from third-party sources that cause layout shifts?
- Etc.
Unfortunately, a lot of this gets pretty technical. That is, you can’t just install a plugin to fix everything, though plugins can help with some parts.
Still, your first step should be basic WordPress optimization if you haven’t already done that. For help with that, check out our complete guide on how to speed up WordPress.
Then, let’s go through some specific fixes for the three metrics in Core Web Vitals. I won’t go into a ton of detail, but I will link out to pages from Google’s web.dev site that go into much greater detail.
Optimize Largest Contentful Paint (LCP)
Again, LCP measures how long it takes the largest, most important content, of a page to load. Typically, this will be your hero image or video. Or, if you don’t have a hero image, it could be your H1 text.
One of the biggest things that you can do here is use page caching to serve static HTML pages instead of dynamically building each page. We collected the best caching plugins here.
Another thing you can do is switch to more performant hosting – check out the best WordPress hosting.
Other strategies to improve your LCP time are:
Optimize Largest Contentful Paint
Optimize First Input Delay (FID)
Again, FID measures how responsive and interactive your site is. It measures the time from when a user first interacts to when your site becomes responsive.
Unfortunately, the fixes here are all pretty technical, so you might need the help from a developer if you score poorly here. Most of the fixes deal with optimizing your site’s JavaScript.
Optimize Cumulative Layout Shift (CLS)
Again, CLS measures how much your content “jumps” around as it loads.
The biggest problems with cumulative layout shift are likely to come from:
- Images without dimensions
- Ads or embeds without dimensions
- Web fonts
For images, WordPress already properly sets dimensions if you insert images through the editor. The code looks something like this:
<img class="aligncenter size-full wp-image-51306" src="https://wplift.com/wp-content/uploads/2017/08/image.png" alt="an example of a mega menu" width="750" height="523" srcset="https://wplift.com/wp-content/uploads/2017/08/image.png 750w, https://wplift.com/wp-content/uploads/2017/08/image-300x209.png 300w, https://wplift.com/wp-content/uploads/2017/08/image-610x425.png 610w" sizes="(max-width: 750px) 100vw, 750px">
For ads and embeds, you’ll also want to specify dimensions so that the ad doesn’t cause your site to “jump”.
To avoid issues with flashes of unstyled or invisible text, you can preload important fonts.
Optimize Cumulative Layout Shift
Get Ready for Core Web Vitals on WordPress
Like it or not, Google Core Web Vitals will be a part of how you optimize your (or your client’s) WordPress site in 2021 and beyond. So – don’t let Core Web Vitals surprise you. Acquaint yourself now and start working on ways to improve your scores.
Not only will it be a ranking factor in 2021, but it should also help you improve your site’s user experience, which is a worthy goal by itself.
Have any questions about Google Core Web Vitals on WordPress? Ask us in the comments!
