The Biz The CEO Blog

How To Speed Up a Website

By

Comments (0)

Page Load TimesFor 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.

Delivering With Results

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.

Website Speed

Tools To Measure The Speed of a Website

Here are some of the tools we use to both measure the speed of page load times, identify problem areas and monitor speed improvements.

Web Page Analyzer

iWebTool Speed Test

Pingdom Tools

Yslow

Google's Page Speed

Have Any Tips to Share?

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.


Comments


Leave a Comment



Recent Articles

Responsive Design Increased Visit Duration by 17%

How To Give a Google Glass Demo

3 Ways To Subscribe To a Podcast with iTunes

How To Get Google Glass

3 Steps To Responsive Design Browser Testing

Google Planning Audio Ads in Streaming Music Service

How a New Breed Of Small Businesses is Harnessing the Power of Emerging Technologies

The LAMP Technology Stack

How To Speed Up a Website

History of the Voice Over

   

Subscribe by Email

About This Blog

Learn how to run an online business and see which tools Voices.com uses to serve a global market of over 100,000 users.


Follow Us

   

Our feed & social options update you with special offers and news as it happens.

Do You Have a Project?

Request a Quote

Looking for voice talent? You've come to the right place. Post a job and you'll get sample recordings of your script and price quotes.

Tell us about your project