Navigation Menu+

How To Minimize Your Javascript and CSS Files for Faster Page Loads

Posted on Nov 4, 2007 by in Web

Over the last 11 years I’ve spent a great deal of time trying to improve client websites with an eye for minimalist interface design and code. While the minimalist design esthetic is not the choice for every client the notion of less code and faster load times always goes over well. Today, many of web applications I design and code for have a plethora of Javascript and CSS files. Fortunately, there are many options to solve this rather simple problem. Compression, obfuscation and bundling are all great options. “Below you’ll find a list of the sites I’ve visited to learn more about Javascript and CSS compression. Please let me know through email or a comment if you know of any other great compression resources, and I’ll be glad to post them. Most of the descriptions below are taken from the developers of the example. Thanks, Max.

Javascript and CSS Compression

Bundle-Fu – Bundle Your JS/CSS Assets in 10 Seconds or Less
Web 2.0 sites have lots of tiny javascript/css files, which causes one extra round trip per file to the server and back! This is bad! Bundle-fu throws it all up into a big package and sends it out all at once.

Make Your Pages Load Faster by Combining and Compressing Javascript and CSS Files
About six months ago I noticed the pages generated by the content management system were in itself very clean and small, but that these pages still took a long time to load for new visitors. Even on a fast internet connection it took more than 8 seconds to load a basically empty page. The server generated the page in about 350ms, so that wasn’t the problem. The problem turned out to be a combination of two things: each page used more than 12 different css files because each plugin supplied its own css definitions and because the use of the rather large prototype and scriptaculous javascript libraries which also consists of a couple of different files. Now that an article about the same problem featured on the Yahoo! User Interface blog, I decided to make my solution public, so others can benefit from it.

Faster Page Loads – Bundle Your CSS and Javascript
Have you ever watched your status bar while you wait for a page to load and wondered why several files seem to be downloaded before you see anything at all on your screen? Eventually the page content displays, and then the images are slotted in. The files that keep you waiting are generally the CSS and Javascript files linked to from the “head” section of the HTML document. Because these files determine how the page will be displayed, rendering is delayed until they are completely downloaded..

Pack:Tag
A serverside static-resource compressing JSP-Taglib. Could cache ad hoc compressed JavaScript or CSS in memory or in a file. The compressing-algorithms are pluggable.

AJAX and CSS Optimization
Roland pointed me to an article about the amount of Javascript on digg.com’s home page. Seems a few Digger’s found it interesting. Well here at Zimbra we’ve got tons of Javascript and CSS in our AJAX web app. I decided to try an experiment to see if the techniques we use for Zimbra, a rather large AJAX app would help a site like digg.

Javascript Compression

Serving JavaScript Fast
With our so-called “Web 2.0″ applications and their rich content and interaction, we expect our applications to increasingly make use of CSS and JavaScript. To make sure these applications are nice and snappy to use, we need to optimize the size and nature of content required to render the page, making sure we’re delivering the optimum experience. In practice, this means a combination of making our content as small and fast to download as possible, while avoiding unnecessarily refetching unmodified resources.

JSMin – The JavaScript Minifier
JSMin is a filter which removes comments and unnecessary whitespace from JavaScript files. It typically reduces filesize by half, resulting in faster downloads. It also encourages a more expressive programming style because it eliminates the download cost of clean, literate self-documentation.

YUI Compressor
The YUI Compressor is a JavaScript compressor which, in addition to removingrncomments and white-spaces, obfuscates local variables using the smallestrnpossible variable name. This obfuscation is safe, even when using constructsrnsuch as ‘eval’ or ‘with’ (although the compression is not optimal is thoserncases) Compared to jsmin, the average savings is around 20%. The YUI Compressor is also able to safely compress CSS files. The decision on which compressor is being used is made on the file extension (js or css).”"”GZip output compression with AJAX
To make page downloading quicker, I added GZipStream into thernResponse filter.

Javascript and CSS Compression With Java

