DEVseo

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.

Adding An Expires Header

An expires header is basically a header that can be set up, which will tell the browser how long the file can remain in cache before the browser needs to request an updated version. If this is not set up the browser will decide when to request a newer version of that particular file, which usually isn't that long. This method specifically aims to target those files that you do not work on often, or ever, such as javascript library files, page images and some CSS.

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:

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:

 
ExpiresByType text/html A2592000
ExpiresByType text/css A2592000
ExpiresByType application/x-javascript A2592000

The above will add an expires header to all javascript, CSS and static HTML files that are passed to the browser.

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')));

Using GZip To Reduce The Size Of Files

For me this is the most useful method to help optimise the frton end of your site when coupled with the reduction of HTTP headers because it can show dramatic decreases in the file size of on page elements such as HTML, CSS and javascript.

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.

As another example think of a javascript file, or files, that you might use on your site to add some interaction to the pages. It may look good but javascript can be quite bulky, even after being minimised (which I will come to later), but if you GZip it it will be a lot smaller than it was just by using a small line in your htaccess file. One final example is of a site I have been optimising for the past week or so. Before any optimisation the largest pages were about 1.5mb in size, which is a lot, but the site used a lot of javascript and had a lot of functionality. After running a few optimisation tests I managed to reduce the larger pages down to about 200kb, which is a huge saving! GZipping had a lot to do with this because of the way it compresses files.

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');

Minification/Obfuscation And Concatenation Of JS And CSS

Javascript and CSS are the two easiest components to optimise front end, which is a good thing because in todays modern web world they are probably the most widely found files on web sites.

Minification or obfuscation involves a process by which everything that is not required in a javascript or CSS file to make it work is removed, leaving just the core sections of the file. The idea is to reduce the file size of the file without the possibility of the file not working properly. There are many scripts out there that do this in various ways. The way I have mine set up is to simply remove all comments and whitespace from the files, but leave the syntax as it is. This can still be a huge reduction of file size, but not as much as, for example, the YUI Compressor, which will also swap out long function and variable names replcing them with shorthand version signified by letters.

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;

And the final stage of this process is to concatenate the files, which simply means 'add them altogether as one file'. This reduces the number of HTTP request as mentioned in the previous tutorial and allows for one minified file. It is worth nothing that some javascript libraries require that files are loaded in a certain order because of dependencies, so make sure to concatenate your files in the correct order so that you do not get errors.

One final thing to point out is that YSlow also comes with some very useful links and descriptions of each of the section of optimisation so it is well worth you downloading the YSlow add-on for Firefox and looking through their documentation. On the tools tab of the add-on there is a link to JSLint and it is certainly worth running your javascript files through that before attempting to optimise them as it will show you any syntax errors that could cause minification scripts to fail.