Make Your (React) Website Fast - DevFest 2022

Google DevFest Nairobi 2022

Transcript

1. USIU Tony Kimathi Software Engineer, Microsoft Make Your (React) Website Fast
2. Learning Objectives 1. Why is performance important? 2. How to measure performance 3. Simple & advanced techniques you can use to optimize performance
3. Icebreaker
4. Why?
5. Google: 53% of mobile users abandon sites that take over 3 seconds to load https://www.marketingdive.com/news/google-53-of-mobile-users-abandon -sites-that-take-over-3-seconds-to-load/426070/
6. Quick Optimization Tips
7. SVGs
8. Compression • Up to 70% reduction in size • Less bandwidth • Gzip/brotli • • https://www.multiutil.com/text-to- gzip-compress/
9. Deferred Images https://web.dev/browser-level-image-lazy -loading/
10. Async scripts
11. Dynamic Imports https://www.robinwieruch.de/rea ct-router-lazy-loading/ https://blog.saeloun.com/2022/03 /24/code-splitting-in-react.html
12. Lazy Loading https://www.robinwieruch.de/rea ct-router-lazy-loading/ https://blog.saeloun.com/2022/03 /24/code-splitting-in-react.html
13. Big O: More Performant Code • https://www.freecodecamp.org/news/big-o-notation-why-it-matters- and-why-it-doesnt-1674cfa8a23c/ • https://www.linkedin.com/pulse/big-o-notation-simple-explanation-ex amples-pamela-lovett • https://www.bigocheatsheet.com/ • Space = O(n) • Time = O(n)
14. Many, many more…
15. Measuring Performance
16. Performance.now()
17. Benchmarks • https://jsbench.me/ • https://jsben.ch/
18. Google Lighthouse • https://web.dev/measure/ • https://developer.chrome.com/do cs/devtools/lighthouse/
19. WebPageTest https://www.webpagetest.org/
20. Profiling https://developer.chrome.com/docs/ devtools/evaluate-performance/
22. Thank you! :)