Editor’s Note: This is the second article in our “Three Ways to Speed Up Your Site Load Time” blog series.
In this post, we’ll continue the optimization discussion by focusing on those final pieces of the puzzle: CSS and HTML. As it turns out, Autoptimize is great at helping with those pieces as well.
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. HTML adds structure and meaning to what otherwise would be an unstructured collection of text snippets.
HTML is fairly easy to write, and if you blog you’ve likely written HTML, either using WordPress’ Visual editor, or by switching to the Text tab (or more likely: switching between both). 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, it may seem like a mess, but the spacing, indentation, and comments are helpful to humans (like you and me) while authoring and adjusting a blog post.
However, computers and search engines don’t care about spacing, indentation, and comments. And those spaces, indents, and comments all get sent from your server to your readers’ web browsers, even though the browser doesn’t need them.
Autoptimize has a handy feature to “Optimize HTML Code”, which 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; your webpage size is reduced, so there’s less content to deliver to the browser, without any changes to what your users see.
HTML optimization won’t make your site blazing fast on its own, but it’s a safe, small optimization that Autoptimize makes very easy.
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?). 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, segmented from the other 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.
If you only use the basic feature, you’ll be getting some good benefits. However, if you click “Show advanced settings”, you’ll see some more CSS options that could let you squeeze some more performance out of your site.
You should proceed with some caution here, as most of the advanced optimizations require a deeper knowledge of your CSS to be used effectively. However, there’s one we can recommend that should be fairly safe to enable.
CSS can include references to images files, often used as background images or decorations. Each image included in CSS this way will be downloaded separately. With the “Generate data: URIs for images?” optimization turned on, Autoptimize will find smaller images and convert them to a format that can be included within your CSS files, avoiding more expensive trips to your server to fetch data.
The remaining CSS optimization options require some care to use properly. Fortunately, the plugin author discusses them in his excellent FAQ, which is a good place to start reading if you decide you want to get even more improvements from the plugin.