LZ77-Algorithm-Based JavaScript Compressor
LZ77 is known as the basic loseless data compression algorithm. It is used very wide. For example, common .png, .zip, .gzip, .jar, .war file formats use LZ77 compressing algrightm. Here is a Java implementation of such LZ77 algorithm. And by using the Java2Script Simple RPC technology, it sends the string, which is going to be compressed, back to server, which is a Java Serlvet container, and the server runs LZ77 algorithm to compress given string, and then packs compresed string back to browser side. As this compression is specially designed for JavaScript sources, it gives options for how JavaScript codes are compressed. In most cases, this compressor compresses JavaScript at the ratio of 40%~60%. And if you check off those JavaScript options, this compressor can compress any given string.

Combine and compress your CSS and Java“”So you have your site running on the latest and greatest Java libraries, but your supporting CSS and JavaScript files are really starting to slow things down. You’re no JavaScript expert, so what do you do? Lucky for us some other people have already encountered this problem and have a great solution.

Javascript Compression With PHP

Packer JavaScript in PHP
PHP Version of the Dean Edwards ‘s Packer de Dean Edwards, a JavaScript Compressor/Obfuscator.

Javascript and CSS Compression With Rails

Rails plugin: Blazing fast page loads through bundled CSS and Javascript
I recieved an interesting Sitepoint newsletter the other day which talked about bundling CSS and Javascript ressources (or “assets” like that’s called in Rails talk) to achieve faster page loads. This caught my attention specifically because I experienced the need to repackage many small CSS files on the fly a while back when I worked on a large CMS-type system. Skimming through the PHP source article and code I thought that something similar could be done as a Rails plugin pretty easily and elegantly. I couldn’t resist, sat down and started coding away … so here are my results.”"”

Javascript Compression With Rhino and Maven

Rhino and Maven for JavaScript Compression at Build Time
AJAX-based Rich Internet Applications (RIAs) make heavy use of JavaScript. To improve the user experience of RIAs we can minimize the number of (JavaScript) file requests and reduce their size.

ShrinkSafe
ShrinkSafe is a JavaScript “compression” system. It can typically reduce the size of your scripts by a third or more, depending on your programming style. Many other tools also shrink JavaScript files, but ShrinkSafe is different. Instead of relying on brittle regular expressions, ShrinkSafe is based on Rhino, a JavaScript interpreter. This allows ShrinkSafe to transform the source of a file with much more confidence that the resulting script will function identically to the file you uploaded. Best of all, ShrinkSafe will never change a public variable or API. That means that you can drop the compressed version of your JavaScript into your pages without changing the code that uses it.

MobilVox Maven JavaScript Plugin“”The MobilVox Maven JavaScript Plugin (maven-js-plugin) is a Maven Plugin that manipulates JavaScript in a web application. The currently implemented goal is compress which compresses all JavaScript in a Java web application.

Compression Research

Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests
This is the first in a series of articles describing experiments conducted to learn more about optimizing web page performance. You may be wondering why you’re reading a performance article on the YUI Blog. It turns out that most of web page performance is affected by front-end engineering, that is, the user interface design and development.

Minification v Obfuscation
JavaScript is a load-and-go language. Programs are delivered to the execution site as text (not as executable or semi-compiled class files) where it is compiled and executed. JavaScript works well with the Web, which is a text delivery system, because it is delivered as text.

Optimizing Page Load Time“”It is widely accepted that fast-loading pages improve the user experience. In recent years, many sites have started using AJAX techniques to reduce latency. Rather than round-trip through the server retrieving a completely new page with every click, often the browser can either alter the layout of the page instantly or fetch a small amount of HTML, XML, or javascript from the server and alter the existing page. In either case, this significantly decreases the amount of time between a user click and the browser finishing rendering the new content.

My Other Post About Minimalizm and Compression

Decrease Load Time and Increase ROI in Web 2.0 and AJAX Sites
Facilitate User Experience with CSS Compression
Minimalist Website Design Patternsrn

1 Comment