Speed up your ecommerce website and improve website performance - Yottaa logo
11/16/2017

2017 ECommerce Leaders Survey

SITE PERFORMANCE AND INNOVATION TRENDS

eCommerce leaders face a “tug of war” when it comes to web performance. On one hand, they are facing competitive pressure to stay innovative, build new features, and provide rich and engaging online shopper experiences.

To do so, they must deploy 3rd party technologies, which have been proven to significantly slow page load times. On the other hand, they are also being told to speed up their websites or shoppers will leave in droves resulting in lost revenue.

This report examines the current state of eCommerce web performance with direct feedback from 125 eCommerce Leaders.

Click the button below to download the full report.

Download 2017 Ecommerce Leaders Survey

The Yottaa Ecommerce Blog

Last updated on November 20th, 2017

Better Web PerformanceOne of the top priorities for any front end developer is creating better web performance and an improved user experience overall. One of the best ways to accomplish this is by making edits and changes to JavaScript code that make it run more efficiently. More often than not, marketing departments are the reason for overburdened JavaScript codes, because they want the website to do everything. Fortunately, there are some easy changes you can make that will improve the overall performance of your code and the website as a whole.

Try these JavaScript tweaks for better web performance:

The following are a few quick changes you can make to your JavaScript code to make it run more efficiently.

Reduce Dependencies

Better web performance on mobile devices can be particularly difficult due to more constrained bandwidth. One way to work around that issue is to reduce the number of dependencies in your code as much as possible. This allows the most important elements of the web page to load with fewer data packets transferred.

In addition, you can minimize code using a cool like JsMin or Google Closures, which will combine each piece of code into easier-to-load modules. Finally, add caching as much as possible through the use of ETags.

Delay vs. Async vs. Modular Loading

Delaying the firing of JavaScript is a common way to defray the performance cost of the scripts.  But delaying still means they have to be downloaded and executed — no matter what — since they still exist in the DOM and have to be parsed by the browser in the initial DOM process.

Two steps to go beyond just delaying JavaScript include:

  • Using the HTML5 async tag, when implemented correctly, will execute scripts in parallel, avoiding any blocking behavior that may occur when a browser encounters a script in parsing the document
  • Even better, implement modular loading via the popular Require.JS loader, which grants some additional flexibility (if you’re willing to do the customization work for it). Modular loading uses function wrappers to help solve the complex dependencies that often come parceled with JavaScript. It also means JS doesn’t necessarily have to be parsed in the initial DOM process.

 Load on Mouseover

For many functions written in JavaScript, they do not need to be running until the user is ready to activate them. Setting them to Load on Mouseover will dramatically improve web performance by only loading elements of the code when a user moves the cursor over them.

To add this functionality, simply add “explicit” to the end of each piece of the script. Then, create a loadTag that activates when the Mouseover event occurs.

Define local variables as often as possible

One of the biggest slowdowns occurs when your script has to search the scope chain for variables. If you find yourself using a variable more than once, it is worth defining it locally. For example, changing

This:

var blah = document.getElementById(‘myID’),
blah2 = document.getElementById(‘myID2’);

To this:

var doc = document,
blah = doc.getElementById(‘myID’),
blah2 = doc.getElementById(‘myID2’);

These are just a few examples of how you can improve the performance of your JavaScript, thereby providing better web performance for your users. Be creative and think of other ways you can reduce load times and bandwidth for your users!

Key Takeaways

  • JavaScript can be quickly edited to improve performance
  • Load-on Mouseover prevents elements from loading until the user needs them
  • Reducing dependencies will reduce the bandwidth demanded by a particular web page
  • Local variables will reduce the amount of power required to perform an action

Sources: De Salas Works, Jon Raasch



Yottaa Ebook How to Identify 10 Performance Problems in 10 Seconds Download

Let's speed up your ecommerce site, and enhance your user experience.

Fill out the form below to find out how Yottaa can benefit your organization.