Posted on 2015-09-12
While reading through my RSS feeds the other night, I came across this article from One Tap Less about what he did to improve load times on his site. My first thought was, "I use a static site, I don't need to worry about this" and dismissed it. Then I figured, why not just try out my site on Google's PageSpeed Insights. Turns out, I had some work to do.
When I initially ran the test, this site came back with a score of around 41/100 for both desktop and mobile. I would have been fine leaving it, but that was pretty bad. Google does a great job telling you what things need to be improved, even down to the specific files causing problems.
<head> tag, so this was as simple as moving that to the bottom of the page. Google also suggested using the
Eliminating render-blocking CSS was a little more tricky. Google suggests inlining critical CSS. I haven't taken the time to figure out which CSS that would require and how this would change my workflow. For now, I've taken their suggestion and load my CSS at the bottom of the page using a
[Update 2015-09-14]: I figured it out. You can read how I added the critical css here
Ok. Easy stuff done. This put my site up into the 50's range. Good, but still not great. Let's tackle the one that's lowering my score the most: gzip compression and caching.
I host my blog at the wonderful macminicolo.net, which means I control the server and have to do my own optimizations. Turns out, this really wasn't that hard to do. Here's how to easily enable compression in Apache.
Save and restart Apache
sudo /usr/sbin/apachectl restart
You can test to be sure it's working by using
curl on a file that matches any of the above content types. You should see
Content-Encoding: gzip in the response headers.
Next is content caching. This is also something to edit in the httpd.conf file for Apache. Google suggests at least 7 days for default caching, and up to a year for content that doesn't change often.
# @codekit-prepend "../js/jquery-1.10.1.min.js", "../js/bigfoot.min.js";
My final score check: 91/100 on mobile and 97/100 on desktop! I think I can call that a success. Honestly, when trying to load my site on different devices, I didn't notice a significant increase. That being said, at least I'll be in Google's good graces for being a good web citizen, and I'll avoid any risk of them down-ranking my site for doing things incorrectly. I still want to take advantage of the critical CSS at some point, but I can leave that for another day.