The Biz The CEO Blog

How To Speed Up a Website

By David Ciccarelli

June 28, 2010

Comments (0)

Page Load Times For a web-based service that helps to make the world sound good, we've been focused on speed as an element of design. After 12 months of hard work, we've achieved a 10X improvement in page loading times. This means it's ten times faster navigating the website, uploading and download audio files.

Voices.com's page load time has been reported as fast as 963 ms, which is ten times faster than the 15.30 seconds previously reported by Pingdom, a web site monitoring and measurement service.

In today's article, I'll share with you a number of tools that we used to achieve these improvements in page load time.

Why Make a Website Load Faster?

Why should you spend your precious time and potentially your resources improving the page load times of your website? Here are three great reasons:

à¹ Make your site faster.
à¹ Keep Internet users engaged with your site.
à¹ Reduce your bandwidth and hosting costs.

Tips and Tricks To Get Your Pages To Load Faster

With three solid reasons identified, you will have the confidence to move ahead with implementing some of these methods to make your pages load faster. Here is what you can do:

1. Lay out your pages with CSS, not tables

CSS downloads faster than tables because:

à¹ Browsers read through tables twice before displaying their contents, once to work out their structure and once to determine their content

à¹ CSS generally requires less code than cumbersome tables

à¹ All code to do with the layout can be placed in an external CSS document, which will be called up just once and then cached (stored) on the user's computer; table layout, stored in each HTML document, must be loaded up each time a new page downloads

à¹ With CSS you can control the order items download on to the screen, make the content appear before slow-loading images and your site users will definitely appreciate it. At Voices.com, the body of the page loads first, then the header and footer.

2. Don't use image to display text

It's our old friend CSS to the rescue again. There's no need to use images to display text as so much can be accomplished through CSS. Previously at Voices.com, we had large images on the home page that described the features and benefits of the service. All the text was in images that loaded slowly. Now, the same words are displayed as proper text and the graphics and formatting loaded with CSS.

3. Put CSS into external documents

Considering the advantages of CSS listed above, most websites are designed with CSS nowadays. To optimize the CSS code, you can use a tool like CleanCSS that will merge similar selectors, remove useless properties and remove the whitespace from your code.

After you've optimized your CSS, place the file in an external document then reference it by including this code in your page header:

There's no limit to the number of these external documents that you can use! You can improve page load times further by having a CSS file for a certain part of your website. For example, we have a print.css file that is only used when someone is printing their page. We also have a mobile version of the website found at http://m.voices.com that has it's own CSS file for formatting on mobile devices. Think of areas of your website that can be isolated then create a compact CSS file.

4. Put JavaScript into external documents

In a similar strategy, you should also place your JavaScript files in an external document then referencing the JavaScript by including this snippet in your page header:

Any external file is called up just once and then stored on the user's computer. Instead of repeating JavaScript or CSS over and over again in HTML files, just write it out once in an external document.

5. Minimize white space, line returns and comment tags

Every single letter or space in your HTML code takes up one byte. It doesn't sound like much but it all adds up. We've found that by working through your page source and eliminating unnecessary white space and comments, you can shave off up to, or even over (if your HTML is really inefficient) 10% of its file size.

6. Remove unnecessary META tags and META content

Most of the 22 META tags are pretty much unnecessary and don't achieve very much. The most important tags for search engine optimization are the description tags and the keyword tags, although due to abuse even these tags have lost a lot of importance recently. It's recommended to keep the content of META tags each under 200 characters. Anything more increases the size of your pages.