YUI: Weighing in on Pageweights
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
Filesize Profile of YUI Utilities in Full, Minified and Minified/Gzipped Forms
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
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
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.