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.

Spriting Images

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:

GMH builder.png

Finally, we've been running our sprites through PNG Gauntlet to make sure they are compressed as much as possible.

Compression

We've started using mod_deflate to compress our HTML, JavaScript, and CSS files. This sets HTTP Headers for certain extensions so that users with modern browsers can download a smaller file and then decompress it on their own machines, while remaining compatible with old browsers. This cuts down the size of our Javascript and CSS by 60% in some cases! In order to do this we had to use a Custom Origin with Cloudfront, rather than pointing it to an S3 bucket, which was a blessing in disguise since it speeds up our development process as well.

Setting Cache headers for files

Since Cloudfront is pointing to our EC2 server with a Custom Origin, this means we can set Expires and 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.

Use Access-Control-Allow-Origin

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.

Todo...

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.

Servers

November 9, 2011 23:59

Had a good trip to Boston last weekend. Beautiful weather and good company!

The Massachusetts State House

Boston, Photography, Travel

October 30, 2011 20:36

A few weeks ago my coworkers and I carved some pumpkins. I decided to make my favorite fluffy six-legged bison, Appa. I think he turned out pretty well!

Appa pumpkin from Avatar: The Last Airbender

News

October 1, 2011 21:35

I've done a few "manly" things with my car such as changing the battery, putting on a spare tire (more times than I'd like), and replacing the light bulbs. But today I completed my first home improvement - well, office improvement - project.

This is my surprise for the office on Monday - a wall rack for the darts we currently have scattered on the floor. Nothing special, but you have to start somewhere right? And there's something about drilling a hole into a chunk of wood that just feels so... right! :)

Homemade dart wall rack

News

September 20, 2011 13:49

I'm feeling pretty grateful this morning that I can wake up to views like this :)

Holy Name Cathedral in downtown Chicago

Chicago, Photography