Announcement

Collapse
No announcement yet.

Loading pages quickly using ajax

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Loading pages quickly using ajax

    We've been testing using ajax to load various pages, using a process like this:

    1. user loads any page
    2. user clicks to another page
    3. click is handled by javascript and turned into a POST, adding a flag to the POST data telling miva that this is an ajax request
    4. miva receives the POST, and returns only necessary content, for example:

    Code:
    <mvt:if expr="ISNULL g.ajaxRequest">
        <!-- this will only be loaded if the ajax flag is off -->
        <!-- therefore, ajax loads won't get the html_profile, which is fine because they don't need it -->
        <mvt:item name="html_profile" />
    </mvt:if>
    .... other content that is always loaded
    5. javascript receives the return data and inserts it into the current page, erasing whatever was in that spot previously

    This all works fine, and the pages do load faster.

    Today I used the debug tool and mvprof to profile a few page loads. I noticed that the ajax requests are still loading the category tree, even though that part is excluded on ajax loads:

    Code:
    <mvt:if expr="ISNULL g.ajaxRequest">
        <mvt:item name="category_tree" />
    </mvt:if>
    I'm guessing this is because miva loads all the included items before running through the template code. I suppose this means the best way to further speed up page loads is to have entirely separate versions of pages loaded by ajax, that don't include any unnecessary items.

    If anyone has any other insight I'd appreciate it, maybe I missed something and there's a better way to go about this?
    Looking for work as of March 2024! I've been a web developer for going on 20 years, with most of that time spent on Miva sites.

    #2
    Re: Loading pages quickly using ajax

    You are correct, not having the item tag for the category tree won't prevent Miva from loading all the information about that item. Once an item is assigned to a page Miva will load all the information about that item.

    How slow is your page to begin with? The multiple ajax calls on a page may be worse off in the long run since each one loads a whole new Miva page. Under heavy traffic this would be much worse for the server.

    There may be better ways to optimize your site for speed.
    Brennan Heyde
    VP Product
    Miva, Inc.
    [email protected]
    https://www.miva.com

    Comment


      #3
      Re: Loading pages quickly using ajax

      Hi Brennan, thanks for the info,

      The site isn't particularly slow but I'm very big on making it as fast as possible. I use google pagespeed and it reports a "slow" server response time for our category and product pages, at about 1/3 of a second. That's why I did the debug / mvprof yesterday, to see if there's anything I can get rid of.

      We're actually not making multiple ajax calls per page. The first pageview doesn't use ajax at all, it loads just like normal (since the ajaxRequest flag isn't there). But further pageviews use ajax to only load the internal content. So the browser doesn't have to re-render the header/nav/footer and doesn't have to re-setup various sharing widgets (google plus, facebook, pinterest, etc). For the sharing widgets, I do have to run their init functions again so they know about the new URL, but that's noticeably faster than starting from scratch.

      For example a page template looks something like this. The content item is always printed, but the header/footer etc are only printed if the ajax flag is not set:

      Code:
      <mvt:if expr="ISNULL g.ajaxRequest">    <mvt:item name="html_profile" />
          <head>
              <title>page title</title>
              <base href="&mvt:global:basehref;">
              <mvt:item name="head" param="head_tag" />
          </head>
          <body>
              <mvt:item name="hdft" param="global_header" />    
              <div>    
                  <mvt:item name="hdft" param="header" />
                  <mvt:item name="category_tree" />
                  
                  <div id="mainContent">
      </mvt:if><mvt:comment><!--if ISNULL g.ajaxRequest--></mvt:comment>
                      <mvt:item name="content" />
      <mvt:if expr="ISNULL g.ajaxRequest">
                  </div>
              </div>
              <mvt:item name="hdft" param="footer" />
              <mvt:item name="hdft" param="global_footer" />
          </body>
          </html>
      </mvt:if>
      Looking for work as of March 2024! I've been a web developer for going on 20 years, with most of that time spent on Miva sites.

      Comment


        #4
        Re: Loading pages quickly using ajax

        This should work great, unless values are set in the top section that is used by the content. It won't stop the the components assigned to the page from being initialized, but it will prevent them from being rendered.
        Ray Yates
        "If I have seen further, it is by standing on the shoulders of giants."
        --- Sir Isaac Newton

        Comment


          #5
          Re: Loading pages quickly using ajax

          Thanks Ray, yea so far it's been working very well. After the discussion here, I made an alternate PROD page that's used only for ajax requests, which doesn't include any unused items. Checked with mvprof and the cumulative page load time went from about 1/3 of a second (yesterday's numbers) to .16 seconds. This is for a product page, haven't gotten to category / home yet.

          Anyway it's not much but I'll take it.
          Looking for work as of March 2024! I've been a web developer for going on 20 years, with most of that time spent on Miva sites.

          Comment

          Working...
          X