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 sitesection; 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.
4. CSS script optimization
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.
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.
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
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.