ReactFoo Delhi

On React, performance and front-end engineering

Tickets

Improving React App Performance : A Case Study

Submitted by Punit Sethi (@geekybiz) via Zainab Bawa (@zainabbawa) on Thursday, 18 July 2019

Duration: 40 mins full talk Status: Confirmed

Abstract

This talk is about our experience of performance optimizing our React App. Objective of our exercise was to quantifiably improve our app’s performance in a few (4-6) weeks. This presentation details how we measured the gains and what React + Webpack changes we leveraged to achieve the gains.

Front-end devs wanting to improve their React SPA performance shall find this talk insightful. Key take-aways:
- what are the Webpack & React performance optimization options avaialable
- how to apply those optimizations
- how to make performance optimization exercise effective

Few tools I intend to talk about are Webpack Bundle Analyzer, Chrome Devtools, WebpageTest. Few optimization capabilities I shall disccuss are related to tree shaking, code splitting, dynamic library loading, babel-preset-env, vendor bundle webpack configuration, brotli, etc.

Outline

  • How we measured our React App’s performance & improvement
  • Performance metrics
  • Test conditions
  • Tools

  • How we improved our React App’s performance

  • Identified & removed unused libraries / part of libraries
  • Code splitting with React’s lazy & suspense
  • Identify & load specific libraries libraries dynamically
  • Reduce babel transpiled code with babel-preset-env
  • Reduce download size with brotli-webpack-plugin

  • Details of Performance Improved

  • Timings
  • Size of our JS Bundles

Requirements

None

Speaker bio

Punit Sethi is founder of Tezify. Tezify.com offers tools & services to measure & improve front-end performance. Punit has worked on improving performance of various high-traffic Indian ecommerce websites. Prior to Tezify, Punit has been working on software performance for a decade.

Links

Slides

https://docs.google.com/presentation/d/1xSyMUxSepixX7eK7KkieXsNhyrLiYrPhdIEbF3ZfNao/edit?usp=sharing

Comments

  •   Raghavendra Satish Peri (@artofvision) 3 months ago

    Hello,
    At hasgeek events we are trying to make our events accessible for people with disabilities. To achieve our goal is to first get the content of presentations accessible. Here is some guidance to make the presentations accessible. Please use these fonts & size so that even able body people can see the content in the auditorium during presentation.

    Fonts and Font Size
    Because they are the easiest to read, only use Sans Serif fonts, such as Arial and Verdana. Since a PowerPoint presentation will most likely be projected onto a large screen consider how far the audience will be from the screen and choose a font size accordingly. The minimum font size for a PowerPoint presentation should be 24 points.

    For more accessibility info on making presentations accessible use the following link
    https://www.framingham.edu/Assets/uploads/about-fsu/accessibility/_documents/7-steps-accessible-ppt.pdf
    Hello,
    At hasgeek events we are trying to make our events accessible for people with disabilities. To achieve our goal is to first get the content of presentations accessible. Here is some guidance to make the presentations accessible. Please use these fonts & size so that even able body people can see the content in the auditorium during presentation.

    Fonts and Font Size
    Because they are the easiest to read, only use Sans Serif fonts, such as Arial and Verdana. Since a PowerPoint presentation will most likely be projected onto a large screen consider how far the audience will be from the screen and choose a font size accordingly. The minimum font size for a PowerPoint presentation should be 24 points.

    For more accessibility info on making presentations accessible use the following link
    https://www.framingham.edu/Assets/uploads/about-fsu/accessibility/_documents/7-steps-accessible-ppt.pdf

Login with Twitter or Google to leave a comment