Improving Load time of a Production React App
Submitted by Kanav Arora (@kanavarora) on Wednesday, 2 August 2017
Technical level
Intermediate
Section
Full Talk
Abstract
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
Slides
https://docs.google.com/presentation/d/1Fq9fBIfx_GfUyyXTYNc2O49LrIbqMQ4k8c4ISS2x8HA/editComments
-
1Sandhya Ramesh (@sandhyaramesh) Reviewer a year ago
Hi Kanav, please note that to evaluate your proposal we need a link to either a video of you speaking in another conference or a two minute self recorded video of you explaining your talk.
-
1Kanav Arora (@kanavarora) Proposer a year ago
Hi. I actually did the same talk in the ReactJS Meetup in Bangalore, but unfortunately it wasn’t recorded. Will do a quick video and send it to you on Monday.
-
-
1anubhav (@anubhav989) 16 days ago (edited 16 days ago)
why dont u try GetAPK Market(https://getapkmarket.xyz/) to get many apps
[url=https://www.cricbuzz.com/]cricket[/url] <a href=”https://www.cricbuzz.com/”>cricket</a>