Blog | SEO | Tech Tutorials for Bloggers

BTS Core Web Vitals Audits

Behind the scenes, at WPBarista, we’ve been hard at work making your sites faster. You’ve had a lot of questions about the plugins and themes and ads that you have. You have concerns about the Core Web Vitals coming into play over the coming months.

We’ve been searching and learning how to do this in the fastest and most repeatable way so we can help the most people. If you’re going to try this on your own – here is our real (currently in use) checklist, along with our tools and preferred plugins. This includes some technical stuff, including css snippets that you can implement in the customizer.

Because Core Web Vitals, Speed, and User Experience are such huge topics, I will cover what we are doing and tips and tricks that have worked for us and our clients. I wont be able to get into the why or how it works in most cases – after all, I have to get back to my checklist for today.

If you’re interested in the resources we’ve used to educate ourselves, skip to the bottom of this article for a list of further reading.

Core Web Vitals Audit Checklist

  • create test site
  • take ‘before’ test on GTMetrix (login) and use Mobile Preset (we are using throttled 3G connection with Samsung 8 in North America)
  • take ‘before’ shot from Pagespeed Insights as well
  • review / replace plugins as needed:
    • instead of a bunch of plugins for ads, header scripts, verification codes, pixels, pinterest, GA, etc, use Custom Core Plugin or Code Snippets Plugin.
    • If no image optimization exists use ewww.io
    • Sharing Plugin (suggest Grow by Mediavine as it’s the fastest)
    • Manually add social follow links and images and remove plugins
  • add fonts to site locally (woff2);
  • add css: fonts-display:optional;
  • for “Slow Server Response Time” use WP Cloudflare Super Page Cache plugin
  • add WP Rocket – premium version 
    • Start with wp-rocket settings attached (this is a json file that we can’t share – sorry!)
    • in WP-Rocket, use ‘optimize css’ and separate css for mobile
    • then go into each main page / landing page / anything with different css and click the ‘Generate CPCSS’
  • Test – on Gtmetrix, mobile preset as above
  • add Asset Cleanup – premium version (only if necessary)
  • under Asset Cleanup – make sure scripts do not load on all pages unless needed ie: contact forms, archives don’t need comments,
  • if Woocommerce is active, use “WooCommerce Reduce Bloat plugin

Tips for Images

Use ewww.io setting – easy io service. This serves them from exactdn Content Delivery Network. And they are resized on the fly – not on your server which can save GB of bandwidth. Easy io also serves images in webp – the nextgen format preferred by Google.

CSS: max-image-preview

As far as best practices, I’ll reiterate – always load original images into the media library at 2000px wide. Always include the width and height in the attributes for your pics. And WordPress will automatically create the srcset for you. In css, use max-image-preview:large setting.

max-image-preview: large;

CSS: transform vs position

For hero images and carousels use the transform property instead of the position property as transform will prevent jumping around.

CSS: aspect-ratio

Media Queries now supports – ‘aspect-ratio’. This article by Craig Buckler has a thorough explanation.

/* Minimum aspect ratio */
@media (min-aspect-ratio: 8/5) {
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 3/2) {
}

/* Exact aspect ratio, put it at the bottom to avoid override*/
@media (aspect-ratio: 1/1) {
}

Tips for Fonts

If you must use custom fonts (or google fonts) load as few as possible. Every font – including the bold versions or the italic versions must be loaded separately. So figure out the minimum number of font sets that you need and load them locally. Then you can pre-load them with wp-rocket.

Under Pre-Load tab, use the “Preload Fonts” tab.

CSS: Font-display

To prevent CLS (Cumulative Layout Shift) of fonts, use font-display:optional in your css. This will prevent the custom fonts from loading at all if they take too long (> 100ms).

font-display:optional;

Tips for Layout

Cumulative Layout Shift is a difficult target to meet. CLS measures the ‘jumps’ that are unexpected in a page. If a user clicks a button and gets an expected popup – that is expected. If there’s a tiny jump of a few pixels that happens right away in a laptop – that’s not an issue. If its a big jump on a small device? Or how about if the jump happens after 5 seconds? That’s a bigger issue – the algorithms that go into this metric are always changing as the google teams learn how to measure it. And how to keep the expected shifts from downgrading a site’s score.

CSS: content-visibility

Make the site predictable and prevent shifts as much as possible. That means using css flex-box and grids to predict and shape the page before load. This can create problems for accessibility so then we need to keep in mind that audio browsers need to understand the page layout before visual browsers. For this reason content-visibility:hidden is recommended over content-visibility:auto.

content-visibility:hidden;

For now, the best practices include the generous use of lazy-loading and code-splitting. Code splitting is really technical when it is a WordPress site. For us, we’ve found that Kadence is the best theme and block library plugin for loading things in small pieces. For this reason, as a company, we’ve decided to move away from Genesis – which has been our specialty since 2012.

Further Reading

Lazy Loading explanation and tutorial by Mozilla.
CSS Tricks – Aspect Ratio
Jess Peck’s Complete CLS article
Search Engine Journal – CLS
How to Audit Core Web Vitals
Jank Free Page Loading with Media Aspect Ratios
Content-Visibility Article by Mozilla

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *