Speed!

Jan 25, 2010
Episode 9
Nick and Jim show you hot tips to get your site loading so fast you'll smell the rubber burning!
Spotlight

Thanks to those who make Doctype possible!

Improving Website Performance

Decreasing load times does not just have to do with speeding up database calls and back-end code. Most of the visitor's time waiting for the site to load happens client-side. Here is a list of things you can do to make sure your content is delivered and rendered as quickly as possible.

Sprites

Making HTTP requests is slow. The name of the game is reducing the number of http requests for your page. If you have a lot of images, one way to speed up your site is to combine your images into one large image, and use them as sprites. Once you have your large image or sprite map with all of your sprites in it, you can create a div of the height and width of one of the images in your sprite map, set the spritemap as the background, and position the background with a negative x and y until the desired sprite lines up. Sure the images is bigger, but most of the slowdown is in the overhead of making the connection, not the download. This is a big speed booster.

External CSS and JavaScript

CSS and JavaScript should always be in external files. It can be tempting to patch in a little piece of JavaScript or a style here and there, but this just slows down your page. By using external files, you can take advantage of browser caching mechanisms. This means that instead of loading up CSS and JavaScript every time the page loads, you can load it in once, and have it always be there. This is a small tip, but it makes a big difference. Once you get into the habit of doing this, it's becomes second nature.

Exporting Images Efficiently

The way you save images in an editor like Photoshop can dramatically impact their filesizes, and thus, the time it takes for your webpage to load. In most cases, using the .png or "ping" format is what you'll want to use. If you need very accurate color reproduction, or if you need a detailed alpha channel for transparency, you'll want to make sure to use a 24-bit ping. Now, pings are good for images with flat colors and patterns, but for photographs and large complex images, a JPG could give you smaller file sizes without much of a hit to quality. Just be careful to not over compress images. If your image only uses a few colors, there's no shame in using a .gif. Some might say that .gifs are outdated, but a .gif image can sometimes give you smaller file sizes, especially if you limit the color palette to only the colors you need.

Placing your JavaScript and CSS

When you load up a page, you want it to load as quick as it can. That is why it is important to have your stylesheets at the top of your page so the browser can style and display the page as it loads. Otherwise it would be unstyled and snap to being styled. On the flip side, when the browser is downloading javascript files, it's stops downloading everything else until each file is loaded in one by one. A good practice is to put your JavaScript includes at the end of the page. This way while the browser is loading in all of those scripts, your visitors will have something to look at other than a blank screen.

Static Asset Domains

Browsers have this neat restriction in that they will only open 2 connections at a time to any particular domain. So if you have a bunch of images, you can at most download 2 in parallel. Nowadays we usually have enough bandwidth on both ends to download way more than 2 things at a time. We can make the browser do just that if we create additional "asset domains" and serve our static content from there. One of the simpler ways to accomplish this is to set up multiple subdomains to point to your website, for instance assets1.mysite.com through assets4.mysite.com. Then in your pages change the url of your static assets to any of static hosts you set up.

You can set this up pretty easily by creating your subdomain and pointing them to your site using the ServerAlias directive in your VHost, if you are using apache. Some frameworks, such as Ruby on Rails, have this functionality built in and will automatically assign an asset url to your image tags if you use special helper functions.

GZip and Expires Headers

There are some things you can do on your server to reduce response time. One is to GZip your assets coming from the server. GZip will typically reduce the response size by about 70%. A large majority of online traffic comes from browser that accept GZip encoding, so use it! Many shared hosts will already have GZip set up for you.

Using the Expires header for your static content will tell the browser how long to cache an asset before requesting again. If you set it very far into the future, your user will never have to download that static asset again.

Resources