How long does it take your home page to load? How about your product or offer pages? Chances are you don’t know. I didn’t know before recently, either.
A slow website isn’t just annoying to your visitors, it could be detrimental to your site’s conversion rate too. Tests at Amazon found that every 100ms increase in load time of Amazon.com decreased sales by 1% (Kohavi and Longbotham 2007). For those that aren’t math-inclined, 100ms is one-tenth of a second. So, every second that it takes Amazon.com’s pages to load costs them 10% in sales.
Let me say that again…
Every second of load time decreases sales by 10%.
You could reverse that statement and it would also be true. For every second you decrease load time, you could expect a significant increase in conversions. Every website is different, and you may not see the same drastic numbers that Amazon.com does, but its very likely you’ll see a significant improvement nonetheless.
So how do you speed up your website?
The first step is to have a baseline to work from. You have to know how long your website currently takes to load. There are several tools that can help you determine this.
Determining Your Website’s Speed
The problem with just visiting your website and timing how long it takes to load is that everyone has different connections to the Internet, ranging from slow dial-up modems to ultra-fast 50 Mbit fiber connections.
WebsiteOptimization.com has a tool that will show you not only the file size of your page, but also an estimate of how long it takes to view on various connections such as a T1 line and 56k modem. It will also show you the total number of http requests.
Yahoo! YSlow is a Firefox plugin that integrates with Firebug and gives you a grade (A to F) and gives suggestions on how to improve your site’s speed. Google Page Speed is a similar service that ranks your website on a 100-point scale.
Once you know how many total HTTP requests your website makes, and how long it takes to load on various different connection speeds, you’re ready to start making your website faster!
There are two different types of optimization, client-side and server-side. Depending on your web host, you may not be able to make some of the server-side changes but everyone can follow these client-side suggestions.
Reduce the Total Number of HTTP Requests
Web browsers can only make two (2) simultaneous connections to a fully qualified domain name. In simple English, that means that browsers download files from your website two-at-a-time. Wen you think about the number of files that a browser has to download per webpage, there is a lot of back and forth getting files, waiting, getting more files, and waiting. Reducing that number of files can significantly decrease total download time.
There are several ways to reduce the total number of HTTP requests, some of which we’ll cover in other sections as well. Here are a few suggestions:
- Use CSS Sprites and ImageMaps
Uncompressed jQuery: 184 Kb
Minified jQuery: 78 Kb
The compressed version is 58% smaller!
Optimize Your Images
On a lot of websites, images (including backgrounds) make up a significant portion of the total download footprint. Photoshop and other image manipulation appliations can optimize graphics for the web, with very little (or no) decrease in quality.
Even after optimizing in your image editing program, you can decrease the filesize of graphics even more using Smush.it, a free web service.
Avoid Inline CSS
Most inline CSS is repetitive. Fonts and text styles should be set globally using id’s and classes, rather than in individual styles. Most times you think you may only need a style once, you could actually reuse some (if not all) of it by creating a class.
Design Using CSS3
CSS3 offers several new design and layout features that can significantly reduce download time. Not all browsers support CSS3, but features such as rounded corners are often simply a “nice to have” anyway. In some cases you may be able to use CSS3 for these effects, with the basic CSS2 display in older browsers. As more and more browsers support CSS3 effects, the number of people seeing the fallback design would decrease.
This won’t work with all websites, but is a great way to speed up your site if you can.
Using PHP (or another server-side language), combine your styles and/or scripts before sending them to the browser. For example, create a styles.css.php file with includes for each of your stylesheets:
<?php include('reset.css'); include('text.css'); include('master.css'); ?>
Web Server Caching
The idea behind caching is simple – only serve a visitor a file once. Unfortunately, most websites don’t have any kind of caching enabled, so they serve up every image, stylesheet and web page every single time a visitor requests them. You can save a significant amount of data transfer and speed up visitors’ downloads by enabling and using caching.
WebsiteOptimization.com has a comprehensive guide to caching with three different ways to enable caching on your website, including ways that will work even if you don’t have access to change your server configuration.
Using server-side compression can reduce the web server’s response size by up to 70%. Better yet, Apache web server has built-in support for Gzip compression. Apache 1.3 uses the mod_gzip module and Apache 2.x uses the mod_deflate module. You will need access to change your server configuration to enable compression, but this alone could make a VPS or dedicated server worth it.
Determining Optimization Success
Once you’ve sped up your website, how do you know if it helps? What metrics should you track to ensure your changes are making a difference?
Number of HTTP Requests: Every HTTP request takes valuable server resources. A typical dedicated server may only allow 200 concurrent connections in Apache, and a single web page could take 30 or 50 requests after you consider the page itself, images, scripts, and stylesheets that must load.
Load Time: Use a tool like the Web Page Speed Report to check your site’s load time before and after optimization to measure improvement.
Check Your Score: Both Yahoo and Google offer tools for measuring the overall optimization and speed of your website. These tools will also give you recommendations (similar to those found in this article).