Make Your (React) Website Fast - DevFest 2022

Slide 1

Slide 1 text

USIU Tony Kimathi Software Engineer, Microsoft Make Your (React) Website Fast

Slide 2

Slide 2 text

Learning Objectives 1. Why is performance important? 2. How to measure performance 3. Simple & advanced techniques you can use to optimize performance

Slide 3

Slide 3 text

Icebreaker

Slide 4

Slide 4 text

Why?

Slide 5

Slide 5 text

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/

Slide 6

Slide 6 text

Quick Optimization Tips

Slide 7

Slide 7 text

SVGs

Slide 8

Slide 8 text

Compression ● Up to 70% reduction in size ● Less bandwidth ● Gzip/brotli ● ● https://www.multiutil.com/text-to- gzip-compress/

Slide 9

Slide 9 text

Deferred Images https://web.dev/browser-level-image-lazy -loading/

Slide 10

Slide 10 text

Async scripts

Slide 11

Slide 11 text

Dynamic Imports https://www.robinwieruch.de/rea ct-router-lazy-loading/ https://blog.saeloun.com/2022/03 /24/code-splitting-in-react.html

Slide 12

Slide 12 text

Lazy Loading https://www.robinwieruch.de/rea ct-router-lazy-loading/ https://blog.saeloun.com/2022/03 /24/code-splitting-in-react.html

Slide 13

Slide 13 text

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)

Slide 14

Slide 14 text

Many, many more…

Slide 15

Slide 15 text

Measuring Performance

Slide 16

Slide 16 text

Performance.now()

Slide 17

Slide 17 text

Benchmarks ● https://jsbench.me/ ● https://jsben.ch/

Slide 18

Slide 18 text

Google Lighthouse ● https://web.dev/measure/ ● https://developer.chrome.com/do cs/devtools/lighthouse/