0

I have implemented visualforce page to display 500 residential(home information for rental)information with 500 images.

Currently this page is loading with 500 images very fast in sandbox org but not in production org. Its taking too long to load the page in production.

function drawList() {
for (r = 0; r < pageList.length; r++) { 

    document.getElementById("PropCanvas").innerHTML += '<div class="row"><div class="col-md-6 col-sm-12 col-lg-6 prop-img-list" style="padding:15px 0px"><image onclick="openPropertyDetail(\''+pageList[r].id+'\',\'\',\''+pageList[r].type+'\',\''+pageList[r].status+'\');" src="'+imgTxt+'" width="100%" style="height:270px !important;" /></div><div style="" class="col-md-6 col-sm-12 col-lg-6 contentfield"><h1 onclick="openPropertyDetail(\''+pageList[r].id+'\',\'\',\''+pageList[r].type+'\',\''+pageList[r].status+'\');" class="black-bold">'+pageList[r].fulladdress+'</h1><span onclick="openPropertyDetail(\''+pageList[r].id+'\',\'\',\''+pageList[r].type+'\',\''+pageList[r].status+'\');" class="small-light">'+bedTxt+bathTxt+sfTxt+pageList[r].builtin.toLowerCase()+'</span> <h2 onclick="openPropertyDetail(\''+pageList[r].id+'\',\'\',\''+pageList[r].type+'\',\''+pageList[r].status+'\');" class="propty-status '+pageList[r].status+'">Status: '+pageList[r].status+'&nbsp;&nbsp;&nbsp;'+rentTxt+'</h2><div id="rateYo"></div><div   class="btnfalse"></div><div class="btnfalse"></div>'+RatingAvg+'&nbsp;<span class="countval"><span>▼</span><span style="font-size:15px;Color:Blue;">&nbsp;'+pageList[r].Reviewcount+'</span></span><br/><div class="color-btn" style="height: 45px; margin:5px 0px;">'+
   '<span class="colorspan"><a href="#" onclick="follow(\''+pageList[r].id+'\');" class="lgtrose-btn">Follow</a>&nbsp;<a href="#" onclick="Findsimilar(\''+pageList[r].id+'\');" class="lgtyellow-btn">Find Similar</a>&nbsp;<a href="#" onclick="Review(\''+pageList[r].id+'\');" class="yellow-btn">Review</a><br/><br/>'+requestshowTxt+ApplyTxt+
   '<nav id="menu-social" class="social-icons"><ul id="menu-social-items" class="social-menu" style="padding-left:0px;">'+
      '<li id="menu-item-2040" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2040"><a class="ml" href="mailto:?subject='+pageList[r].shortaddress+' on rental.community&body='+pageList[r].bed+' Bed, '+pageList[r].bath+' Bath Appartment for $'+pageList[r].rent+'/month : https://www.rental.community/ResidentialDetail?id='+pageList[r].id+'%0D%0AIt\'\s located at:%0D%0A'+pageList[r].shortaddress+'%0D%0A'+pageList[r].fulladdress+'" ></a></li>'+
      '<li id="menu-item-2036" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2036"><a class="fb" href="http://www.facebook.com/" onclick="popUp=window.open(\'\http://www.facebook.com/sharer.php?u=https://www.rental.community/ResidentialDetail?id='+pageList[r].id+'&media='+pageList[r].locationimage+'&title='+pageList[r].fulladdress+'&description='+pageList[r].Description+'\'\,\'\popupwindow\'\, \'\scrollbars=yes,width=800,height=400\'\); popUp.focus(); return false"></a></li>'+
      '<li id="menu-item-2037" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2037"><a class="tw" href="https://twitter.com/" onclick="popUp=window.open(\'\http://twitter.com/intent/tweet?text=I found this '+pageList[r].bed+' Bed, '+pageList[r].bath+' Bath in '+pageList[r].shortaddress+'on @rental.community https://www.rental.community/ResidentialDetail?id='+pageList[r].id+' \'\,\'\popupwindow\'\, \'\scrollbars=yes,width=800,height=400\'\); popUp.focus(); return false"></a></li>'+
      '<li id="menu-item-2038" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2038"><a class="pi" data-pin-do="buttonPin" rel="nofollow" href="http://www.pinterest.com/" onclick="popUp=window.open(\'\http://pinterest.com/pin/create/button/?media='+pageList[r].locationimage+'&url=https://www.rental.community/ResidentialDetail?id='+pageList[r].id+'&description=I found this '+pageList[r].bed+' Bed, '+pageList[r].bath+' Bath in '+pageList[r].shortaddress+' on @rental.community https://www.rental.community/ResidentialDetail?id='+pageList[r].id+' \'\,\'\popupwindow\'\,\'\scrollbars=yes,width=800,height=400\'\); popUp.focus(); return false" ></a></li>'+
      '<u1></nav></span></div></div></div>';

}

}

In the above code snippet, "pageList" is the array of 500 data with 500 images and these data getting from apex controller using remoteaction function.

I already verified page load speed with cache(true/false) but there is no luck.

Can anyone help me, how can resolve this page load issue in production.

10
  • 1
    It is very difficult for us to optimize markup we cannot see. Please edit your post to include it here. Also, please do not add exhortations such as "Urgent" or "Please" to your post. If you post a well formatted question, you will find the community more than willing to help. – Adrian Larson May 20 '16 at 18:56
  • @Adrian Larson, thanks for your information. I am new to visualforce page and struggling to solve this issue. could you please share your thoughts on this. – Murali Mohan Mandadi May 20 '16 at 19:03
  • I have shared my thoughts. You must edit your post to include relevant markup before it is even possible to help you. – Adrian Larson May 20 '16 at 19:04
  • 2
    500 images. How large is each image? That's a LOT for a browser to receive and to cache, esp if they're large. If highly compressed and small in file size, they still have to be "opened" and expanded to their full size and resolution. Think in terms of how much space an uncompressed zip file takes up. And yes, agree with @AdrianLarson on seeing your code. – crmprogdev May 20 '16 at 19:05
  • 1
    Murali please edit and update your question with the information you've been posting in the comments. Most people aren't going to read these. – Samuel De Rycke May 21 '16 at 6:33
1

All the modern browsers can trace the performance of your page load. I like Chrome's display, but Firefox's is good also. This would especially relevant if your images are loaded asynchronously, or via a series of 500 ajax calls. The results from your browsers performance tools will help you determine the point of the bottleneck. Also, you should compare the performance profile of Production with that of your Sandbox, which will indicate where the difference is.

1
  • could you please explain how can we compare the performance profile for production and sandbox. – Murali Mohan Mandadi May 20 '16 at 19:17

Not the answer you're looking for? Browse other questions tagged or ask your own question.