SEO Tip #7: Core Web Vitals

May 1st Core Web Vitals will begin effecting SERP ranks! This is causing a lot of concern for business owners that are dependent on an income stream from organic traffic, in this article we’ll look to dispel some myths about Core Web Vitals and offer some easy to implement tips for improving Core Web Vitals.

In This Guide

• What are Core Web Vitals?
• How will they effect my rankings and traffic?
• How to improve Core Web Vitals
• Fixing Largest Contentful Paint (LCP)
• Fixing First Input Delay (FID)
• Fixing Cumulative Layout Shift (CLS)
• Bonus Metric: Fixing First Contentful Paint (FCP)
• Recap Core Web Vitals Guide

What are Core Web Vitals?

Core Web Vitals (CWV) are three metrics:

1. Largest Contentful Paint (LCP)
2. First Input Delay (FID)
3. Cumulative Layout Shift (CLS)

These metrics will begin effecting organic Search Engine Results Page (SERP) ranks starting in May 2021. Simply put, these metrics are speed and user experience (UX) indicators and by improving them you should not only slightly increase your odds of a better SERP rank, but also improve your overall UX as well. Each of the three metrics individually are pretty simple to understand, and once you do understand each one then you can begin working on identifying offending issues and implementing fixes.

How will they effect my rankings and traffic?

The old way of thinking was that faster and faster pagespeeds meant you’d get better SERPs, this old idea was/is flawed itself in that there is a threshold where pagespeed improvements stop giving a net-positive due to the loss of other user experience enhancers. For example, a webmaster may remove an email signup form which improves their pagespeed by .25 seconds, maybe that in turn reduces bounce by a .25% which results in maybe an additional 1k pageviews/month, but then calculating the benefit the email form had been giving the site we might find that it was bringing in several hundred subscribers/month which were then getting funneled through automations that generated 500 visitors/month which compounded every month = by the end of a year we might see a net-loss of several thousand pageviews from that one change.

With Core Web Vitals, we’ll now see more of a shift toward “overall user experience” versus the old “how many seconds to load”. To that end, there’s also some very easy-to-understand markers for how well a page is doing = Good, Moderate and Bad.

Pagespeed scores have always been part of SERPs, so in most cases many sites are already well-positioned in regards to CWV, usually with only a few tweaks you can push your CWV into the acceptable limits to get into “Good” range. Here is a chart of the ranges for each CWV:

	Good	Moderate	Bad
Largest Contentful Paint	≤ 2.5s	< 4s	> 4s
First Input Delay	≤ 0.1s	< 0.3s	> 0.3s
Cumulative Layout Shift	≤ 0.1	< 0.25	> 0.25s

As for how these metrics will affect SERPs starting in May, we’re not anticipating any major shifts for most sites. Since CWV builds on what were already “best practices”, most sites should already have a mostly-positive user experience. Improvements such as overall pagespeed, TTFB, general optimizations for images, using a CDN (Cloudflare), keeping plugins and scripts to a minimum and taking advantage of latest technologies (mobile friendly/first themes and lazy loaded ads, etc) means most sites should already be very close to acceptable CWV ranges. In real world tests, we’re seeing most WPTechs clients are within 90% of GOOD CWV ratings. This is great news since it means most webmasters should only need to make a few small tweaks to get fully into the green and be all set for the change in May 🙂

How to improve Core Web Vitals

The first thing to know about CWV is that the worse hits to CWV come from advertisements, latest developments from major ad companies have shown some good success in reducing the CWV effects from ads – check with your ad network to see what fixes they have available. Next and maybe most important, we need a way to reliably scan for core web vitals.

There are currently two main tools used to determine your CWV stats – GTMetrix and Google Pagespeed Insights, both use Lighthouse scanner to gather results. Google Page Speed Insights (GPSI) is the most commonly used to see CWV, but you’ll want to learn how to read the reports correctly in order to know where your actual scan results are displayed on the report (it will display old stats on every report/scan). When using GTMetrix, you’ll want to create a free user account so you can turn on their ad-block feature for scans:

Then:

