Speed Up Your Website

Speed Up Your Website and Boost Conversions

by Brandon Eley on May 13, 2011

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!

Client-Side Optimization

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
  • Combine or Concatenate JavaScript and CSS files
  • Remove any unneccessary images, JavaScript and CSS

Compress JavaScript and CSS

White space and comments in large JavaScript and CSS files can take up a lot of space. As an illustration, jQuery offers two versions — an uncompressed and a minified, compressed version.

Uncompressed jQuery: 184 Kb
Minified jQuery: 78 Kb

The compressed version is 58% smaller!

You can compress your scripts and stylesheets manually using the Yahoo! YUI Compressor. There is also an online compressor tool using the YUI Compressor.

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.

CSS at top, JavaScript at bottom

Web browsers can only download two files at a time, except when downloading scripts. Then it’s just one at a time. And on top of that, JavaScript libraries are often very large, your JavaScript could be slowing down your website significantly. Moving the scripts to just above the closing body tag could decrease the perceived load time of your pages, because the scripts would download last, after the rest of the page was displayed.

This won’t work with all websites, but is a great way to speed up your site if you can.

Server-Side Optimization

Merge CSS and JavaScript Files

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:


Server-Side CSS and JavaScript Compression

Minify is a PHP5 script that combines multiple CSS or Javascript files, removes whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers. Concatenating and compressing all your JavaScript and CSS files can speed up your website by reducing the number of HTTP requests and by significantly reducing the file size sent.

You can also compress your JavaScript or CSS using the Yahoo YUI Compressor, a command-line script that can be integrated into virtually any server-side setup.

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.

Gzip Compression

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.

Download Size: The Web Page Speed Report can also show the total download size of your page, including all the assets. Using image optimization, Gzip compression and JavaScript and CSS compression, you should significantly reduce the file size of your pages.

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).

Additional Resources

Yahoo Performance Rules
25 Ways to Speed Up Your Website
15 Tips to Speed Up Your Website and Optimize Your Code
The Psychology of Website Performance
Make Your Websites Run Faster

Like this post? Share it or subscribe to our article feed...

Comments on this entry are closed.

Previous post: