Will Stamper’s Blog

Setting up my Website (Part 2)

March 26, 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.

Optimization and Profiling

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:

  • 18% reduction in file size of CSS (157kB to 128kB)
  • 45% reduction in file size of Javascript (575kB to 317kB)
  • 14% reduction in image size from Pulverizr (204kB to 176kB)

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.

Switching to Sass

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.

Will Stamper
Senior Front-End Developer for iCloud
Remote in Denver, Colorado