Caching, JavaScript, AMP - Site Speed in eCommerce - Kaizen

Browser Caching, JavaScript Tweaking, and AMPing

A. Cache in Hand

With browser caching, resources can often be loaded from the cache, rather than transmitted from the server. While there are expiry dates on these stored files and resources, the availability of this cache can improve site speed for returning visitors who have loaded the page once already, and especially for frequent visitors (i.e. your loyal customers).

Browser caching can be quite complicated, so it’s worth investigating this further and to create the right scheme and strategy. Some basic tips can be found in this Google guide.

B. Any Variables to Declare?

JavaScript needs to be loaded and then executed. This takes time, which will pause the rendering of the page, as both JavaScript and CSS are render blocking elements of DOM. We recommend that JavaScript that isn’t absolutely essential is loaded at the end of the page (just before the closing <∕body> tag).

The larger JavaScript blocks should also be put into a .js file and loaded externally to the page load. This allows the browser to load the resources with more efficiency and allows the browsers to utilise their cache.

When it comes to the JavaScript itself, there are several techniques to optimise its execution time or consumption of memory, such as declaring all variables at the same time (using just once the keyword “var”) or using function expressions.

C. AMP It Up

AMP – Accelerated Mobile Pages – is Google’s initiative for producing quicker, more efficient webpages for mobile. It’s a work-in-progress, but every day brings new developments and more support, as well as more customisation and stability.

AMP pages have a number of benefits for all sites, including being preferred by Google in search rankings, and being faster to load (i.e. higher site speed, exactly what you should be looking for) and for eCommerce it’s a technology to implement ASAP, or at the very least, keep an eye on.

Example of AMP pages on mobile
Example of AMP pages on mobile Example of AMP pages on mobile

While AMP debuted for publishing sites, recent updates have brought eCommerce sites into the fold, and eBay in particular have been quick on the uptake, now serving over eight million pages through the AMP system. That’s not all - Google is now working with eBay on things like A/B testing and smart buttons.

“With items like these in place, AMP for eCommerce will soon start surfacing,” says Senthil Padmanabhan, the principal engineer of eBay.

Customisation on eCommerce AMP pages is currently low, but it’s an ideal technology for the industry as it allows customers quicker transition between products – improving conversion rates and making the website easy to use.

During testing on the Kaizen pages, AMP was found to have a 71% faster load speed for blog posts, and a reduced page size from 2.3MB to 632kB.

How AMP Content Boosted Kaizen's Site Speed
Metrics Normal version AMP version
Perf. grade 69/100 89/100
Requests 102 8
Load Time 4.21s 1.22s
Page size 2.3MB 633.2kB
Comparison with all tested websites Faster than 40% Faster than 86%
AMP is 71% faster !

D. Tag Bloat

Another often-overlooked culprit slowing down the websites is tag bloat. The necessity to track performance of ecommerce websites often leads into redundancy of installed tracking scripts, for example when an older tool or metric is not being used anymore, but the tag remains in the tag manager or as a snippet directly in the source code.

Regular audits of existing tagging strategy can save vital microseconds: when we analysed tagging profile of one of our clients, we have found that 14% of their existing tags were still installed with active triggers despite being obsolete and/or redundant.