How to Concatenate, Minify, and Defer Your CSS, HTML, and JS Using Plugins and Critical CSS

Often, the first recommendation I see from Google PageSpeed Insights (meaning the item you can improve upon the most) is “Eliminate render-blocking JavaScript and CSS in above-the-fold content.” Basically, we want to reduce the number of files we have to load, decrease their size, and, most importantly, load them after we’ve presented content to the user.

What we’re doing is making the user think the page is loaded, then immediately start including all of our usual CSS and JS content so the page quickly functions as expected.

The problem is that this can be really tricky, and the more features your site has, the more complicated it becomes. Couple that with the frequently short lifetime of critical CSS (which we’ll discuss shortly) and you’ve got a new component that requires regular, less-than-thrilling maintenance.

Let’s talk about how you can DIY this and why you probably won’t want to.

Minify HTML

The easiest step is to minify your HTML. This is the structure of your page, so there’s no need to concatenate or defer it. You’ll rarely see any kind of error from this, but you might notice some words (previously separated by spaces that no longer exist) are closer together. I often see this in the menu, and it’s only noticeable if you’re directly comparing the text before and after doing this.

For this, and many of the steps below, my preferred plugin is Autoptimize. It’s free and relatively easy to use. 🙂

To activate this, just check the box next to “Optimize HTML Code.” If you’re not seeing all of the options, make sure you’ve clicked the “Show advanced settings” button at the top right of the page.

Concatenate, Minify, and Defer JS

Next step, although far less simple, is JavaScript. The difficultly here is that we’re working in an all-or-nothing situation, and we desperately want to get to “all.”

Again, we’re working with Autoptimize. Check the box next to “Optimize JavaScript Code” and delete everything in the box next to “Exclude scripts from Autoptimize.”

Unfortunately, we may have just broken some sort of functionality on your site. Check everywhere – any page with unique functionality, your mobile site, etc. If something has suddenly stopped working, disable this section again.

Troubleshooting this is probably an article all its own, so for now I’m going to give you the dreaded, “hire a developer” advice. Unless you already know how to troubleshoot JS using your browser’s developer tools, identify the file in question, and then exclude it from Autoptimize, this is going to be a huge headache for you. Sorry!

Concatenate and Minify CSS

Like the HTML optimization, enabling this section is a simple action with few repercussions. Notice that (according to the title of this section) we’re not yet deferring the CSS. That’s what makes this so safe.

In Autoptimize, enable the “Optimize CSS Code” only. If you know you’re not using, or no longer want to use, Google Fonts, you can enable this option, as well. Keep in mind that you might have local fonts files, installed on your computer, that your users don’t have, so don’t enable this unless you’re really understand what fonts are (and aren’t) being used on your site (or you’re OK with ugly fonts)!

Defer CSS (using critical CSS)

Finally, we’re at the component I get the most questions about, yet I have the hardest time explaining: critical CSS. Basically, this is the minimum amount of CSS needed to load your above-the-fold content. This will make the reader think you’re site’s ready, very quickly, even as it continues to load additional files.

What’s difficult about this, then? It will change based on the updates you make to your site. New social sharing plugin? Critical CSS is out of date. Moved your sidebar widgets around? Critical CSS is out of date. Changed your color scheme? Critical CSS is out of date. If a plugin changes its HTML or CSS, your critical CSS is out of date. Additionally, critical CSS varies from page-to-page, so you can see how this starts feeling a little overwhelming, right?

The good news is that you can easily tell your critical CSS needs to be updated when you notice a “flash” during your page load. Your entire content might show as text, then flash to styled, or it might just be individual components of the page. At a point, however, Google doesn’t recognize your page as sufficient and will ding your GPSI scores, again, because your CSS hasn’t been properly deferred and you’re not prioritizing your above-the-fold content.

Let’s look at how we set up this critical css, using a subscription service called criticalcss.com, as well as a couple different plugins:

At the very least, we’ll want the £2/mo subscription, but for an extra £5/mo, we can reduce our own workload and increase the longevity of our critical CSS. I’m going to assume you want to do the latter, for obvious reasons. 😉

Install the plugin WP Critical CSS and use your criticalcss.com API key to activate that plugin. It will automatically generate your critical CSS for every page. Huzzah!

Unfortunately, your critical CSS won’t all generate immediately, so you (and your readers) will see that flash of un-styled content I mentioned. We can actually use another plugin (although they aren’t intended to be used together) to set up some manual critical CSS in order to reduce that flash. This is the option I use with most clients.

Let’s talk about the above image, which uses Above the Fold Optimization’s “Critical CSS” section. Like the JS section, I’m not going to fully cover how this works. However, basically, you can use criticalcss.com to generate your CSS and then add that, conditionally, to your site’s pages. Every unique page template needs its own CSS, so you’ll use a combination of multiple sections, WordPress conditionals, and weights to control what critical CSS is included.

For each page template, you’ll generate the critical CSS for a sample URL and copy that into the plugin’s settings.

Once done adding your critical CSS automatically, manually, or both, go back into Autoptimize and enable the “Inline and defer CSS” option.

Bonus: Defer Fonts

Real quick, let’s talk about deferring fonts. I usually do this as part of your theme, since I like the functionality better, but since, ultimately, the method is the same, let’s use a plugin we’ve already installed: Above the Fold Optimization. Here, you’ll simply enable the section and specify the Google fonts you want to use. The plugin will attempt to automatically detect these, too, so sometimes I’ll see multiple lines with the same fonts – don’t worry, it’s still working, even if it drives me crazy inside! 😉

The best part is that we’ll do this for you.

Needless to say, the process of optimizing your files can be overwhelming and tricky, requiring the troubleshooting of errors, the analysis of old code, and regular maintenance of critical CSS.

Working past the surprises is a lot easier the more experience you have facing and overcoming those mishaps. I’m not that pushy sales person, but I do want you to know I legitimately think working with a developer is your best option and I want to make that decision easy, and affordable, for you. While Once Coupled’s team can set this up for you as a one-time fix, we can’t guarantee how long that lasts. That really depends on how often you modify your site.

Our site speed subscription means you don’t have to check your score, you don’t have to make the updates, and, our hope is, you won’t worry about this at all. 🙂