Frontend performance

Basic

Details

1. Chrome dev tools performance tab
2. Main metrics
   1. Time to Interactive (TTI)
   2. First Input Delay (FID), or Input responsiveness
   3. Largest Contentful Paint (LCP)
   4. Total Blocking Time (TBT)
   5. Cumulative Layout Shift (CLS)
   6. Speed Index
   7. CPU time spent
   8. Component-Level CPU Costs
3. Chrome DevTools Lighthouse
4. The RAIL performance model

Links

1. https://developer.chrome.com/docs/devtools/evaluate-performance/
2. https://developer.chrome.com/docs/lighthouse/overview/
3. https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/
4. https://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/

Courses

1. https://frontendmasters.com/courses/web-app-performance/

Intermediate

Details

1. HTTP caching in depth
2. Caching/Proxy servers, CDN
3. Performance patterns
   1. List virtualization
   2. Prefetch/preload
   3. code-splitting/lazy loading
   4. Tree-shaking
   5. SSR
4. Browser threading model, event loop
5. Offloading CPU-heavy tasks to Web Workers
6. Browser rendering pipeline

Links

1. https://www.patterns.dev/posts/#performance-patterns
2. https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching
3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop
4. https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
5. https://www.twilio.com/blog/optimize-javascript-application-performance-web-workers
6. https://medium.com/@addyosmani/start-performance-budgeting-dabde04cf6a3
7. https://developer.chrome.com/articles/renderingng-architecture/
8. https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work
9. https://developer.chrome.com/articles/renderingng/

Courses

1. https://frontendmasters.com/courses/web-app-performance/