How to Fix Core Web Vitals on WordPress Sites

By fixing core web vitals on your WordPress site, you can significantly enhance your SEO and increase your chances of ranking on search engine results pages.

The best part? Most of the changes you’ll make are straightforward if you have a WordPress site. So, let’s start from the beginning: Here’s how to fix core web vitals, WordPress site edition.

• What are the three Core Web Vitals?
• How do you measure Core Web Vitals on your WordPress site?
• How to Improve Core Web Vitals on your WordPress Website

• Prioritize Core Web Vitals to Give Your WordPress Site a Boost

What are the three Core Web Vitals?

Core Web Vitals refers to three metrics that Google uses to determine a webpage’s overall user experience. Google announced these metrics in May 2020 and officially rolled them out from June through September 2021.

Core Web Vitals consist of three metrics: Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. All three metrics deal with various aspects of page speed. Let’s take a closer look at each below.

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) refers to the time it takes for the largest element on the screen to load. Typically this is an image, but it may also be video content, audio content, or a sizeable piece of text.

The idea behind LCP is that the largest element makes the most significant impression on a user. Therefore, when it loads, users also have the impression that the entire page is.

If your LCP is under 2.5 seconds, you’ll receive a ‘good’ score on this portion of the Core Web Vitals assessment. On the contrary, if it’s under 4 seconds, you’ll earn an okay score.

First Input Delay (FID)

First Input Delay (FID) is the time it takes for a page to respond to the user’s first input. So let’s say a button has already been painted on a page, a user clicks on it, but nothing happens because the button is not yet functional — that’s First Input Delay.

Google is prepared to tolerate the delays of 100 ms for a good score and 300 ms for an okay score.

Cumulative Layout Shift (CLS)

Lastly, cumulative layout shift (CLS) occurs when page content moves around after it’s been painted on a page. You can calculate CLS by multiplying the screen share that's been affected by the distance the content has traveled.

A good CLS score is under 0.1 and an okay score is under 0.25.

How do you measure Core Web Vitals on your WordPress site?

There are a variety of tools you may use to measure Core Web Vitals, but there is one thing we must discuss first: the different approaches to measuring Core Web Vitals. One involves using field data, and the other one uses lab data.

Field data is how your website performs with actual users. It’s also relative to your target audience — if most visitors come from a slow connection area and use dated computers, your website will appear slower, and vice versa. Remember that your score is not entirely dependent on your website’s optimization level.

Lab data is the performance of your website under simulated conditions. Lab data is a more comprehensive way to test your website’s technical soundness. However, lab data is not representative of your website’s performance in the real world. That’s why Google uses field data, not lab data, to rank websites.

Interestingly, you cannot measure Core Web Vitals in a lab at all. First Input Delay requires input from an actual user to be measured. That’s why you can quickly tell lab data tools from the field data tools. Lab data tools can’t calculate FID scores and offer TBT (Total Blocking Time) scores instead:

Out of the Google tools listed above, Search Console is the most accessible and convenient way to check your Core Web Vitals.

In search console, if you go to Experience > Core Web Vitals, you will find two reports, one for a desktop version and the other for a mobile version of your website. Click on either one to see a summary of your performance for the entire website on a certain type of device. Here’s an example of a report:

Under the graph, a table details the most common issues plaguing your website:

To investigate further, navigate to your site's issues, then on any of the URLS, and you’ll get a PageSpeed Insights report. The report includes a detailed analysis of your page and offers recommendations on how to improve your performance:

Though Search Console is the most user-friendly of Google developer tools, navigating it can still prove cumbersome. Finding each issue for each page is time-consuming, too. That’s where third-party tools come in handy.

These tools use the same data as Google but attempt to have a more practical workflow. Using WebSite Auditor as an example, you’ll gain insight into the failing pages in a single table, along with all the vitals scores and optimization priorities:

Naturally, there are many other SEO tools with Core Web Vitals reports. If you already use an SEO tool, it may offer features that cater to Core Web Vitals. Just ensure that the tool uses field data when evaluating your website — many don’t.

For an honorable mention, here is a fun tool to play with: Treo Site Speed allows viewing Core Web Vitals scores from different websites side by side:

This offers insight into how much work is necessary for your website. After all, you don’t have to have a perfect Core Web Vitals score — you just have to be better than your competitors.

