Minimizing Javascript and CSS Files for Faster Page Loads
Are you having page load issues? Do you operate a CMS website or two that seems to take a long time (even on broadband) to download pages? Well, our Author, Max Kiesler, has ferreted out a number of solutions with some excellent techniques to address the basic issue — multiple Javascript and CSS files cause multiple “round trips” between the server and served pages. Take a look at these solutions that use compression, bundling, and more — at build-time, and after implementation.
by Max Kiesler
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 aesthetic 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.
“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.”
Most of the descriptions below are quotes taken from the developers of the solutions, or from authors of articles pointing to solutions.
Javascript and CSS Compression
Bundle-Fu works within a Ruby on Rails Framework to reduce your “round trips” between a served page and the web server. It’s offered on the Google Code site, where every good Open Source WebMaster should hang out. [- Ed.]
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..”
“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.”
“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
“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
This compressor is written and maintained by Mr. Juliene Lecomte, an engineer on Yahoo’s DHTML Evangelist Team, who maintains a very helpful blog filled with performance solutions (and other topics) at JulienLecomte.net. Mr. Lecomte recently delivered a talk at Yahoo! about developing for high performace — you can watch a video of it, and get powerpoint slides. [Ed.]
“The YUI Compressor is a JavaScript compressor which, in addition to removing
comments and white-spaces, obfuscates local variables using the smallest
possible variable name. This obfuscation is safe, even when using constructs
such as ‘eval’ or ‘with’ (although the compression is not optimal is those
cases) 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).”
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.”
“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.”
“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.”
GZip output compression with AJAX
“To make page downloading quicker, I added GZipStream into the Response 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
“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
This author argues against compression on the fly solutions because of scaling issues, among others, and instead offers a build-time solution because compression solutions are then more robust. It relies in part on a “Maven” (see Apache Maven Project) solution. The blog name “Stay Hungry. Stay Foolish.” are points well taken when it comes to these solutions. [Ed.]
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 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.”
About the Author: Max Kiesler is an award-winning strategic designer and co-founder and principal of Ideacodes.com, a web consultancy in San Francisco focused on next generation websites.
Article released under a Creative Commons Attribution 2.5 License.
Written by: Scott Frangos
This entry was posted on Monday, January 21st, 2008 at 8:05 am and is filed under AJAX Help, Blogging Help, OS WebMaster, Web Help. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
