Core Web Vitals are the new big challenge in SEO. Although the importance of this challenge seems blown a little out of proportion, websites optimized for Core Web Vitals will soon indeed have a better chance of ranking in search.

If your website is built on WordPress, you are in luck — the whole thing can be done with a few select plugins and a switch to a faster server. But let’s start from the beginning.

Grow Your Business With HubSpot's Tools for WordPress Websites

What are the three Core Web Vitals?

Core Web Vitals are the new metrics used by Google to assess user experience on a web page. The metrics were announced back in May 2020 and are expected to become official ranking factors in the second half of 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 is the time it takes for the largest element on the screen to load. It’s usually an image, but it could also be a video or a piece of text. The idea is that the largest element makes the most impression on a user. So when the largest element is loaded, it feels like the whole page is loaded.

The benchmark for the LCP is under 2.5 seconds for a good score and under 4 seconds for an ok score:

Scoring scale from good to poor on Core Web Vital Largest Contentful Paint

First Input Delay (FID)

First Input Delay 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 ok score:

Scoring scale from good to poor on Core Web Vital First Input Delay

Cumulative Layout Shift (CLS)

Layout shift is when the content keeps moving about even after it’s been painted on a page. Cumulative Layout Shift is calculated by multiplying the share of the screen that’s been affected by the distance the content has traveled.

A good CLS score is under 0.1 and an ok score is under 0.25:

Scoring scale from good to poor on Core Web Vital Cumulative Layout Shift

How to Measure Core Web Vitals on Your WordPress Website

There is a whole range of tools for measuring Core Web Vitals, but there is one thing we have to discuss first. It’s important to understand that there are two approaches to measuring Core Web Vitals. One is using field data and the other one is using lab data.

Field data is the performance of your website with the actual users. An interesting thing about field data is that it’s relative to your target audience. If most of your visitors come from a slow connection area and use old computers, then your website will appear slower — and vice versa. So your score is not entirely dependent on your website’s level of optimization.

Lab data is the performance of your website under simulated conditions. Using lab data is more of a way to test your website’s technical soundness. At the same time, lab data is not representative of your website’s performance in the real world. This is why Google uses field data, not lab data, for ranking our websites.

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

Graph of which developer tools measure Core Web Vitals includes PageSpeed Insights and Chrome UX Report

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

If you go to Experience > Core Web Vitals, you will find two reports, one for a desktop, and one for a mobile version of your website. You can click on either one of them to see a summary of your performance for the entire website on a certain type of device. Here’s an example of a report:

Example report in Google Search Console shows poor performance in Core Web Vitals

Under the graph, there will also be a table with the most common issues plaguing your website:

Drilldown into example report in Google Search Console shows poor performance in Core Web Vitals

If you want to investigate further, click on any of the issues, then on any of the URLs, and you will be offered to see a PageSpeed Insights report. The report will include a detailed analysis of your page as well as some recommendations on how you can improve your performance:

Opportunities to improve Core Web Vitals Score in Google Search Console

Now, even though Search Console is the most user-friendly of Google developer tools, the drill-down is still a little clumsy. It’s just too much work to find each individual issue for each individual page. This is why it could be a good idea to turn to third-party tools.

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

WebSite Auditor report showing all failing pages in a single tab

Naturally, there are plenty of other SEO tools with Core Web Vitals reports. So if you are already using an SEO tool, then there is a good chance it has recently implemented or is about to implement Core Web Vitals features. Just make sure that the tool is using field data when evaluating your website — most of them 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:

Treo Site Speed showing Core Web Vitals score of multiple websites included Adidas, UnderArmour, and Nike

It could provide valuable insights into how much work is required 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

The unique challenge of improving the speed of a WordPress website is that a lot of it rides on the choice of plugins, themes, and servers. Plugins especially are a double-edged sword. They help you speed up your website, but the more of them 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, commonly known as above-the-fold. The upper part is what users see when they first visit the page. So, if this part loads quickly, then the whole page appears to be fast.

Coincidentally, the upper part of the page is usually the slowest. It’s where companies tend to place huge banners with high-resolution images and it’s also where you get bombarded with all kinds of pop-ups and interactive elements. Take a look at Canada Goose, for example.

