Web Performance Fundamentals

Metrics and Tools: You will learn why it's important to measure speed, how to work with CrUX reports, Chrome DevTools (Performance and Lighthouse panels), and understand what metrics like FCP, LCP, and INP mean.

Initial Load: You will explore the impact of network conditions, CDN, and cache management (Cache-Control) on the first paint time of a page.

Flame Graphs and CSR: You will learn how to record and correctly interpret performance "monsters," understand client-side rendering (CSR), and transition to SPA.

Server-Side Rendering (SSR): You will implement your own strategy for pre-rendering, assess its costs and benefits, and learn about hydration and its impact on metrics.

Bundle Size: You will investigate how the volume of JavaScript files affects loading, master bundle analysis, compression, differences between HTTP/1, HTTP/2, and HTTP/3, preloading, tree shaking, code splitting, and dependency management.

Lazy Loading and Suspense: You will step-by-step understand the methods of lazy loading modules, grasp the nuances of implementation in different frameworks (Next.js, React Router, Tanstack).

Data Handling: You will compare client-side and server-side data fetching strategies, get acquainted with React Server Components and streaming, and test practical examples on Next.js and Tanstack.

Interactivity: You will study Long Tasks, main thread optimization, React DevTools tools for combating unnecessary re-renders, and the experimental React Compiler.

Step-by-step examples, visual performance studies, and "diving" into tools will help you deeply understand how everything "behind the scenes" affects the application speed - and will teach you how to independently find and eliminate bottlenecks.