15 Tools to Optimize Your Website for Google Core Web Vitals

A couple of weeks ago, Google released the July 2021 Core Update. 

By now you probably know a lot about Google Core Web Vitals. You’ve read about them everywhere, about what they are and how to measure them. In case you didn’t, head to these articles to catch up: Google UX Signals and Core Web Vitals. 

Anyway, one question remains unanswered: once you measured your Core Web Vitals, how do you optimize them?

This article will be talking about 15 tools to optimize your website for Google Core Web Vitals. So after finding out what’s wrong, you can, hmm, do something about it. 

The Contents

  • How to optimize your Website for Google Core Web Vitals
  • 15 Tools to Optimize Your Website for Google Core Web Vitals
  • WordPress Plugins and other tools
  • Tools for Developers
  • Conclusion

How to optimize your Website for Google Core Web Vitals

Let’s recap what we already know about Google Core Web Vitals. They are three metrics that tell you how well your website performs in terms of user experience: Cumulative Layout Shift, Largest Contentful Paint, and First Input Delay. 

To measure them, you can use Google’s tools for developers such as Lighthouse, PageSpeed Insights, and Search Console. You’ll also find some recommendations on things to improve.

Some problems will be easier to solve than others. For example, Cumulative Layout Shift aka visual stability will be harmed if you don’t indicate the width and height of your media or reserve space for ads. And you can do these things yourself with no problem.

However, Core Web Vitals are also about website speed, optimizing images, removing non-critical third-party scripts, and breaking down long tasks. For all that, you might need some help. That’s what these tools are for. 

15 Tools to Optimize Your Website for Google Core Web Vitals

I divided this list into two. The last part is based on Google’s recommendations, which are more technical. Most of the tools I’ll mention are for regular folks, though, so don’t worry.

WordPress Plugins and other tools

1. WP Rocket

WP Rocket

WP Rocket is a cache plugin for WordPress that makes your site load-speed be ultra-fast. It’s great both for Largest Contentful Paint and First Input Delay.

It achieves awesome results by applying a series of different features right upon activation: 

  • Cache. It gets your site cached right away. It creates static HTML files and makes them easily available for future visitors.
  • File optimization. WP Rocket delays the execution of JavaScript files until user interaction to shorten initial load time. 
  • Database. You can schedule automatic cleanups to have a clean database that speeds up your site.
  • CDN. As we briefly explained in our Image Hosting Platform post, a CDN helps you speed up your site by replicating it and putting it in all major regions. WP Rocket also offers this cool service.  

2. NitroPack

NitroPack

Much like WP Rocket, NitroPack is a WordPress plugin that makes sure you have a lightning-fast website. 

It has automatic cache management, font rendering optimization (great for CLS), Cloudflare integration, and image optimization. 

Their service also includes Amazon CloudFront CDN and cache warmup so your most important pages are optimized at all times. 

NitroPack is constantly being updated which it’s essential to keep up with Google’s constant updates.

3. Huckabuy

Huckabuy

Huckabuy has been preparing for this day: they counted the seconds to the Google update on their site. They understood the importance of Google Core Web Vitals and that’s why they focus so much on page speed.

Huckabuy is a software product that improves your website’s LCP and FID and according to their site, “websites that leverage Huckabuy’s Page Speed have experienced an average of 15-30 point increase in Google’s page speed score”.

It offers:

  • Access to servers in over 200 cities provides the fastest method of communicating with search engines.
  • Compression and minification of content.
  • Image deferral.

4. Imagify

Imagify

As you can guess from the title, Imagify is a service that specifically handles image optimization. This tool was made by the founders of WP Rocket and its aim is to make the web lighter, reducing the weight of your images.

Imagify compresses the most common image formats and lets you resize images in their online app or from WordPress.

The WordPress plugin compresses images in a bulk. It will compress both the existing images of your website and all the new ones you upload automatically

5. Hummingbird

Hummingbird

This popular WP cache plugin is free and it has tons of features that are useful for Core Web Vitals:

  • It minifies CSS and JavaScript and takes care of smush and lazy load images. Lazy loading delays the load of resources until they are actually needed.
  • It offers world-class caching.
  • Eliminates render-blocking resources.
  • Enables text compression.
  • Hummingbird also has GZIP compression to quickly transfer HTML, JavaScript, and CSS.

