Next-Gen YSlow powered by YUI
The YSlow architecture was partially redesigned to work cross-platform and YUI was the essential factor in make sandboxing, cross-browser abstraction and simple YQL access possible.
The code above:
- creates an empty iframe;
- appends it to the page body;
- hides the iframe*;
- gets its window handler;
- writes into its content the body of the iframe;
- this body is empty but has an
onloadevent defines how to inject YSlow JS:
docpoints to the page being analyzed
- dynamically injects YSlow URL by creating a
scriptelement into iframe's
* the iframe is displayed by the time all YSlow presentation assets are loaded
This will place an iframe into the page being analyzed. This iframe will act as a sandboxed environment and YSlow will reside within it. Since the iframe is dynamically created without the
src attribute, it will have access to its parent (the page being analyzed) because there's no same origin policy violation happening there.
The YUI_config object is handy because it sets
doc to the iframe's parent (the page being analyzed), thus any new YUI instance will be bound to the parent document by default, wiring any call to
Y.config.doc from the YUI
YSlow's presentation is handled by the iframe
document references, allowing the YSlow main script to render the markup as well as fetch the external CSS within this iframe without conflicting with the parent page's styles. YSlow scans the parent page in order to get all the components (images, scripts, links, background-images, flash, etc.) required for later performance analysis. This is done by accessing
Y.config.doc, since they refer to the parent page.
Being a bookmarklet, YSlow for Mobile is supposed to work on any browser*. YUI abstracts cross-browser issues by normalizing browser differences, resulting in a clean, easy-to-read and maintainable codebase.
YSlow was not fully ported to YUI 3 — only the controller layer (from the upcoming App component) for now — but still, all DOM manipulation and event handling are done by the
event modules. In future releases we plan to port more YSlow features to YUI 3.
* not all browsers are currently supported
YSlow analyzes pages by checking the HTTP headers for the components found on the page. HTTP response headers are not available in the page, hence those components need to be requested again in order for YSlow get the response header information. This could be achieved by requesting the list of component URLs through XmlHttpRequest (AJAX) but unfortunately due to same origin policy restriction, this is not possible unless all components are in the same domain as the page which is very unlikely.
A common workaround for same origin policy restriction is using JSONP, where an external server works as a proxy requesting the list of components URLs and retrieving their HTTP response headers on behalf of YSlow. Due to YSlow's popularity and recent mobile performance analysis efforts, we're expecting quite heavy traffic for the YSlow for Mobile bookmarklet. In order to support such traffic, YQL was the scalable solution adopted by YSlow through an open data table named data.headers, which retrieves the response headers and content for a given list of URLs while impersonating the user-agent to ensure the expected content is retrieved.
The YQL Query component does all the work of managing YQL queries while managing JSONP requests under the hood, making the YSlow controller code much simpler and easy-to-maintain.
Future enhancements: New YSlow for Mobile friendly interface
Currently the YSlow for Mobile user experience is the same as the desktop experience. Dealing with a long list of performance analysis data is not the best experience on small smart-phone screens. Since YUI also abstracts cross-device gestures, YSlow for Mobile will get a brand new mobile-friendly interface in future releases.
Performance of performance tool
YSlow for Mobile deployment was made carefully considering its performance impact on the load time of the page being analyzed. The YUI 3 modules used on YSlow were scrutinized to include only the modules needed to load YSlow as fast as possible. The YUI seed file and Loader were not included since all necessary modules and submodules were combined together following Ryan Grove's Performance Zen tips, which made it possible to load everything together into a single small single request: yslow-bookmarklet.js: 204KB, 66KB (gzip) where:
- YUI: 75KB, 27KB (gzip)
- YSlow: 129KB, 39KB (gzip)
More about YSlow
Keep up-to-date with the latest YSlow announcements by: