Adventures in Frontend Performance

In my daily job I am far removed from being a frontend engineer. In a previous job I had spent months to optimize JavaScript to be small enough to be served by an embedded microcontroller (there's a certain irony in the fact that I don't have the original paper anymore and thus can't read my own paper without paying now, but that's a different topic). But those days are long gone. My main tools today are Chef, PHP and shell script most of the time. This means that I unfortunately don't have a great amount of experience on how to structure web frontends to be fast. But it's one of the things I'm working on getting better at. Fortunately I work with a lot of talented people. And one of them, my coworker and friend Lara Hogan, literally wrote the book on "Designing for Performance". So I decided to start there and bought it and read it last week. It's a great and fast read and gives you a really great introduction into how to structure web content to be fast.

After I was done reading it, I decided to try out what I've learned and see if I can make my blog faster. So I installed YSlow and ran it on an example blog post. I don't often have a lot of images in my posts. It's mostly text and maybe some inline code snippets. So I decided that this was a good representative post for testing my improvements. And the YSlow results weren't great. In my current setup loading this simple page resulted in the following YSlow result:

12 HTTP requests and a total weight of 157.2K bytes with empty cache

At least I now had a baseline to compare my changes to. The book has a very good chapter on how to cleanup CSS and how it can affect page weight and page load times. So I started there. I didn't really have good structure in my CSS as it has basically organically grown since 2009. And whenever I wanted to change something or try out something new, I just added the CSS for it on top of the existing one. I've rarely gone back and cleaned things up. This lead to me having 3 CSS files being loaded for every page. The main style declarations aptly named style.css, a CSS file which contained definitions for all the code highlighting I'm using on my site pygments.css and a third file from when I started playing with fonts that would declare font-faces and such and was named - you guessed it - fonts.css. When I added those files it made sense to me to have them separate. They were taking care of different things, contained no duplicate code, I was basically treating them like includes in a programming language. So I took a look at the files and found a lot of old clutter. I was still loading two fonts which I hadn't used in forever. And I also had recently reworked my header but was still loading the font that gave me icons for popular social media sites which I had previously used for linking. Those together were already around 75kB and 3 HTTP requests for nothing. So I removed the fonts I wasn't using, cleaned up some other CSS that I had found that was unused and combined the 3 style files I had into 1. And that already gave me a huge jump in optimization. Just by removing things that I didn't need and combining CSS files I went to:

7 HTTP requests and a total weight of 65.4K bytes with empty cache

I was already amazed and excited and of course now I wanted to do more. So I installed a CSS minifier and decided to load only minified CSS. This gave me another 15 kB in improvements:

7 HTTP requests and a total weight of 50.0K bytes with empty cache

Another thing that is mentioned in the book as a common way to improve performance is to load images for the size you actually want to display them at and not bigger. I didn't want to go through all the images I had in some random blog posts but still do something for my baseline performance. And since I load my avatar from Gravatar into the header on every load, I looked at that and saw that I was requesting the image in size 142x142 (Gravatar gives you the handy URL parameter ?s=142 for that) but was only displaying it in 100x100. So I changed the parameter to 100 and squeezed a couple more kilobytes out of my site:

7 HTTP requests and a total weight of 47.7K bytes with empty cache

Now I was kind of at a stopping point. I had collected all the low hanging fruit. My page was only a third as big as it was before and I was down 5 HTTP requests that didn't have to be done anymore. This was already huge for me. Looking at YSlow now told me that I was spending another HTTP request for loading JavaScript from Twitter to embed their social media buttons. And that this also added about 35 kB to my page weight. At this point about 75% of my total page weight. Of course as a first course of action, I tweeted about it and thought about whether or not I really need or want the share buttons on there. Fortunately Corey responded to my tweet with essentially what I was thinking. That I don't really need those buttons for anything. So I removed the buttons, bringing my total YSlow results to:

6 HTTP requests and a total weight of 12.4K bytes with empty cache

And I was blown away when I actually saw the number. Just by following some simple advice from the book, I was able to cut the number of HTTP requests in half. And slim down my page weight to ~8% of what it was before.

Learning new things is fun

Optimizing my site has been a lot of fun. Of course if you are an experienced frontend engineer, all of those things are not surprising and probably the first thing you would try. But not working in that field every day, I was surprised by the impact such a cleanup and restructuring can make on even a small site like mine. I had tried to dabble a little bit in getting better at frontend engineering and performance before. However I had never had a good introduction to give me a place to start. Learning new things can be overwhelming and especially if you don't know where to start, everything can feel like it's probably wrong. Lara's book gave me a great introduction into all the different topics of frontend performance and if you are interested in this as well, I can highly recommend it.

For now I might not be able to squeeze out more performance just from reducing the page weight. I've since installed mod_deflate and mod_expire on my web server to improve transfer size and caching for my site. However I still feel like structuring HTML and CSS in a good and fast performing way is something I don't have a good grasp on. And it's definitely something my site can benefit from, if even for more clarity next time I want to change anything. So this might be the next thing I'll tackle in learning more about frontend engineering.