Click & Collect is Loblaws grocery pick-up service. Order on-line and then pickup in store. While working there I identified a gap in their front-end performance and developed a project plan to fix it. I worked with performance monitoring tools such as AppDynamics, Web Page Test and Google Page Speed to identify areas that need attention. Then developed a plan to tackle those issues and worked across departments to implement it.

I lead a team of developers in moving components of the site over to react, identifying back-end issues to hand off to the appropriate teams, and work on improving the front-end code base before moving to a dedicated team to tackle the plan I had developed.

This first thing we tackled was images. As a content rich website image size can be a growing concern for anyone. I worked with the production teams to show them how they can export images for the web utilizing compression and other techniques to simplify an image to reduce it's file size. We then implemented proper cache-headers on the images so they wouldn't expired for quite some time, as this content rarely changes once it is published. This resulted in lowering the sites response time as we progressed through the exercise.

The next challenge was the maintainability of the javascript code base. A requireJS implementation using Grunt as the build tool allowed us to implement ESLint to start to identify errors and fix them. I went on to lead a new team of developers dedicated to cleaning up the front-end code both JavaScript and CSS/SASS so that the front-end could scale. Through this exercise we reduced the error rate down to 2 JavaScript Errors/Hour, we saw a large reduction in call volume that mentioned website issues, and increased conversion by 1%

On the CSS side we reduced the complexity of the SCSS implementation for theming so that new themes could easily be applied to Click & Collect. We sped up CSSOM creation through eliminating many shades of colours that were off brand, and not in the original style guide. I implemented a living style guide for all developers to reference so no new colours would slip into the application, fonts were closely watched, and explained the inheritance model of the applications CSS architecture. This resulted in dropping the unique colours down to 74, of which 34 belong to the bootstrap framework.

Overal the process of auditing the front-end for performance and scalability for Loblaws has resulted in a significant drop in their load time and an increase in conversion. Large applications need to watch out for performance and scalability otherwise you may find yourself with great ideas and no place to implement them. Contact me to help lead your front-end teams and application to speedy success!