Wednesday, October 14, 2009

Speed up your page - Lazy loading - an alternative approach of loading a page

Sometime back I had to do a presentation on topic - Building public Website. But while preparing I realized that it is too difficult to cover even 10% in my allocated time. So I had to break the presentation in to a few sessions.

Thought probably presentation on building optimized website makes more sense than anything else. After presentation, developer can apply whatever they could absorb from the presentation. Presentation went well.

When I gave the presentation - I did not want to use the term "performance". I think replacing the term with "user experience" gave lot more context and feel to the presentation. Performance sounded very technical to me. I understand that user experience may not be all about performance alone, it would include lot other stuff's like content, accessibility, being user-friendly, intuitive etc etc. But if you can get content quickly user feel better - but a slower website can kill everything else you would have built.

If we forget about the performance issues at server side - let us think we had done our best there - so biggest factor that affects the performance network bandwidth. Two primary factors that gives quick responsive website is "amount of content that has to be piped" and "number of round trips". Interestingly we can quickly address these 2 issues. My presentation has been targeting these 2 problems. Every web developer must read this.

In my current website, there are semi-dynamic and dynamic portion. Sales portion of the website where content varies by a few factors but are static for a given factor. Social network portion of the website where many portions are dynamic. Just think of this page as bunch of boxes(portlets) that pulls information from various source and each of these box content has different cache expiry. Sometimes what happens is it takes time to build all the content and till the time we are ready with the content user would be seeing a white screen wondering what is happening.

We are familiar with the term "WYSWYG" but I was looking it in other way as in - "WYGWYS". Yes, what you get is what you see. So while browsing, we should "get" information to the browser as quickly as possible - because unless you bring your content user won't be able to "see". My theory is we can always compromise the round trip against the content to get better user experience.

Lazy loading is inline with this theory. I can mark a portion of my page as "early loading" and portion of page as "lazy loading". What do I mean by "early loading" and "lazy loading"? By "early loading" I mean the content is made available in while requesting a given page. And "lazy loading" would mean that only a place holder is sent to browser and then browser sends an asynchronous request back to load the actual content.

What is the benefit? When you design a page you can mark a few portion as "early loading" - may be because it has some important sales content or could be some very basic information and so user would see something quickly. Then rest of the page would load async. This would help us to design bunch of service or REST calls to deliver the actual content. It will help us to manage different content expiry policy as well. I am yet to verify how effective would this be.


dEEPS said...

For lazy loading, rather than sending an asynchronous request back to load the actual content, I found it is faster to send content after the </html>, by just making sure to use output buffering to make sure the content uptill </html> is sent first. Assuming that content is packed inside DIVs.