Optimise Your Pages for Faster Load Time
Optimise your code so it loads faster.
Optimising your pages is ideally something you should do as you are building your website, not at the end. If you keep these ideas in mind as you develop your website you won’t spend time looking for bottlenecks when your site is complete.
Reduce The Number of Requests
This may sound basic, but simply reducing the number of items on each page will contribute significantly to reducing load time. Think about each item you add before you decide to use it. Is another image really necessary? Can you combine two smaller images into one larger one? If you have more than one javascript or CSS file can you combine them to one? Many of the most popular websites have two or three stylesheets and anything up to ten external javascript files on each page. Combining these into one file would help to increase load time significantly. Your return visitors may have your stylesheets and javascript files saved in their cache, but what about your first time visitors? Why will they return if they had to wait an eternity for the page to load?
Make Javascript And CSS External
While this may sound like it is contradicting the above advice, you should link your javascript and stylesheets rather than include them inline. While this does increase the number of requests, they will be cached and this will make a significant difference in speed when the visitor returns to your website. You will need to experiment to get the balance right for your own site.
Remove All Unnecessary Characters
Remove All Unnecessary Characters
This includes all unnecessary charcters in your HTML, javascript, CSS, PHP and every other text that you code. You can remove comments, line breaks, extra spaces and tabs. This is particularly effective with javascript and even makes a difference when you are using Gzip. A good tool for compressing javascript is YUI Compressor. Beware that compressing (or “minifying” as it is often called) can sometimes produce bugs in your code. It will make reading source code difficult which is both an advantage and disadvantage. For these reasons, always keep a local, working copy of your work.
Gzip Your Pages
Gzip is a method of compressing text that is sent from your server to the browser. In the same way that zipping a file reduces its download size, gzipping a webpage decreases the amount of data that has to be downloaded. A smaller download size means faster download speeds. Gzip can only be applied to text files, as image files are already compressed.
Gzip with PHP
To apply Gzip compression to your PHP-powered website you simply need to add the following code to each page you wish to compress.
<?php ob_start("ob_gzhandler"); ?>
This must be entered before any output is sent to the browser. This is very important. You can’t send out put before you have told PHP to compress the output! This is a very easy way to significantly increase the speed of your webpages. It is up to the browser to implement Gzip correctly so you don’t need to worry about determining whether the browser supports it.
The downside to using Gzip is that it requires more processing power to serve each page. However, this drawback is easy countered by the savings in bandwidth achieved by compressing each page. For this reason, Gzipping as many pages as possible is highly recommended.
Let Users See That A Page Is Loading
One thing that will help your visitors stick around while a page is loading is for them to see that a page is loading. If a web browser knows what a section of a page will look like before the whole page has loaded, it will display it.
Load Stylesheets First
When a browser shows parts of the page as it is loading it is called progressive rendering. The first way to ensure that a page renders progressively is to put the stylesheet in the <head> section. Since the web browser has the stylesheet right at the start it can apply these styles to the page as it loads. If you put the stylesheet at the bottom, the loading of the page is handled differently by Internet Explorer and Firefox. In Internet Explorer a plain white screen is shown until the page has loaded. This means the user has nothing to look at while the page is loading and there is no visual representation that anything is actually hapenning. In Firefox the page is rendered without any styles applied as it loads and then it changes as the stylesheet is loaded. Neither of these is ideal.
Only Use Tables Where Necessary
When content is displayed inside a table it will not be rendered until the entire table is loaded. This means that if your entire page is contained inside a table, nothing will be visible to your visitors until the page is loaded. You should not be using tables for layout anyway.
Related Articles
Tags: Discussion
4 comments for “Optimise Your Pages for Faster Load Time”
Post a comment
More Recent Articles
Stock photography from stock.xchng
I would also recommend to use this online free tool – http://Site-Perf.com/
It measure loading speed of page and it’s requisites (images/js/css) like browsers do and shows nice detailed chart – so you can easily spot bottlenecks.
It’s very detailed and accurate, supports a lot of features like Keep-Alive and HTTP-compression.
Also useful feature is that this tool can measure quality of internet link of your server.
Trackbacks / Pingbacks