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 - 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>
(function() {
TGV.onScriptsReady(function () {
// do things here

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.


Simon Baynes said...

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

Philipp "Spectator" 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

MLB2k11 said...

Excellent pieces. Keep posting such kind of information on your blog. I really impressed by your blog.
Vee Eee Technologies| Vee Eee Technologies

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

good post, i was searching for since a long time.

Microsoft Dynamics said...

I can see that you are are genuinely passionate about this! great information.
thank you...!
Hadoop training

Microsoft Dynamics said...

I read this post two times.
I like it so much, please try to keep posting.
Let me introduce other material that may be good for our community.
Microsoft dynamics training

Microsoft Dynamics said...

Fantastic article ! You havemade some very astute statements and I appreciate the the effort you have put into your writing. Its clear that you know what you are writing about. I am excited to read more of your sites content.

Latest jobs