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