The Need for Speed

I promise the title is the only Top Gun reference you’ll find in this post. As I’ve been recoding my site, I’ve been trying to work on speed as much as possible. I wanted to get the design and the code as lean as I could before adding new features.

Load times were the main reason I moved away from using AddThis or having a “Latest Tweet” widget in the footer or dropping a Facebook social widget on the site. These services take a long time to load and really aren’t adding that much to the UX. With page speed always in the back of my mind, yesterday, I decided to do some speed tests in Chrome Dev tools. Here were my results:

Before Improvements

home: 465K, 22 requests, 1.33s
about: 487K, 20 requests, .82s
post: 289K, 20 requests, .73s

I choose these three pages because they each have unique properties. Now these load times aren’t bad… actually they’re quite good. According to Google, anything below 1.5 seconds is above average. After looking at these numbers, I still wanted to see if I could make any improvements.

So I did a quick audit of the resources I’m loading and saw that I’m still loading jQuery on every page. I was doing this because I’m using Flexslider on the homepage, and by the time a user goes deeper into the site, they already have it cached… so what’s the point? But what about direct traffic?

After looking over my analytics, I noticed that a good portion of my site is coming directly to blog articles I post from either Facebook or Twitter. This means, first time users of the site, coming directly to a post page are getting served jQuery and Flexslider, and may never use it.

My solution? Break out Flexslider and its document-ready function into its own JS file called “home.js” then only enqueue it along with jQuery on the homepage. The result:

After Improvements

home: 481K, 23 requests, 1.14s
about: 372K, 16 requests, .53s
post: 174K, 16 requests, .47s

It cut the load time from the about page and blog post page by almost half! Not sure what’s going on with the homepage, I think my first test might be skewed or something, but only a 30K bump in total sizes isn’t bad.

What’s next?

I’m thinking about switching away from Typekit and moving onto Google Font’s CSS option. I need to do some research and find out which is faster, but obviously moving away from third party JS is a huge step. Another thing I plan to do is add HTML5 validation to my comments form, which is a little nicer than what WordPress is doing by default.

So how about you? What have you cut out of your sites for the sake of speed? Do you have any other suggestions for how to make sites faster?

posted in: Front End Development
tagged: ,

Comments are closed