Conquering Lighthouse for your React apps

Lightning talk at BostonReact || September 28, 2018 || Wayfair HQ

This talk walks through Chrome's Lighthouse performance monitoring tool, and how it applies to React apps. We dig into a Wayfair report, explain how to tackle recs in a React world, and touch on how to reach the golden 90+ score for maximal user delight!

Transcript

1. B u t a l s o : T h e s l o w e s t p a r t o f y o u r R e a c t a p p ? I m a g e s . Conquering Lighthouse
2. Conquering Lighthouse https://fly.io 2 Who the heck are you? Hi! I’m Christina :) I’m a community manager. I used to work at RethinkDB and now I work at fly.io. (I also want to say hi to my son so when he finds this online someday he knows I was thinking about him when I was away.) Hi Mars!
4. Conquering Lighthouse 4 Help make the internet fast Speed = 1 sec or less = 10 sec or more = Fun fact: 100ms is considered instantaneous
5. Conquering Lighthouse Lighthouse (by the Google folks) is an open source tool that estimates how humans perceive app performance. 5
6. Conquering Lighthouse React is naturally gifted in ways Lighthouse respects. 6
7. Conquering Lighthouse 7 A modern React app
8. Conquering Lighthouse 8 What can we improve?
9. Conquering Lighthouse Images are surprisingly complex. But Wayfair does a great job with images! 9
10. Conquering Lighthouse Wayfair uses React components to render the carousel, various listings, images, etc… Noice. 10
11. Conquering Lighthouse 11 Lazy loading images The “standard” way: • In img tags in the markup with a base64 placeholder URL, either a very low resolution image or SVG. • Thennnn use the IntersectionObserver API to swap in the full quality URL when the image is almost in view. (Spoiler: There are superfly options, too! )
12. Conquering Lighthouse 12 Lazy loading images… in a React app • There are React components to make this easy-ish. • Lazy loading images in Wayfair: •The Carousel preloads image and video data that's not visible, so tackling lazy loading there means redoing that React component. •The below the fold nav/images/etc are loaded as React components, making lazy loading difficult again! •HTML for those areas should be in the initial page load and the images themselves should lazy load on scroll. •Fly can help: The Wayfair home page should serve individual, prerendered React components “from the Edge”
13. Conquering Lighthouse 13 We did it!
14. Conquering Lighthouse Third party JavaScript. 14
15. Conquering Lighthouse 15 Third party JavaScript + React The Wayfair site should be really fast after we turn on webp ... but it's not. This slows the time-to-interactive drastically. This is caused by bad interactions between pre- rendered markup, third party JavaScript and React.
16. Conquering Lighthouse 16 Third party JavaScript + React Digging deeper… • HTML loads • Icons load as JavaScript • Huge amount of React state JSON gets parsed (it's redundant too! 40k of html, ~112k of JSON with the same data) • px.wayfair.com is injected before the first <script> element, blocks further script exec • React app code loads, starts processing state • The React app wires up third party services, like Google's tag manager (which is slow) • Third party services block React's boot • React finally continues, loading various header/footer/responsive components It takes a while… you get the point!
17. Conquering Lighthouse 17 All React sites end up in this state at some point! But why tho? 1. Jane D. Veloper builds a nice, fast React app 2. Oh shucks! We need to pre-render for SEO and perf 3. Let's use Redux to wire that pre-rendered stuff back up! 4. Guess we need to put tracking and ad stuff in to go live… whomp whomp
18. Fly.io | The application delivery network https://fly.io Optimize image formats Fix lazy loading images Only load what you need when you need it (Load scripts/CSS intelligently) Defer all third party JS Getting to 90+
19. Conquering Lighthouse Spoiler: These can be a challenge in React, but we can help! •Serve webp •Size images appropriately for their containers •Use reasonable compression levels for jpeg Fly is open source, too! 19
20. Fly.io | The application delivery network https://fly.io One stop shop: fly.io/lighthouse/ Lighthouse v3: developers.google.com/web/tools/ lighthouse/ Want to know more?
21. Fly.io | The application delivery network https://fly.io Email: christina@fly.io Twitter: @christinakeelan CCW, feedback, pointerooskies, etc. Let’s keep in touch!
 Thank you!