In the last installment of this tutorial I went through the first few parts of YSlow that tell you how your site is performing when it comes to page loading. After reducing the number of HTTP requests by reducing the number of files and images that the browser has to call and load from the server there are still a number of optimisation practices you can use to better optimise the front-end performance of your sites.
The easiest way to add an expires header to the files on your server is by using an .htaccess file and setting the expiry there. An htaccess file is a file that should reside in the main directory of your web server and allows you to set up some server configuration before the browser even sees a file on the server. You can set up URL re-writing, header redirecting, in this case expires headers and many other configurations.
One point to remember is that the file must not be called anything other than '.htaccess' (without the quotes).
So, to add expires headers to your files the simplest method is to add the following line to this htaccess file:
ExpiresDefault "access plus 1 month"
This pretty much does exactly what it says on the tin and will add an automatic expiration date of the last cached time plus one month to all files on the server. You could also direct this at certain file types by adding the following:
The other method that I have used for adding expiry headers to pages can be done in PHP, whereby you can add the following lines to the top of the file you wish to set the expiry headers on (note that your server requires PHP for this to work). Here we have set the headers to a month in advance of the day the page was first hit:
header('Cache-Control: public'); header('Expires: '.date('D, d M Y H:i:s T', strtotime(' 1 MONTH')));
GZip is a server-side software application used for file compression and basically means that anything that needs gzipping will be 'zipped' up to the smallest possible size before being sent to the browser. For a lot of pages it can mean file size decreases of up to 80% depending on the content being zipped. Imagine if you had an HTML page that was 15kb in size, which is pretty standard. If you sent for that to be GZipped it would probably reduce to around 3-4kb, which is a huge saving.
To add GZip using the htaccess file we mentioned above you just need to add the following line:
If your server supports GZip that will automatically compress files with the type listed (to add more simply add the mime-type to the list making sure they are all on one line). The only consideration to take is that Apache 1.3 users will probably have to use GZIP instead of DEFLATE because the newer version of Apache user a newer version of GZip, which needs to be called by using DEFLATE.
For those that don't, or aren't able to do this you can do the same thing in PHP by using the following line at the top of all pages that you require to be GZipped (please note here that all files will have to be saved with a .php extension and then a correct content-type set in the header before output, as seen in the example):
ob_start("ob_gzhandler"); header('Content-Type: text/js');
The same will apply withh CSS, although just whitespace and comments are removed, the only other optimisation option is to ensure all CSS declarations are written in short-hand, such as the example below (the first example is the wrong method, the second is the right):
margin-top: 10px; margin-bottom: 10px; margin-left: 15px; margin-right: 15px; margin: 10px 15px;