Design & Dev Tools

The PEC Review: LABjs for Better Site Performance

Many small- to medium-sized online retailers are entrepreneurial companies. Their owners and employees often have diverse responsibilities, and it is common for a single person to handle multiple tasks, such as customer service, email marketing, order processing and website design.

Unfortunately, not everyone is able to simultaneously be a great retail marketer, shipping clerk, and coding guru. This means that site development and site performance can suffer.

LABjs (“Loading and Blocking JavaScript”) is a free-to-use JavaScript, designed to improve site performance. And LABjs is easy enough to use that even merchants with a limited understanding of HTML will be able to implement it.

Depending on how many JavaScripts your site is loading, LABjs might be able to boost performance by 20 percent or more, which is why I am awarding LABjs four-and-a-half out of a possible five stars in this, “The PEC Review.”

“The PEC Review” is my weekly column devoted to introducing you to the products or services that I believe can and will help you improve your ecommerce operation. This week, I am taking up a more technical topic than I usually tackle. But, in the end, I hope you will agree that LABjs can make your site run better.

JavaScript: A Quick Overview

JavaScript is an object-oriented scripting language that is typically used on the client side (in the browser) to add interactive behavior. For the non-technical, just know that JavaScript is one of three important web languages, along with HTML and CSS. Together these three languages provide content (HTML), visual presentation (CSS), and interactivity or behavior (JavaScript).

As an example, imagine a product detail page with a product image, product description, and a buy now button. The HTML would provide the content like the image, text for the description, and mark-up for the button. The CSS would format the page so that the image is on the left and the description and button are on the right. The CSS would also describe which font to use for the text, what color that font should be, and call in any background images. The JavaScript might allow the user to zoom in on the image, look at additional images just by hovering over some element, or pan around the image without making additional server calls.

Loading JavaScript in Parallel

JavaScript is great stuff. It spices up otherwise blasé websites to facilitate customer interaction, does client-side validation on forms, and even helps manage site resources.

What’s more, thanks to a number of easy-to-use JavaScript libraries, and many ready-made plug-ins, ecommerce merchants designing their own sites can create user experiences that rival some of the largest online retailers.

But JavaScript can also be a huge burden, slowing down load times.

In order to make sure that JavaScript files load in the proper order, web browsers essentially stop everything they’re doing when they encounter a JavaScript. And to make matters worse, if a site visitor is using an old browser like Microsoft’s Internet Explorer 6, it will only load one JavaScript file at a time, completely executing it before moving on to the next item on the page.

Relatively speaking, this can seriously slow things down. For example, Barnes & Noble’s website loads an incredible 39 JavaScript files. Using a very modern, Firefox 3.6 browser and a pretty fast Internet connection, the site took 5.24 seconds to load; and, of that time, JavaScript used 1.62 seconds.

LABjs solves or at least eases this problem by loading JavaScript files in parallel, starting them all at the same time and still maintaining the proper execution order.

Using LABjs

To use LABjs, just download a tiny JavaScript file and activate it from your HTML. This script is called using the “normal” method, specifically <script> tags. Including a JavaScript in this way is often referred to as “making a call” or “calling a file.”

<script src="LAB.js">  </script>

Next, use a slightly different format for other JavaScript files instead of using a <script> tab for each one.

<script>
   $LAB
   .script("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js").wait()
   .script("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js").wait()
   .script("js.js")
</script>

That’s it.

Save Something Like 20 Percent on Load Times

I tested LABjs in a few environments, including a test site that I built for the video accompanying this article. In most cases, using LABjs reduced load times by about 20 percent.

The Price is Right

The LABjs project is supported by Getify Solutions, and is offered under an MIT License, so effectively it is free. I would encourage you to make a donation to the project if you choose to use it to boost your ecommerce site’s performance. It is the least you could do, especially if your better-performing site encourages additional sales.

REPLACE ALT

A Few Things to Watch For

No JavaScript is perfect, and LABjs does have a few challenges. First, if your JavaScript files uses document.write(), LABjs won’t work. It also has conflict problems with older versions of the jQuery Library (jQuery is a library of often used JavaScript functions and methods that web developers use to save time), so be sure to check out the documentation before you using it on a site that relies on older jQuery versions.

Also, some ecommerce platforms, particularly software-as-a-service (hosted) shopping carts, can be too restrictive and won’t let site owners add additional JavaScript files like LABjs.

Summing Up

LABjs is a site performance-boosting tool that could help your ecommerce site load faster. It is free and it is fairly easy to use. For all of these reasons, I’ve awarded LABjs four-and-a-half out of a possible five stars in this week’s “The PEC Review.”

Armando Roggio
Armando Roggio
Bio   •   RSS Feed


x