Web performance case study: the making of abof.com
Submitted by Ankur Sethi (@s3thi) on Monday, 15 August 2016
A from-the-trenches narrative about how the fastest e-commerce website in India was built. Starring React, Redux, Webpack, and a whole lot of discipline.
Earlier this year, the folks at Aditya Birla Online Fashion commisioned a rewrite of their web front-end from scratch. The goal of the rewrite was to improve page speed – and hence conversion rates – on mobile devices. The first stage of the rewrite was carried out over a period of three months and, on launch day, the load times for the product listing pages on https://www.abof.com were the lowest among all the major e-commerce websites in India, even on the cheapest white-label Android devices on flaky 3G/2G connections.
My talk is a from-the-trenches narrative about how the Alaris Prime and ActiveSphere teams accomplished this feat, going into detail about our technology choices, build tooling, processes, and testing methodologies.
Along the way, I will touch on the key factors that affect web performance, the state of the front-end ecosystem, ReactJS and its ecosystem, ServiceWorkers and progressive web applications, and the importance of build tooling and automation while building front-end applications.
Building performant web applications isn’t hard, but it requires discipline. My goal is to decompose the philosophy and thought processes that lead to great webapps into a set of guidelines that tech teams can follow to replicate what we did at abof in their own workplaces.
The content and structure of the talk will roughly follow the series of blog posts we at Alaris Prime published on our blog recently. You can read the first part here: https://blog.alarisprime.com/e-commerce-case-study-building-faster-listing-pages-on-abof-com-part-1-cb99231a1e8a. Follow us to read the second and third parts of the case study as they are published!
- Experience with building web applications using any one of the popular front-end frameworks (Backbone, Angular, React, Ember, etc.)
- Experience with debugging web applications using the Chrome Dev Tools.
- Basic knowledge of how REST APIs, CDNs, and task automation works.
He has worked on everything from filesystems to mobile games, but his first love has always been the web platform.