Then when using GPSI to check CWV, it’s important to know how to read the results page as the first two sections will give useless data in regards to your immediate needs (first two sections give a 28-day stats average). The third section “Lab Data” is where you’ll want to monitor for live-fixes as those stats will change/update with every scan, so you can see how your fixes impact CWV – positively or not:

As a side note, don’t forget when viewing CWV data in your Google Search Console (GSC) account that you can trigger a recrawl/recheck on those by clicking the verified-fixed button – this is important so you can see in GSC if your fixes are working over time and on every url and with large variety of users/devices:

First open the “report”:

Then click the error:

Then click fixed, it will take around a month usually for GSC to recheck all urls:

Now that you have a reliable method for viewing CWV’s with and without ads interfering and from a variety of sources, you can start working on fixes.

Largest Contentful Paint (LCP)

The LCP of any given page is how long it takes for the largest image or text block to load in the viewport. That means the LCP item is chosen from whatever is on-screen during the page load, so 99.99% of the time that means content that’s above-the-fold (at the top of the page) is most at-risk for needing improvement.

How to fix? This is pretty simple and depends entirely on which item lighthouse has determined your LCP element to be (whether it’s an image or video or text or something else)… Once you’ve identified which element at the top of your site is being targeted as the LCP element, then you can work on optimizing it. If it’s an image, make sure it’s at an optimal size and web-optimized. If it’s text, make sure the text is being inserted correctly (if plain old text is triggering a poor LCP, it’s likely due to a plugin that’s inserting that text badly).

Many times the LCP element is already well optimized and still getting a poor LCP score, the reason for that is because there’s other things loading before the LCP element which are making the loading of the LCP element take longer… Inspect the header/top portion of your site to find clues about what could be blocking the loading of your LCP element = common blocking elements include email popups, cookie notification popups, ads in the header. Other things you can do to improve the LCP is to reduce the number of plugins you have installed that effect the frontend and remove pagespeed-killing scripts like:

• Facebook Pixel
• Pinterest Pixel
• Jetpack Stats (use only Google Analytics)
• External fonts (Google fonts, etc)
• CGC Badge/ClevergirlCollective script
• Social Fabrics Collective Bias analytics plugin

Cache plugin (WP Rocket or WP Fastest Cache recommended) being optimally setup is also important as things like TTFB can also play a small role in the LCP load time. On that note, a good CDN such as Cloudflare can also help improve LCP by making sure your assets are loading as quickly as possible all around the world (not just from your hosting server).

So now you’ve reduced plugins, removed/reduced pagespeed-killing scripts/pixels and you’ve analyzed your above-the-fold content, you should now have an optimal LCP load time under 2.5 seconds.

First Input Delay (FID)

FID is when you load a page and the site seems “stuck”, you can’t click on links or scroll down or perform other actions = your input is delayed. This is a pretty common issue among sites that have ads, especially video ads and sticky ads, you’ll also commonly see it with poorly made plugins for features such as email popups, even popular push notification services can effect FID pretty dramatically.

How to fix? Similar to LCP fixes, FID needs several forms of optimizations to occur. You can reach out to your ad network and ask them if your ads are “lazy loading” or loading “asynchronously”, some ad networks have these “optimized ads” toggles available from your account dashboard, other ad networks require you to email them to signup for their “Deferred Ads Program”. Whichever network or case it may be for you, it’s imperative to get the ads as well optimized as possible if you intend to have a good real-world FID.

Other than ads, you’ll want to check to make sure you’re running as lean as possible on plugins and scripts (see the list above in the LCP section). Since the goal is to get the page “interactive” to the users control, there’s some other common fixes that should be in place to help improve the overall page load time, which will of course improve FID:

• Lazy load images.
• Lazy load iframes/youtube videos (this is built-in to WP Rocket, just turn it on at Settings>WP Rocket>Media).
• Reduce custom fonts to as few as possible (no external fonts, eg Google Fonts), or do away with them entirely and use system fonts only.
• Re-assess if your push notifications are bringing a valuable ROI. In the past it was easier for push notifs to have a ROI, but with CWV it maybe be time to rethink their contribution.

