Digital Web Magazine

The web professional's online magazine of choice.

Improve Your Page Performance With Lazy Loading : Comments

By Jakob Heuser

May 6, 2008

Comments

henrah

May 6, 2008 11:16 PM

>> “…these so-called ‘thin clients’…”

Surely you mean ‘fat clients’? Traditional webapps were thin clients, but the very problem this article discusses is mitigating the widespread transfer of business logic from server to client – the fattening of client-side components.

peregrine

May 8, 2008 8:19 AM

I appreciated this article, Jakob. Thanks for a good explanation!

This is a bloat management solution, which I can also appreciate except that its result is to introduce more complexity and (as you rightly say, Jakob) more maintenance concerns, rather than encouraging people to design lean and clean from the start.

Developers too often are forced (or choose) to work on their own, instead of in teams. A javascript ace will create a lot of cool javascript widgets, some functions of which might be better handled another way.

To a man whose only tool is a hammer, everything looks like a nail. The same is true of any code wonk, and I’m not slamming anyone but we need to learn to develop functional workflows that put the right people on the right job in the first place. I see a lot of javascript-intensive sites since the advent of AJAX, and that’s not all good.

Event handlers (like the mouseover) are not inherently accessible. If there’s no fallback, there’s no function for a lot of people who may need it.

Henrah’s comment also rings true for me. It’s risky to push too much out to the client side, if only because of the unpredictability of bandwidth capacity, and this technique you’re writing about simply offers a method to minimize the effects of such bad practices. Many sites these days absolutely demand that the end user enable javascript; that doesn’t mean it’s the right thing to do. Client-side scripts must always be optional, and provide a functional fallback. Progressive enhancement, etc. … I think you see where I’m going.

Thanks again, Jakob. Very thought-provoking. This is stuff we all need to think about more.

Daniel Schutzsmith

May 11, 2008 5:10 PM

First off, thanks so much for sharing this method with us. Its something I knew was possible but never really understood the exact nature of how it could be put into practice.

Although I do wonder, as disclosed in the other comments, about the best scenario in which I would want to use this. In the web apps I’ve been creating recently, much more emphasis is placed on the server-side than the client-side, and justifiably so.

I definitely want to use this but am not sure, other than a web app loaded onto an external site such as a myspace app, when it would be justified.

Jakob Heuser

May 13, 2008 8:16 PM

@henrah: You are correct. We are indeed talking about a different kind of client. However, the web interface has lead many to believe they still have a thin-client despite all the libraries and code they’ve loaded.

@peregine: I definitely think you have a valid point in the size of the payload we push to the client. When it comes to bloat management though, I think that might be skewed. When we defer the loading of additional resources, we are saving not only in kb downloaded, but also in HTTP connections. The conceptual model also applies to images, and is native in YUI and as a JQuery plugin.

To the bit on the event handlers, I believe this is why having multiple interfaces to trigger the lazy load is important. The worst case scenario in combining these techniques is that the libraries will not load until the last possible instant. This can create a “lag” for someone who is unable to trigger any of the other pre-event triggers such as a mouseover. Personally, I would recommend if you want to use these kinds of events you back them up with a DOMReady style event, as well as the proxy shell discussed first in the article.

@Daniel: The best scenario is going to be full-on web applications, or sites with abnormally high JavaScript interactivity. The two sites mentioned (Gaia Online and Zimbra) both have substantial gains that can be made from removing interactions a majority of users are not using, but leaving them available to be called on demand. On mid-weight sites, these techniques can also be used to reduce the total page delivery time to the user.

Daniel Schutzsmith

May 16, 2008 8:39 AM

Thanks for the clarification! I have a project coming up which I think this might work well for so I’ll post results once I get closer.

Mika Tuupola

May 23, 2008 8:23 AM

Also images can be lazy loaded. This is what Yahoo Imageloader and jQuery Lazy Load are all about.

Jakob Heuser

June 4, 2008 10:22 AM

Just a quick note, I had a bug submitted against JIT for those who might be using it. Line 253, a change in spelling to “verifier” (as opposed to “veifier”) should keep things humming. Thanks to Pete for sending in that fix.

sesli sohbet

July 26, 2008 4:36 PM

Thanks for the clarification! I have a project coming up which I think this might work well for so I’ll post results once I get closer.

Ross Olson

July 31, 2008 9:29 AM

Jakob, I’ve kept your article open in a Camino tab since it was first published, and I’m glad I did. I just got done reading it, 2.5 months later and it was well worth the read. Thanks!

Kisha

October 22, 2008 8:01 AM

Wow!! It’s getting better and better., <a href=“http://gratis-lesben-video-sms.jed.pl/”>lesben movie por sms</a>, [url=“http://gratis-lesben-video-sms.jed.pl/”]lesben movie por sms[/url], http://gratis-lesben-video-sms.jed.pl/ lesben movie por sms, 987739, <a href=“http://free-lesben-video-sms.jed.pl/”>free lesben video</a>, [url=“http://free-lesben-video-sms.jed.pl/”]free lesben video[/url], http://free-lesben-video-sms.jed.pl/ free lesben video, >:P, <a href=“http://girl-lesben-toons-sms.jed.pl/”>girl lesben toons sms</a>, [url=“http://girl-lesben-toons-sms.jed.pl/”]girl lesben toons sms[/url], http://girl-lesben-toons-sms.jed.pl/ girl lesben toons sms, qfjgm, <a href=“http://free-lesben-sms.jed.pl/”>free lesben sex video</a>, [url=“http://free-lesben-sms.jed.pl/”]free lesben sex video[/url], http://free-lesben-sms.jed.pl/ free lesben sex video, %-PPP, <a href=“http://her-frist-lesben-sms.jed.pl/”>her frist lesben sex via sms</a>, [url=“http://her-frist-lesben-sms.jed.pl/”]her frist lesben sex via sms[/url], http://her-frist-lesben-sms.jed.pl/ her frist lesben sex via sms, edsu, <a href=“http://gratis-lesben-sms.jed.pl/”>gratis lesben sms</a>, [url=“http://gratis-lesben-sms.jed.pl/”]gratis lesben sms[/url], http://gratis-lesben-sms.jed.pl/ gratis lesben sms, zbq, <a href=“http://info-kostenlos-lesben-remember-sms.jed.pl/”>lesben erotik por sms</a>, [url=“http://info-kostenlos-lesben-remember-sms.jed.pl/”]lesben erotik por sms[/url], http://info-kostenlos-lesben-remember-sms.jed.pl/ lesben erotik por sms, 930762, <a href=“http://geile-lesben-oma-sms.jed.pl/”>sms geile lesben muschis</a>, [url=“http://geile-lesben-oma-sms.jed.pl/”]sms geile lesben muschis[/url], http://geile-lesben-oma-sms.jed.pl/ sms geile lesben muschis, 618985,

Sorry, comments are closed.

Media Temple

via Ad Packs