The document discusses various strategies and tools for optimizing web performance, drawing from personal experiences at Facebook and other companies. It highlights the importance of specialized infrastructure, caching resources, and the use of performance testing and profiling techniques. Key technologies mentioned include React, Tracking.js, and Metal.js, with a focus on efficient algorithms and server-side rendering.

1. Optimizing Web Performance
A P E R S O N A L E X P E R I E N C E
M A Í R A B E L L O

2. Facebook

3. Facebook
• They care A LOT about performance
• They are big

4. F A C E B O O K S U M M E R I N T E R N S - 2 0 1 0

5. Facebook
• They care A LOT about performance
• They are big
• Specialized infrastructure team (built React)
• Many tools (ex.: image spriting)

6. tracking.js
L I F E R AY

8. tracking.js
• Hard core performance
• Fast algorithms
• Optimizing constants
• Arithmetic operations
• Storing images in multi
dimensional arrays
• Typed arrays (ex.: Int32Array)
• Js Perf
24 frames per
second
41 ms per
frame

9. Metal.js
L I F E R AY

10. Metal.js
• Open source components library
• Support for hybrid rendering
without running Node.js

11. Metal.js
• Open source components library
• Support for hybrid rendering
without running Node.js
• Performance tests
• Studied about browser rendering
(courses from Google)
• Chrome Profiling
• Refactors and architecture changes

12. E-commerce
V T E X

13. VTEX
• Production build
• Uglify/gzip
• Caching resources
• Automatic code splitting
• Server side rendering (with cache)
• GraphQL (with cache)

14. Engage

17. In Loco
• Caching!
• Page Speed

19. In Loco
• Caching!
• Page Speed
• Raygun

20. M A I R A . B E L L O @ I N L O C O M E D I A .C O M