Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Performance Feat. Webpack

Atishay
January 10, 2019

Performance Feat. Webpack

Performance Introduction

Introduction to performance
What to expect in this talk
Importance of measurement
Common Misconception

Cost of JavaScript

Looking into how Browsers parses JavaScript
How we can Reduce the parse Time
Scope of Optimizations

Optimization with webpack

Performance focus of webpack especially version 4
Lazy loading strategies
Code splitting strategies for CSS and JS
Prefetching
Split chunk plugins
Other plugins for performance tuning

Atishay

January 10, 2019
Tweet

More Decks by Atishay

Other Decks in Technology

Transcript

  1. What this talk is not • Not a performance checklist

    • Not a discussion on code best practices • Not a discussion For platform(server) or network performance • Not a demonstration of how to profile web applications
  2. What this talk is about • Why performance is important

    • How the latest version of webpack solves a lot of performance problems • What Should be our bundle goal • Code Splitting in detail • Birdeye’s work on performance improvement
  3. What is performance and why it matters? ” 0.1 second

    is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result. —Jakob Nielsen
  4. “1.0 second is about the limit for the user's flow

    of thought to stay uninterrupted, even though the user will notice the delay. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second, but the user does lose the feeling of operating directly on the data.” —Jakob Nielsen
  5. “10 seconds is about the limit for keeping the user's

    attention focused on the dialogue. For longer delays, users will want to perform other tasks while waiting for the computer to finish, so they should be given feedback indicating when the computer expects to be done. Feedback during the delay is especially important if the response time is likely to be highly variable, since users will then “
  6. Akamai Reveals 2 Seconds As The New Threshold “Akamai found

    that 40% of the shoppers will wait no more than three seconds before abandoning a retail or travel site.”
  7. SEO is impacted Google found that a 2% slower page

    resulted in 2% fewer searches, which means 2% fewer ads shown.
  8. According to research, if you want user to feel like

    your site is faster than your competitors, you need to be 20% faster.
  9. Why performance is difficult to achieve • Our application code

    base is increasing day by day. • Modern Javascript frameworks like react makes us to write a lot of code. • At web we have started to supported a lot many functionalities.
  10. Top 3 causes for Browser performance 1. Amount of Javascript

    For Initial Download 2. Amount of css For Initial Download 3. Amount of Network Request on Initial Download JavaScript > CSS >Network Request
  11. Code Splitting • Process of splitting pieces of your code

    into async chunks • Creating these lazy bundles at build step.
  12. Async Code Splitting Dynamically splitting the code on the basics

    of request. Dynamically loading the import statements
  13. Webpack Code Splitting Under the Hood • How does webpack

    do code splitting? • How chunks are getting created? • How chunks are getting called
  14. What did Birdeye achieved? • JavaScript bundle size reduced to

    541.98KB from 1.4MB • CSS bundle size reduced to 60kb from 183kb • First Meaningful pain reduced to 1,210 ms from 6,170 ms Source- lighthouse profiling
  15. Conclusion • Reducing the bundle size is not a one

    step process. • Add a threshold in your CI/CD pipeline • Add pre-commit hooks,and bundle size check points for prs