none
Load times for large amounts of elements in Preview v. real performance RRS feed

  • Question

  • I designed a website in EW 4 (SP2).  One section has a large number of complex li's (a lot of div's, p's, and a's, with a lot of text). I sort these li's based on user clicks by various combinations of data.  The sorts, designed using jQuery and javascript, work very quickly for as many li's as I can test in EW.  I also develop Bing Maps pushpins for each li (they are locations), which I realize takes time.  As I increase the number of li's (using dummy data that accurately represents the data that will eventually populate them), the "preview in browser" slows down quite a bit.  With 100 li's, it's virtually instanteous.  With 400, it ranges from 2-4 seconds in all browsers except Opera, which takes about 20 seconds.  With 800, IE takes about 8 seconds, FF/Chrome/Safari about 3 seconds, and Opera barely launches. I suspect the Opera problems relate to the fact that Bing Maps does not support Opera, even though the map functionality eventually sees its way to working, which is another issue.  In any case, after it launches the sorts take under a second regardless of size.

    Expression Web itself slows down exponentially (actually asymptotically to infinity) as the number of li's increases.  I can't even get EW to handle more than about 1200 of the li's, before I ever try to launch the html in any browser.  I wrote a little C# progam to create batches of these li's.  When I cut and paste them into EW (I inspect them to make sure there are no formating errors), at more than about 1200, EW can't incorporate them or save the html file.  It just hangs, and I hear a lot of whirring in my computer.

    Two questions:  First, does EW have a capacity issue?  Why can't it handle a large html element set even before a preview is launched?  Second, is EW's preview functionality the capacity culprit, or should I expect real performance to be much faster when the site is served using a production server?

    Thank you for your help.


    Jack

    Wednesday, May 9, 2012 2:23 PM

Answers

  • OK, with this amount of content EW does slow down. I copied your code into a <ul> and repeated it until I had 658 list items and over 34,000 lines, (including whitespace) with a page weight of 1.65MB. EW takes around 16 seconds to move between Code and Design views. Previewing the page in IE9 using local IIS takes about 6 seconds initially and then about a second to refresh (which was a surprise). I suspect older browsers will not fare so well.

    So if you have double this, 1200 list items, it's going to be significantly worse. I didn't go any further!

      

    Ian Haynes

    EW - V4 Add-Ins
    EW - Resources, hints and tips
    EW - Design for the Mobile Web
    expression(web.blog)

    • Marked as answer by Jack Herr Friday, May 11, 2012 12:51 PM
    Friday, May 11, 2012 7:55 AM

