Optimize CSS & JavaScript Using YUI Compressor

Optimizing CSS and JavaScript is one of the technique to optimize the web pages. We can club together the files to reduce the total count and finally compress the files. The compression using tools like YUI Compressor drastically reduce the total file size, resulting in faster loading web pages. We can use YUI Compression in several ways as mentioned below.

Notes: This tutorial assumes that Java is already installed on your system. You can follow the tutorials for both Windows(Java 10, Java 11) and Ubuntu(Java 10, Java 11) to install Java.

Use It Directly

We can directly use the YUI Compressor from the command line. We have used the version 2.4.8 for demonstration purpose. Replace the version 2.4.8 with an exact version based on your usage. Download the jar file from the GitHub or Maven Repository.

// View available options
java -jar yuicompressor-2.4.8.jar

Use the below-mentioned commands to compress JavaScript files. In my case, the YUI Compressor compressed the 13 KB JavaScript file to 9 KB reducing the size by 30%.

// Output on console
java -jar yuicompressor-2.4.8.jar <input file>

// Output to given file
java -jar yuicompressor-2.4.8.jar <input file> -o <output file>

// Example:
java -jar yuicompressor-2.4.8.jar myjs.js
java -jar yuicompressor-2.4.8.jar myjs.js -o myjs.min.js

Use the below-mentioned commands to compress CSS files. In my case, the YUI Compressor compressed the 438 KB CSS file to 324 KB reducing the size by 26%.

// Output on console
java -jar yuicompressor-2.4.8.jar <input file>

// Output to given file
java -jar yuicompressor-2.4.8.jar <input file> -o <output file>

// Example:
java -jar yuicompressor-2.4.8.jar mycss.css
java -jar yuicompressor-2.4.8.jar mycss.css -o mycss.min.css

We can provide appropriate encoding to avoid the encoding errors thrown by the YUI Compressor as shown below.

// UTF-8 encoded files
java -jar yuicompressor-2.4.8.jar myjs.js -o myjs.min.js --charset utf-8
java -jar yuicompressor-2.4.8.jar mycss.css -o mycss.min.css --charset utf-8

Use As Maven Dependency

Add the maven dependency to your project pom as mentioned below.

<!-- https://mvnrepository.com/artifact/com.yahoo.platform.yui/yuicompressor -->
<dependency>
    <groupId>com.yahoo.platform.yui</groupId>
    <artifactId>yuicompressor</artifactId>
    <version>2.4.8</version>
</dependency>

After adding the dependency to the project, we can write a script to compress project JavaScript and CSS as mentioned below.

// Merge the files
.....

// Merge code to merge files in order and generate source.js
.....

// Javascript
String args[] = new String[]{ "--nomunge", "--type", "js", "source.js", "-o", "target.min.js" };

// OR
// CSS

String args[] = new String[]{ "--type", "css", "source.css", "-o", "target.min.css" };

ClassLoader loader = new JarClassLoader();

Thread.currentThread().setContextClassLoader( loader );

try {
	Class c = loader.loadClass( YUICompressor.class.getName() );
	Method main = c.getMethod( "main", new Class[]{ String[].class } );
	main.invoke( null, new Object[]{ args } );
	mergedFile.delete();
}

catch( ClassNotFoundException e ) {
	e.printStackTrace();
} 

catch( SecurityException e ) {
	e.printStackTrace();
}

catch( NoSuchMethodException e ) {
	e.printStackTrace();
}

catch( IllegalArgumentException e ) {
	e.printStackTrace();
}

catch( IllegalAccessException e ) {
	e.printStackTrace();
} 

catch( InvocationTargetException e ) {
	e.printStackTrace();
}

Other Ways

Like maven, we can add YUI Compressor dependency for projects using Gradle and Ivy as dependency management tools.

Basic Tool

We have also written the basic tool with default GUI to start with. It's available on GitHub. It uses the version 2.4.7 due to some error with the file path on Windows.