Our responsive redesign has been a great improvement for metaltoad.com. I was still not entirely satisfied with the speed of our site, especially while waiting for my train at the busy Pioneer Square!
One of the major obstacles for mobile networks is lag, and so I set out to cut down the number of HTTP requests. By improving the site's stylesheets and scripts, I was able to eliminate a dozen extra requests. Results were validated with PhantomJS and the OS X Network Link Conditioner.
First, I applied the
hook_css_alter described in an earlier blog. Taking it a step farther, I replaced Drupal's built-in jQuery with a copy from Google APIs, and tweaked the sort order to get the fewest possible groups. That took us from four scripts down to just one, and six stylesheets down to three (all, screen, and print).
Data URIs with Compass
Since we're using Dan's Boilerplate theme with Compass, another easy step was to use the compass
inline-image() function to replace some of our small images. Six more requests were removed this way.
inline-image("dotted-line.gif"), the compiled CSS becomes:
background: transparent url('data:image/gif;base64,R0lGODlhAwABAIAAAP///zIyMiH5BAEHAAAALAAAAAADAAEAAAICDFAAOw==') repeat-x left top;
Compass automatically keeps the data URIs up-to-date if and when the image file changes. For me, this is a major advantage of using Compass – image optimizations can be integrated into the workflow, instead of only happening when the front-end dev has time and Wheaties to spare.
Did it work?
To measure the results, I needed a way to take repeated samples of the page load time. Refreshing the page a few times isn't going to give an accurate picture, given the relatively high deviation in load time. PhantomJS (a headless WebKit interface) fits the bill. By running the test with the OS X Network Link Conditioner enabled, we can simulate a lossy 3G network. The simulated link was 780/330 kbps, with a 100 millisecond delay and 1% packet loss.
The result? Average load time time dropped by 10%, and the upper quartile was cut by 20%!
Want more awesome content like this? Subscribe to our newsletter!