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.

Murali Mohan Mandadi
  • 627
  • 2
  • 16
  • 32
  • 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
  • @crmprogdev: each image size is 100kb we are getting this images from external server and we already stored all image URLs in saleforce before load the page. please loading 500 images very fast in sandbox not in production. Please share your thoughts on this. – Murali Mohan Mandadi May 20 '16 at 19:14
  • Your production org is doing a LOT of other things that your sandbox isn't. You're going to be sharing those resources for all those ajax calls to load those images into pages with a lot of other things when in production that you aren't going to be sharing in a sandbox. – crmprogdev May 20 '16 at 19:19
  • @crmprgdev: currently both sandbox and production copy same and we didn't use the ajax call for displaying the images we used for loop inside javascript and added those images and data to html div. – Murali Mohan Mandadi May 20 '16 at 19:23
  • @crmprgdev: only one application is running in sandbox and production. i think any production server issue from salesforce side. Please let me know your thoughts on this. – Murali Mohan Mandadi May 20 '16 at 19:33
  • 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 06:33
  • Possible duplicate of Speed Up Page Load Time – Tushar Sharma May 26 '16 at 05:55

1 Answers1

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.

SeanW
  • 672
  • 6
  • 16