Practical web design guides to reduce site load time

Why reducing website load time is important?

The answer is pretty straight forward – Web users are impatient and you only have very little time to draw their attentions. If your website does not load fast enough, the outcome is obvious – users will click on the close button and move on to the next site.

Do site load times affect search engine rankings!

Moreover, slow site response time might damage your search engines (namely, Google) rankings. Although it sounds a little irrelevant but yes, it makes sense totally. Think about this, search engines are all about providing information as good and as fast as they can. Users’ experience in this process (delivering a searcher to the right information in the shortest time) is extremely important and a slow site will do nothing but damage to it (the user experience). Imagine clicking into the top ranked site that fails to display anything in 5 seconds – wouldn’t that makes Google look ugly? Think about it. Why would Google (or other search engines) rank your slow loading website when all you do is damaging the searchers’ experience?

Now, to have a better person to reassure you about all this, watch video below (released on April 28, 2009) and see how Matt Cutts described the impact of site load times on Google rankings.

Improve website load time with better web design practices

There are a lot can be done when it comes to optimizing your web server load time. Checking up hardware bottlenecks, web server upgrades, MySQL optimization, load balancing, and so on. But we are not authorized do most of these tasks when we are running on a shared hosting. In fact most of us wouldn’t want to do that because it’s too technical and too complicated!

Thus what we do in this article is try to work things out from outside – the web design part – and here are 10 quick tips for you.

1. Reduce HTTP requests

An easy way to blast up loading speed is to reduce your site HTTP requests.

Take a good look on your site section; are there any unnecessary lines that could be deleted? Can you combine some of those scripts and cut things short on the HTTP requests?

2. Web caching

Web caches store copies of web content on users’ computer and allow them to reuse the data in future. Caching reduce (or sometimes, eliminate) data downloads from your web server and it is an effective method to improve site load time.

There are several ways (for example, HTML Expires and server side page caching) to enable browser caching and to learn more, I suggest further reading on this comprehensive tutorial.

3. Separate and tone down the weight of your JavaScript

One, minimize onpage JavaScript usage and have them written on a separate file; two, compress your JavaScript (this is easy but often overlooked). Removing white spaces in your JavaScript reduce the size of data transferred; compressing the scripts (using tools like GZIP) easily cut half of the current size and thus free up some bandwidth.

4. CSS script optimization

As stated earlier on JavaScript, the same goes with CSS scripts – you should always avoid using multiple CSS scripts whenever possible, remove white spaces in the script, and compress your CSS script always.

Also, using CSS expression is not a good web design practice in most cases. The code consumes up a lot of server resources and the code will no longer work in some browsers (for example, IE 8) – simple avoid them.

5. Leverage Google Ajax libraries

As mentioned, caching is one good way to reduce your page load time. By using Google Ajax libraries, you decrease the site download time if the script is cached in users’ browser. Also not to mention that using scripts hosted on Google reduces the wait time for Google bots.

6. Proper image optimization

A few things you can do for image optimization – first, don’t use HTML to resize your images; keep your image file size small, preferably not more than 50k; three, use image in PNG format whenever is possible; and lastly, tips from Daily Blog Tips, define your image width and height whenever is possible. The reason behind this act (defining width and height) is because you don’t want the browser to spend valuable time in determining your image dimensions.

7. Use separate domains

Some browsers limit number of downloads per domain and this will drastically reduce the load time if the page contains a lot of data files. If you are running large site, splitting the data files across different domains might be a good idea.

Alternatively you can store some of your data on other Internet storage. For instance many web developers store their static data on Amazon S3 and some bloggers use Flickr to keep their images.

8. Minimize website errors

Well isn’t this web design basic 101? You bet!

But still, we see a lot of experienced webmasters overlook this matter and let broken links run freely on their website. Remember, when a request (by user or by search engine bots) hits 404 page, it’s a costly HTTP request and it’s eating up your server resources.

Unless you just made a cute 404 error page and want to show it to the world, you’d better keep those errors minimum. Apply 302 redirect, do regular check for broken links, clean up old web files – these are some of the ways you can start killing off those unnecessary errors.

9. Use progressive rendering

In layman term, progressive rendering simply means the act of displaying each object as it is downloaded.

Sometimes, progressive rendering is a ‘necessary response’ to your users. It simply indicates everything is working alright (although it’s rather an illusion sometimes) and assure the users that the webpage is ‘coming up’.

10. Consider placing script tags at the bottom

Last but not least, you should place script tags at the bottom of your webpage (before ) whenever it’s feasible. The reason behind this is simple – by placing your script tags bottom, you allow web browsers to download other smaller elements (such as CSS and text content) first and this makes your users feel that your site is loading fast.

Useful tools for reducing website load time

Before I end this article, here’s a list of useful tools to help you get the work done. I have not tried them all but they are just great stuffs and recommended by many other experienced webmasters.

Yahoo! YSlow

YSlow (http://developer.yahoo.com/yslow/) is a Firefox add-on that analyzes web pages and suggests ways to improve their performance. It offers suggestions for improving the page’s performance, summarizes the page’s components, displays statistics about the page, and provides tools for performance analysis, including Smush.it™ and JSLint.

Javascript Compressor

Javascript Compressor (http://javascriptcompressor.com/) is a free online tool that compress and obfuscate Javascript code.

CSS Drive – CSS Compressor

CSS Drive (http://www.cssdrive.com/index.php/main/csscompressor/) is a free online tool that compress and obfuscate CSS code.

Google Ajax Libraries API

The Google AJAX Libraries API (http://code.google.com/apis/ajaxlibs/) is a content distribution network and loading architecture for the most popular, open source JavaScript libraries. The open source JavaScript libraries include: jQuery, jQuery UI, Prototype, MooTools, Dojo, and many more.

Amazon S3 FireFox Organizer

S3Fox Organizer (http://www.s3fox.net/) helps you organize/manage/store your files on Amazon S3. It is easy to install and use as it is integrated into the browser.

Well that’s all – I hope these help to run your website with better efficiency.