It is well known that visitors to your site will not wait for a long time for your page to load. This post will show you how to optimize your pages by reducing the number and size of javascript and CSS files.
Compressing javascript and CSS
The YUI Compressor allows you to easily reduce the size of javascript and CSS files by removing comments, extra white spaces, reducing the length of variables where applicable, etc from them. The result is a smaller sized file which works exactly like the original.
Compressing using the YUI Compressor is quite straight forward:
1 |
java -jar "yuicompressor-2.4.2.jar" --type js -o "file.compress.js" "file.js" |
2 |
java -jar "yuicompressor-2.4.2.jar" --type css -o "file.compress.css" "file.css" |
Here, file.compress.js and file.compress.css are the compressed output files and file.js and file.css are the input files. These compressed files will work exactly like the original ones. So, you can simple replace the originals with these new compressed files and immediately start seeing faster page load times.
Combining multiple files into one file
We have reduced the file sizes in the previous step. However, we might still have multiple javascript and CSS files required to completely load the page. This means the page has to make one HTTP request for each file it requires. Why not combine all the javascript files into one single .js file and all the CSS files into one single .css file ?
You can use any text editor and simple copy paste the contents into one javascript and CSS file. You will then need to modify your page to include these files instead of multiple javascript and CSS files.
Please note that this technique of combining files can end up requiring the user to download a large .js and .css file for each page if each page requires a different set of files. In that case, you might want to use this technique for only the core files that are required on each page or most pages.
Serve gziped files via PHP
Now that we have reduced the size and number of files considerably, we can further reduce the size by serving gzip content. If you use mod_gzip on apache, you might already be serving gziped files. However, you might still wish to use this section as compressing content on the fly with gzip might be slower than this technique.
We will first need to gzip the contents of the combined file from the previous step. Lets assume the file was file.js and the gzip compressed file is file.js.gz.
This file needs to be served through a PHP file. You can use the PHP code below to serve this file.
01 |
$longExpiryOffset = 315360000; |
02 |
header ( "Cache-Control: public, max-age=" . $longExpiryOffset ); |
03 |
header ( "Expires: " . gmdate ( "D, d M Y H:i:s", time () + $longExpiryOffset ) . " GMT" ); |
04 |
05 |
header ( "Content-type: text/javascript; charset=utf-8" ); |
06 |
07 |
//Check if browser can handle gzip content |
08 |
if (stripos ( $HTTP_SERVER_VARS ["HTTP_ACCEPT_ENCODING"], "gzip" ) === false) { |
09 |
readfile("file.js"); |
10 |
} else { |
11 |
header("Content-Encoding: gzip"); |
12 |
readfile("file.js.gz"); |
13 |
} |
Similarly, to serve CSS, replace text/javascript with text/css in line 5 and change the file names.
Of course, you will have to modify the HTML in your page to load this PHP script instead of the javascript and css files.
These steps should improve the page load time of your page considerably.
Related posts: