Fastest JavaScript Google Closure + gzip -9 + Memcache + CDN + Headers

Closure + gzip -9 and Memcache

Research, Benchmarks and Stress Tests has lead to create the best JavaScript delivery method to date. If you are looking for today's best method for JavaScript Compression and Performance Delivery methods, then you are in the right place today.

To squeeze the fast juice from our networks we did the following:

1. JavaScript File: "code.js"
2. Run Google Closure Advanced (requires code fixes)
3. Gzip with max compression (gzip -9)
4. Memcache this file (or APC if using PHP)
5. If a CDN is in your budget, use this instead.
6. If using Google App Engine, you get both Memcache+CDN!

Also modify headers to a set of FOUR. Make sure there are no more than FOUR because headers are uncompressed.

1. 'Content-Type' = 'text/javascript'
2. 'Content-Length' = 1234
3. 'Conent-Encoding' = 'gzip'
4. 'Expires' = 'Wed, 01 Jan 2025 16:00:00 GMT'

Also consider adding Proxy Cache-Control header for extra chances of cached data on a local box for people who live in remote regions.

To test the amount of juice that can be sqeezed, run the following command:

    java -jar compiler.jar \
        --compilation_level ADVANCED_OPTIMIZATIONS \
        --js code.js \
        | gzip -c9 \
        | wc -c

This command will report a total byte count which tells the payload size. Under 4,000 bytes is the goal. Our PUBNUB Library is under 2,900 bytes.

You'll want to grab Closure Compiler if you don't yet have it. Download Google Closure Compiler

Visit the Google Closure Compiler website for full documentation.

Google Closure Compiler Advanced

To start, running Google Closure in Advanced Mode requires you to specify which object descendants must not be reduced to a single letter ('object.apple' to 'o.a').

These are important to identify especially if JSON + AJAX is invovled. JSON accessed by the compiled code is not referencable.

The Solution is to wrap the descendants name with ['some_val']

my_obj['some_val'] = m.some_val

Otherwise this will happen:

my_obj.some_val = m.s

Now you can safely execute Google Closure Compiler with Advanced Optimizations.

    java -jar compiler.jar \
        --compilation_level ADVANCED_OPTIMIZATIONS \
        --js code.js > code.min.js

Google App Engine CDN

Since GAE is acting as a CDN, you can use the Memcache APIs to store your compiled goodness. This saves GAE from looking up the file in their crazy file system. Here is the script we use to provide GAE and our other Servers with fully optimized JavaScript deliverability:

    java -jar compiler.jar \
        --compilation_level ADVANCED_OPTIMIZATIONS \
        --js code.js \
        | gzip -c9 \
        | send-optimized.sh

send-optimized.sh has every server IP and access key for ssh access. Or in the case of GAE, a secure custom delivery API.

CDN Other than Google

If you are using another CDN, you'll need to forget about the memcache step listed above. However choosing a CDN over Memcache is much better especially if your audience is international. Your send-optimized.sh script will instead deliver the gzipped file to your CDN gateway.

Fast is Important

Page delivery speed is crucial and has direct correlation with revenue. In the case of Google, adding only 100ms to each page request drops revenue several percent. That will be a large number for Google.

Take into account all the mobile users and growing network congestions. Slow network speeds can be improved by following Closure + Gzip + Memcache + CDN + Header changes.

Don't forget international! With all these Optimizations, your friends in other countries can enjoy a speedy web experience too.

You can do the same with CSS! CSS3 Performance Optimizations