Using Google’s Core Web Vitals to Evaluate and Improve WordPress Performance

WordPress site speeds can vary greatly for a number of different reasons. While all sites are different, there are some basic guidelines to follow that provide a solid foundation and ensure the quickest speeds possible. These guidelines not only create a better user experience, but improve search rankings, too.

Specifically, we’re talking about Google’s Core Web Vitals (CWV). These are unique metrics Google considers relevant in measuring the quality of a user’s experience. Currently, there are a lot of questions about just how much of an impact these metrics will initially have on search rankings. However, there is no real argument that improving these metrics improves user experience.

Google’s Core Web Vitals Defined

What are Google’s Core Web Vitals? Google has defined these 3 specific metrics tying into speed, responsiveness, and visual stability.

1. Largest Contentful Paint (LCP) – This is the time it takes for the largest element within the viewport to show in its final state. Think of a banner image loading at the top of the page, or the ‘swap’ as a custom font is applied to a large block of text.
2. First Input Delay (FID) – This is the time it takes for a page to respond, such as links and buttons becoming clickable. Anything “blocking” the main thread will increase this delay. To improve this, avoid actions like blocking JavaScript. 
3. Cumulative Layout Shift (CLS) – This is a calculated number reflecting the amount of “jumping” that happens as content loads. A banner image without a specified height starts out with a height of zero. As it loads and pushes the page down, the CLS number increases.

Some of these metrics involve the idea of a “viewport,” which varies between mobile devices and desktop browsers. Google takes this into account, assigning each page a different set of values for both mobile and desktop viewports. Each faces different challenges. 

A mobile viewport may show a lower layout shift than a desktop browser, as the design contains fewer elements at this breakpoint. However, a mobile device may also take longer to download stylesheets and fonts, resulting in a longer LCP.

These metrics are nothing new, but Google is changing the way it uses them to determine ranking results. Beginning in May of 2021, your site’s scores on these metrics will inform that ranking. The initial impact of this change may be limited, but it is in your best interest to ensure your site is performing as fast as possible.

What the Experts Are Saying About the Core Web Vital Impact on Search

We can’t say for certain how this change will initially affect search rankings. But there is a lot of discussion about this change in the industry right now, with many qualified voices weighing in—including Google.

1. Barry Schwartz at Search Engine Roundtable does not expect much of a change initially, as noted in the article linked just above. Why not? Because Martin Splitt from Google suggests in his Tweets from March 11th that “a page with CWV field data may have a tiny advantage over one without”. Splitt also warns that “We can’t take into account what we don’t know,” though.
2. Despite this, Schwartz also reports that nearly 70% of SEOs “will still prioritize these efforts”. This number comes from a poll conducted by Aleyda Solis, a respected and well-known international SEO consultant. Schwartz makes the case that focusing on CWVs makes sense, even if your primary concern is not improving SEO rankings.
3. In his February 28th Search Engine Journal article, Roger Monti breaks down the recent Search Central Fireside Chat touching on this issue. Here, Splitt again emphasizes the uncertainty surrounding the initial impact of the CWV update, even internally at Google. Danny Sullivan does stress that “the new ranking factor will not cause significant pain,” and that it is just one of many factors considered.

Taking active industry conversations into account, you start to understand this is not going to be a flip-of-the-switch change to how search engines rank results. This doesn’t mean you shouldn’t optimize your site with these Core Web Vitals in mind, though. Faster sites still always provide the better digital experience.

Viewing Your Site’s Web Core Vitals Evaluation

Before you can optimize your site, you need to know where it stands. Not sure where to find your CWV results? There are actually a few different options for reviewing your site’s evaluation using these metrics.

1. The “Lighthouse” tab in Chrome’s developer tools. This allows for quick testing on any given page. Results may differ slightly from what Google is actually considering, though.
2. Google’s “Pagespeed Insights” tool. This is your best bet for an accurate reflection of Google’s evaluation. You can perform a real-time evaluation of any URL provided, while also viewing real-world data from the past month’s visitors. Check both the Mobile and Desktop tabs for specific areas of improvement.
3. Google Search Console is the best option for long-term monitoring of these metrics.

Now you have an idea of what Google is looking at and how you can view their takeaways. Let’s dig into some practical ways of improving your existing WordPress site’s Core Web Vitals.

What Goes Into a Page Load?

Before you start making changes to improve your Core Vitals, it helps to consider the fundamentals. A lot of things have to happen between a visitor requesting your page and that page actually loading. 

1. The server receives the request, returning the corresponding HTML. HTML production speed is critical. A cached page allows the server to respond with the cached HTML very quickly. If the page is not cached, the server needs to build it. This requires starting PHP, establishing a database connection, loading plugins, and more.
2. The browser then reads through the entire HTML document, putting together a rough, un-styled version of the page in memory. The visitor still hasn’t seen anything as this is happening. 
3. Now the browser loads any CSS from the HTML. Any CSS files referenced in the HTML are now requested, requiring a separate call to the server. Custom web fonts referenced in the CSS are requested as well.
4. Should the page’s functionality require any JavaScript, this may also be loaded at this time. This may also require an additional server request.
5. The browser matches up the styling to its rough outline once all necessary CSS and JavaScript is processed. The visitor sees these results. 
6. Images and other elements in the HTML load as encountered. This can result in the page “jumping” during load times.
7. Once loaded, font files are applied to the text on the page, resulting in the “swap” mentioned in our LCP definition.

This is a lot of activity, but you’ve loaded web pages before. You know that typically all of this happens quickly. Depending on your website’s configuration, though, there is a lot of possible variance in load time. That’s where optimization comes in.

