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.
- 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.
This way, your visitor can start to read your content even while other stuff is happening to add in interaction and functionality.
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 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.
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.
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.
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.
Latest posts by Joel Boonstra (see all)
- Keep your digital life secure with 1Password (or another password manager) - June 11, 2019
- Protect your WordPress site from an XML-RPC attack - April 30, 2019
- 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.