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 (SERPs).

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.

Table of Contents

• What are Google Core Web Vitals?
• How do you measure Core Web Vitals on your WordPress site?
• Do Core Web Vitals Affect SEO?
• How to Measure Core Web Vitals on WordPress
• How to Improve Core Web Vitals on Your WordPress Website

What are Google 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.

Google Core Web Vitals are used to evaluate the overall user experience on a website. They consist of defined metrics that were Google-created and considered critical to grade a website’s performance based on the user’s real-world experience. The core web vitals focus on three fundamental aspects of the user experience: loading performance, interactivity, and visual stability.

Google’s Core Web Vitals differ from other performance metrics because Google focuses directly on the user experience, whereas other metrics focus on the technical aspects of web pages only. Google developed these vitals based on user-focused studies to understand users’ frustrations and needs.

This distinction makes them very important for website owners and developers, as Google uses them as ranking factors, affecting a website’s position in search results.

Overall, the Google Core Web Vitals are not just meaningless numbers; they have tangible implications for a site’s SEO rank and user satisfaction. Let’s take a look at the three Core Web Vitals below.

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) measures loading performance. It refers to the time it takes for the most significant element on the screen to load. Typically, this is an image, but it may also be video content, audio content, or a sizable 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 believe 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 between 2.5 and 4 seconds, you’ll earn a “needs improvement” score. Faster LCP times indicate a better page experience for users as they can quickly access the primary content.

First Input Delay (FID)

First Input Delay (FID) gauges interactivity. It 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, and a user clicks on it, but nothing happens because the button is not yet functional — that’s the First Input Delay.

Google is prepared to tolerate delays of 100 milliseconds on an excellent score and 300 milliseconds for an okay score, ensuring users aren’t kept waiting after interacting.

Cumulative Layout Shift (CLS).

Lastly, cumulative layout shift (CLS) evaluates visual stability, measuring how often users experience unexpected layout shifts as content moves around after it’s been painted on a page. You can calculate CLS by multiplying the screen share affected by the distance the content has traveled.

A good CLS score is under 0.1, and an okay score is under 0.25 — a lower CLS suggests a more stable visual page experience.

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 does not represent 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. 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:

Image Source

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

In the 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 specific 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, and then, clicking on any of the URLs, 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. Ensure 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.

Do Core Web Vitals affect SEO?

Core Web Vitals significantly influence Search Engine Optimization (SEO). Google has always emphasized the importance of user experience in its search algorithms, and with the creation of Core Web Vitals, this focus has been amplified.

These vitals serve as clear metrics to grade a webpage based on the user’s experience, and Google has integrated them as ranking factors in its search algorithm. Let’s take a look at how Core Web Vitals can impact SEO:

Search Results Rank

One of the most direct impacts of Core Web Vitals on SEO is how it can determine a web page’s rank. Websites that meet or exceed the benchmarks set for the vitals might see a boost in their search rankings, while those that fall short could potentially lose visibility in Google’s search results.

There are thousands of web pages on the website. This makes search visibility very competitive. The smallest differences in ranking can significantly affect click-through rates and organic traffic.

User Engagement and Bounce Rate

Websites that offer a smooth user experience — characterized by fast loading times, responsive interactivity, and stable visual presentation — tend to increase visitors’ time on the website. When users have a positive experience, they're more likely to stay on a site, click through pages, and engage with the content.

Consequently, poor Core Web Vitals scores may lead to issues like slow loading or unstable layouts and can increase bounce rates as frustrated users leave to find better performance on your competitor sites.

Conversion Rates and Revenue

SEO is much more than getting users to visit your site; the goal is also to convert those visitors to complete actionable tasks such as purchasing products, signing up for a subscription, or other desired outcomes.

SEO isn’t just about driving traffic; it’s also about converting that traffic into meaningful actions, whether ecommerce sales, newsletter sign-ups, or other desired outcomes. You will likely convert a user if they have a positive experience on your website.

This is where good Core Web Vitals come into play. The higher your vitals, the greater your chances are for conversions.

In summary, while Core Web Vitals specifically surround user experience metrics, their ripple effect on SEO is undeniable. As Google continues to prioritize user-focused indicators in its ranking algorithms, website owners and developers need to optimize for these vitals to enhance user experience and ensure the best possible search visibility and performance.

How to Measure Core Web Vitals on WordPress

Measuring Core Web Vitals on WordPress is vital for any WordPress website owner who wants to ensure high SEO rankings and provide a top-tier user experience. Here’s a step-by-step guide to help you accomplish this:

1. Install and Activate the Web Vitals WordPress Plugin

The Web Vitals Plugin provides a convenient way to measure the Core Web Vitals directly from within your WordPress dashboard. Navigate to the Plugins section in your WordPress dashboard. Click on Add New and search for “Web Vitals.” Install and activate the Web Vitals Plugin.

2. Access the Web Vitals Dashboard

Once the plugin is activated, you can access the Web Vitals data for real-time insights. Find the Web Vitals section on the left sidebar in your WordPress dashboard. Click on it to access the metrics.

3. Integrate with Google Analytics (Optional)

This step is optional. However, if you want a more comprehensive understanding of the experience your users have on your website, integrating your WordPress site with Google Analytics can be beneficial.

Look for the Google Analytics integration option within the Web Vitals Plugin settings. Connect your Google Analytics account. Once connected, you can see the Web Vitals metrics within your Google Analytics dashboard.

4. Monitor Core Web Vitals Metrics

With the plugin active and, optionally, Google Analytics integrated, you can now monitor the Core Web Vitals on WordPress:

• Largest Contentful Paint (LCP): Measures loading performance. Aim for LCP to occur within 2.5 seconds of when the page first starts loading.
• First Input Delay (FID): Quantifies interactivity. Sites should strive to have an FID of less than 100 milliseconds.
• Cumulative Layout Shift (CLS): Evaluates visual stability. Aim for a CLS score of less than 0.1.

5. Address Any Identified Issues

If you see any metrics that could have a negative impact on your metrics, see how you can optimize your website’s performance. For example, are your images too big? Can the size be optimized without sacrificing quality?

Within the plugin, you’ll find actionable recommendations based on your metrics. Use these suggestions or consider contacting a developer or an SEO expert if you need help with how to proceed.

6. Regularly Re-evaluate Your Web Vitals Metrics

Website content and structure evolve over time, and regularly revisiting the metrics is essential. Schedule a monthly or quarterly review of your Core Web Vitals. Note any changes or trends in metrics and adjust your optimization strategies accordingly.

By closely monitoring and optimizing Core Web Vitals on your WordPress site, you’ll ensure a better user experience, leading to improved search engine rankings, overall site success, and increased business objectives.

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 can 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.

Image Source

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.
• 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.

If 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. However, 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 nuisances 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 do 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 first quarter of 2023, mobile devices accounted for 58.33% 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.