Web Performance Engineering in the Age of AI Mastering Speed and Quality for AI-Generated Applications (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—that AI-generated code and AI-powered experiences bring to the modern web. Written by a Google Chrome engineering leader, it bridges classic performance optimization with the realities of LLM-assisted development. ## 【Book Arc】 - **Opening (~0%–9%)**: Establishes performance as user experience, showing how speed directly impacts business metrics like bounce rate, conversion, and user trust. Introduces the book's structure: metrics, optimization techniques, AI-specific concerns, third-party scripts, and case studies. - **Early (~9%–28%)**: Covers Core Web Vitals (LCP, INP, CLS) in depth, explaining what each measures, how to interpret scores, and why they matter for UX. Emphasizes the importance of considering the "tail" of users—those on slow networks or older devices—and setting performance budgets accordingly. - **Early (~28%–38%)**: Dives into measurement tools: lab tools (Lighthouse, Chrome DevTools Performance panel, WebPageTest) and field tools (CrUX, RUM, web-vitals library). Shows how to combine them for a complete picture and introduces AI-assisted debugging in DevTools. - **Middle (~38%–47%)**: Explores field monitoring in detail—CrUX data, Search Console reports, custom metrics, and span metrics. Concludes Part I by examining the hidden costs of AI-generated code, including performance pitfalls and accessibility issues. - **Middle (~47%–53%)**: Discusses how AI-generated code tends to be "correct but not optimal," with research showing most LLM optimization suggestions are useless or harmful. Explores how to review and optimize AI-written code through manual performance checks and targeted techniques. ## 【Key Takeaways】 - **Performance is business-critical, not cosmetic** (Early): Real-world data shows every second of delay costs users—BBC lost 10% of users per additional second, Walmart saw 2% conversion gains per second improved. Speed directly shapes first impressions and brand credibility. - **Core Web Vitals are the shared language of web performance** (Early): LCP (loading), INP (interaction), and CLS (stability) distill performance into measurable, user-centric metrics with clear targets. Understanding what each measures—and the UX outcome it represents—is foundational. - **The user's context defines the performance envelope** (Early): A 2MB JavaScript bundle that loads in 2.2 seconds on a modern desktop can take 12+ seconds on a midrange mobile with spotty connectivity. Design for the 90th-percentile user, not the average. - **Mobile users have limits, not infinite patience** (Early): While mobile users may tolerate 6–10 seconds before abandoning, Google's benchmarks show 53% abandon after 3 seconds. Data costs in developing countries make heavy sites practically unusable—performance is an equity issue. - **Lab tools and field data serve different purposes** (Middle): Lighthouse gives quick, reproducible insights; DevTools Performance pinpoints root causes; WebPageTest confirms real-world improvements; CrUX shows the big picture across your actual user base. Use them in combination. - **AI-generated code is "correct but not optimal"** (Middle): A 2025 study found 90% of LLM optimization suggestions either broke behavior or failed to improve performance. AI implements the first approach that meets requirements, not the fastest—manual performance review is non-negotiable. - **AI-assisted debugging is now practical** (Middle): Chrome DevTools' Performance panel includes Gemini AI that can analyze recorded profiles and answer questions like "What caused the largest layout shift?"—helping pinpoint exactly where AI-written code needs optimization. ## 【Reading Tips】 - **Skim the business-case chapters** (Opening): The BBC/Walmart/COOK statistics are compelling but familiar territory. Absorb the key numbers, then move to the technical content. - **Deep-read the Core Web Vitals chapter** (Early): This is the foundation everything else builds on. Understand LCP, INP, and CLS targets and what they measure before proceeding. - **Pay special attention to the AI-specific sections** (Middle): The discussion of LLM optimization failures and how to review AI-generated code is the book's unique contribution—most web performance books don't cover this. - **Use the tooling chapters as reference** (Early–Middle): The workflows for combining Lighthouse, DevTools, WebPageTest, and CrUX are practical. Bookmark these for when you need to diagnose a specific issue. - **Note the streaming-first AI interfaces discussion** (Opening): The sections on streaming text, progressive images, and growing-in-place lists preview a new performance paradigm for AI-powered experiences—skim now, return when building such features. ## 【Coverage Limits】 This guide covers the book's opening through the middle sections (~53%), focusing on performance fundamentals, metrics, measurement tools, and the initial discussion of AI-generated code challenges. The later parts—detailed optimization techniques, third-party script strategies, case studies, and the future of web performance with AI—are not covered in this guide. ##