March 25, 2013
This post picks up roughly where the first one left off. I had a mostly functional website, but I still needed to add some core features and make some foundational changes.
I started off using Chrome’s Developer Tools to run some audits on my website. A lot of the problems that it detected were the result of server side configuration issues that I didn’t really have any control over, but it did offer some solid advice.
First, I needed to minify my Javascript and CSS files. I poked around online for a bit and quickly found uglify-js and clean-css, which I mentioned in my earlier post. It was fairly simple to integrate them into my Makefile to produce the minified files I wanted. I looked into minifying my HTML, but I was unable to find a good utility to do so.
The second suggestion it had was to bundle my Javascript and CSS files into as few files as possible to reduce requests to the server. I did less of this than I would have liked, but I did manage to combine a couple of files together.
Next, it suggested that I move the style elements to the top of my HTML and move the script elements to the bottom as much as possible to allow for more efficient loading. This was a relatively easy fix, so I went ahead and did that.
Finally, I decided to look into the sizes of the images I was loading. I found pulverizr, which allowed me to remove unnecessary data from my images. I also resized a few images to the smallest necessary sizes.
The results:
That’s a total reduction of around 315kB. That translates to a little over 4 seconds over 3g, or around a third of a second on average broadband. Not too shabby.
One suggestion that was intriguing was to remove the non-used CSS rules from my CSS. In particular, I use very little of Bootstrap, so it would be a performance and size benefit to strip the CSS files down a bit. I decided to postpone that adventure because of the impending release of Bootstrap 3.0.
Overall, I’d say my efforts were successful. I haven’t run any specific tests to see if the effects of combining files and changing the load order had any effect, but they were not noticeable. Perhaps on a slower computer or connection or in an older browser they would have more of an effect, but they at least do no harm.
Once I started to seriously write a bit of CSS, I decided to transition to using Sass - Syntastically Awesome Style Sheets. I had used Sass at a previous job, and it offered some nice features that I missed in basic CSS. In particular, the ability to store variables plugged into calculations makes adjusting layout significantly more quick than manually tweaking numbers. I also appreciated the ability to easily reuse snippets of styles as I built a similar-but-not-identical stylesheet for the blog portion of my site. I ended up writing 371 lines of Sass, which compiled to 247 lines of non-minified CSS. Hopefully, this switch will make tweaking and maintaining the site a breeze.
To be continued (again)…
In Part 3, I’ll talk about implementing Journo and getting the blog up and running.