ReactFoo 2017

A conference on React

Tickets

Improving Load time of a Production React App

Submitted by Kanav Arora (@kanavarora) on Wednesday, 2 August 2017

Section: Full Talk Technical level: Intermediate

View proposal in schedule

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/edit

Comments

  • Sandhya Ramesh (@sandhyaramesh) Reviewer 2 years 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.

    • Kanav Arora (@kanavarora) Proposer 2 years 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.

  • anubhav (@anubhav989) 8 months ago (edited 8 months 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>

Login with Twitter or Google to leave a comment