Why Google’s Core Web Vitals Matter—Plus 3 Ways to Optimize Your Site Now

In 2020, Google announced significant changes coming in how the search giant would analyze and prioritize web content in search results.

Now, those changes—specifically the inclusion of Google’s Core Web Vitals in the ranking signals for webpages—are officially in effect. These updates have big implications for website owners (ourselves included!) and for search engine optimization (SEO). 

Today, we’re taking a look at what Google’s Core Web Vitals entail, how StellarWP prepared its various websites, and how you can optimize your own site.

First of all, what are the Core Web Vitals?

Google’s Core Web Vitals report measures the user experience on your website. If your site adheres to each of the vitals, you can be confident that you’re providing a high quality user experience. 

In other words: A good score means your site isn’t a headache for people to navigate.

The analysis considers three different factors:

  • Largest contentful paint (LCP)
  • First input delay (FID)
  • Cumulative Layout Shift (CLS)

If you’re not a web performance expert, those names may have you scratching your head. Here’s a breakdown of what each of the vitals encompasses.

Largest contentful paint, aka load timeline

This metric looks at how long it takes for the largest image or text block on a page to load. The quicker, the better: A load time of 2.5 seconds or less is optimal, while anything slower needs improvement.

These numbers aren’t arbitrary: Slower load times dramatically increase the bounce rate on a page. By improving your load times, you’ll keep people on your site, which can increase conversions and sales.

First input delay, aka interactivity

How quickly are users able to interact with your content? That’s what first input delay is designed to measure. Ideally, users are clicking through your navigation menu or interacting with an element on your page within 100 milliseconds. Anything slower is considered subpar.

One possible cause of a poor interactivity score is when the browser is busy running scripts or updating a page; those style recalculations and layout changes are resource-intensive. In that case, the page might not respond immediately when users click, which slows down the first input delay time.

Cumulative Layout Shift, aka visual stability

Back in the old days—okay, the ‘90s and early ‘00s—it wasn’t unusual for the content on a webpage to shift around as a page slowly loaded. As images and text appeared, the elements on the page shifted.

That never created a good user experience. These days, Google’s algorithm prioritizes visual stability by evaluating the Cumulative Layout Shift on a page. If your page layout shifts dramatically over time, it hurts the experience and your CLS score.

Why do these metrics matter?

Ultimately, each page’s load timeline, interactivity, and visual stability are crucially important to the user experience on your site.

Much of the hubbub around Google’s Core Web Vitals pertains to how these measures will impact SEO. But even if you don’t receive much search traffic, you shouldn’t ignore these important metrics.

“It still matters for user experience and revenue,” says Mike Smallwood, LiquidWeb Software Architect and StellarWP’s resident expert on web performance. “Studies have shown when you improve site speed, you get better retention and a better bottom line.”

How did StellarWP prepare for the changes? What do I need to do on my own site?

Preparing our family of WordPress brands for Google Core Web Vitals was no small feat. We started by making sure all of our properties were hosted on the Nexcess Managed WordPress platform, where features like image compression and a content delivery network (CDN) come standard.

If you’re new to CDNs, the gist is that they “get your content closer to your users by caching it in a globally distributed group of servers,” Smallwood says. “When milliseconds matter, the distance between the user and your content is important. It takes more time for data to traverse longer distances.” 

For example, when a user in India requests data from a server based in Michigan, that information has to travel across the planet, which can take a while. By using a CDN, we can be certain that we are efficiently delivering content to our users across the world.

With those foundations in place, we were ready to get started checking on the Core Web Vitals for each of StellarWP’s websites. These are the steps we took—and you can take—to start optimizing.

Check your site’s Core Web Vitals performance.

There are several tools available to help you measure the Core Web Vitals on your own site; here’s a helpful rundown from Search Engine Journal.

Google offers its own report within the Google Search Console, but this tool is only available to websites with a certain amount of reporting data, according to Search Engine Journal. If your report comes up empty, not to worry—you can choose from the other tools listed. For many of our StellarWP brands, we relied on Lighthouse to audit our sites.

Now, let’s get into the nitty gritty of how to start optimizing. 

Largest contentful paint / load timeline

“You want every page on your site to hit LCP within 2.5 seconds,” Smallwood says. “This can be a real challenge for large web pages or pages with lots of features.”

If your load timeline isn’t up to snuff, there are several steps you can take to improve it. Start by optimizing images and removing unused JavaScript. If those steps don’t help, you may want to consider upgrading to a CDN for your site if you haven’t already.

First input delay, aka interactivity

For StellarWP’s properties, all of our sites were reliably in the “good” range for first input delay, Smallwood says. This is true for most sites across the board: nearly 100 percent of all websites have good first input delay performance on desktop, and 80 percent are good on mobile devices, according to the HTTP Archive’s 2020 Web Almanac.

But “if you have a CPU-intensive site with expensive JavaScript or unoptimized animations, you can run into issues,” he adds.

To speed things up, cut down on unnecessary JavaScript that could be weighing down your site. Here are further instructions on how to improve your first input delay score.

Cumulative Layout Shift, aka visual stability

Optimizing to avoid Cumulative Layout Shift “ends up being case specific in terms of how you laid out the site,” Smallwood says. For StellarWP’s brands, we needed to take a different approach to each site based on its unique layout and design.

Providing dimensions for all of your images is one of the first steps to improving your Cumulative Layout Shift, Smallwood says: “Tell the browser how big it is before it loads so it knows how much space to reserve in layout.”

While server performance may impact your site’s load time, it isn’t likely to have a big impact on your visual stability—this element is driven by the way your site is laid out.

Final notes on optimizing for Google’s Core Web Vitals

Keep in mind that the three Core Web Vitals represent a fundamental shift in the way site owners are evaluating performance.

“Historically the way we’ve looked at web performance was with timing metrics, like when does page finish loading,” Smallwood says. “But those details don’t tell us anything about the user’s experience navigating the site.”

Focusing on Google’s Core Web Vitals might give you a boost in SEO, but more importantly, it ensures users will have a good experience on your site—and that’s always a plus when it comes to customer happiness and your bottom line.

And remember: The optimization work doesn’t stop after your next site audit.

“It’s always going to be a process of continuous monitoring and improvement,” Smallwood says.

You might
also like

Similar Posts