A webpage loading time basically depends on four major things – server side processing, client to server communication, size of the data to be downloaded and rendering time. However this blog post will focus on latter 2 – minimizing the size of the data to be downloaded and reducing browser rendering time.
Here are some tips that will help you:
- Analyze the performance of your page
First of all analyze the performance of your webpage through a free online tool. It will help you with some performance analytics and also offer advice on how to improve your webpage’s loading time.
Web Page Analyzer at WebsiteOptimization.com
- Some obvious optimizations
Remove everything you don’t necessarily need. Start with thise silly widgets, scripts and content you don’t need. After this you will see a miraculous improvement.
Use external files for reusable codes: If you are using CSS and Javascript which are being used in one or more page then put that into an external file. This will help your browser to cache those files instead of reading each of then every time the page loads.
- Use CSS and Valid XHTML code
Avoid table based layouts. This will probably help you the most in browser rendering time. In order to render a table correctly the browser has read the complete data of the table from start to end and thus tables with lot of data will increase the loading time of your page. You can avoid this by using table less layouts with CSS.
Ordered Source Code. Ordering the source code of your webpage is very useful and at the same time easy technique involving the important part like navigation and content load and display first, leaving the less important part like footer and ads for last. A page like this is also considered good for search engine bots and may even result in better rankings in search engines.
- Validate CSS and HTML
Its very important that you write a valid HTML and CSS code. This will eliminate the need for browser error correction and thus speed up the rendering time. You can use W3C validator to check your webpage for any code formatting errors.
- Speed up Image load time
First of all remove the unwanted images from your webpage. This is a very obvious tip but sometimes the hardest thing to do.
Use height and width tags. Its important that use specify the height and width attributes of each and every image of your webpage. This will help the browser to render the image faster as there is no need for the browser each images data and determine its size. And also the page layout will not change as the images load.
- Compress Your Codes.
Just like any other code CSS and JavaScript can effect your bandwidth especially for complex websites. This will help in reducing the size by 75% which can be a great performance boost. But keep the original files intact and achieved because most compression tools are one way solutions. Here are some of the tools.
Suggested Readings
