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.
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.
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.
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.
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.
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.