[TomatoCart] How to Load JavaScript Asynchronously to Speed Up your Store

Performance is the most important thing for an online store because it impact the user experience directly. When a customer access your store in your browser, a lot of javascript files are downloaded into his browser and executed in it. Loading and parsing of a JavaScript file blocks page rendering. This means that your store will not display until each script call in the document head has been loaded and executed. So, we have to use some techniques to make your store shows faster.

1. Combining & minify scripts

You could find the solution about it at http://blog.arvixe.com/improving-your-tomatocart-stores-performance-boost-tomatocart-speed/.

2. Load scripts asynchronously

This will queue the scripts asynchronously, making sure that they are parsed and executed in the order listed. There is no blocking of page rendering. So, the customer will find that the page appears much quicker on the browser because the page will not be blocked.

Please apply following changes for your glass_gray template to achieve it:

Step 1. Find templates > glass_gray > index.php.

Step 2. Find following code in it:

<?php if ($osC_Services->isStarted('debug') && defined('SERVICE_DEBUG_SHOW_CSS_JAVASCRIPT') && SERVICE_DEBUG_SHOW_CSS_JAVASCRIPT == 1) { ?>

Step 3. Add following code before it:

<script type="text/javascript">
	function loadScript(src, callback)
	{
	  var s,
	      r,
	      t;
	  r = false;
	  s = document.createElement('script');
	  s.type = 'text/javascript';
	  s.src = src;
	  s.onload = s.onreadystatechange = function() {
	    if ( !r && (!this.readyState || this.readyState == 'complete') )
	    {
	      r = true;
	      callback();
	    }
	  };
	  t = document.getElementsByTagName('head')[0];
	  t.appendChild(s);
	}

	loadScript('templates/<?php echo $osC_Template->getCode(); ?>/javascript/all.min.js', function() {
	    window.addEvent('domready', function() {
        new PopupCart({
          template: '<?php echo $osC_Template->getCode(); ?>',
          enableDelete: '<?php 
          	$box_modules = $osC_Template->osC_Modules_Boxes->_modules;
          	
          	$flag = 'yes';
          	foreach($box_modules as $box_group => $modules) {
          		foreach ($modules as $module_code) {
          			if ($module_code == 'shopping_cart') {
          				$flag = 'no';
          				
          				break 2;
          			}
          		}
          	}
          	
          	echo $flag;
          ?>',
          <?php 
          	if (defined('ENABLE_CONFIRMATION_DIALOG') && (ENABLE_CONFIRMATION_DIALOG == '1')) {
          ?>
          dlgConfirmStatus: true,
          <?php 
    				}else {
          ?>
          dlgConfirmStatus: false,
          <?php 
    				}
          ?>
          sessionName: '<?php echo $osC_Session->getName(); ?>',
          sessionId: '<?php echo $osC_Session->getID(); ?>',
          error_sender_name_empty: '<?php echo $osC_Language->get("error_sender_name_empty"); ?>',
          error_sender_email_empty: '<?php echo $osC_Language->get("error_sender_email_empty"); ?>',
          error_recipient_name_empty: '<?php echo $osC_Language->get("error_recipient_name_empty"); ?>',
          error_recipient_email_empty: '<?php echo $osC_Language->get("error_recipient_email_empty"); ?>',
          error_message_empty: '<?php echo $osC_Language->get("error_message_empty"); ?>',
          error_message_open_gift_certificate_amount: '<?php echo $osC_Language->get('error_message_open_gift_certificate_amount'); ?>'
        });
        
        new TocAutoCompleter('keywords', {
          sessionName: '<?php echo $osC_Session->getName(); ?>',
          sessionId: '<?php echo $osC_Session->getID(); ?>',
          template: '<?php echo $osC_Template->getCode(); ?>',
          maxChoices: <?php echo defined('MAX_DISPLAY_AUTO_COMPLETER_RESULTS') ? MAX_DISPLAY_AUTO_COMPLETER_RESULTS : 10;?>,
    			width: <?php echo defined('WIDTH_AUTO_COMPLETER') ? WIDTH_AUTO_COMPLETER : 400; ?>,
          moreBtnText: '<?php echo $osC_Language->get('button_get_more'); ?>',
          imageGroup: '<?php echo defined('IMAGE_GROUP_AUTO_COMPLETER') ? IMAGE_GROUP_AUTO_COMPLETER : 'thumbnail'; ?>',
        });
      });
      new TocBookmark({
      	bookmark: 'bookmark',
      	text: '<?php echo $osC_Language->get('bookmark'); ?>',
        img: '<?php echo 'images/bookmark.png'; ?>'
      });  
	});
</script>

Step 4. Find & remove following codes:

<script type="text/javascript" src="templates/<?php echo $osC_Template->getCode(); ?>/javascript/all.min.js"></script>
<script type="text/javascript">
  window.addEvent('domready', function() {
    new PopupCart({
      template: '<?php echo $osC_Template->getCode(); ?>',
      enableDelete: '<?php 
      	$box_modules = $osC_Template->osC_Modules_Boxes->_modules;
      	
      	$flag = 'yes';
      	foreach($box_modules as $box_group => $modules) {
      		foreach ($modules as $module_code) {
      			if ($module_code == 'shopping_cart') {
      				$flag = 'no';
      				
      				break 2;
      			}
      		}
      	}
      	
      	echo $flag;
      ?>',
      <?php 
      	if (defined('ENABLE_CONFIRMATION_DIALOG') && (ENABLE_CONFIRMATION_DIALOG == '1')) {
      ?>
      dlgConfirmStatus: true,
      <?php 
				}else {
      ?>
      dlgConfirmStatus: false,
      <?php 
				}
      ?>
      sessionName: '<?php echo $osC_Session->getName(); ?>',
      sessionId: '<?php echo $osC_Session->getID(); ?>',
      error_sender_name_empty: '<?php echo $osC_Language->get("error_sender_name_empty"); ?>',
      error_sender_email_empty: '<?php echo $osC_Language->get("error_sender_email_empty"); ?>',
      error_recipient_name_empty: '<?php echo $osC_Language->get("error_recipient_name_empty"); ?>',
      error_recipient_email_empty: '<?php echo $osC_Language->get("error_recipient_email_empty"); ?>',
      error_message_empty: '<?php echo $osC_Language->get("error_message_empty"); ?>',
      error_message_open_gift_certificate_amount: '<?php echo $osC_Language->get('error_message_open_gift_certificate_amount'); ?>'
    });
    
    new TocAutoCompleter('keywords', {
      sessionName: '<?php echo $osC_Session->getName(); ?>',
      sessionId: '<?php echo $osC_Session->getID(); ?>',
      template: '<?php echo $osC_Template->getCode(); ?>',
      maxChoices: <?php echo defined('MAX_DISPLAY_AUTO_COMPLETER_RESULTS') ? MAX_DISPLAY_AUTO_COMPLETER_RESULTS : 10;?>,
			width: <?php echo defined('WIDTH_AUTO_COMPLETER') ? WIDTH_AUTO_COMPLETER : 400; ?>,
      moreBtnText: '<?php echo $osC_Language->get('button_get_more'); ?>',
      imageGroup: '<?php echo defined('IMAGE_GROUP_AUTO_COMPLETER') ? IMAGE_GROUP_AUTO_COMPLETER : 'thumbnail'; ?>',
    });
  });
  new TocBookmark({
  	bookmark: 'bookmark',
  	text: '<?php echo $osC_Language->get('bookmark'); ?>',
    img: '<?php echo 'images/bookmark.png'; ?>'
  });  
</script>

Done. Now, the page will not be blocked as loading the huge javascript in your store.

Screen Shot 2014-06-26 at 18.13.00

Figure 1. Before loading the script asynchronously, the Blocking time is 948ms.

Screen Shot 2014-06-26 at 18.13.11

Figure 1. After loading the script asynchronously, there is no blocking time.

This technique should be very useful to improve Your TomatoCart Store’s Performance. Please try it. If you can’t do it by yourself, please contact me:

Gmail: support@tomatocart.com

Looking for quality TomatoCart Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , , , | Posted under TomatoCart | RSS 2.0

Author Spotlight

Jack Yin

Jack Yin

TomatoCart Developer & Co Founder - Arvixe Web Hosting / TomatoCart Community Liaison

Leave a Reply

Your email address will not be published. Required fields are marked *


7 − = 4

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>