Web Performance Fundamentals: A Frontend Developer’s Guide to Profile and Optimize React Web Apps
Author:Nadia Makarevich
Publisher finelybook 出版社: Nadia Makarevich
Publication Date 出版日期: 2025
Edition 版本: 1st
Language 语言: English
Print Length 页数: 386 pages
Book Description
Invest in Get the practical tools and techniques you need to make your React apps faster, smoother, and more efficient.
“Web Performance Fundamentals” focuses on the key aspects of improving the speed and responsiveness of web applications in the context of React development – but it’s not at all a book about React code itself. Instead, it looks at everything that surrounds a React application and affects its performance:
Metrics and tools: you’ll learn why you should measure speed at all, how to work with CrUX reports, Chrome DevTools (Performance and Lighthouse panels), and what metrics like FCP, LCP, and INP mean.
Initial load: understand the impact of network conditions, CDNs, and Cache-Control on the time it takes to render a page for the first time.
Flame graphs and CSR: learn how to record and correctly interpret color performance “monsters”, understand client-side rendering (CSR) and the transition to SPA.
Server-Side Rendering (SSR): implement your own pre-rendering strategy, evaluate its costs and benefits, learn about hydration and its impact on metrics.
Bandle Size: Explore how JavaScript file size affects loading, bandle analysis, compression, differences between HTTP/1, HTTP/2 and HTTP/3, preloading, tree-shaking, code splitting and dependency management.
Lazy Loading and Suspense: step by step you will understand the methods of “lazy” loading of modules, understand the nuances of implementation in different frameworks (Next.js, React Router, Tanstack).
Working with data: compare client-side and server-side data retrieval strategies, learn about React Server Components and streaming, and test practical examples on Next.js and Tanstack.
Interactivity: explore Long Tasks, main thread optimization, React DevTools to combat unnecessary re-renders, and the experimental React Compiler.
Step-by-step examples, visual performance studies, and immersive tooling will give you a deep understanding of how everything behind the scenes affects application speed – and teach you how to find and fix bottlenecks on your own..
Table of Contents
1. Hello and Welcome!
2. Let’s Talk About Performance
3. Intro to Initial Load Performance
4. Client-side Rendering and Flame Graphs
5. SPAs and Introducing INP
6. Intro to Rendering on the Server (SSR)
7. Bundle Size and What to Do About It
8. Intro to Lazy Loading and Suspense
9. Advanced Lazy Loading
10. Data Fetching and React Server Components
11. Interaction Performance
12. Re-renders Refresher
13. React Compiler
14. Final Thoughts.
