Application Performance Engineering Blog – Shunra Software

Building applications on a local area network masks many performance problems that only surface when applications interact with remote users on a wide area network.

One common problem is when remote users experience slow web pages that load content (table records, images, videos, PDF files, widgets). These pages tend to perform much slower for remote users than they do for local users. This is usually because these web pages load more content than needed for rendering. For example, pages that contain grid components may hold a substantial number of records or pages that layout container components (lists, tab navigators, accordions, etc.) may need to load many thumbnails media objects. As a result end users painfully wait for many objects to load when only 5-20 can fit on the screen.

Developers can avoid this problem by implementing a best practice called lazy loading (or deferred loading). This design pattern implements the following basic concept “only load objects that are needed to be rendered on the screen and defer any object loading until the object display is requested.”

For example, a grid component that can potentially hold 10,000 employee records would only load the first 20 and consequently load additional records if and only if the user scrolls down to view other records. Another example could be a PDF file reader that immediately loads the first page and lazy loads the rest of the pages over time or as needed.

Lazy loading is an abstract design pattern but it has many implementation examples in AJAX, .NET and Flex to name a few.

The following are some implementation examples and more information on this useful technique.

Introduction to the lazy loading design pattern

http://en.wikipedia.org/wiki/Lazy_load

AJAX implementation examples of lazy loading

http://www.digital-web.com/articles/improve_page_performance_with_lazy_loading/

Java examples of a lazy loading implementation

http://blogs.msdn.com/jkowalski/archive/2008/05/12/transparent-lazy-loading-for-entity-framework-part-2.aspx

Adobe Flex examples

I found the following example very insightful because it shows some out-of-the-box thinking

http://flexdiary.blogspot.com/2009/01/lazy-loading-tree-example-file-posted.html

But in general when I develop in Flex I follow the performance guidelines in this whitepaper

White Paper: Flex Application Performance: Tips and Techniques for Improving Client Application and Server Performance

So the next time you have to troubleshoot an application page that loads slowly, ask your development team: “Is this page only loading objects that are needed for rendering?” You will be surprised what you find.

Best,

Amichai