By David Ciccarelli
June 28, 2010
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 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.
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.
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.
Here's a chart from Pingdom that reveals how fast pages load on Voices.com. We've definitely made a 10X improvement compared to this time last year.
Here are some of the tools we use to both measure the speed of page load times, identify problem areas and monitor speed improvements.
Why not share your knowledge and jot down a few of your own tips for improving the speed of a website? Add your comments below.
Learn how to run an online business and see which tools Voices.com uses to serve a global market of over 100,000 users.