The following excerpt is taken from Optimizing WordPress for Web Core Vitals. You can read the introduction to the guide here.
Once you’ve handled your images, above-the-fold layout and hosting, it’s time to crack open the hood and start working with your code. While some of the earlier improvements are accessible without full-stack web development skills, for this section you’ll likely need to work with a professional web developer to get to the finish line.
I’ll talk about some handy tools in this section that usually help. However, as you get deeper into your code, you may find that some of these “automatic” optimizations actually break things on your site. If that happens, you’ll need to work with a web developer to modify your code so it can be optimized without any functionality falling apart.
For HTML optimization, the minification tool built into Cloudflare is a great first step — once you’re on Cloudflare, it’s as simple as checking a box. You can also experiment with two of our favorite WordPress plugins, Autoptimize and WP Rocket, which have similar features. In short, they carve out all the comments and unnecessary white space to slightly reduce the file size of your page when it is delivered to a visitor’s web browser.
The tools above will also help you “lazy load” your images, ensuring that large image files aren’t downloaded until the user actually scrolls far enough to see them on the page. This reduces the total load time of your page and improves your Core Web Vitals score.
With CSS, things get a bit trickier. You can and should minify your CSS using the tools above, but carefully check that nothing breaks, such as complex animations or areas that use unique or out-of-the-box design elements. Taking your CSS optimization to the next level can also include breaking your CSS into separate files and only calling styles when they’re actually used on a page – for example, if you have an elaborate member-login area, there’s no need to call styles for that area on your home page when people aren’t logged in. Breaking apart your CSS can mean that less CSS is loaded on any given page, which is usually a plus for your Core Web Vitals scores.
A web developer can also help you generate “critical CSS,” which goes hand-in-hand with your above-the-fold optimizations. This ensures that the styles for the content above the fold on your pages loads almost instantly since it’s separated from the other, less critical styles that are used for elements lower on the page. In other words, the stuff you need first is separated so that it loads faster.
You should be continuously assessing which of these tracking scripts are essential for your business needs and removing the ones that aren’t. (Alternatively, you can put some scripts on just one or two pages, rather than adding them globally to all your site pages, to reduce their impact.) For example, we use only Google Analytics on our site. Clients who purchase social media ads might need the Facebook Pixel, but could eliminate tracking from Twitter, LinkedIn or Hotjar. This will be different for every site, but the bottom line is that the more tracking scripts you have on your site, the worse your pages will perform.