All replies

  • How are you previewing the pages from EW? Via the file system, the Dev server or local IIS?

    For a realistic test approximating a live server you should use IIS, although that may take some time to load the page when you fisrt preview it.


    Ian Haynes

    EW - V4 Add-Ins
    EW - Resources, hints and tips
    EW - Design for the Mobile Web
    expression(web.blog)

    Wednesday, May 9, 2012 2:39 PM
  • I don't know how to answer for sure.  Here is what I have for "Site Settings>Preview":

    "Preview using website URL" radio button selected.

    "Use Microsoft Expression Development Server" check box checked, but radio button limiting this to PHP or ASP.Net is checked (not "For all webpages").

    The site is not either PHP or ASP.Net as developed using EW.  It was developed exclusively using HTML elements, JavaScript, and jQuery.  I will pass the html to the Razor rendering engine in the next phase when I use ASP.Net MVC 3 to actually produce the website pages.  I am using EW only as a design tool (though I am obviously testing the design using dummy data to make sure the design is not flawed).

    How do I test using IIS via EW?  Should I use a sandbox instead?

    My question concerning the capacity of EW (it can't handle volume even before a preview is launched) makes me suspect that it is strictly a design tool (and I think a very good one) but not a capacity/volume testing tool?  Is that correct?

    Thank you for your prompt response.


    Jack

    Wednesday, May 9, 2012 3:03 PM
  • You need to have IIS set up on your PC. (As you are using MVC, presumably with VS, then you'd be previewing with IIS from VS).

    Set up the site in IIS and then use the Custom Preview setting in EW at the bottom of the Preview dialog.

    It's better described as a 'front-end development tool' rather than a design tool.

    Not sure about the limitations. I once had it slow down with a very large table, but have never tried with 1200 list items! I suspect browsers may slow down on a live server too.


    Ian Haynes

    EW - V4 Add-Ins
    EW - Resources, hints and tips
    EW - Design for the Mobile Web
    expression(web.blog)

    Wednesday, May 9, 2012 3:12 PM
  • Will do.  It will be a few days.  Will report back.

    Thanks.


    Jack

    Wednesday, May 9, 2012 5:27 PM
  • This got me intrigued and I've looked at some old pages and at creating long ul lists.

    I have one page on an old site where the customer insisted on having a huge data table. In code view there are over 8000 lines. EW takes a few seconds to scroll all the way down and check the code (which it does on the fly) but it displays it in Design view in less than a second.

    Previewing the page on local IIS takes over a minute. On a live server IE9 loads it almost instantly, although I did put a 'Page loading, please wait.." script on the page which I recall was needed at the time (IE6 etc). SuperPreview gives up with a 'too long to load' error.

    I've also create a 1200 item UL which EW has no problem displaying in code or design views, although there is nothing else on the page. In browsers this is also instant. SuperPreview takes about 10 seconds for this page for both IE6 and IE9.


    Ian Haynes

    EW - V4 Add-Ins
    EW - Resources, hints and tips
    EW - Design for the Mobile Web
    expression(web.blog)

    Thursday, May 10, 2012 9:14 AM
  • Really helpful.  Here is what the li's look like (one of the lines created from the C# generator, which, as you can see, hams it up with "lorem ipsum" text and pseudorandom numbers).  I load them into a tableless grid in the website, styled with css into multiple lines, which basically displays about three locations with a scroll bar.  Once loaded, even with 800 lines (the max I can get EW even to handle with a cut and paste), they scroll instantly in all modern browsers.  They sort, by distance from a map-based location (calculated using a modified Haversine formula) or alphabetically, extremely quickly.  It is the load that I wonder and worry about (EW preview v. a live server streaming the html to the client).  I will keep you posted.

    <li class='RetailerSearchSectionLine'><div class='RetailLocationCoordinates HiddenFields'><p class='RetailLocationLatitude'>35.4536188649263</p><p class='RetailLocationLongitude'>-113.473917561059</p></div><div class='RetailLocationWorkingData HiddenFields'><p class='RetailLocationGUID'>1451f1ed-bbe7-41da-bcd4-ebeb87a1c25f</p><p class='RetailLocationSortName'>Nostrud Magna Bookstore</p><p class='RetailLocationImageSrcValue'>Image1.jpg</p></div><div class='RetailParentWorkingData HiddenFields'><p class='RetailParentGUID'>7a2bdf83-d9f7-4d13-81cc-402ee1e34e93</p><p class='RetailParentSortName'>Aliquip Ullamco Group</p><p class='RetailParentCountry'>USA</p></div><div class='RetailLocationInformation'><div class='LocationMapInformation'><button class='LocationPushpin TextualCommandButton' name='LocationPushpin' type='button'>NMB</button><p class='LocationCountry'>USA</p></div><div class='LocationNameAndAddress'><p><a class='LocationName' href='[placeholder]'>Nostrud Magna Bookstore</a></p><p class='LocationStreetAddress1'>208  Consequat Blvd</p><p class='LocationStreetAddress2'>Nostrud Dolor Mall</p><p class='LocationRegionalAddress'>Amet Est, GH 30122</p></div><div class='LocationContactInformation'><p class='LocationType'>General Store</p><p class='LocationPhoneNumber'>222x315x6418</p><p><a class='RetailParentName' href='[placeholder]'>Aliquip Ullamco Group</a></p><p><a class='RetailParentWebsite' href='[placeholder]'>www.aliquipullamco.com</a></p></div></div><div class='RetailerAttributes'><p class='AcceptsGiftCertificates RetailerAttributesElement'>Yes</p><p class='ShipToStore RetailerAttributesElement'>Yes</p><button class='SelectRetailerForAllocationCommand RetailerAttributesElement TextualCommandButton' name='SelectRetailerForAllocationCommand' type='button'>Select</button></div><div class='MarketingComments'><p class='RetailerMarketingComments MarketingCommentText'>Aliquip Ullamco Group ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla p.</p><p class='LocationMarketingComments MarketingCommentText'>Nostrud Magna Bookstore veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Except.</p></div></li>


    Jack

    Friday, May 11, 2012 1:56 AM
  • OK, with this amount of content EW does slow down. I copied your code into a <ul> and repeated it until I had 658 list items and over 34,000 lines, (including whitespace) with a page weight of 1.65MB. EW takes around 16 seconds to move between Code and Design views. Previewing the page in IE9 using local IIS takes about 6 seconds initially and then about a second to refresh (which was a surprise). I suspect older browsers will not fare so well.

    So if you have double this, 1200 list items, it's going to be significantly worse. I didn't go any further!

      

    Ian Haynes

    EW - V4 Add-Ins
    EW - Resources, hints and tips
    EW - Design for the Mobile Web
    expression(web.blog)

    • Marked as answer by Jack Herr Friday, May 11, 2012 12:51 PM
    Friday, May 11, 2012 7:55 AM
  • OK.  So, along with an independent voice offering me some advice, it sounds like I will have to find a way to asynch load these li's, or just load some, or develop some other strategy for loading a lot of locations with this much content, or maybe reduce the content.  I will work on that, but, in the meanwhile, constrain my testing to ony a few hundred items, so that the rest of the project can continue.

    One question for you, Ian.  I have read conflicing points of view on the length of class and id names.  As you can see, I use longer, descriptive names, which shows my bias from server-side programming.  If I were to cut them down in size (maybe even programmatically just before serving a page), would that make any sort of a difference?

    Thanks for all your help.


    Jack

    Friday, May 11, 2012 12:01 PM
  • Thank you, again, Ian.  If you have a chance to answer my question in the last comment, great, but you have done enough, and helped me out a lot, already.  Sorry for the misspellings in my last comment.

    Jack

    Friday, May 11, 2012 12:53 PM
  • I don't know the answer to that, although I did notice you'd used long class names. Other than increasing page size I can't imagine it would make any difference. The page size becomes important for mobile or mobile-friendly pages, where we need to reduce page and resources sizes to the absolute minimum.


    Ian Haynes

    EW - V4 Add-Ins
    EW - Resources, hints and tips
    EW - Design for the Mobile Web
    expression(web.blog)

    Friday, May 11, 2012 2:01 PM
  • I tested much shorter class names for the same data volume.  No change in load or sort times.  Will recalibrate for mobile when launch.

    Jack

    Tuesday, May 15, 2012 9:01 PM