Use HTML5 To Shorten Load Times

With the newest browsers (IE11, Chrome, Firefox) supporting HTML5 it is time for your ecommerce websites to take advantage of the new features to cut load times and keep clients from abandoning their orders. Here are three practical tips on how to do just that:

• Use the async or defer attribute for scripts

Script tags load synchronously meaning that the browser stops processing the HTML page until the script file is downloaded from the server. If you have multiple Javascript or template files loading via the script tag then each file will block the processing of the page and cause your ecommerce website to load slowly. To solve this issue you can use the async attribute on the script tag which makes scripts load asynchronously so that the script tag will no longer block the browser from processing the rest web page.

Beware that using the async attribute might cause some issues depending on when you are expecting the script to load. For a more indepth look at async and defer you can start by reading the W3C specification.

• Use local storage to store data

Instead of saving shopping list data on the server, you can save that data locally using the localStorage API. This is especially useful if you have functionality in your store that displays previously visited products or categories. Now you can store that data directly on the local device and no longer have to load it from the database server. Less servers requests = faster load times.

• New input fields and the pattern attribute

HTML5 introduces several new input fields that validate user data and display error messages. This means you no longer have to rely on external Javascript libraries to validate the data, although do continue using server side validation. For example, if you have a sign up page and need to validate an email address then you can use the email input instead of a simple text input. If you have different input types that you want to validate then use the pattern attribute to specify a regular expression for validation purposes.

With a bit of planning you can take advantage of the new features in HTML5 to speed up your shopping cart. A faster checkout experience should translate into more sales and a higher profits for you as the store owner. Well what are you waiting for? Go do it!