Optimizing Standard Detail Pages That Contain Visualforce Pages

Recently, an ISV partner that I was working with showed me how they had used lazy initialization to significantly improve the responsiveness of their Force.com application. This partner's application has a number of very sophisticated Visualforce pages that are embedded in to the Account, Contact and Opportunity detail pages, like the image below:

Embedded Visualforce.50

Depending on the amount of data to be displayed, these embedded Visualforce pages will sometimes take several seconds to fully render. For most browsers, this long render time doesn't cause any interaction problems in the detail page. Unfortunately, this ISV discovered that in some scenarios, the parent detail page will render immediately, but that it will then become unresponsive while the browser works to load the embedded Visualforce page. Their page loading timeline originally looked like this:

Regular

To improve the responsiveness of their application, this ISV came up with a very simple and creative solution. Instead of embedding their sophisticated Visualforce pages in to the Account, Contact and Opportunity detail pages directly, the ISV created new "redirect" pages and embedded these pages in to the Account, Contact and Opportunity detail pages. These redirect pages do not display any data or any graphics. All that they do is redirect to the embedded Visualforce pages. By adding this extra step, the parent detail page continues to be responsive to the user while the embedded Visualforce page loads in the background. Notice in the timeline below that the detail page becomes responsive at a much earlier point:

Redirect

There is another potential solution that this ISV considered as well. They could have elected to only display their embedded Visualforce pages in response to a user pressing a button. The button-push solution is the more efficient solution since it doesn't double the number of pages being loaded, but it also has the disadvantage of requiring the user to take an action. Either solution is valid.

tagged Bookmark the permalink. Trackbacks are closed, but you can post a comment.
  • m

    You (or the ISV) may be confusing pattern names. Lazy Initialization prevents the loading of an entire object by only fetching properties that are requested at run-time.
    This looks more like a useful IFRAME UI trick.

  • http://sfdc.arrowpointe.com Scott Hemmeter

    Can you post the redirect code? I’ve tried to get this to work and the only way I’ve been able to see the page I redirected to is to .setRedirect(true) on the PageReference, which does a client-side redirect and causes the same issue.
    If I do a server side redirect, I never see the second page.
    Sample VF pages and Apex code would be nice.

  • http://developer.force.com/ Jesse

    Scott – The client-side redirect should work.