YUI: Weighing in on Pageweights

By YUI TeamOctober 16th, 2006

When we opened up the YUI Library in February, we talked about some of our motivations for creating an entirely new JavaScript toolkit. One of those motivations, we said, was that Yahoo!’s diverse engineering communities demanded a solution that was lightweight, one that could be applied à la carte without unnecessary k-weight overhead.

With YUI now encompassing three CSS foundation libraries, six utilities and nearly a dozen UI controls, we thought it would be a good time for a progress report on library size, page weights, and YUI’s à la carte architecture. (Note: This article focuses almost exclusively on pageweight, which itself is only one element of overall performance. Filesizes described here are based on YUI’s 0.11.4 release.)

Three Ways to Evaluate Filesize

JavaScript and CSS files exist in three different states, each with unique size profiles:

  1. Full code source, including comments and whitespace: YUI, like most open-source JavaScript libraries, includes full-source files in its distribution. These files are formatted for developer readability and include extensive function-level comments to facilitate automated generation of API documentation. These files tend to be very large.
  2. Minified source: YUI components are also distributed in minified form — minification meaning that comments, whitespace, and line breaks have been removed from the file. (Douglas Crockford’s JSMin and the Dojo Compressor are among the tools we use for this purpose.) YUI Library JavaScript files are reduced in size by more than 60% through minification alone.
  3. Minified, gzipped source sent over the wire: At Yahoo!, we evangelize the practice of serving all JavaScript and CSS files using gzip compression (a bandwidth-saving technique supported across the A-Grade browsers). Gzipping reduces overall data transmission dramatically, and it is the minified, gzipped payload that ultimately determines the file’s weight on the wire. YUI Library JavaScript files are reduced in size by more than 90% through the process of minification and gzipping combined.

Here is a filesize profile of the YUI Library JavaScript utilities’ core files in (1) full, (2) minified, and (3) minified/gzipped form.

Filesize Profile of YUI Utilities in Full, Minified and Minified/Gzipped Forms

Chart: Filesize of YUI utilies JavaScript files in full, minified, and minified/gzipped profiles.

Note: This chart does not include dependencies; the file sizes here are for each utility’s core source file only.

The data-transmission savings gained from minification and gzipping are dramatic — a document loading the entire YUI utility suite would incur 232.5KB in additional pageweight if serving the fully-commented source; that weight drops to less than 20KB when the files are minified and served with gzip compression, a savings of 91.9%. In assessing library weight, we focus primarily on filesizes after minification and gzipping, as that is the truest measure of how much data needs to be transmitted to the browser. It’s worth reiterating, however, that this is only one part of the larger performance story.

Weighing Individual YUI Components When Used à la Carte

One of the most important metrics for us in evaluating the success of YUI’s à la carte strategy is the aggregate filesize of each component, including its dependencies. All YUI JavaScript components require the Yahoo Object; most also require Event and Dom. The dependency tree beyond those foundations is more diverse. Including all JavaScript dependencies (even optional dependencies), what is the cost in transmitted filesize to include a single YUI component when serving the minified files and gzipping the payload sent to the browser?

À la Carte Pageweight of Individual YUI JavaScript Components, Including All Dependencies

Chart: Kweight of individual YUI components, including dependencies.

Note: Optional dependencies can have a significant impact on overall pageweight. Container, for example, can make use of Connection Manager for wiring Dialog Controls to the server via XHR; it can also use Drag & Drop to enable draggable Panels and Dialogs and Animation effects when showing and hiding Panels. Those three optional components account for nearly 40% of Container’s pageweight in the chart above. The Panel implementation used above to show the large-format version of the chart image omits all of these optional effects, and as a result requires only 20.8KB of transmitted YUI JavaScript. (Component filesizes represented in the chart do not include CSS resources.)

Because of YUI’s à la carte architecture, even the heaviest component is roughly half the weight of the image containing the chart above. Looking at the single dimension of weight-on-the-wire, then, we feel comfortable that YUI is succeeding in one of its core goals: allowing implementers to choose specific richly interactive elements on a page-by-page basis without unduly inflating pageweight.

The YUI CSS Foundation

This summer, we began including in YUI three core CSS resources — Reset, Fonts, and Grids — that provide a strong foundation on top of which developers can build semantic, progressively rendered, CSS-driven layouts. The YUI CSS Grids component is a toolkit from which can be assembled more than 130 different wireframes, meeting the needs of a significant subset of page layout projects. And, taken together, this CSS foundation has an aggregate k-weight of just 1.3KB on the wire (minified and gzipped).

For reference, here are the filesize profiles of the YUI CSS foundation files in (1) full, (2) minified, and (3) minified/gzipped forms.

Filesize Profile of YUI CSS Foundation Files in Full, Minified and Minified/Gzipped Forms

Chart: Filesize of YUI CSS foundation files in full, minified, and minified/gzipped profiles.

Beyond Filesize

