ON THIS PAGE: Page Load Overview. Be Ruthless With Your Inclusions. Page Load Speed Basics. The Really Technical Stuff. Additional Resources. Next Tutorial.

Page Load Overview.

Page load speed is the time it takes a browser to display your page to a visitor and as I’m sure you already know, it’s important because customers are impatient on the Internet. Your webpage needs to display fast or your customers will head to competitors.

Before a visitor can view your webpage, the browser has to download all the components on the page in order to display it. Be a hero to your customers and reduce the number of components to be downloaded. You will reduce the number of HTTP requests and reducing HTTP requests is how you reduce page load speed.

Optimum page load speed is 5 seconds. Anything over 10 seconds needs to be optimised for page load speed.

Although it can be hard to imagine, there are still Internet users on dial-up. Furthermore, there are many using handheld devices that are loading more slowly than their hard-wired counterparts. Nothing annoys visitors more than waiting for a slow page to load.

Keep your website light when it comes to graphics, scripts and objects that slow it down, both from a usability point of view, but now a search engines ranking position too.

PAGE LOAD AS A GOOGLE RANKING FACTOR.

In 2008, Google first started talking about incorporating page load speed as a ranking factor. So if you have a slow site, you can expect higher cost-per-click on paid search and lower organic rankings.

(Hear it straight from the horses's mouth, in this video interview with Google search engineer, Matt Cutts.)

(I should add that since the interview was recorded, Google has stepped up its rhetoric on this topic. If you load too slowly, your ranking may be adversely affected, and Google has said its algorithm (which applies a "quality score" to your website) is planned to be amended in 2010.)

Be Ruthless With Your Inclusions.

The first step in reducing page load speed is to remove everything that you don’t need. This can be hard to do – especially if you want a groovy graphic-driven website (like this shocker here).

But those cute javascripts that tell every visitor what the time is – do you really need them when the time is located in a computer’s system tray?

Embedding those punchy sound files that launch the moment a page is opened might seem like a good idea at the time, until you realise the bulk of your visitors are accessing your website from work and don’t want their colleagues to hear your blaring tunes or discover that they're surfing the Internet during work time.

So what do you need to do?

You need to talk to your technical people about some of the options listed below.

Page Load Speed Basics.

KEEP CODE CLEAN.

If, like me, you often use a WYSIWYG (what you see is what you get) editor, you’ll find it inserts empty tags in your page.

Go through the code and delete them.

My WYSIWYG editor likes to insert extra headline tags for no apparent purpose, other than perhaps its fun to do. I read the code in HTML view and I delete it to keep my code cleaner.

Removing unnecessary tags speeds up page load and improves page validation.

(Validation services test for errors in HTML code which may cause a web page to be displayed incorrectly or for links to other pages that do not work.)

Also remove white space in the code. Extra lines of empty air, extra spaces and tabs that are not necessary also help speed things up.

Here is an example of white space that is both detrimental and unnecessary to the performance of this website. It also includes information in the code that should be moved externally.

IMAGES AND GRAPHICS.

• Limit your use of animated GIFs which contain numerous images so have a larger file size than regular images. Often, a static image will do the job just as effectively.

• This same principle applies for flash animations (swf files) which are even bigger in size than GIFs. Furthermore, the use of swf requires additional code to check that a flash player is installed on the visitor’s computer – and this adds to the time taken because it adds to the work the browser has to do.

• Create images that are suitable for the Internet (see using images tutorial) in terms of both their size and resolution. Don’t reset size using the html code, rather upload an image that’s the right size to begin with. Use thumbnails, a smaller version of a larger image that users can click for a larger version. Make sure you include height and width tags. Merge multiple images into one if possible.

• Use a common image folder and store all your images there. Call the image by one name, and reuse it if necessary. If you don’t do this practice, the browser has to fetch your image from the server instead of reloading it from the cache.

• GIFs load faster than JPGs although JPGs are better for photos. Optimised PNGs work fastest of all, but do not display transparent backgrounds properly in Internet Explorer (IE) 6, much to the annoyance of many web developers.

• CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into one single image, then use the CSS background-image and background-position properties to display it.

TABLES.

• Browsers operate by waiting until all items in a table load before rendering the content inside them. If your entire page is built as a table, the entire page must be loaded before it appears on the visitors screen. We all know how much people online hate waiting.

• If you do use tables, split them up so the user sees something while the rest of the page is loading. It will still take time to load, but it won’t feel so slow to the visitor.

• In addition to the above, avoid table nesting. This means avoid putting a table inside another table. It takes the browser longer to figure out the spacing since it has to read all the html before it can determine the layout.

CASCADING STYLE SHEETS (CSS).

If you are not using Cascading Style Sheets (CSS), each of your webpages will be stuffed with formatting code that specifies fonts, sizes and colors (for example).

This information will be repeated over and over, creating bloated code that you are expecting a browser to read before it can load the page.

Instead you can easily format this information into an external .css file which provides instructions about how your page should look without bloating the code.

Then the browser can cache the formatting and style information instead of reading every long-winded tag on every page.

There is another advantage to CSS as well.

When you change your CSS the style changes are site-wide so you don’t need to manually change each of your pages.

SCRIPTS.

Most JavaScript appears at the top of the webpage which means that content can’t be viewed until the JavaScript has been fully loaded.

Move it to the bottom of the page so it loads after the visual content, or better still, move it to an external file if possible.

While this decreases the readability of the code for a developer, it considerably speeds up page load.

If you can combine scripts into one file, you reduce the number of HTTP requests.

It can be challenging for web developers when scripts vary from page to page, but will improve your load times.

Remove duplicate scripts.

ERRORS.

HTTP requests that result in an error (such as a 404 Not Found) adversely impact user experience for no benefit.

You can check your website for 404s using this free web-based W3C Link Checker Tool or try the downloadable Xenu Link Sleuth.

(Xenu works with Microsoft Windows 95/98/ME/NT/2000/XP and WININET.DLL , a file normally included with windows.)

REDIRECTS.

Redirects are a means of moving a visitor from one URL to another automatically.

Redirects slow down the user experience since the HTML document needs to be downloaded prior to a page being rendered or its components downloaded.

There are simple things you can do to improve this (by adding a slash / at the end of URLs for instance) and there are other technical options covered off in the Yahoo! Developers Forum (see more on this below).

MINIMISE DATABASE QUERIES.

Many websites are powered by database applications, some of which can be very complex, and this means more queries or calls to a database that need to be made to generate a page which affects page load time and the greater the load you place on server resources (which can lead to unexpected charges from hosting companies).

The reality is that you will be limited in your scope to affect this since the manufacturer of the software is responsible, but there are still tricks you can do.

Shopping carts, for example, that allow the visitor to view a number of items per page should be configured to show only the number of items that can be loaded in a reasonable amount of time.

People prefer clicking on to waiting for your page to load.

The Really Technical Stuff.

Okay, so there are even more things you can do, but now we're delving into the super-charged technical stuff. I'm not a geek so I'm not the best person to explain it to you.

However, I found an excellent post on the subject in the Yahoo! Developer forum which covers options such as:

• Using a content delivery network

• Adding an Expire or a Cache-Control Header

• Gzip Components

• Avoiding CSS Expressions

• Reducing DNS Lookups

• Minify Javascript and CSS

• Removing Duplicate Scripts (and lots more.)

Additional Resources.

What the 80/20 Rule Tells Us About Reducing HTTP Requests

Browser Cache Usage – Exposed!

Next Tutorial.

Take the speed test – See if your website loads faster than a speeding bullet.