Friday 18 November 2011

TGV.js: JavaScript to reduce page loading times

I'll get to the point now, and waffle on later. TGV.js queues image loading in order of priority and allows JavaScript files to be loaded asynchronously. You can get a minified version of it here (mTGV.js - 3kb), or the full fat version here (TGV.js - 7.8kb). Thanks to Simon Baynes, you can also find it on Github here - https://github.com/baynezy/TGV. It's licensed under the Creative Commons BY license, which means you can use provided you acknowledge it as being written "by Algy Taylor for Conker Media Ltd", or words to that effect in the comments. Usage is as simple as

<script src="/path/to/TGV.js"></script>

Then, for each image which *can* be defered, the tag should be changed to:

<img data-defer-src="/path/to/file" alt="alt text" />"

This will mean that those images won't display if a user doesn't have JS enabled, so make sure that they're not vitally important to the usability of the site!

This problem can (and probably should) be avoided by placing a non-defered image in a noscript tag, as shown in Philip "Spectator"'s comment (#2 in the comments below):

<img data-defer-src="/path/to/file" alt="alt text" />
<noscript><img src="/path/to/file" alt="alt text" /></noscript>

If you want to load JavaScript files asynchronously, you will need to add a little bit more:

<script src="/path/to/TGV.js"></script>
<script>
(function() {
TGV.js("path/to/file");
TGV.js("another/file/location");
TGV.onScriptsReady(function () {
// do things here
}
)();
</script>

And that's yer lot! Although, as a nice side-effect, if you want to make use of some of the internal methods, you're more than welcome to!

  • TGV.onDOMReady(function);
  • TGV.addEvent(element, type, handler);
  • TGV.removeEvent(element, type, handler);

They do what you'd expect - onDOMReady accepts a function to run when the DOM is ready, whilst addEvent and removeEvent are cross browser event handlers.

If you have any suggestions on how to improve this, please drop me a line - either in the comments below, or via email (a taylor at lime pictures dot com).


As with all great inventions, this work was built on the shoulders of giants: Paul Hammond, 'Tobias' off Stack Overflow, Ryan Morr, Peter Paul Koch (ppk), Emil Stenström and Dean Edwards all unwittingly wrote various pieces of this, which I've butchered.

9 comments:

Simon Baynes said...

You should stick that on GitHub, or if you like I can stick that on GitHub for you.

sp3c1 said...

A great addition to that so your js free users can see the images aswell is the infamous noscript tag it is only rendered if the user has javascript deactivated so the image tag should look like this:

img data-defer-src="/path/to/file" alt="alt text" />
noscript>img src="/path/to/file" alt="alt text" />/noscript>

okay you might bloat up your html, but the bottleneck for the pageload time is not the filesize of the html it is the size of the image queue. So this solution is a) best for seo b) better for page usage c) an be used on every image

hope this helps, and plz push it to github ;-)

Algy said...

Ta for the comments! If someone, anyone, can push this on to GitHub (with a link back here), that'd be fantastic - I'll shove a link to the repository up at the top. I'd do it myself if it wasn't for me sitting behind the most over-zealous firewall in the world ;)

Philipp - good shout, I'll edit the blog post to include what you've written!

Anonymous said...

This is cool, I hope you will develop more Javascript for us

Volkan Ozcelik said...

Thanks for sharing man. The script can have some good use. And definitely you've gotta stick it to github.

I was thinking to create a similar behavior for o2.js, namely a function that loads resources only "after" window is loaded (not domcontentready, but window load -- and I have reasons for that, one of which is performance tracking reliability)

Anyways, your technique gave me some inspiration. Thanks for sharing.

Simon Baynes said...

As promised here is the github URL https://github.com/baynezy/TGV

MLB2k11 said...
This comment has been removed by a blog administrator.
Unknown said...
This comment has been removed by a blog administrator.
farhan said...

good post, i was searching for since a long time.
source: www.wbupdates.com