Obviously, there’s a great deal to be said about library performance beyond raw k-weight on the wire; this single dimension is an important one, but achieving “performant richness” is a multifaceted problem. Over time, we’ll explore some of these additional dimensions here on YUIBlog.


30 Comments

  1. hi there,

    nice info.

    Everyone should be doing this. I wish that Java (and other server-side framework authors ) and build frameworks like Ant and Maven should come up with easy way to do the minification and compression for Javascript component libraries(like YUI) and components. Even more important(in terms of ROI) would be an easy way to minify and compress custom Javascript files.

    I know of an enterprise app(which is currently intranet only) that has loads of javascript files — it doesn’t use any compression or minification. Not sure if it uses GZIP compression on the wire either. This is fine as long as the app is on the intranet but if it were to be an extranet app or INTERNET app, then the bandwidth costs would be severe.

    Doubt : Apart from the bandwidth costs, the size of the DOM might be bigger for uncompressed/unminified javascript/HTML files since verbose element names and javascript functions/variable will surely be bigger than their minified/compressed ones. Does anyone know any better ?

    Thank you,

    BR,
    ~A

  2. I heard that gzip compressed JavaScript sometimes breaks in IE. Does anyone know if this is true?

  3. [...] It’s nice to see some proactive options presented from Yahoo. Without trying to sound arrogant, most of us already knew this stuff but it’s great to see all the visuals. [...]

  4. Good article.

    Slightly off-topic, but what if (big what-if) we as developers could link to the yui framework on say http://lib.yahoo.com/yui.js or some equivalent.

    There are some obvious reasons why Yahoo would not wish to do this (bandwidth costs), but also some obvious reasons why you would (potentially higher adoption). Similarly some significant reasons why a 3rd party developer (dependency on remote service, no control over change) would want to link directly to lib.yahoo.com.

    It’s something I blogged about over at http://blog.chadlindstrom.ca.

    I don’t mean to hi-jack, but what do others think?

  5. I working on a Javascript serving engine as we speak, with optional validation, compression, gzipping and checksuming from fully documented source on the fly. Its very encouraging to see both Yuui and Dojo posting on thier build tools, and to know that JSMin and ShrinkSafe are getting commercial level usage.

    I would be very interested to know more about Yahoo’s internal JS development processes – particularly Unit and Functional testing frameworks, and how you test visual effects?

    It is very much time to start treating Javascript as a software component itself and seek out or build the tools needed – of which Yahoo is delivering in spades.

  6. Just interested: Have you found any way to support this gzipped delivery in IE, too? The problems with caching or removing a part of the file when delivered compressed. Have you found any solution for this? Do you filter the clients by some special version. Could you please explain this more detailed? Thanks.

  7. There’s one thing I like even more about than the small filesizes: the number of files. The whole YUI lib consists of about 100 files. Nost other JS or PHP libs I include in my projects do contain much more files.

    Therefore, my web-projects usualy consist of loads of small files. When I upload a system trough FTP, most time is consumed by gettting directory listings and opening filetransfers. Not by transfering data.

  8. Re: gzip http compression, Yes – most likely any Netscape 4.x browser is not going to receive that compression. See webreference on http compression.

  9. [...] O blog do projeto YUI está com um post sobre esse problema que no YUI é até preocupante vide o tamanho de seus componentes.  [...]

  10. Ted Fleischman said:
    October 18, 2006 at 10:03 am

    Since the UI specialists are customer advocates and concerned about PAGEWEIGHTS, LAYOUT, and general USABILITY perhaps you could address the problem of my yahoo mail plus account losing 35 filters that I paid for. It’s been 4 days past the promised RESPONSE time, and in the meantime, regardless of the I’m getting several hundred unfiltered messages. FILE SIZE is important as customer service.

  11. Regarding gzip compression you might want to take a look at the article by Cal Henderson.

    It explains why gzip compression is problematic when using Netscape 4 or Internet Explorer (version 4 through 6) and gives some other good advise on how to optimize the serving of JavaScript and other resources.

    Cheers,
    Jens

  12. Hi Ted,

    We appreciate you bringing this to our attention.

    We’ll be happy to look into your report. We’ve sent you a separate email. Please reply and provide the details requested and we’ll be happy to look into the issue.

    For future reference, please submit Yahoo! Customer Care email inquiries through the Yahoo! Mail Help Page URL below:

    http://add.yahoo.com/fast/help/us/mail/cgi_feedback

    We await your reply.

    Thank you for contact Yahoo! Customer Care.

    Regards,

    Montgomery
    Yahoo! Customer Care

    —– on Oct. 18, 2006, Ted Fleischman wrote —–

    Since the UI specialists are customer advocates and concerned about PAGEWEIGHTS, LAYOUT, and general USABILITY perhaps you could address the problem of my yahoo mail plus account losing 35 filters that I paid for. It’s been 4 days past the promised RESPONSE time, and in the meantime, regardless of the I’m getting several hundred unfiltered messages. FILE SIZE is important as customer service.

    Comment by Ted Fleischman — October 18, 2006 #

  13. [...] On the topic of sending less data, the Yahoo! User Interface Blog weighs in on page waits with a discussion of javascript minimization versus compression. They also briefly cover the YUI decision to serve components à la carte, rather than in an aggregated file. [...]

  14. Is the time gained from a reduced filesize worth the overhead to decompress the JavaScript libraries? I haven’t found any benchmarks.

  15. Steve Souders said:
    November 15, 2006 at 8:17 pm

    We’ve measured the impact of gzip compression at Yahoo!. Pages load faster when scripts are compressed. The amount depends on how big the scripts are in comparison to everything else. Another indicator of the tipping point is that mod_gzip (the module responsible for doing compression in apache 1.x) compresses anything over 500 bytes, by default. If you have scripts that are over 1-2 K in size, your users will benefit from compressing those files.

  16. Update 0.12.0…

    Animation added boolean finish argument to Anim.stop(). AutoComplete The following constants must be defined as static class properties and are no longer available as instance properties: YAHOO.widget.DataSource.ERRORDATANULL YAHOO.widget…….

  17. [...] Pack your Javascript icd_onload_register(function(){ dp.SyntaxHighlighter.HighlightAll(); });With all these Javascript frameworks coming out recently and the move to a more dynamic web, your page size will increase due to the Javascript files. Now you can compress them on-the-fly with PHP.There has been written a lot on the subject of Javascript file size and how to reduce it. One of the recent article I recall is Yahoo’s Weighing in on Pageweights, in which they propose the source to be minified using a couple of techniques, out of which I prefer Douglas Crockford’s JSMin. This tool only removes comments, whitespace and newlines, making your file as compressed as it could be without modifying any code. [...]

  18. [...] Wenn man eine große Bibliothek mit vielen Funktionen, Möglichkeiten und einer sehr guten Dokumentation benötigt sollte man sich unbedingt die Yahoo! User Interface Library genauer anschauen. Von der anfänglichen Größe der Bibliothek sollte man sich nicht beeindrucken lassen, denn es bestehen Möglichkeiten und Techniken die Größe zu minimieren und JavaScript dynamisch nachzuladen. [...]

  19. [...] Further reading: Yahoo UI uses a modular Javascript approach (so does Dojo). See YUI’s impressive bandwidth numbers, including comparisons with gzip enabled. [...]

  20. You’ve just taken all my concerns out of using the YUI. Thanks – great article.

    Keith

  21. I am wondering how to maintain the dependencies when you compress all those modules in different files. Or I miss something that those modules have been merged into a big file before being compressed.

  22. [...] Vous pouvez comparer la taille des fichiers originaux, minifiés et minifiés zippés sur cette page (en). [...]

  23. @Rui — Currently, you maintain dependencies yourself by including all the correct files in the correct order, as specified in the documentation for each control (see the YUI website for this information); alternatively, you may aggregate files yourself (again, in the correct order) and serve single files with all the parts of YUI that you need. We provide a few aggregates as part of the distribution; those are packaged in the correct order as well. Although YUI may at some future point have loader mechanism to help you with this, you will always have the option to create your own specific aggregate files that include YUI plus your own JS resources; this is often the most performant way to deploy your applications. Regards, Eric

  24. [...] aggregate file (along with Connection Manager) which weighs just 18.1KB gzipped on the wire. (More on YUI and pageweight; more on why reducing http requests is a Very Good [...]

  25. [...] things. It seemed to be lean and designed in a way that made sense." The à la carte approach with its small file footprint was a big factor for MacAskill. "I’m the optimization guy. I did not want a heavy [...]

  26. Hello,
    Talking about ANT Task that would miify a set of files, I posted in YUI sourceforge an Ant Task that can compress a source folder (including files contained in it) to a target folder.
    Target and source can be the same.
    You may add a suffix to minified.
    All options available to YUICompressor are available.
    http://sourceforge.net/tracker/index.php?func=detail&aid=1834741&group_id=165715&atid=836479

    You can get the already built jar from:
    http://www.ubik-ingenierie.com/ubikwiki/index.php?title=Minifying_JS/CSS

    Philippe.
    http://www.ubik-ingenierie.com

  27. [...] the topic of sending less data, the Yahoo! User Interface Blog weighs in on page waits with a discussion of javascript minimization versus compression. They also briefly cover the YUI [...]

  28. [...] of these single HTTP requests weighs less on the wire than the image above. As I’ve discussed elsewhere, the a la carte design of YUI means that you can add components to any of these payloads at a big [...]

  29. [...] of web pages via minified javascript and css files. YUI’s team not only agrees with this, they recommend gzipping your minified js and css files. For a while I’ve been calling YUI Compressor inside my push to production scripts to do the [...]