Schneimi’s Dev Weblog


Speed-up your website with one click in eclipse

Posted in CSS,Eclipse,JS by schneimi on April 30, 2009
Tags: , , , , , ,

The most important influence on the loading time of a website, apart from the amount and size of images, is the loading of JS and CSS files.

This tutorial shows you three approaches to speed up the loading of JS and CSS and how to combine them in a batch script. Finally it shows how to integrate the script in eclipse and to execute it with one click.

First of all, I will shortly describe the different approaches, before going into detail.

Consolidation
During development you need structure and overview, so it is necessary to split the JS and CSS code into different files. But the more files you include in your website, the more network connections have to be set up on loading, which costs unnecessary time and traffic.

To avoid this problem, the idea is to consolidate all files (of one type) to one file, so that only one connection has to be set up.

Shrinking
Shrinking is the removal of all unneeded characters like whitespace and comments in your code. Further the replacement of long variable-names by short ones, which simultaneously obfuscates the code.

Compression
To reduce the data being transferred, the webserver can compress it before sending. A receiving webbrowser should be able to recognize the compression and decompress the data.

The most popular compression for websites is the GZIP compression, which is supported by pretty much all browsers.

The following steps are for Windows users, but I am sure you can transform them to Linux without much effort!

1) Consolidation
The first step is to consolidate your JS and CSS files, so you only have to shrink and compress one file of each type.

Because JS and CSS includes are globally loaded into the browser, we are able to just glue all files together and include them as one file. A very simple method to achieve that, is the use of the copy command as follows:

>copy *.css styles_consolidated.css /B
>copy *.js scripts_consolidated.js /B

The /B does a binary copy and avoids text encoding problems!

2) Shrinking
To get rid of unnecessary characters in your code, there are several tools available. As we want to automate the procedure later, we choose the YUI-Compressor which is a great java command line tool that supports JS as well as CSS.

The only thing we have to do, is to set it on a JS or CSS file to create a shrinked version:

>java -jar yuicompressor-2.4.1.jar scripts_consolidated.js -o scripts_shrinked.js
>java -jar yuicompressor-2.4.1.jar styles_consolidated.css -o styles_shrinked.css

If there are any errors in your code, you will get a notice here!

3) Compression
There are two ways compression can be applied. You can compress a file once and deposit it, or you can compress a file on-the-fly when transmitting it.

I use the on-the-fly compression with PHP, because I use PHP anyway and the file is still readable. This is useful during development, where you may want to skip the shrinking for debugging and get useful line numbers in error messages.

To activate the compression for a file, you just have to make it into a PHP file and add one line of code:

scripts_shrinked.js.php

<?php ob_start('ob_gzhandler');header("Content-type: text/javascript; charset: UTF-8"); ?>
[content of scripts_shrinked.js]

styles_shrinked.css.php

<?php ob_start('ob_gzhandler');header("Content-type: text/css; charset: UTF-8"); ?>
[content of styles_shrinked.css]

You include these PHP files like normal JS and CSS files:

<script type="text/javascript" src="scripts_shrinked.js.php"></script>
<link rel="stylesheet" type="text/css" href="styles_shrinked.css.php" />

4) Combination
To combine all three approaches, we will create a little batch script.

But first, we need to create two PHP files that will be used to apply the GZIP compression to our consolidated and shrinked JS and CSS file.

gzip_js.php

<?php ob_start('ob_gzhandler');header("Content-type: text/javascript; charset: UTF-8"); ?>

gzip_css.php

<?php ob_start('ob_gzhandler');header("Content-type: text/css; charset: UTF-8"); ?>

The following batch script is just an example and is set up for CakePHP and the use in different environments. You have to adapt the paths for individual usage!

combine.bat

@echo on
copy %1\app\vendors\js\protoaculous1.6.packed.js+%1\app\webroot\js\*.js %1\app\webroot\js\scripts_consolidated.js /B
java -jar %1\app\vendors\yuicompressor-2.4.1.jar %1\app\webroot\js\scripts_consolidated.js -o %1\app\webroot\js\scripts_shrinked.js
copy %1\app\gzip_js.php+%1\app\webroot\js\scripts_shrinked.js %1\app\webroot\js\scripts.js.php /B /Y
@echo off
del %1\app\webroot\js\scripts_consolidated.js
del %1\app\webroot\js\scripts_shrinked.js

@echo on
copy %1\app\webroot\css\*.css %1\app\webroot\css\styles_consolidated.css /B
java -jar %1\app\vendors\yuicompressor-2.4.1.jar %1\app\webroot\css\styles_consolidated.css -o %1\app\webroot\css\styles_shrinked.css
copy %1\app\gzip_css.php+%1\app\webroot\css\styles_shrinked.css %1\app\webroot\css\styles.css.php /B /Y
@echo off
del %1\app\webroot\css\styles_consolidated.css
del %1\app\webroot\css\styles_shrinked.css

Note that additional files are added with a plus sign!

Finally, we have to execute the script with the approot as first parameter and let the magic happen:

>combine.bat [cakePHP approot]

5) Eclipse integration
Eclipse offers an easy way to integrate external programs and scripts. Here is what you have to do to be able to execute the script with one click:

  1. Open the External Tools Dialog (in submenu of the run-button with red toolbox)
  2. Create a new entry
  3. Enter some name
  4. Enter the location: ${workspace_loc:cake\app\combine.bat}
  5. Enter Arguments: ${workspace_loc:cake}
  6. Choose the “Common” tab
  7. Check “External Tools” under “Display in favorites menu”
  8. Check “Allocate console (necessary for input)” to see the output in the console view

Now you should be able to select the created external tool and execute it with one click.