Above the fold content of Canada Goose site and mobile site slows down Core Web Vitals

The advice here is obvious — make sure that the upper part of your page is as clean and as light as possible. In most cases it means reducing the size of the imagery used to greet visitors — we will talk about images in more detail later.

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

One more thing you can do is avoid dynamically sized content. Some page elements, like comment widgets, may not have specific size attributes. It means these elements will shift around until they find enough room. Make sure to move such elements further down the page.

2. Optimize your images.

Images tend to be the most time-consuming elements on any webpage. They also tend to be 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.

Side by side comparison of original PNG image and optimized PNG image

Image Source

To optimize your images, Google recommends properly sizing images, serving images in next-gen formats, deferring off-screen images, and efficiently encoding images. Some of these things sound complicated, but they can be easily performed by most image optimization plugins.

When shopping 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.

Also, make sure that the effects of the plugin are reversible, i.e. you can go back to your original images if the optimization does not go as planned.

Some of the most popular image optimization plugins on WordPress include WP 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. That being said, it’s probably best to start with WP Smush as it offers the widest range of image optimization services.

3. Move to a faster hosting provider.

One of the most common Core Web Vitals issues is servers take too long to deliver the content. Now, it may be because your pages are too complicated — overengineered themes and way too many plugins. But it also may be because your server is just too slow — most budget servers are.

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

Opportunities outlined in PageSpeed Insights report including "reduce initial server response time"

Of course, it’s best if you have a tool for performing bulk tests. This way you’ll know whether the issue is consistent throughout your website or if it pops up on just a few of your 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 got when first building your website — it’s as cheap as a few dollars per month and it 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 a bit more expensive — 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. All of these tend to add up to a measurable page speed improvement.

In case you decide to make a switch to faster hosting, we encourage you to consult this list of recommended hosting providers for WordPress websites.

4. Optimize your code.

The code is never perfect, and there is an endless list of things you can do to improve it. But there are a few low-hanging fruits that can give your page speed a measurable boost at almost no effort. Two of the things you can try right away are 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 in which it loads — 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 of the plugins that can defer JavaScript are Async JavaScript, Autoptimize, and Speed Booster Pack.

Minify CSS, JS, and HTML Files

Code minification means removing unnecessary formatting from the code file: spaces, comments, and line breaks. It is often a marginal improvement but for some files, you will be able to 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 of the most popular minification plugins include Autoptimize, WP Super Minify, and Fast Velocity Minify.

If you don’t want to install any more plugins on your website, you can try manual minification, or you can try online minification tools. This would mean you’d have to download the file from WordPress, minify it online, and upload it back to WordPress. Going this route is only feasible if you have a very small website of a few pages. Some of the more 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. Each of these additions comes at a very real cost in terms of 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 cool, 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 indeed unavoidable. Especially if you are not a technically proficient person and don’t have a developer on your team. At the same time, most of the things done with plugins can also be done 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.

Another thing is that 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. So, even before installing a new plugin, ask yourself if there is truly no other way to do what it does. Each new install makes your website that much slower.

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:

Graph of all UX metrics that are search signals for page experience including Core Web Vitals, mobile friendliness, safe browsing, HTTPS, and no intrusive interstitials

We’ve already discussed intrusive interstitials in the sections above. These are basically all kinds of pop-ups and intermediary pages that get in the way of viewing the main content. Google tolerates some essential pop-ups, like the ones about 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 to the point.

HTTPS is rarely an issue today — just get whatever free SSL certificate is offered by your hosting provider and it should be enough. Unless you are a financial or a medical institution and have access to sensitive information. In this case, you would have to upgrade to advanced SSL certificates.

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 make sure you are not triggering any security warnings, check your security issues report in Google Search Console.

Finally, there is mobile-friendliness. 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.

Quick Fixes

The recommendations in this article are mostly low-hanging fruits — improvements that will deliver the most page speed with the lowest efforts. 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 there are any other issues showing up throughout your website. Focus on those issues that are present on multiple pages. Chance is, it will take a single tweak to improve the speed of your entire website.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

 Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Originally published Jun 28, 2021 7:00:00 AM, updated June 28 2021

Topics:

WordPress Website