Websites are typically made up of HTML, CSS, JavaScript, and images. We focused on optimizing your images in our first optimization post. We also talked about using a WordPress caching plugin to speed up your site and improve your server performance.
If you’ve ever run a PageSpeed insights analysis or a WebPageTest on your website, you may have seen a suggestion to “Eliminate render-blocking JavaScript and CSS in above-the-fold content.” Doing so can have a really positive effect on your site’s speed and usability.
In this post, we’re mainly going to focus on what that means, for those of you (like us!) who like to know the why and not just the what. WP Rocket, which we recommend for caching, can also handle this process as part of its functions. If you prefer a free plugin, Autoptimize offers granular options for each of these and has a good track record. Click here to read more about configuring Autoptimize on your site.
Topics covered
JavaScript
JavaScript is programming code delivered along with all the content, imagery, and styles that make up a typical page view. It can control both the look of your page and the interactivity of page elements. Once your site delivers the code to your reader’s browser, the browser then follows the instructions in the code to perform whatever task it’s meant to accomplish.
Your WordPress site almost certainly uses JavaScript, whether you know it or not. It can be an incredibly powerful and useful tool for providing enhanced functionality and interactivity. In fact, you’d need to try pretty hard to have a WordPress site that doesn’t use JavaScript.
There are two main ways that JavaScript can slow down your website:
- The size of the code could mean that it takes a long time for your visitors to download it.
- When your visitor’s web browser runs the code, the actions that the code performs could take a long time to complete.
There’s a potential one-two punch here. For most “typical” uses of JavaScript, as soon as your visitor’s browser starts to download a JavaScript file, the download prevents the browser tab from doing anything else until the file has completed downloading. This can mean that your images and content may not be viewable until after your scripts are finished downloading.1
But there’s more! Once the browser downloads a JavaScript file, it then stops doing anything else (like downloading images or displaying content) until it has followed all of the instructions in the JavaScript code. If you have a large JavaScript file that also takes a long time to run, this can mean your visitors are waiting seconds or more (an eternity in web time) to get content from your otherwise speedy server.
Minifying JavaScript
So what do you do? Plugins that minify JavaScript work in two ways. They:
- Make the JavaScript smaller, so it takes less time to download, and
- Wait to send JavaScript to your visitors until the more important stuff—content and images—have been downloaded.
This way, your visitor can start to read your content even while other stuff is happening to add in interaction and functionality.
HTML
HTML is the code that describes all the pieces of your website to web browsers, search engines, and other computer programs that scan or display your website. It adds structure and meaning to what otherwise would be an unstructured collection of text snippets.
HTML is fairly easy to write. If you blog, you’ve likely written HTML, either using WordPress’ older Visual editor or by switching to the Text tab (or more likely: switching between both). Even the block editor (Gutenberg) creates HTML as you’re using it. Your theme also has plenty of HTML included as part of its files.
When writing HTML, it’s very handy to use spacing and indentation to organize your work and to make it easier to adjust the structure if you change your mind. You can see below a screenshot of some HTML (from our post on coordinating a site launch).
If you’re not familiar with HTML, this may seem like a mess. However, the spacing, indentation, and comments can be helpful while authoring and adjusting a blog post.
Computers and search engines don’t care about spacing, indentation, and comments. Yet your server sends all of those spaces, indents, and comments to your readers’ browsers, even though the browser doesn’t need them.
Minifying HTML
Minifying the HTML code removes those unnecessary pieces, thus shrinking your webpages down. Here’s a (very narrow) screenshot of some of that same code with the optimization applied.
As you can see, all of the stuff that makes it readable to people is gone. This reduces the size of your site so there’s less content to deliver to the browser, without changing what your users see.
HTML optimization won’t make your site blazing fast on its own, but it’s a small, safe optimization that’s easy to do in either WP Rocket or Autoptimize.
CSS
HTML describes the structure and meaning of your website; CSS tells web browsers how it should look (What color are links? Which background image should be here?) and where all the pieces should be (Should the sidebar be on the left or the right? How about on a smaller screen?). These visual and layout instructions can be interleaved in your HTML code or can be contained in separate CSS files. Often, WordPress plugins will include their own CSS files in addition to the files provided by other plugins and the ones provided by WordPress itself.
It makes a lot of sense for plugins and WordPress to all have separate CSS files. Doing so allows plugins to be upgraded, modified, deactivated, and removed without affecting other plugins.
However, what’s good for WordPress administration is not necessarily good for web browsers. CSS files, like JavaScript files, need to be downloaded from your server. But not all of the CSS contained in those files is necessary right away. And, like with HTML, CSS can contain formatting and comments that web browsers just don’t need.
Critical Path CSS
As mentioned, not all CSS that your site delivers to browsers is necessary right away. Only some of the CSS is critical to displaying the initial view of your website. This may include the CSS that styles your title, navigation bar, and blog post copy, but not the CSS that styles call-to-action boxes, or slide-out menus, or forms used on one part of your page. By finding this “critical” CSS, plugins can deliver a much smaller amount to browsers much more quickly. They deliver the rest of the CSS needed to manage the look-and-feel for the rest of your site later to prevent it from slowing down the load time.
Minifying CSS
In addition to sending essential CSS early, plugins can minify CSS by shrinking down the various files that your plugins and themes provide, to avoid delivering unnecessary-to-browsers code. CSS minification best practices also used to include a step to combine multiple CSS. This is no longer recommended for Agathon’s hosting, which uses a technology called HTTP/2 to serve websites.
Is paying attention to this worth your time?
We’re convinced it is. I was able to take a fairly basic WordPress site from a score of 74 on PageSpeed Insights (mobile) to a 98 by installing and configuring Autoptimize. YMMV, as they say, but plugins like WP Rocket and Autoptimize will go a long way to improving your site speed and your visitors’ experience.
Joel is responsible for a variety of business management tasks, and for building internal tools for the team to use. He also uses his years of experience to help with hosting support, building software, and general troubleshooting.
Footnotes
- If you’re a developer you can read about ways to avoid this; if you’re not a developer, that page may be Greek to you.
One comment on “Minify JavaScript, HTML, and CSS to speed up your site”
Thank you for explaining all of this.