Web Performance Engineering in the Age of AI (for . .) (Addy Osmani)（Z-Library）

# Web Performance Engineering in the Age of AI ## 【One-Line Pitch】 A practical, hands-on guide for developers and performance engineers who want to master web performance fundamentals while navigating the new challenges—and opportunities—brought by AI-generated code and AI-powered experiences. If you build for the web and care about user experience, this book gives you the measurement tools, browser internals knowledge, and optimization playbooks to make your sites fast, resilient, and accessible. ## 【Book Arc】 - **Opening (~0%–10%)**: Establishes the core thesis that performance is user experience, introducing human perception of speed and user-centric metrics like Core Web Vitals (LCP, INP, CLS). Explains why traditional metrics like onload fail to capture what users actually care about, and sets up the book's five-part structure from fundamentals to real-world case studies. - **Early (~10%–23%)**: Dives into measurement and tooling—Lighthouse for lab audits, field monitoring with RUM and the web-vitals library, and how to set performance budgets and CI alerts. Introduces a critical theme: AI-generated code has significant accessibility and UX gaps, citing a 2024 study where 84% of ChatGPT-generated websites had multiple accessibility problems. - **Early (~23%–32%)**: Explores the intersection of AI and frontend frameworks, particularly React. Shows concrete examples of AI-generated components that cause layout instability (missing image dimensions), unnecessary re-renders (no memoization), and neglected accessibility features like focus management and ARIA live regions. Emphasizes that human review and performance knowledge remain essential. - **Middle (~39%–48%)**: Provides a deep dive into browser internals—navigation and resource fetching (DNS, TCP/TLS handshakes, TTFB), HTML parsing and DOM construction, and Chrome's rendering pipeline including LayoutNG and the compositor thread. Explains why understanding these mechanics matters for diagnosing edge cases and making informed optimization decisions. - **Middle (~48%)**: Covers advanced rendering strategies like server-side rendering (SSR) and hydration, introducing resumability as an emerging approach (pioneered by Qwik) that eliminates hydration overhead by downloading code only when interactions require it. Discusses framework alternatives like Next.js, Remix, Vue, and Svelte for managing hydration costs. ## 【Key Takeaways】 - **Performance is a progression of user moments, not a single instant** (Opening): Traditional metrics like onload fail to capture perceived performance—a page might technically load in 5 seconds but feel fast if content appears in 2 seconds, or show content early but remain unresponsive until 10 seconds due to heavy JavaScript. This framing justifies the shift to user-centric metrics like Core Web Vitals. - **LCP, INP, and CLS each measure a distinct aspect of user experience** (Opening): LCP tracks when substantive content appears (target: under 2.5 seconds), INP measures responsiveness across all interactions (target: 75% under 200ms), and CLS captures layout stability. Understanding the difference between FCP (first paint) and LCP (meaningful content) is crucial for knowing what to optimize. - **Lighthouse is a quick audit tool, not a score to obsess over** (Early): Running Lighthouse before and after changes verifies improvements, but chasing a perfect 100 can lead to diminishing returns or unnatural patterns—like over-splitting CSS, which hurts real users with extra requests. Use it as a first-pass diagnostic, not a final judge. - **Field data (RUM) reveals what lab tests miss** (Early): If lab tests show LCP around 2 seconds but field data shows 3 seconds at p75, your lab conditions are likely too optimistic. Feed RUM findings back into lab testing by increasing throttling or testing on slower CPUs to reproduce real-world issues. - **AI-generated code has systematic accessibility and UX blind spots** (Early): A 2024 study found 84% of ChatGPT-generated websites had multiple accessibility violations—missing alt text, poor semantic HTML, insufficient color contrast, and missing keyboard navigation. AI also skips loading indicators, error states, and ARIA announcements that make slow loads feel intentional rather than broken. - **AI-generated React code needs human performance review** (Early): Common pitfalls include image galleries without width/height attributes (causing CLS), components that re-render unnecessarily (missing React.memo or useMemo), and modals without focus management. The AI lacks context about which parts of the UI are truly dynamic versus static—that understanding comes from you. - **Browser internals explain why optimizations work** (Middle): TCP slow start means the first few kilobytes arrive slower than later chunks, explaining why reducing critical resource size matters. LayoutNG scopes layout work to DOM subtrees rather than recalculating the whole page, but layout cost is still proportional to DOM size if you dirty everything. - **Hydration costs are real and measurable** (Middle): SSR without addressing hydration overhead can still feel slow. Measure hydration with DevTools Performance Profiler, consider frameworks with selective hydration (Next.js, Remix), or explore resumability (Qwik) where the app is instantly interactive until the first user interaction pulls in only needed code. ## 【Reading Tips】 - **Skim the opening chapters if you already know Core Web Vitals**—the metric definitions and thresholds (LCP < 2.5s, INP < 200ms, CLS < 0.1) are foundational but may be review for experienced performance engineers. Focus instead on the AI-specific implications woven throughout. - **Deep-read the AI-generated code examples in the React section**—these concrete snippets (image galleries, modals, data fetching) show exactly what to look for when reviewing AI output. The patterns generalize beyond React to any framework. - **Pay special attention to the accessibility discussion**—it's easy to dismiss as secondary, but the book makes a strong case that accessibility intersects with perceived performance and carries legal risks. The 2024 study statistics are worth remembering when advocating for human review processes. - **The browser internals section (around 39–48%) is optional for casual optimization but essential for expert-level diagnosis**—if you're debugging weird edge cases or trying to understand why certain optimizations work, this is where the book earns its keep. If you're short on time, skim the rendering pipeline and focus on the network stack discussion. - **Take away the measurement workflow as a system**—Lighthouse for quick audits, RUM for field truth, performance budgets for guardrails, and CI integration for regression prevention. This end-to-end approach is more valuable than any single optimization technique. ## 【Coverage Limits】 This guide synthesizes excerpts covering approximately the first half of the book (through ~48%). The excerpts do not cover the later parts on third-party script optimization strategies (removal, deferral, facades, offloading), the detailed per-metric optimization chapters, or the real-world case studies across industries—these are mentioned in the book's structure but not detailed in the source material. ##