Skip to content

24 ways to impress your friends

Speed Up Your Site with Delayed Content

18 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

Ryan

Very succinct.

I do something very similar, except I use the custom attribute on an image element to hold the url. The src attribute contains a placeholder. When ready, all my script does is switch out the src with the desired image url. This is a bit faster than creating and inserting elements into the DOM.

I also determinate the readiness on scroll position so I’m only manipulating elements that are in view instead of everything. The page becomes unresponsive very quickly when you have a lot of elements to work over.

Still, your technique is a nice and simple example to get one started.

Julian

The newest version of jQuery natively supports the data attribute, you van simply use

$(el).data(“gravatar-hash”)

Just a quick addition..

Matthew Farag

I felt so guilty doing this when I was making my portfolio. I thought there had to be a better way. What a relief!

If you don’t specify a src, what about non-JS users? What about semantics? (ooooh)

Kemal Delali?

Great article indeed, I thought of a method like this but never went to actually create it.

Concerning the non-JS users: I don’t think this method is really a handicap for them – turning off JS is.

Ross Harmes

It’s worth noting that on Flickr we’ve disabled this type of image deferral for IE6, 7 and 8.

We found that the cost of finding all of the nodes that need images inserted, and the impact on the page that downloading all of those images had, vastly outweighed the benefits we got by making those images load after the rest of the page has finished. It made the pages very sluggish and jerky, and significantly delayed event handlers from being invoked.

More modern browsers don’t have this problem at all, and are able to run the JS and download the images without any appreciable CPU load. We are still using this technique, with data-defer-src, for them. IE, though, gets img tags with normal src attributes instead.

Oliver

Sorry, but I have to ask again, because I’m interested in your opinion. Is there any reason, not to use something like this and wouldn’t it be a better solution as noscript users will still be able to see the images?

<noscript data-hash=“124a03bd93eacc64f799527d8aea6233”> <img src=“http://www.gravatar.com/avatar.php?gravatar_id=124a03bd93eacc64f799527d8aea6233” />
</noscript>

$(“noscript[data-hash]”).before(function(){ return “<img src=http://www.gravatar.com/avatar.php?gravatar_id=”+
$(this).data(“hash”)+”/>”;
})

Nicolas Chevallier

thanks for this article. I also made a plugin for joomla that lazy load images under the fold, available on my website. That could save a lot of bandwith and speed up the loading of the webpage, specially galleries.

Oliver

Why don’t you just use the <noscript> Tag in order to show it to the 2%?

The other 98% of the user will profit from your enhancement and in a gzipped html this will not really effect your speed.

Michael Mior

I haven’t tried this yet, but wouldn’t this mess with the flow of the page? i.e., would the browser not have to re-render as the images are added?

In any case, here’s a suggestion. Maybe using a default image for all users (which only needs to load once) and then switching for each Gravatar once the page is loaded would also work well.

Anyway, great technique as usual. Thanks!

Arthur Guy

Great article, I am ashamed to say I wasn’t familiar with the data attribute so in the past I have put that type of data in the id or class element.

Rather than not rendering an image at all wouldn’t it be better to load a default avatar and just replace the image with the correct once everything has loaded?
The browser would only see one request as its the same file and the user wouldn’t see a drastic change to the presentation when the avatars load.

Mathias Bynens

As of jQuery 1.4.3, you can just use `$(this).data(‘gravatar-hash’)` instead of `$(this).attr(‘data-gravatar-hash’)`. Also, why use `$(window).load(function() { … });` instead of `$(function() { … });`?

Thomas

I thought this was going to be about speeding up websites in general. I was quite surprised to see it focus on gravatars.

That said, I think it’s a good idea and I’ll try implementing this in future projects!

Paul Hammond

Thanks everyone for the comments, especially Ross for the detailed notes on Flickr’s implementation. It’s great to hear real world experience and alternative ideas around the best way to use techniques like this.

Thank you also Mathias and Julian for the jQuery tip. I’m sure I’m not the only one who misses out on some of the features that land in every new version of jQuery.

Scott: When I get a chance I’ll look back at my notes and see what I can find about Firefox. I stopped investigating removing the image with JavaScript when I thought there were no simple workarounds for the other browsers…

Alistair

Given how wide spread the use of gravatars are, I wonder if it’d be worth suggesting to Automattic about a feature enhancement that would allow for generating gravatar sprites?

That way, you could make a single request to the gravatar servers to generate the gravatars for a given page in one go and then just use the simple CSS sprite technique to switch them out for each comment.

Mark F. Simchock

re: “We can use similar code to delay loading any images that don’t need to be present immediately.”

That said, it would seem to me it makes sense to delay displaying /loading anything that can wait. For example, the comments themselves are usually below the fold. Why not wait for them to be within scrolling distance? Or, as I think you’ve done with your comments, let the user click to see the comments. Then load / display them.

In any case, good stuff. Thanks for sharing.

p.s. I realize this article isn’t new but I wanted to comment none the less. Also, someone might have already suggested this, I did not read all the previous comments, sorry.

Scott Jehl

Nice article. :) Seems like a smart approach to use for delaying non-essential images.

The first problem we find is that there’s no way to prevent Internet Explorer, Chrome or Safari from loading an image without removing it from the HTML itself…

I’m curious: do you know of a workaround for Firefox? I’ve worked out a way to prevent images from loading in most other browsers, so this would be most helpful to hear.

Cheers!

Ryan Townsend

Excellent article, I’ve known about deferred loading as a technique for improving site speed for a while (Github do it well), but never thought to apply to images like this.

More web designers should care about the speed of their websites, it has a real impact on a visitor’s experience, Amazon know this all too well with their studies. I’d suggest anyone who hasn’t read the Y!Slow guidelines really should, they are straight forward and can provide a great benefit.

Henk

Very good remark and solution, Paul. I’ve tried it on a blog of me and it made a huge difference.

I’m too interested in a workaround for Firefox because many people use that browser nowadays. Hope you post this in the comments.

Impress us

Be friendly / use Textile