« Using YUI to Pulse Elements on Web Pages to Improve Usability
Launched Last Result, Assign Service Provider, and Hosting Provider Uptime and Latency Tool »
Jul 13 2008

Loading YUI Javascript Files with a Single HTTP Request

Posted by: kent in yui

You can now reduce the number of HTTP requests to serve all the YUI javascript dependendices to a single HTTP request. As an example, we just updated our Web Speed Check to use a single HTTP request to load all the YUI javascript dependencies using the new YUI combo loader…

<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.5.2/build/yahoo-dom-event/yahoo-dom-event.js&2.5.2/build/animation/animation-min.js&2.5.2/build/connection/connection-min.js&2.5.2/build/element/element-beta-min.js&2.5.2/build/datasource/datasource-beta-min.js&2.5.2/build/datatable/datatable-beta-min.js"></script>

This replaced the following code…

<script src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/animation/animation-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/connection/connection-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/datasource/datasource-beta-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/datatable/datatable-beta-min.js"></script>

So, we’ve reduced from making six HTTP requests to making a single HTTP request to load the YUI javascript dependencies and this reduces the total page load time. Thanks to Eric Miraglia for this tip.

Bookmark at:
StumbleUpon | Digg | Del.icio.us | Dzone | Newsvine | Spurl | Simpy | Furl | Reddit | Yahoo! MyWeb

This entry was posted on Sunday, July 13th, 2008 at 4:19 pm and is filed under yui.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.

5 Responses to “Loading YUI Javascript Files with a Single HTTP Request”
  1. dmorton says: July 13th, 2008 at 11:24 pm

    So how does this combo loader actually work?

  2. kent says: July 14th, 2008 at 12:24 am

    The new combo loader recently provided by Yahoo concatenates the provided YUI scripts together allowing the YUI scripts to be retrieved in a single script tag (and thus a single HTTP request). The syntax of the combo loader should be self evident from the example above. Note this is a YUI only solution — in other words, you cannot use the YUI loader to concatenate your own scripts together.

  3. Redwood City Startup » Blog Archive » Great little tidbit on using YUI hosted files says: July 16th, 2008 at 2:52 am

    [...] roll up all of your JS files from YUI into a single files. I found a pointer to this little tidbit here. This really helps to reduce the number of javascript includes that are required on [...]

  4. Skynslie says: July 23rd, 2008 at 7:36 pm

    I don’t get it. I mean it’s a good idea, don’t get me wrong, but shouldn’t HTTP keep-alive solve this problem? As I understand it if the requests were properly pipelined there would only need to be a handful of extra headers with each file (assuming the files are large, on the order of 5k or so, this is probably only 1-2%). Or is someone (client, server) not using keep-alive properly? [Edit: I guess maybe there's extra file-retrieval time on the server side, but I'm pretty sure Yahoo caches these things].

  5. kent says: July 23rd, 2008 at 8:06 pm

    I didn’t benchmark it myself. I’ve been trying to implement the YUI performance recommendations — they have it #1 on their list…

    http://developer.yahoo.com/performance/

Leave a Reply