December 10, 2011 07:40
Over the past few months, the League of Extraordinary Developers has taken a lot of steps to improve the efficiency of our websites.
Using a true CDN
We're now using Amazon Cloudfront to distribute our content. This means that no matter where a user is coming from around the globe, they will be served data from the closest possible server meaning that the pages will load much faster for them. In addition, this CDN is on a cookie-free domain which keeps the requests to a minimal size.
Eliminating inline JS and CSS
We've dramatically cut down the amount of inline JS and CSS on our sites and are looking to completely eliminate it. Inline scripts usually can't be cached; when they follow the same rules and remain static it's pointless to have the user download them on each page view.
We've drastically cut down the number of requests per page by spriting images. Each website has its own unique sprites, while the network also has a global sprite. We are even able to sprite background images, as long as the width is consistent and the height of the background is fixed. We decided to set the background sprite widths to 20 pixels, even though it's really only 1 pixel repeating, for several reasons: it will require less processing for the user's background to tile a wider image, it makes it easier for us to see what the background is when editing, and it adds a negligible amount of space since PNG compression is very efficient. An example:
Finally, we've been running our sprites through PNG Gauntlet to make sure they are compressed as much as possible.
We've started using
Setting Cache headers for files
Since Cloudfront is pointing to our EC2 server with a Custom Origin, this means we can set
Cache-Control headers using the
mod_expires Apache module. This instructs user browsers not to re-download the files that the user has cached until a month from the date they were originally accessed.
By setting this header, we can also serve CSS3 fonts through the CDN even though they are hosted on a different domain. Without this header, we have to load the fonts through the current domain, which means we are paying bottom tier (highest rate) pricing for both data transfer & Cloudfront, instead of combining the two data costs into one. And again, this is worse for the user since they have to come through EC2 instead of Cloudfront.
Loading Content First
Our websites are laid out with a sidebar on the left containing two advertisements and some navigation, while the content is on the right. We noticed that in spite of all the improvements we made before, the advertisement scripts were blocking the rest of the page from loading. Using some CSS floating, we're able to load the content first while the sidebar is still loading. This is a MUCH better user experience and we predict it will dramatically cut down the bounce rate and improve time on site. In addition, this is good for SEO since the content appears higher on the page in terms of DOM. This may have a big impact on traffic; we'll see.
There are always more improvements to be made. One thing we're working on is combining and minifying JS and CSS files. We're already compressing them, but minifying will help this even more and will continue to reduce the number of requests being made to the server.
The changes we've made have already had a huge impact. Not only are they making a much better experience for our users, they're saving us thousands of dollars in server costs each month, and even bringing in more money through ad revenue.