Web Performance Engineering in the Age of AI Mastering Speed and Quality for AI-Generated Applications (Addy Osmani) (z-library.sk, 1lib.sk, z-lib.sk)

📄 File Format: PDF

💾 File Size: 13.1 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

Addy Osmani Web Performance Engineering in the Age of AI Mastering Speed and Quality for AI-Generated Applications

📄 Page 2

ISBN: 979-8-341-66019-9 US $69.99 CAN $87.99 SOF T WARE DEVELOPMENT On today’s web, performance isn’t just a nice-to-have—it’s essential. A slow or unstable experience drives users away, while a fast, reliable one builds trust and keeps them engaged. Web Performance Engineering in the Age of AI is a comprehensive, hands-on guide for developers, technical leads, and performance engineers focused on delivering high-impact, user-first web experiences. Written by Addy Osmani, director at Google Cloud AI, this book combines deep technical insight with a strong emphasis on usability and real-world effectiveness. Through case studies, modern optimization techniques, and a user-centered approach, you’ll learn how to identify bottlenecks, debug performance issues, and apply improvements that make a measurable difference. Grounded in current browser internals and performance metrics, this book prepares you to design and maintain faster, more resilient websites at scale. • Understand how users perceive speed—and why it matters • Evaluate and improve performance using key metrics • Optimize for stability, responsiveness, and load time • Identify and address the most common performance bottlenecks • Apply real-world strategies that lead to lasting results Addy Osmani is a software engineering leader at Google Cloud AI, where he helps shape developer experience across Gemini, Vertex AI, and broader AI platform tooling. Previously, he led performance, developer, and user-experience efforts for nearly 14 years on the Chrome team, driving metrics and strategy that helped make the browser faster, more resilient, and more delightful for billions of users. Web Performance Engineering in the Age of AI “Before reading this book, I was an AI cynic. Addy made me a convert. He cuts through hype, identifies AI code pitfalls, and delivers pragmatic solutions. A one-stop resource for performance measurement, monitoring, and building performance culture.” Tammy Evert Senior director, Embrace

📄 Page 3

Addy Osmani Web Performance Engineering in the Age of AI Mastering Speed and Quality for AI-Generated Applications

📄 Page 4

