Speed up your site by reducing HTTP requests

OK, everyone knows that faster loading sites are prefered by both human users and search engines but I find that a lot of people still don’t realise that loading multiple JavaScript files or CSS files will slow your page load down. This is because every separate file triggers a separate HTTP request (that’s a call back to the server to load another file).

If you – like me – like to split out your JS and CSS into lots of separate files to make them more manageable/interchangeable then you may be interested in the script below which will combine all your separate files into one at runtime and thus only use one HTTP request.

Now I will admit that my script is nothing new and there are loads like it around but I wanted one that you could throw not only single files at but whole directories – this means that you can build all your pages with this script pointing to a directory, then just keep throwing css files into the directory and they automatically get included in all your pages. This makes updating your styles (or scripts) very quick and easy. This is particularly useful if you have more than one person editing the same site and you both want to have a CSS file open – just create as many as you like in the linked directory and they included in alphabetical order – you don’t have to worry about adding @imports to a master file or anything like that.

So – now for a brief rundown of how to use it…..

For time and energy I have only outlined using it for CSS – if you can’t work out how to change it for JS then comment below and I’ll do it for you.

OK – follow the steps below:

1. Download this file: http://mj7.co.uk/am1w
2. Save it as a PHP file somewhere in your site – lets say: /site_root/css/this_file.php
3. Edit the file to change the $relativeRoot variable to be the relative distance your new script is from the site root – in this case change it to ‘../’
4. Create a folder to hold all your css stylesheets – lets say: /site_root/css/stylesheets/
5. In your pages add the following line (lets assume your pages are sat in the site_root/ or you have Apache and use a / to reference the root)

   <link rel="stylesheet" type="text/css" href="/css/this_file.php?f=stylesheets" />

6. Save your page
7. Sling all your stylesheets into the stylesheet folder
8. Take a look (preview)

If all goes well then all your styles from all the stylesheets you put in the stylesheet folder will be available to your page but only one HTTP request was required.

Now, for any of you who are not keen on reading the raw code to work out how the script handles the page scope here is a brief overview:

1. You assign different files/directories by adding them to the ?f= query string – comma separate for multiple files – e.g. ?f=stylesheets,/anotherDir/moreStyles,/css/moreStyles/extraStyles.css
2. The script will first look for any files or folders within the directory the file sites in (not the page’s directory) – so as with the example above just writing ?f=stylesheets – the script will look for a file or directory called stylesheets within the css folder
3. You can specify any file or folder relative to the scope of the script folder – e.g. ?f=../css/stylesheets – would do exactly the same as ?f=stylesheets
4. You can use a / at the beginning to reference the site root – your script will replace it with the value of $relativeRoot to make the include work – so ?f=/css/stylesheet would be fine

Now hopefully that’s enough said (I should hope so for such a small script!). I’d love to hear your thoughts on this. You are welcome to use it for your site or even for any commercial site you build but I’d appreciate a comment below so say you liked it – or if you’re feeling especially generous please tweet, blog or link to this post to share it with others.