Apps

Improve web page load time with yepnope.js

The yepnope.js library offers a simple approach to asynchronously and conditionally loading web page resources. Here's a basic usage guide for yepnope.js.

Users expect fast web page load times, so you only want to load what is necessary and supported within a page. There are many ways to accomplish this goal, though one popular approach is to use resource loaders.

The goal of resource loaders is to use the available bandwidth to download multiple resource files (JavaScript, CSS, etc.) asynchronously without negatively impacting user performance; that is, the page may load and be presented to the user while other resources are downloading in the background. This is where it can get tricky, because you must identify what is needed immediately (i.e., what needs to be loaded when a page is presented) and what can be delayed; the solution will depend upon your application/project. One option I like is yepnope.js.

On its website, yepnope.js is described as "an asynchronous conditional resource loader." Basically, yepnope.js allows you to quickly decide what to load and when. You can download scripts and other resources without causing problems with the page rendering. In addition, you can use a callback that executes code once resources are loaded to avoid any issues with code being called before it is fully loaded.

Yepnope.js is included with the Modernizr library. This post is not a complete overview of yepnope.js but rather a basic usage guide.

The basics about using yepnope.js

The yepnope.js library is available as a 1.6KB (minified/compressed file) download. There is a download link on the yepnope.js site in the upper right corner of the home page. The current version is 1.5.4. Just like any JavaScript library, you include it in your page/site, and you're up and running. The yepnope.js library must be loaded before utilizing its features within your application.

The basic functionality of yepnope.js is to present a test and take action (or not take action) based on test results. The yepnope test object exposes these options as properties. Resources are URLs to the items to be loaded. You can specify a resource name by using a name followed by the URL separated by a colon.  Multiple resources are separated by commas. Here is a quick breakdown of the properties.

  • test: The body of the test is a Boolean condition that will return true or false.
  • yep: This is used when the test result is true. It is an array/object of strings containing the resource URLs to be loaded.
  • nope: This is used when the test result is false. It is an array/object of strings containing the resource URLs to be loaded.
  • load: This is used at all times regardless of whether the test result is true or false. It is an array/object of strings containing the resource URLs to be loaded.
  • both: This is basically the same as the load property.
  • callback: This is where you specify JavaScript functions to be called once a resource is loaded. If there is more than one resource listed, the function is called each time a resource is loaded.
  • complete: This is where you specify JavaScript functions to be called once a resource or a list of resources has been loaded.

This is a sample of the yepnope JavaScript syntax (remember, each property is optional).

Yepnope({

test: /* the test returning true or false */,

yep: /* resources to load if the test is true */,

nope: /*resources to load if the test is false */,

both: /* resources to load regardless of the test result */,

load: /* resources to load regardless of the test result*/,

callback:/* what functions to call once resources load */,

complete: /* what functions to call once resources have been loaded */,

});

Here is a simple example of loading a JavaScript file.

yepnope([

'tonyscript.js'

]);

You can load multiple files and give them names.

yepnope([
‘tonyjs':'tonyscript.js',
‘tonycss':'tonystyle.css'
]);

To take it further, the following snippet will call the doIt function once the specified script file is loaded.

yepnope({

load: 'tonyjs.js',

complete: function() {doIt();

},

});

These rudimentary examples show you the general usage. This functionality is not restricted to your own code and such. A good example is using the Modernizr library's properties to determine scripts to be loaded. Here is an example that loads an alternate jQuery library if the hashchange and history features of Modernizr are not available.

yepnope({

test : Modernizr.hashchange && Modernizr.history,

nope : 'resources/jquery.ba-hashchange.js',

load : 'resources/somethingWhichIsAlwaysLoaded.css',

});

Try yepnope.js for yourself

The yepnope.js library offers a simple approach to asynchronously and conditionally loading web page resources, and I think it's a keeper. Please take it for a test drive to determine its usefulness for you, and let us know about the experience.

Keep your engineering skills up to date by signing up for TechRepublic's free Software Engineer newsletter, delivered each Tuesday.

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

3 comments
sandeep552
sandeep552

No one want stand in waiting line, mainly when they have nothing to do rest of waiting. Pages that take ages to load are immediately abandoned by visitors. Hence, website owners and entrepreneurs are always making efforts to keep a check on the loading time of their website pages. Bulky images, videos, Flash banners, graphic rich design and plugins are usually responsible for making the website crawl.

mmesford
mmesford

I'm curious, as a non-programmer, as to whether this sort of conditional loading is a source of what I call "stuttering". It's very common these days on most all websites. You open a page and start to move your mouse to a link when suddenly everything shifts due to a new image suddenly pushing everything out of place. Usually this is a third party advertisement so there can be lots of traffic between multiple sites before you get your entire page. It's very annoying. It seems there must be a way to load the page with properly sized placeholders and then load the graphics and linked content. Is it unrealistic to expect a technical solution that smoothes this stuff out?

Force
Force

Now wondering if this would serve as an onload, frame/iframe alternative for HTML5?

Editor's Picks