How to Improve Core Web Vitals on Your WordPress Website

But what does improving Core Web Vitals WordPress site edition look like? We’re here to help you navigate that. The unique challenge of improving the speed of a WordPress website is that a lot depends on your plugins, themes, and servers. Plugins especially are a double-edged sword. They could speed up your website, but the more you install, the slower your website gets.

But let’s start from the top. Literally.

1. Tidy up above the fold.

Core Web Vitals place more importance on the upper part of the page, known as the area “above-the-fold.” It’s what users see when they first visit the page, and if this portion loads quickly, the whole page appears to be fast.

Coincidentally, the upper part of the page is usually the slowest. Think about it: companies tend to place massive banners with high-resolution images above the fold. It’s also where you’ll notice pop-ups and interactive elements. Take a look at Canada Goose, for example.

The advice here is obvious — ensure that the upper part of your page is as clean and light as possible. In most cases, that means reducing the size of the imagery used to greet visitors.

Another option is to substitute images for CSS styles. Get your designer and your web developer together to craft a visual that requires no complex imagery. A few lines of text over a simple CSS gradient tend to work best regarding page speed. And it doesn’t have to be a trade-off — you can achieve powerful designs even with simple tools.

Pro tip: Avoid dynamically sized content. Some page elements, like comment widgets, may not have specific size attributes, so they shift around until they find enough room. Relocate these elements further down the page.

2. Optimize your images.

Because images tend to be the heaviest elements on a webpage, they’re usually the largest pieces of content in the Largest Contentful Paint metric. Luckily, images are also the easiest to optimize — it’s one area of improving your Core Web Vitals where no technical skills are required.

Image Source

To optimize your images, Google recommends properly sizing images, serving them in next-gen formats (those with higher quality characteristics and compression) deferring off-screen visuals, and efficiently encoding the pictures you use. This may sound complicated, but you can complete this easily with the assistance of most image optimization plugins.

When searching for a WordPress image optimization plugin, look for ones that will:

• compress your images (including bulk compression of the images that are already on your website);
• create a WebP copy of each image;
• lazy load your images; and
• manage the size of your images when necessary.

Some of the most popular image optimization plugins on WordPress include Smush, Imagify, and reSmush.it. None of them cover all aspects of image optimization, so there are some trade-offs to be made with each choice. Begin with Smush as it offers the widest range of image optimization services.

Pro tip: Be mindful when you select your plugin. Ensure that the effects of the plugin are reversible so you can revert to the original images if optimization does not go as planned.

3. Move to a faster hosting provider.

One of the most common Core Web Vitals WordPress issues is servers taking too long to deliver the content. This happens for several reasons; your pages may be overly complicated or feature too many plugins. However, it may also occur simply because your server is too slow. This is especially true of budget hosting setups like shared hosting.

If you are unsure whether server response time is an issue for your website, test it with whichever tool you use to track Core Web Vitals metrics. For example, if you are using PageSpeed Insights, test some of your pages and see if “Reduce initial server response time” keeps popping up as an opportunity:

Of course, it’s best to bulk-perform tests to inform you if the issue consistently occurs on your site or if it just pops up on a few pages.

In case server response times are consistently high throughout your website, you should consider moving to a faster hosting provider. Most commonly this would mean switching from shared hosting to managed hosting.

Shared hosting is probably what you selected when first building your website — it’s affordable and tends to offer “unlimited” websites and visits. The main problem is that you share servers with other websites and your performance depends on whether or not they leave you with enough resources.

Managed hosting is more costly — basic packages start at about $20 per month. But what you get is the latest technology, a dedicated server, a content delivery network, and a support team that’ll take care of the overly technical stuff. However, these features typically result in significant page speed improvement.

Pro tip: If you decide to switch to faster hosting, consult this list of recommended hosting providers for WordPress websites.

4. Optimize your code.

Website code is never perfect, and there is an endless list of things you can do to improve it. But a few low-hanging fruits can give your page speed a measurable boost at almost no effort.

You can try two things right away: changing the order in which different pieces of code are loaded and removing unnecessary elements from your code files. Let’s take a closer look at these methods below.

Defer Non-essential JavaScript

