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.
There are three major areas where you’ll need to streamline and optimize your code. Your HTML (hypertext markup language) is the core code that creates the structure of your site; the CSS (cascading stylesheet) is the code that applies colors, fonts and visual styles to your elements; and, the JavaScript (JS) is the code that makes your site interactive, handling animations, tracking scripts, some visual styles and some form-submission behavior.
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.
JavaScript is where things can get really rough because it’s much more fragile than HTML and CSS. Your goal is to “defer” as much of your JavaScript as possible until the end of your page’s loading sequence. However, you need to think about using a scalpel rather than a sledgehammer when you do this because loading things in the wrong sequence will sometimes break all the scripts on your page. We spend a lot of time parsing through JavaScript to determine which pieces we can fully remove, which we can defer to the end of the loading sequence, and which are truly essential. Again, you can often make some progress on this with automated tools like the ones I mentioned above, but if stuff starts to break or you can’t quite get PageSpeed Insights to stop complaining about scripts on your page, you’ll want to work with a developer.
There’s one more big trade-off about JavaScript — it’s used for almost all tracking tools, including Google Analytics, the Facebook Pixel and similar tracking scripts from just about every social network and software-as-a-service tool under the sun. We often find clients with a dozen or more of these scripts on their site, and unfortunately, that really hurts their Core Web Vitals scores.
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.
Likewise, anything you embed on your site – such as a YouTube video, an animation from GIPHY or an e-mail subscription form from Mailchimp — is going to generate JavaScript and sometimes add heavy elements that will slow down your page load. As with tracking scripts, some of these are necessary (and we use well-optimized signup forms on our site while still achieving scores in the high 90s), but too many will inevitably bog you down.
