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

Transcript

1. Performance Feat. Webpack
2. Hi I am Atishay Frontend Engineer at birdeye.com Follow me @atishaybaid
3. 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
4. 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
7. 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
8. “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
9. “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 “
10. 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.”
11. SEO is impacted Google found that a 2% slower page resulted in 2% fewer searches, which means 2% fewer ads shown.
12. According to research, if you want user to feel like your site is faster than your competitors, you need to be 20% faster.
13. 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.
15. How do we think about performance 1)Network 2) Code Parsing 3)Layout
16. 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
17. Goals <= 200 kb (uncompressed)Initial Javascript <=100 kb (uncompressed)Initial CSS 90% code coverage
18. Webpack version 4
19. Code coverage Demo “90% of the websites ships 60% of the unused code”
20. Code Splitting • Process of splitting pieces of your code into async chunks • Creating these lazy bundles at build step.
22. listings.js Home.js
23. App.js(1.4MB) home.js(220 kb) Listing.js (150 kb) Reviews.js (126kb) Sync code splitting home~listings.js
24. Async Code Splitting Dynamically splitting the code on the basics of request. Dynamically loading the import statements
25. promise Dynamically load the code
27. Listings.js Modal.js Listings.js Async code splitting
29. Webpack 4 plugins • SplitChunksPlugin • min-css-extract-plugin • webpack-bundle-analyzer
30. What chunks to optimize
32. Webpack Code Splitting Under the Hood • How does webpack do code splitting? • How chunks are getting created? • How chunks are getting called
33. useJsonpCallback Array of modules Chunk cache
34. Jsonp fetch Adding script tags
35. Error handling and loads the file This is where chunk cache is registered
36. Code is loaded at the bottom
37. 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
39. 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
40. Thanks for listening….. Follow me @atishaybaid