Whenever there is a piece of JavaScript on your page, the browser will pause loading HTML until the JavaScript is loaded. From a user experience perspective, it means staring at a frozen page while nothing seems to be happening. And it’s not just unpleasant for the user — this type of delay will also be reflected in your Core Web Vitals.

So, if the piece of JavaScript is not very important, you can change the order to make it load after all the essential elements have been rendered. Again, since we are talking about WordPress, you can easily achieve this with a plugin. Some plugins that can defer JavaScript are Async JavaScript, Autoptimize, and Speed Booster Pack. Another plugin that defers JavaScript and helps you tackle all the most challenging performance issues is WP Rocket.

Minify CSS, JS, and HTML Files

Code minification removes unnecessary formatting from the code file: spaces, comments, and line breaks. It is often a marginal improvement but for some files, you can achieve up to a 40% reduction in size.

The easiest way to minify your code on a WordPress site is to use a plugin. Some popular minification plugins include Autoptimize, WP Super Minify, and Fast Velocity Minify.

Pro tip: If you don’t want to install any more plugins on your website, you can try manual minification or online minification tools. This would mean you’d have to download the file from WordPress, minify it online, and upload it back to WordPress. This is only feasible with a small website. Some popular online tools include CSS Minifier, JavaScript Minifier, and HTML Compressor.

5. Cut back on excessive features.

First-time WordPress website builders often get carried away with the number of features they add to their pages and the number of plugins they install in the admin panel. This makes a sizable impact on the page speed.

When talking about page design, these excessive features usually include heavy themes, custom fonts, all kinds of image galleries and sliders, effects (fade-ins, slide-outs, etc.), and pop-ups that appear sooner than necessary or that are unnecessary altogether. These features may seem appealing, but most of them are viewed as a nuisance by actual users. It’s rare for something to work better than a good old static image and text combo.

When talking about plugins, many of them are unavoidable, especially if you are not a technically proficient person and don’t have a developer on your team. At the same time, you can also do most of the things plugins would manually or by using external tools. For example, you can use a plugin to compress your images, but you can also compress them with online compressors or by using graphics editors.

Pro tip: Even if you uninstall unnecessary plugins, there may be trace amounts of plugin code left throughout your website. And then, you’ll have to install another plugin to remove that code. Before installing a new plugin, ask yourself if there is truly no other way to do what it does.

6. Take care of other UX metrics.

Core Web Vitals are just three out of seven UX metrics. The other four have long been in existence and already influence your website rankings today:

You know all about intrusive interstitials, thanks to the sections above. These kinds of pop-ups and intermediary pages get in the way of viewing the main content. Google tolerates some essential pop-ups, such as those regarding cookies and privacy policies, but doesn’t look kindly on anything that takes up a significant portion of the screen. Keep your pop-ups small and direct.

HTTPS is rarely an issue today — just get whatever free SSL certificate is offered by your hosting provider and it should suffice. However, upgrade to advanced SSL certificates if you are a financial or a medical institution and have access to sensitive information.

Safe browsing is different from a security protocol. It’s whether or not your page contains malicious or deceptive content. Sometimes these issues may arise without your knowledge, for example, if your website was hacked. To ensure you are not triggering any security warnings, check your security issues report in Google Search Console.

Finally, there is mobile friendliness. In the second quarter of 2022, mobile devices accounted for 58.99% of global website traffic. A lot goes into mobile optimization, but the biggest part is responsive design — your content adapting to different screen sizes. WordPress users rarely have to bother with mobile optimization as most themes are mobile-friendly out of the box. Still, it wouldn’t hurt testing your pages once they are published — Google offers detailed reports on any issues discovered on your mobile page.

If many issues are discovered, you can check out plugins that help make your WordPress site more mobile-friendly.

Pro tip: If your website is lacking in many of these areas, you may consider hiring a freelance UX designer to give your site a much-needed boost.

Prioritize Core Web Vitals to Give Your WordPress Site a Boost

The recommendations in this article are mostly low-hanging fruit — improvements that will deliver the most page speed with the lowest effort. But, if you’ve tried everything listed here and your score is still lagging behind, there are other things you can try.

Go back to whichever tool you are using to test your website and see if any other issues are showing up throughout your website. Focus on those issues that are present on multiple pages. Your efforts will prove invaluable when you see the results.

Editor's note: This post was originally published in June 2021 and has been updated for comprehensiveness.