Get those bottlenecks out of my front yard!

This talk is about improving the performance feeling of your React application's startup at first visit. It explains how to use react-dom's renderToString method and Webpack to give your users the most important content as fast as possible.

You can access the demo project on GitHub here:
https://github.com/dailymotion/reactjs-meetup-12-2018-demo

A pull request replays most of the changes I showed during the talk.

Transcript

1. Get those bottlenecks out of my front yard! React Paris - December 13 2018
2. The team 2
3. © 201 8 USER PRODUCT What we do here THE T E AM 3 What you see around the player
 on dailymotion.com
4. Our problem 4
5. © 201 8 Empty page Empty page Everything! What we had OUR P ROB L EM 5
6. © 201 8 1. The video 2. Info about the video 3. Recommandations What we wanted 6 OUR P ROB L EM
7. © 201 8 Pre-build the html page server-side 1. Pre-built html page Display the video with a critical script 2. Load minimal script Load the rest of the app last 3. Bring the React The idea 7 WH AT W E D ID
8. © 201 8 8
9. © 201 8 Let's review together a few of the steps we took DEMO 9 WH AT W E D ID
10. © 201 8 Pre-build the html page server-side 1. Pre-built html page Display the video with a critical script 2. Load minimal script Load the rest of the app last 3. Bring the React Takeaways 1 0 WH AT W E D ID
11. Thank you Senior Software Engineer at Dailymotion Antoine Jackson @willjcksn @github.com/william_26 User-Product Web Team Webpack and dynamic imports: bit.ly/2C1IMwh Netflix case study: bit.ly/2yQ2aur Oh and btw, we're recruiting: jobs.dailymotion.com Demo code: github.com/dailymotion/reactjs-meetup-12-2018-demo MDN docs on Performance API: mzl.la/2Ec734u