eCommerce Tech Tip: Improve User Experience with the HTML5 History API
By Jen Scott, Applications Engineer
In eCommerce, it’s very common to have a series of product pages where just the color of the item is different. For instance, when a shopper clicks to change their color choice for a shirt from brown to red, the only thing that’s actually different is the URL and the image.
Usually, the new “page” would require a visit back to the server for a full refresh, including the unchanged content. However, this affects time-to-interact, or TTI, the point at which the user can take their next action such as clicking on a button. TTI is a key measure of site speed and user experience in which the less time it takes for the customer to interact with your site, the better user experience they’ll have.
Page Load and the HTML5 history API
If your site is using AJAX to load content, you can optimize your site for you customers and take advantage of the HTML5 History API to avoid a full refresh. This enables you to get a new URL in the browser location bar while only loading the different parts of the new page. Here’s how it works:
- Load the part of the second page that is different from the first page.
- Swap in the changed content.
- Update the browser location bar with the URL of the second page.
Call history.pushState to change the URL in the browser location bar.
Example: history.pushState(null, null, link.href)
The history.pushState() function takes three parameters:
- state: Any JSON data structure. It is passed back to the popstate event handler. (optional)
- title: Any string. This parameter is currently unused by major browsers. If you want to set the page title, you should store it in the state argument and set it manually in your popstate callback. (optional)
- url: the URL you want to appear in the browser’s location bar.
You’ll need to incorporate a popstate function in case the back button is clicked by the end user. After you’ve used the history.pushState() function to push a fake URL onto the browser’s history stack, when the user presses the back button, the browser will fire a popstate event on the window object.
window.addEventListener(“popstate”, function(e) {
//
});
The browser will end up with a unique DOM for the second page as well as a new URL as if the user had navigated to the second page. In reality, the page was never fully refreshed, just the changed content was loaded. The end user, and the browser, are none the wiser.
(NOTE: This API is not currently supported in Internet Explorer or Android, but is supported in the latest versions of Firefox, Safari, Chrome, Opera, and iPhone.)
Improving user experience and overall site efficiency are key elements of eCommerce success. When you have numerous product pages with only slight variations, using the HTML5 History API can save a great deal of time that will pay off in increased traffic and conversion rates.
Resources:
http://diveintohtml5.info/history.html
https://github.com/browserstate/history.js/wiki/The-State-of-the-HTML5-History-API
https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling
http://diveintohtml5.info/detect.html#history
https://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-1-introducing-pushstate/
https://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/
Jen Scott is a Demandware Applications Engineer at Lyons Consulting Group. She has over ten years of marketing experience in B2B, non-profit higher education, and retail industries. Jen has co-developed iOS apps with her brother and enjoys going on as many camping and hiking trips as possible.
