Click & Collect is a grocery pick-up service offered by Loblaws. Customers can place their orders online and then pick them up at the store. During my time working there, I noticed an opportunity to improve the performance of the front-end and took the initiative to develop a project plan to address it. I utilized various performance monitoring tools such as AppDynamics, Web Page Test, and Google Page Speed to identify areas that required attention. I then formulated a plan to address these issues and collaborated with different departments to execute it.
One of the first aspects we tackled was optimizing the images on the website. As a site with a substantial amount of content, image size became a concern. I worked closely with the production teams to educate them on techniques such as compression to reduce file sizes without compromising quality. Additionally, we implemented cache headers to ensure that the images would remain valid for an extended period, as the content rarely changed once published. These efforts significantly improved the site's response time.
Another challenge we faced was the maintainability of the JavaScript code base. By implementing RequireJS with Grunt as the build tool, we were able to utilize ESLint to identify and rectify errors. I then had the opportunity to lead a new team of developers dedicated to improving the front-end code, both JavaScript and CSS/SASS, to enhance scalability. Through this initiative, we managed to reduce the error rate to 2 JavaScript Errors per hour, minimize call volume related to website issues, and increase conversion by 1%.
On the CSS side, we worked on simplifying the SCSS implementation to enable the easy application of new themes for Click & Collect. We also optimized the CSSOM creation process by eliminating unnecessary shades of colors that deviated from the brand guidelines. To ensure consistency, I implemented a living style guide for all developers to reference, which covered aspects such as color usage and font selection. As a result, the number of unique colors was reduced to 74, with only 34 belonging to the bootstrap framework.
Overall, the process of auditing and optimizing the front-end for performance and scalability at Loblaws led to a significant improvement in load time and increased conversion rates. It is crucial for large applications to prioritize performance and scalability to avoid hindering the implementation of great ideas. I am confident that my experience and leadership can contribute to the success of your front-end teams and applications. Please feel free to reach out to me for further assistance.