6. Cloudinary

Cloudinary

Like Imagify, this tool is just for images. Google recommends serving different image sizes to different devices. That is, having responsive images for better UX.

Although Google doesn’t usually recommend any particular tool to optimize sites for CWVs, it does mention Cloudinary as an option to optimize your images.  

With this tool, reduce image and video sizes while maintaining high visual stability, optimize and deliver via Cloudinary multi-CDN. Cloudinary helps you deliver media faster and keep your weights in check,

7. Perfmatters

Perfmatters

Two brothers and web performance geeks created this lightweight plugin for WordPress.The tool has a minimal and easy-to-use dashboard, with no technical skills are required.  

Reduce HTTP requests, stripe out your code, optimize your database and disable comments and URLs. You can also disable Google Maps and Google Fonts, add blank favicons and remove RSS feed links.

8. Asset CleanUp

Asset CleanUp

This page booster works great with WP Rocket. Asset takes all your CSS and JavaScript and keeps only the critical CSS and JS.

Some of its benefits are:

  • Preload CSS and JS, local fonts, and Google Fonts.
  • Reduce the HTML of the actual page.
  • Move JS files from HEAD to BODY and vice-versa.
  • If you are a developer and want to find something, source code easily.

9. Cloudflare

Cloudflare is known for being a security company that protects Internet properties from malicious activity. However, Cloudflare offers a lot of services.

The Cloudflare CDN lets you exercise control over how your content is cached and reduces bandwidth costs. Cloudflare Load Balancing, on the other hand, reduces latency and dynamically distributes traffic to the most available and responsive server pools. And they have data centers across 200 cities worldwide. Look at all those blue dots!

CloudFlare

Tools for Developers

Comlink is a web worker. It enables you to run code on a background thread. Comlink says it “removes the mental barrier of thinking about postMessage and hides the fact that you are working with workers”. 

This is amazing: workers give the main thread so much space to breathe but they are underutilized because they are frustrating to manage. Thanks to Comlink, you get the API you wished you had all along.

11. Penthouse

Penthouse generates critical CSS for your web pages. Reducing the amount of CSS the browser has to go through makes the page renders much faster. 

The process is automatic. Penthouse will generate the critical CSS needed to perfectly render the above-the-fold content of the page.

If you don’t want to write code, you can access this Critical Path CSS Generator which yes, it’s exactly what it sounds like, it creates critical path CSS.

12. Critters

Critters

This cute little guy is the face of a Webpack plugin that inlines your critical CSS and lazy-loads the rest.

Its key features are:

  • Removes inline CSS rules from lazy-load stylesheets
  • Prunes unused CSS keyframes
  • Supports preloading and inlining critical fonts

13.  Web Packager

Web Packager seeks to automatically meet Google SXG Cache requirements. It’s in an early phase of development but it looks promising. With this tool, you’ll be optimizing page speed.

Web Packager generates signed exchanges. You can use it manually or automatically to create SXG. The Web Packager server will act as a reverse proxy for serving SXG.

To learn more about how Web Packager works and see a list of alternative tools, read this article from Google Developers.

14. React

Besides handling cache and third parties, optimizing your server is key for Largest Contentful Paint. That’s where React comes into.

React is a JavaScript library. It makes it easier to build single-page applications that handle different facets of a web page entirely on the client rather than on the server.

In case you are having severe problems with your server, read Google’s Fix an overloaded server article.

15. FontTools

FontTools is an open-source library for manipulating fonts, written in Python.

Fonts are also relevant to Google Core Web Vitals, particularly to Cumulative Layout Shift. Google recommends using FontTools to subset and optimize your fonts. That way you’ll be preventing sudden content shifts and optimizing speed.

FontTools will take your font file create a new one with all unnecessary glyphs pruned.

Conclusion

In this post, we covered a wide variety of tools that’ll help you optimize your website for Google Core Web Vitals.

The truth is, although a few were developers’ tools, you don’t need to be tech-savvy to improve your LCP, FID, and CLS. There are plenty of tools that automate all the processes so you don’t have to worry about anything.

You may also like...

Leave a Reply

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