Web Performance Fundamentals
Read more about the course
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.
Read Book Web Performance Fundamentals
# | Title |
---|---|
1 | web-perf-fundamentals-v1 |
Similar courses to Web Performance Fundamentals

The interactive way to master modern React - react.gg (FULL COURSE)ui.dev (ex. Tyler McGinnis)

Master Custom React Hooks with TypeScriptfullstack.io

The Official React Query Course - query.ggui.dev (ex. Tyler McGinnis)

React Data Fetching: Beyond the Basicsfullstack.io

MERN Stack Web Development with Ultimate Authenticationudemy

Building a Component Library with Storybooklearn.handlebarlabs.com

React Chrome Extension boilerplate | ShippedLuca Restagno (shipped.club)
