Group items tagged

According to Yahoo!'s Exceptional Performance Team, 40% to 60% of Yahoo!'s users have an empty cache experience and about 20% of all page views are done with an empty cache (see this article by Tenni Theurer on the YUIBlog for more information on browser cache usage). This fact outlines the importance of keeping web pages as lightweight as possible. Improving the engineering design of a page or a web application usually yields the biggest savings and that should always be a primary strategy. With the right design in place, there are many secondary strategies for improving performance such as minification of the code, HTTP compression, using CSS sprites, etc. In terms of code minification, the most widely used tools to minify JavaScript code are Douglas Crockford's JSMIN, the Dojo compressor and Dean Edwards' Packer. Each of these tools, however, has drawbacks. JSMIN, for example, does not yield optimal savings (due to its simple algorithm, it must leave many line feed characters in the code in order not to introduce any new bugs). The goal of JavaScript and CSS minification is always to preserve the operational qualities of the code while reducing its overall byte footprint (both in raw terms and after gzipping, as most JavaScript and CSS served from production web servers is gzipped as part of the HTTP protocol). The YUI Compressor is JavaScript minifier designed to be 100% safe and yield a higher compression ratio than most other tools. Tests on the YUI Library have shown savings of over 20% compared to JSMin (becoming 10% after HTTP compression). Starting with version 2.0, the YUI Compressor is also able to compress CSS files by using a port of Isaac Schlueter's regular-expression-based CSS minifier.

The Javascript Bubbling Library (YUI-CMS) is a set of plugins, behaviors and widgets, for building event-driven web applications using the bubble-up technique. The Bubbling Library also includes several plugins that can be used to extend the Yahoo! User Interface (YUI) Library to manage dynamic areas which are closely related with the event-driven philosophy. All components in the Bubbling Library have been released as open source under a BSD license and are free for all uses.

Creating complex web applications demands organization and modularization. Modularization introduces a new problem - the comunication pipes between components. This is a serious challenge for developers, as more components and widgets mean more pipelines and more dependencies. In this article, we'll look at a technique to mitigate these issues: Creating an abstraction layer to moderate the comunication between the components and widgets in a web application. This technique is based on YUI and makes use of my Bubbling Library, which is a BSD-licensed superset of functionality that builds on top of the YUI foundation.

I have revisited adding Yui compressor into my work's ant build script to minify JS and CSS scripts. The current jar was yuicompressor-2.3.5.jar . It took a lot of playing around but I finally stumbled on how to get it to work. Here is the snippet for the yuicompressor. I had to jump through a couple hoops like overriding the current js/css scripts with the optimized js/css scripts. I'll release a full working copy in a zip, you can run against your webroot. We achieved an average 18% compression rate for all our js/css files.