Cumulative Layout Shift (CLS)

CLS is very easy to see and sometimes very hard to fix. In simple terms, CLS is the movement of your content on the screen while the page is loading. In sites with ads (you see a commonality of ads negatively effecting all Core Web Vitals) CLS is usually about 99% a direct result of the ads themselves. You can watch the CLS happen in real time, just open a page in an incognito browser and watch the ads loading in/out, while loading the ads will push your images and text up/down the screen = that movement is CLS.

How to fix? Some prominent ad companies have been experimenting with CLS fixes, in our opinion those fixes are worse than the CLS itself, so this may just end up being an issue that’s always present on sites with ads = poor CLS. As far as the 0.1% of CLS attributable to your theme/plugins/widgets? Those are usually fairly easy to fix, here’s some of the most common fixes:

• Notification/top-bars that appear at the top of the site and “push your site down” to load their content (usually a link to email or shop and some plugins that insert a “cookie notice banner” too).
• External scripts that load-in content, most common are external email forms (the forms made and hosted directly by the newsletter providers and then added to your site via embed code). You can often see the CLS caused by these just by refreshing a page, as the external script fires off (embed email form, etc) and the content loads, then you can see it push other content out of the way. The fix for these is not as one-size-fits-all as the other CWV fixes. In many cases you’ll need to simply discard that script entirely, but in the case of something such as an email embed form there are alternatives (for major newsletter providers like Mailerlite/MadMimi) such as Bloom and Convertpro. The plugin-driven forms should usually prevent any CLS from occurring since they can be bundled into your other site files in the cache (minified+combined CSS & JS) which should allow for them to load asynchronously along with your other site content (they can’t cause CLS if they load at the same time as everything else).
• Images that are missing their dimensions for height/width. The height/width settings acts as a placeholder “reserving” that space so that your other content doesn’t get moved around when the image eventually loads in. If you’re on WP Rocket, then there’s an amazing and easy fix to most of the height/width issues caused by missing image dimensions:

First Contentful paint (FCP)

FCP is the moment during page load when a visitor can see the very first piece of content on the page. This could be the logo, or menu text or even an icon = whatever your first viewable content might be. It’s an important metric because it tells your visitor “there’s something here and it’s coming”. Improving the FCP involves many of the same recommendations made above to improve LCP/FID/CLS, some additional FCP-specific fixes can include:

• Remove/reduce render-blocking resources. Most commonly these can be resources loaded due to poorly optimized themes and plugins or due to a poorly optimized cache config (combined CSS/JS really helps here).
• Preload important files such as stylesheets, scripts and fonts. If you have WP Rocket, you can also preload your fonts from the Preload tab in WP Rocket settings.
• Reduce the size of resources used (network payload), this can come from variety of sources such as compressing images, minify CSS/JS, reduce the number of plugins/scripts/pixels, reduce the number of ads.
• Lowest DOM size possible, usually this means much of the same reducing plugins/scripts, but also on-page elements effect this as well such as images (turn off DOM wasting resources like Gravatars and don’t let individual pages get too “busy”, remove any social media feed/post embeds that are in sitewide locations such as in the footer/sidebar).
• Temporarily show a system font until your custom fonts have finished downloading, you can do this just by adjusting your @font-face by adding “font-display: swap;” (without the quotes). Or better yet, just stick with system fonts completely!

Recapping Core Web Vitals and WordPress

You can see finding and identifying CWV is not too difficult, you can attack one item at a time and make a little progress on the other metrics since they’re all interconnected in different ways. Fixing the CWV issues is also not that bad, though a bit tedious. For those sites running ads, it’s an unfortunate fact that ads are natural enemies of CWV (because CWV focus on User Experience). Getting a perfect score will likely be impossible for the foreseeable future, but getting a GOOD score should be within reach as long as some of the recommendations above are followed and the ad network supports lazy/async ads as are required by modern pagespeed standards. If you aren’t sure if you’re on the lazy or asynchronously loading ads yet be sure to email your ad network support team to make sure, as it can have a dramatically positive effect on your pagespeed (and turn them on for both mobile AND desktop)!