ReactFoo 2017

The talk will draw on our learnings from the efforts that we undertook earlier this year to improve UrbanClaps’s website performance, resulting in a 60% reduction in load time. All our efforts towards performance engineering can be bucketed in roughly two areas: ship less assets and tweaking order of delivery of assets. In this talk I will primarily focus on the former with key emphasis on how to really optimize bundling via webpack. All of this was done in the context of a large production app with constraints on product, business and user experience.

Outline

Introduction

• Tech stack of the urbanclap front end website
• Complexities faced in improving performance
• Performance bucketing: Shipping less, Changing order of assets

Shipping less assets via webpack

• JS Chunking
• CSS Chunking
• Mobile/Desktop Chunking
• Chunks on Demand

Modifying order of assets for SSR

• CSS Inlining
• Js Optimization

Impact

• Key Tech Metrics
• Business Metrics

Tools/Performance Monitoring

• Why is it VERY important
• Webpack Analyzer
• Webpagetest.org
• Continuous Integration

Speaker bio

Kanav Arora is head of FrontEnd Engineering at UrbanClap, heading their web and mobile development teams. Prior to UrbanClap, Kanav has worked as a Software Developer at Microsoft and Lead iOS Developer at silicon valley mobile gaming company, PocketGems. He was also the CTO of a startup named Stuph in the valley, before moving to India. Kanav holds a BS in Computer Science from UC Berkeley.

Links

• https://hackernoon.com/improving-first-time-load-of-a-production-react-app-part-1-of-2-e7494a7c7ab0

Slides

https://docs.google.com/presentation/d/1Fq9fBIfx_GfUyyXTYNc2O49LrIbqMQ4k8c4ISS2x8HA/edit