979-8-341-66019-9 [LSI] Web Performance Engineering in the Age of AI by Addy Osmani Copyright © 2026 Addy Osmani. All rights reserved. Published by O’Reilly Media, Inc., 141 Stony Circle, Suite 195, Santa Rosa, CA 95401. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (https://oreilly.com). For more information, contact our corporate/institu‐ tional sales department: 800-998-9938 or corporate@oreilly.com. Acquisitions Editor: Louise Corrigan Development Editor: Sarah Grey Production Editor: Elizabeth Faerm Copyeditor: nSight, Inc. Proofreader: Carol McGillivray Indexer: nSight, Inc. Cover Designer: Susan Brown Cover Illustrator: José Marzan Jr. Interior Designer: David Futato Interior Illustrator: Kate Dullea February 2026: First Edition Revision History for the First Edition 2026-02-12: First Release See https://oreilly.com/catalog/errata.csp?isbn=9798341660199 for release details. The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. Web Performance Engineering in the Age of AI, the cover image, and related trade dress are trademarks of O’Reilly Media, Inc. The views expressed in this work are those of the author and do not represent the publisher’s views. While the publisher and the author have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the author disclaim all responsibility for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work. Use of the information and instructions contained in this work is at your own risk. If any code samples or other technology this work contains or describes is subject to open source licenses or the intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights.

📄 Page 5

Table of Contents Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi Part I. Performance Is User Experience 1. Why Performance Is User Experience. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 The Cost of Slow: First Impressions and User Satisfaction 5 The Psychology of Waiting 6 Evaluating UX Performance: Key Metrics 7 Performance for All: Ensuring UX Across Devices and Network Conditions 8 Performance-First Design 10 The RAIL Model: A User-Centric Performance Framework 10 Designing for Performance from the Start 11 Example 12 2. Measuring What Matters: Essential Metrics for User-Centric Performance. . . . . . . . . . 13 Lab Testing and Field Measurements 13 The CWVs: Key Metrics 14 Largest Contentful Paint (LCP): Viewing Content Quickly 15 First Input Delay (FID) and Interaction to Next Paint (INP): Ready to React 16 Cumulative Layout Shift (CLS): Visual Stability 17 Other Important Metrics 17 Interpreting and Acting on Reports 18 Lab Tools 18 Lighthouse: Performance Auditing 19 Chrome DevTools Performance Panel: Deep Diagnostics with AI Assistance 21 iii

📄 Page 6

WebPageTest: Realistic Testing and Advanced Analysis 24 Field Tools 27 Capturing CWVs in the Field with web-vitals.js 28 Leveraging CrUX and External Data 31 RUM Beyond Web Vitals 31 Using RUM Data to Drive Improvements 32 Setting Up Performance Budgets and Alerts 33 Case Study: Continuous Monitoring in Practice 34 Conclusion 35 3. AI-Generated Code and the Performance Paradox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 AI Outputs: Correct but Not Optimal 37 The Hidden Costs of AI-Generated Code 39 Taking Responsibility for Quality and Performance 41 AI-Aided Optimization: The Future? 43 Impact on the Overall Performance Landscape 44 The Human Role in the AI Era 44 A Concluding Thought on AI and Performance 45 Part II. Optimizing Web Performance in the Age of AI 4. Optimizing AI-Generated Frontends. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 CWVs and AI-Generated Code 49 Common Performance Pitfalls in AI-Generated React Components 50 Layout Instability (Poor CLS) 50 Bloated Bundles and Slow Loading (Poor LCP) 52 Main-Thread Bottlenecks and Janky Interactions (Poor INP) 54 Neglected Accessibility and UX Feedback Loops 55 Improving an AI-Generated Component 56 Performance Profiling and the New AI-Assisted DevTools 61 Testing on Real Devices: The Ultimate Validation 64 Embracing AI’s Speed While Preserving Quality 65 5. Inside the Browser: How Pages Load and Render. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Browser Basics 67 Multiprocess Architecture and the Main Thread 68 The Rendering Pipeline 69 The Preload Scanner and Prioritizing Resources 74 Scripts and the Event Loop 75 The RAIL Model 76 Rendering Performance Bottlenecks 77 iv | Table of Contents

📄 Page 7

Advanced Browser Internals 78 Chrome’s Main-Thread Task Scheduler and Task Priorities 78 Server-Side Rendering (SSR) and Hydration 80 The Network Stack and Resource Loading 83 Putting It Together: A Timeline of an Optimized Load 86 Conclusion 90 6. Trade-Offs in Performance Optimizations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Balancing Different Performance Metrics 91 Objective Metrics Versus Subjective Perception 92 Common Trade-Offs 92 Bundle Size Versus Network Overheads 92 Frameworks Versus Vanilla JavaScript 94 Micro-Optimizations Versus Maintainability 95 Performance Budgets and Culture 96 Knowing When to Stop Optimizing 97 Conclusion 98 Part III. Optimizing JavaScript 7. The Cost of JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Understanding the Constraints 101 Device Performance: CPUs, Memory, and the Mobile Gap 101 Network Constraints: Bandwidth and (Especially) Latency 103 Browser Architecture: The Main Thread, Parsing, and Execution 104 The JavaScript Engine 105 From Interpretation to JIT Compilation: Engine Evolution 106 Background Compilation, Parsing, and GC 108 The Limits of Engine Magic 109 Backend JavaScript Performance 110 Node.js and the Event Loop 110 Backend-Specific Optimizations 111 Monitoring and Observability 113 Conclusion 113 Part IV. Managing Dependencies and Maintaining Quality 8. Introduction to Third-Party Scripts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Third-Party Code Is Everywhere 118 Why Third-Party Scripts Affect Performance 119 Table of Contents | v

📄 Page 8

Measuring Third-Party Scripts’ Performance Impact 123 Inventory and Identification: Key Metrics and Indicators 123 Special Considerations for AI-Based Third-Party Scripts 124 Lighthouse and Chrome DevTools 124 WebPageTest (WPT) 125 Principles of Third-Party Optimization 127 Remove, Reduce, Replace 127 Think in Performance Budgets 128 Shifting Left: Involving Everyone 129 The Goal: Fast and Functional 129 9. Loading Third-Party Scripts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Sequencing and Prioritizing 131 Identify Critical Scripts 132 Positioning Script Tags 132 Nonblocking Scripts: async and defer 133 Load Critical Third-Party Scripts Early (but Not Too Early) 134 Preserving Script Order 135 Establish Early Connections with Resource Hints 135 Summarizing Sequencing Best Practices 136 Lazy Loading Third-Party Content 137 Browser-Native Lazy Loading for Iframes 137 Custom Lazy Loading with IntersectionObserver 138 Trade-Offs 140 Example: Lazy Loading an Analytics Script 141 Facades and Click-to-Load Patterns 141 Implementing Click-to-Load 142 Trade-Offs 145 Conditional Loading 145 Device Detection for Performance 146 Network-Aware Loading 147 Trade-Offs 148 Conclusion 149 10. Scheduling and Optimizing Third-Party Scripts (and AI’s Role). . . . . . . . . . . . . . . . . . 151 Scheduling Third-Party Scripts 151 The requestIdleCallback API 151 After Onload or First Interaction 152 Idle Until Urgent (IUU) Pattern 153 Breaking Up Long Tasks 153 Using setTimeout as a Fallback or Simpler Option 154 Offloading and Sandboxing Third-Party Scripts 155 vi | Table of Contents

📄 Page 9

Web Workers and Partytown 155 Sandboxing in Iframes 156 Handling Third-Party Logic on the Server Side 157 Framework-Specific Optimizations: Next.js and Beyond 158 The Script Component in Next.js 158 Optimizing in Other Frameworks 161 Optimizing by Site Type 162 Handling Third-Party Scripts in SPAs Versus Multipage Applications (MPAs) 162 Tag Manager Performance Tuning 164 WordPress and Content Management System (CMS) Platforms 164 Ecommerce Sites 166 AI’s Role in Third-Party Script Optimization 168 Part V. The Future of Web Performance 11. Building a Performance Culture. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Performance as a Feature 173 Educating and Equipping the Team 174 Have a Champion Keep Performance Front of Mind 175 Integrating Performance into Your CI/CD Pipeline and Workflow 176 Leveraging AI for Performance Culture 177 Conclusion 178 12. Web Performance Case Studies and Success Stories. . . . . . . . . . . . . . . . . . . . . . . . . . . 179 Ecommerce and Retail Performance Wins 182 Rakuten 24: A/B Testing for CWV ROI 182 Vodafone: Faster Landing Page, Higher Sales 183 Shopify’s Merchant Stores: Sunday Citizen 184 Shopify’s Merchant Stores: Carpe 184 Ray-Ban: Prerendering 185 News and Media: Boosting Engagement with Speed 186 The Telegraph Media Group 186 The Economic Times: Passing CWV at Scale 187 Yahoo! Japan News: Correlating CLS Fixes to Engagement 189 Travel and Hospitality: Speeding Up Booking Experiences 191 redBus: Improving INP for Better Sales 192 Bookaway: Serving a Global Audience with Static Content 193 Finance and Fintech: Building Trust with Speed 194 Financer.com: Speeding Up WordPress for Conversions and SEO 195 AI and Performance: Emerging Success Stories 196 Table of Contents | vii

📄 Page 10

Vercel: AI-Powered Image Optimization at Scale 196 Cloudflare: Machine Learning for Performance Prediction 197 Google Chrome: AI-Assisted Speculation Rules 198 AI Coding Assistants: A Performance Cautionary Tale 199 Shopify: AI for Merchant Store Optimization 200 Key Takeaways 201 Conclusion 203 13. The Future of Web Performance with AI. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 The AI Revolution in Web Development 205 Practical Strategies for the AI Era 206 Streaming-First AI Interfaces and User Experience: A New Performance Paradigm 207 Streaming Text 209 Metrics 209 Performance Budgets 210 Rendering Tactics 210 Transport Layer Choices 211 Perceived Speed Patterns 212 Streaming UI Components 213 Streaming UI Metrics 213 Rendering Tactics for Streaming Components 214 Failure Modes to Watch 215 Streaming Content and Media 215 Lists and Feeds That Grow in Place 215 Audio and Video Generation or Text to Speech (TTS) 216 Images That Arrive Progressively 216 Scheduling and Responsiveness Under Load 217 Network and Server Pipeline Considerations 218 Remove Cold-Start Penalties 218 Implement Backpressure 218 Cache Smartly 218 Chunk Thoughtfully 219 CWV in a Streaming World 219 Observability and Debugging Streaming Systems 220 Instrument the Streaming Path with Performance Marks 220 Build a Stream Trace View 221 Alert on Stall Patterns 221 Accessibility 222 Internationalization 222 Privacy 222 Safety 223 viii | Table of Contents

📄 Page 11

Energy and Cost Awareness 223 Design Patterns to Prefer 224 Antipatterns to Avoid 225 A Practical Checklist for Production 226 Conclusion 227 Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 Table of Contents | ix

📄 Page 12

(This page has no text content)

📄 Page 13

Preface On today’s web, the difference between a fluid, delightful experience and a frustrating, abandoned one often comes down to milliseconds. Performance is not just a techni‐ cal metric; it is the bedrock of user satisfaction and business success. At the same time, AI-assisted tools have changed how we design, build, and ship those experien‐ ces. We can now generate production-ready frontends or entire apps in minutes, but their performance characteristics still live in the real constraints of browsers, devices, and networks. Web Performance Engineering in the Age of AI is a comprehensive guide for engineers and technical leaders who need to deliver fast, responsive, and resilient web experiences in this AI-accelerated era. I’m Addy Osmani, an engineering leader on Google Chrome’s web performance team, and in this book I’ve encapsulated the latest techniques, metrics, browser internals, and AI-aware practices that define modern performance work. Who Should Read This Book? This book is for frontend developers, web performance engineers, and technical decision-makers who understand the basics of building websites and are driven to create experiences users love by mastering performance optimization. Whether you already lean on tools like Cursor, GitHub Copilot, ChatGPT, Gemini or other LLM- based assistants for day-to-day coding, or are just beginning to bring AI into your workflow, the goal is to help you ship experiences that stay fast and robust regardless of how the code was written. We assume you have some familiarity with HTML, CSS, and JavaScript. From there, we dive deep into the principles and practices required to build and maintain high-performing web applications, including the new realities of AI-generated and AI-augmented code. xi

📄 Page 14

What You Will Learn This book takes a user-experience-first approach, grounding advanced optimization techniques in the fundamental principles of how users perceive and interact with the web. You will learn: • Why performance is user experience, understanding human perception thresh‐ olds and the business impact of speed (Part I) • How to measure and interpret modern performance metrics, particularly the Core Web Vitals (LCP, INP, CLS), and use them to guide optimization efforts (Parts I and II) • How browsers fetch resources, parse code, render layouts, and paint pixels, pro‐ viding the foundation needed to optimize each stage (Part II) • Specific, actionable strategies for optimizing each Core Web Vital, addressing common bottlenecks in loading, interactivity, and layout stability (Part II) • The inherent costs of JavaScript—network, parsing, compilation, and execution—and modern techniques like code splitting, lazy loading, hydration strategies, and scheduling APIs to mitigate them (Part III) • How AI-generated code changes the performance landscape: why large language model (LLM) outputs tend to be “correct but not optimal,” common pitfalls in AI- generated frontends, and concrete review and optimization techniques you can apply to keep AI-written code fast, accessible, and maintainable (Parts I and II) • How to work with AI-assisted tooling itself: using Chrome DevTools’ AI features, Lighthouse, and the Chrome DevTools Model Context Protocol (MCP) to ana‐ lyze traces, surface long tasks, and iterate on focused performance fixes while keeping a human in the loop (Part II) • How to effectively identify, audit, and optimize the performance impact of ubiq‐ uitous third-party scripts—including AI-powered widgets and chatbots—using removal, deferral, lazy loading, facades, offloading (web workers and server side), and conditional loading strategies (Part IV) • How to leverage both laboratory tools (Lighthouse, Chrome DevTools, WebPageTest) and field monitoring (RUM, web-vitals library) to diagnose issues and track improvements continuously (Parts II and IV) • How performance optimization translates into real-world success through practi‐ cal case studies across various industries (Part V), including how teams are adapting their practices as AI-generated code and AI-powered experiences become more common xii | Preface

📄 Page 15

Structure of the Book The book is structured into five distinct parts, building progressively from founda‐ tional concepts to specific challenges and real-world applications: Part I, “Performance Is User Experience” Establishes the crucial link between web performance and user satisfaction. We explore human perception of speed, introduce key user-centric metrics like Core Web Vitals, discuss designing for diverse devices and network conditions, and cover the importance of building a performance culture. This part also looks at how AI-assisted development changes engineering workflows, and why the fun‐ damentals of latency, responsiveness, and stability remain nonnegotiable regard‐ less of who—or what—typed the code. Part II, “Optimizing Web Performance in the Age of AI” Dives into the technical details. We start with how browsers work under the hood (networking, rendering pipeline, scheduling), and then dedicate chapters to opti‐ mizing each Core Web Vital (LCP, INP, CLS) with specific techniques, including advanced browser internals and essential measurement tooling. We then extend these fundamentals to AI-generated frontends and AI-assisted workflows: how to review and harden LLM-written UI code, how to use DevTools’ AI analysis and MCP-driven agents responsibly, and how to keep Core Web Vitals as the source of truth when AI is suggesting or modifying code. Part III, “Optimizing JavaScript” Focuses specifically on JavaScript, the engine of the interactive web but often a major performance bottleneck. We analyze its costs (CPU, network, memory), explore modern loading and execution strategies (code splitting, SSR/hydration, scheduling APIs), examine JS engine evolution, and discuss the trade-offs involved in optimization. This part also highlights how AI-generated JavaScript tends to amplify existing problems—larger bundles, heavier frameworks, more churn—and offers patterns for keeping that complexity under control. Part IV, “Managing Dependencies and Maintaining Quality” Tackles the pervasive challenge of external scripts, including traditional analytics and ads as well as newer AI-backed experiences like chatbots and recommenda‐ tion widgets. We cover methods for identifying their impact, principles for opti‐ mization (removal, deferral, lazy loading, facades), conditional loading strategies for low-end devices and slow networks, offloading techniques (like Web Workers and Partytown), framework-specific solutions (e.g., Next.js’s Script component), and building processes for managing them effectively across teams. Preface | xiii

📄 Page 16

Part V, “The Future of Web Performance” Presents a collection of recent (2021–2025) real-world case studies. These show‐ case how companies across different verticals (ecommerce, media, travel, finance) successfully implemented performance optimizations, improved their Core Web Vitals, and achieved significant business results—often while adopting AI tooling and grappling with AI-generated code in production. Throughout the book, we remain largely framework agnostic when discussing funda‐ mentals, but provide specific examples where relevant to illustrate concepts. Where AI is involved, the emphasis is on using it as an accelerator rather than an autopilot: you will see how to treat AI like a very fast junior developer and how to wrap its out‐ put in the same profiling, review, and testing discipline you would apply to any other codebase. By the end of this book, the goal is that you will not only know what to do to optimize web performance but also why those techniques work and how to apply them confi‐ dently in an environment where AI is writing more of the code and assisting more of the tooling. You will be prepared to evaluate and improve the performance of any web project—human-written, AI-generated, or (most realistically) a mix of both— ensuring your users enjoy the fast, seamless, and reliable experiences they deserve, all achieved through a systematic, metrics-driven approach. Conventions Used in This Book The following typographical conventions are used in this book: Italic Indicates new terms, URLs, email addresses, filenames, and file extensions. Constant width Used for program listings, as well as within paragraphs to refer to program ele‐ ments such as variable or function names, databases, data types, environment variables, statements, and keywords. This element signifies a tip or suggestion. xiv | Preface

📄 Page 17

O’Reilly Online Learning For more than 40 years, O’Reilly Media has provided technol‐ ogy and business training, knowledge, and insight to help companies succeed. Our unique network of experts and innovators share their knowledge and expertise through books, articles, and our online learning platform. O’Reilly’s online learning platform gives you on-demand access to live training courses, in-depth learning paths, interactive coding environments, and a vast collection of text and video from O’Reilly and 200+ other publishers. For more information, visit https://oreilly.com. How to Contact Us Please address comments and questions concerning this book to the publisher: O’Reilly Media, Inc. 141 Stony Circle, Suite 195 Santa Rosa, CA 95401 800-889-8969 (in the United States or Canada) 707-827-7019 (international or local) 707-829-0104 (fax) support@oreilly.com https://oreilly.com/about/contact.html We have a web page for this book, where we list errata and any additional informa‐ tion. You can access this page at https://oreil.ly/web-performance-engineering. For news and information about our books and courses, visit https://oreilly.com. Find us on LinkedIn: https://linkedin.com/company/oreilly-media. Watch us on YouTube: https://youtube.com/oreillymedia. Acknowledgments This book wouldn’t be possible without the collective knowledge of the web perfor‐ mance community. I would like to thank my colleagues on the Chrome team, includ‐ ing Annie Sullivan, who leads Chrome’s Speed Metrics team (the group behind Core Web Vitals) and has tirelessly worked to make user-centric performance metrics a cornerstone of web development. I would also like to thank Paul Irish, Elizabeth Sweeny, Victor Porof, and Tze Yi Tan, who have led much of the Chrome Perfor‐ mance Tooling work over time. Thanks to Google web performance advocates like Philip Walton and Jeremy Wagner, who have authored many of the guides referenced Preface | xv

📄 Page 18

in this book and developed the web-vitals library that makes measuring real-user per‐ formance simpler. I am grateful to performance experts outside Google as well. Yoav Weiss’s work on resource hints and priority optimizations (and his contributions to standards like Pri‐ ority Hints) have influenced the sections on loading optimizations. Thank you to Pat Meenan, the creator of WebPageTest, for pioneering real-world performance testing and providing tools that every webperf engineer uses. I also drew on insights from Tim Kadlec and Tammy Everts, who have long evangelized the business and user experience impact of performance. Barry Pollard’s research and writing on optimiz‐ ing Core Web Vitals (including extensive guides on LCP and CLS) were invaluable, as were contributions from others at web.dev and Chrome Developers. Rick Viscomi’s analyses with the HTTP Archive (and the annual Web Almanac) provided important context on how the web is improving over time. Finally, a special thanks to the developers and readers who push for better perfor‐ mance on the web. Your feedback, questions, and challenges drive the evolution of best practices. I hope this book equips you with the knowledge to tackle your perfor‐ mance goals and contributes in some small way to a faster, better web for everyone. xvi | Preface

📄 Page 19

PART I Performance Is User Experience

📄 Page 20

(This page has no text content)