Feb 162012
 

The site I’m working on now, deploys as static files. I haven’t put up a non-server-side-dynamic site since high school, so I’m exploring my options. I thought I could just throw the whole thing up on Amazon S3, but was surprised that it was slower than the current setup (nginx on Linode). I have been reading about the importance of fast load speeds on conversion, google ranking, etc (for example), so speed is a big priority for me. Here’s how I cut my site’s page load time down from around a second to around 500ms.

Starting Point
To start, I threw the site up on my Linode, using nginx. The server runs a bunch of other sites, in a variety of languages, all with pretty low volumes. The server has keep-alive enabled, but not much else has been tweaked.

Hosting-As-A-Service
I looked at hosting on S3, Cloudfront (amazon’s CDN), and Rackspace’s CDN. Using apachebench (from slicehost), I compared the performance between all 3 of those options, with my nginx as the baseline. S3 was the slowest (slower even then nginx on my little VPS). Cloudfront was comparable to my nginx, and Rackspace would spike to about double the requests per second of my linode, but would also dip to slower than my nginx. Rackspace also has two big drawbacks. It doesn’t let you auto-serve index.html when a directory is requested, so I would still have to run nginx for the html files (as opposed to amazon, which supports this). Rackspace also doesn’t support directories. There are work-arounds, but it’s a pain that I can’t just mirror my directory structure on their cloud. Overall, the cloud hosting solutions were a let-down, and I decided to just host it myself, on linode/nginx.

Testing Methodology
I used Chrome’s debugging tools (with browser caching turned off) to get a sense of pageload times. I would refresh the page several times, and make a note of the spread of times. Not entirely scientific, but good enough for a rough idea of the relative improvements I was making.

External Resources
I had several external resources being referenced. I was sourcing some images from my Etsy store, using a public CDN for jquery, google fonts, etc. I pulled all those into my own repo, rather than rely on whatever bandwidth these providers want to give out for free. I didn’t see any speed change from this, probably because the files in question were pretty small.

Minify CSS & JS
My site goes through a script to convert it from templates and code into static files. As part of this process, I added minifying the CSS and JS files. I combined all the JS files into one file, then ran it through yahoo’s yui compressor, and did likewise for the CSS. Javascript was compressed by 14%, and CSS was compressed by 23%. Page load times dropped from around 1 second to around 700ms.

Resize Images
The same images appear in a number of places on my site, and I was using CSS to change the size. I switched to having the script generate different versions of the image, for every size I needed. This drastically reduced the filesizes, and dropped the pageload time down another 100ms to around 600ms.

Asset Server Pool
The last thing I added was an asset server pool. Browsers limit the number of connections they’ll make to a given server. I made a CNAME DNS alias for the site’s url (so the same nginx serves both domains the same), and sent half the assets (images, js, css, etc) to the alias. This bought me another 100ms, and left me at around 500ms.

Pageload Accuracy
The pageload times I was measuring were definitely anecdotal, and heavily influenced by my internet connection, laptop resources, etc. They are used more to show the relative improvement, rather than as a reliable indication of the speeds users will see.

The Code
All the code and project setup described here is on github.

  One Response to “Cutting Pageload Time by 50%”

  1. You can definitely see your skills in the work you write.
    The arena hopes for even more passionate writers such as you who are not afraid to mention how they
    believe. All the time go after your heart.

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>