Three ways to speed up your site, Part 2b: Optimize HTML and CSS

Editor’s Note: This is the second article in our “Three Ways to Speed Up Your Site Load Time” blog series.

Part 3: Optimize HTML and CSS

Websites are typically made up of HTML, CSS, JavaScript, and images. We focused on optimizing your images in our first optimization post. In our most recent post on site optimization, we talked about using a WordPress plugin called Autoptimize to streamline and speed up the delivery of JavaScript on your blog.

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.

This post assumes you’ve read the JavaScript optimization post, so take a few minutes to review, if you haven’t already.

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. 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).

Screenshot showing unoptimized HTML code from a blog post.

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.

02-autoptimize-html-optimized

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.

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?). 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.

However, what’s good for WordPress administration is not necessarily good for web browsers. Just like JavaScript files, CSS files need to be downloaded from your server. And just like JavaScript, it’s often much more efficient to have your CSS files combined into one, rather than loaded individually.

optimize-css-toggleBy default, Autoptimize’s “Optimize CSS Code?” feature will combine most CSS files into one, to avoid multiple expensive requests to your server. In addition, it will shrink down the resulting combined CSS file (much as it shrinks JavaScript and HTML) to avoid delivering unnecessary-to-browsers code. Autoptimize’s default configuration works well with some of the CSS files that ship with WordPress, to ensure that it doesn’t interfere with your work in the WordPress dashboard.

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.

04-autoptimize-data-urlsCSS 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.

Wrapping Up

You’ve now got a great start on optimizing images, optimizing Javascript, and optimizing your CSS and HTML. In our final post on this topic, we discuss caching plugins, which are absolutely critical to keeping your site running quickly. Happy optimizing!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.