Web Performance Calendar

I believe that automation is the next phase for web performance optimization. There are a lot of optimizations that are tedious to implement by hand or can simply be done better in an automated fashion. Of course, this is exactly what we’re doing at Torbit — taking all the best practices and making the benefits accessible to everyone without you having to worry about the technical details.

Today, I will talk about some of the challenges of automation and some of the lessons we have learned from optimizing hundreds of sites with our service. I will explain why it is dangerous to go down the list of YSlow or Page Speed optimizations and attempt to automate them without thinking through the broader implications.

In the early days of Torbit, we built a filter that minified and combined CSS files. Pretty simple, right? What could go possibly go wrong? To our surprise, this “safe” filter broke a surprising number of sites. After investigating, we discovered that many sites have invalid or broken CSS that had gone unnoticed by the site owners. To understand how this happens, you need to consider how browsers handle CSS errors. Most browsers will stop parsing a CSS file as soon as they run into a syntax error. When you blindly combine CSS, those errors that used to be at the bottom of a file (and therefore didn’t matter) are now in the middle of one big file. What may have been a small issue that didn’t affect anything, could now be breaking the entire layout of the site.

The obvious solution was to fix or remove the offending CSS rule and that was exactly what we did. We “fixed” their broken CSS files first and then combined them. Unfortunately, fixing their CSS had unintended consequences. We hadn’t considered the fact that developers had been hacking around their broken CSS. In fact, in some cases these bugs had become so baked into their websites that removing them often completely destroyed the visual look of the site. What are you supposed to do when fixing someones code totally breaks their site?

Ultimately, we built a Smart CSS Loader which allows us to download all of the CSS files for a webpage in one request, while still applying each of the files to the DOM individually. This method not only solves the issues from broken CSS, but includes other benefits like being non-blocking and taking advantage of HTML5 localStorage whenever possible.

The lesson here is to follow the principles, but not necessarily the specific rules. In the CSS example, the underlying principle was to reduce HTTP requests, and this goal holds true whether you are doing the optimizations by hand or in an automated fashion. The specific rule of combining CSS files obviously needed some rethinking in order to be able to apply that optimization to any site without breaking anything.

One of the benefits of going back to the fundamentals is that it opens your mind to find other performance optimizations you would have missed if you had simply focused on the YSlow or Page Speed rules. Some of the best optimizations we have at Torbit aren’t mentioned by either YSlow or Page Speed. For example, converting images to WebP format and serving them for targeted browsers is a great optimization that can significantly minimize payload, but it isn’t on the list. Using localStorage to cut down on HTTP requests and improve caching is also not mentioned. To be fair, those tools are primarily for developers and optimizations like these don’t make sense for most businesses to implement by hand. The fact that these optimizations are neither easy nor fun to do by hand is what makes them such perfect candidates for automation.

If you want to automate, it’s important to focus on the basics. Remember the principles. Make things smaller, move them closer, cache them longer and load them more intelligently. Focus on the end objective and don’t get too caught up in the rules.