Nora Brown Design

Speeding up sites: dealing with javascript

Another component that can slow down a site is javascript files. To minimize this, there are four steps to take:

1. Link to frameworks on Google or another central repository
2. Reduce http requests by combining files
3. Minify files
4. Put scripts at the bottom?

I implemented these ideas on the best classy shirts for dog-lovers site ever. I use JQuery on the site, so instead of linking to my own copy on my own server, I changed the link to Google, per the recommendation in this article. For the homepage, I only have a single javascript file, but I minified it using this handy compressor actually that broke my code somehow (maybe I had some sloppiness in there). This compressor worked just fine.

Lastly, I moved my javascript files to the bottom of the page, just before the closing </body> tag. I wasn’t sure if everything would still work as desired, but it seems to. This doesn’t make the page as whole load faster, but does allow the non-javascript content to render faster, because things are put on hold while javascript is loading:

With scripts, progressive rendering is blocked for all content below the script. Moving scripts as low in the page as possible means there’s more content above the script that is rendered sooner. (from Steve Souders)

Results

Before

js file	size	time
jquery.js, self-hosted	57.2 kb	679 ms
ror_home.js	5 kb	334 ms
analytics.js	9.1 kb (gzipped)	50 ms
totals	71.3 kb	1063 ms

After

js file	size	time
jquery.js, google-hosted	19 kb (gzipped)	170 ms
ror_home_min.js	3 kb	78 ms
analytics.js	9.1 kb (gzipped)	44 ms
totals	31.1 kb	292 ms

Conclusion

As you can see, linking to JQuery on Google made a huge difference. Not only is there a decent chance that a user will already have that file cached, but because Google knows how to deliver content so well and uses gzip, the load time for that file is greatly reduced. Obviously, there is a good deal of random variation from time to time, but taking these simple steps definitely increased the speed of this page by a significant percentage.

Next perhaps I’ll tackle far-future expires headers.