Plugin: requirejs
Elements Design: Facebook and Twitter Sign-in Buttons (PSD)

Plugin: headjs


With older generation browsers the scripts will be loaded sequentially.

Plugin: headjs

Load scripts like images. Use HTML5 and CSS3 safely. Target CSS for different screens, paths, states and browsers. Make it the only script in your HEAD. A concise solution to universal issues.

Load scripts in parallel but execute in order.

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {
// all done

With Head JS your scripts load like images - completely separated from the page rendering process. The page is ready sooner. Always. This is guaranteed even with a single combined JavaScript file. See it yourself:

Non-blocking loading is the key to fast pages. Moreover Head JS loads scripts in parallel no matter how many of them and what the browser is. The speed difference can be dramatic especially on the initial page load when the scripts are not yet in cache. It’s your crucial first impression.

Pages no longer “hang” and there is less or zero “flashing” between pages. User only cares when the page is ready. Unfortunately current networking tools don’t highlight this crucial point. They focus on the overall loading of assets instead.

Head JS can make your pages load 100% or even 400% faster. It can make the largest impact on client side optimization.

Combining scripts

There is a common misbelief that a single combined script performs best. Wrong:

- latest browsers and Head JS can load scripts in parallel. loading 3 parts in parallel instead of as a single chunk is usually faster.
- if an individual file is changed the whole combination changes and you lose the benefits of caching. It’s better to combine only the stable files that doesn’t change often.
- many popular libraries are hosted on CDN. you should take the advantage of it instead of hosting yourself.
- iPhone 3.x cannot cache files larger than 15kb and in iPhone 4 the limit is 25kb. And this is the size before gzipping. if you care about iPhones you should respect these limits.

Script loading and execution

All script loading is done with head.js()

// the most simple case. load and execute single script without blocking.
// load a script and execute a function after it has been loaded
head.js("/path/to/file.js", function() {
// load files in parallel but execute them in sequence
head.js("file1.js", "file2.js", ... "fileN.js");
// execute function after all scripts have been loaded
head.js("file1.js", "file2.js", function() {
// files are loaded in parallel and executed in order they arrive
// the previous can also be written as

With Head JS the file amount is not as critical as it is with SCRIPT SRC because page rendering is not blocked. Combining scripts is an important optimization method but you can go too far with it.

download github
JavaScript loader only
minified version

Tags: plugin, js, jquery, develop, web, html

Leave a Comment

No Comment

© Creative3x Ltd.