Proper Hosting Environments Return HTML More Quickly

Of the variables that may affect your site’s perceived speed, the time that it takes the server to receive the request and return the corresponding HTML often has the biggest impact. It can take several seconds to complete the necessary process of: 

1. Loading the WordPress framework
2. Connecting to the database
3. Processing content into its final structured form

When the HTML is cached and ready to return, you get the best overall performance. The server doesn’t need to generate it upon each page request. You can leverage this strategy by using the right hosting solution. WPEngine and Pantheon are great options. Both cache and serve WordPress sites specifically. 

Their networks and servers are configured for delivering optimal performance. But both offer a number of other beneficial features. Quick backup/restore functionality, for example, and the ability to create staging environments for testing quite easily.

WPEngine’s Advanced Cache Control Plugin Extends Your Cache Life

If you opt for WPEngine, use the Advanced Cache Control plugin to extend cached HTML life. WPEngine only caches pages for 10 minutes (or until updated) by default. This ensures the most recent content changes are visible. Unfortunately, this short cache lifespan can reduce cache effectiveness, particularly if your site is not heavily trafficked. 

When increasing the time before regenerating cached pages, there is a greater chance of “stale” content displaying. Typically, the cache for a page always regenerates whenever WordPress sees that content updated. However, that content may also appear on other tangential display areas where regeneration is not triggered.

Always look for a hosting provider that offers you ways to manually regenerate the page cache. The WPEngine provides several such methods for quickly clearing all cached pages.

Reduce the Number of Additional Files Required to Render the Page

The browser isn’t ready to show anything immediately upon receiving the HTML for the page. Before displaying the page, the browser figures out how everything needs to look. This requires downloading and parsing all of the stylesheet data associated with the page. Cutting back on additional files helps the browser to render things faster.

Building your site to minimize the number of resources used in production is ideal. You might leverage a pipeline such as Gulp to compile scripts and styles into single resources, for instance. Even so, plugins often require their own scripts and styles, causing the external resources required for each page load to skyrocket. 

Using a lightweight plugin like Autoptimize addresses this issue by combining all of your Javascript and CSS into single files. Should this plugin cause JavaScript errors in the console, try excluding some of the files being combined. jQuery in particular may cause issues if not loaded in the correct order, and is often best excluded. This all requires some trial and error, but the end result is worth it.

Downloading fewer font files also boosts the perceived load time of a page. If the largest element in the viewport is a text block, the LCP metric is not calculated until the font file is downloaded and applied to the text. Cutting back on custom fonts helps here.

When building your new site, utilize critical CSS/fonts that load first to style the elements appearing in the viewport. Then, the CSS for elements appearing further down the page can be loaded later.

Optimize Images—Especially Large Marquee Assets

Above-the-fold images are often the largest element visitors see when first viewing a page. When that image takes several seconds to load, it makes the whole page appear slow to load—even with everything else appearing instantly! In a case like this, the LCP metric isn’t calculated until the image fully loads.

These assets load faster the smaller they are. There are a number of paid plugins that ensure such assets are as small as possible, both retroactively and for future uploads. Our Newfangled site uses Shortpixel. Other popular options include Smush, EWWWW, and Imagify. Experiment with your settings when using these plugins. Find the best balance between image size and quality.

Updating Sites Maximizes Speed, Even Without Caching

It’s not always possible for servers to return cached copies of pages. If visitors, Googlebots included, access pages after the cache expires, those pages regenerate. Certain dynamic content, including Newfangled-powered CTAs, requires that a non-cached version of the page be loaded to generate content specific to the current visitor.

Avoiding large, monolithic site-building plugins such as DIVI or WPBakery helps to render sites as fast as possible even when caching isn’t possible. These plugins add numerous database calls to every page on the site. Consider if these tools are worth the performance trade-off coming with them.

Take some time and audit your installed plugins. Uninstall unused items. Keep plugins updated to the latest version at all times, along with your WordPress core. This improves performance, and is also a great security practice.

Finally, use Query Monitor. Dive into database calls made on each page load. The Queries->By Component report groups the queries by plugin. Do this on your staging site only, as the plugin slows things down. 

Should You Manage Your Own Server? 

We’ve found the cost/benefit of using services like WPEngine makes the choice a no-brainer. But you may host your own sites and manage your own servers directly. If so, you can still implement these techniques. It just requires a little extra work.

1. Use object caching. This reduces the number of database calls necessary to generate a page. Store commonly-referenced “objects” like individual posts and their related custom fields. If your server supports Memcache, this can be as simple as adding an ‘object-cache.php’ file to your /wp-content/ directory. We like this version, provided directly by Automattic (the creators of WordPress). 
2. Use PHP’s Opcache. WordPress loads and compiles many PHP files when building a page. Opcaching stores this compiled code for a short period of time. This simple change can noticeably improve page generation time. The more complex your theme and the more plugins installed, the bigger the boost. 
3. Use a reverse proxy. Popular options include Varnish and NGINX. These offer “page caching” functionality similar to what you get from WPEngine or Pantheon out of the box.

Always Prepare, Even for the Unknown

At this stage, we don’t know exactly how this latest algorithm update affects search rankings. But regardless of the Page Experience Update’s initial impacts, informed preparation always pays off. We know that optimizing sites for speed will only work in our favor. 

There are more answers to come down the road, and we’ll keep the updates coming here. For now, do what you can to keep your own site loading as quickly as possible. As detailed above, you do have the necessary tools and insights available.