Name: Web Performance Engineering in the Age of AI (for . .) (Addy Osmani) (z-library.sk, 1lib.sk, z-lib.sk)
Author: Unknown Author

Page 1

(This page has no text content)

Page 2

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

Page 3

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/institutional 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

Page 4

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. 979-8-341-66019-9 [LSI] OceanofPDF.com

Page 5

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 technical 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 experiences. 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.

Page 6

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 thresholds 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, providing 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 analyze traces, surface long tasks, and iterate on focused performance fixes while keeping a human in the loop (Part II)

Page 7

How to effectively identify, audit, and optimize the performance impact of ubiquitous 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 practical 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 Structure of the Book The book is structured into five distinct parts, building progressively from foundational 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 fundamentals of latency, responsiveness, and stability remain nonnegotiable regardless 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 optimizing each Core Web Vital (LCP, INP, CLS)

Page 8

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 recommendation widgets. We cover methods for identifying their impact, principles for optimization (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. Part V, “The Future of Web Performance” Presents a collection of recent (2021–2025) real-world case studies. These showcase 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.

Page 9

Throughout the book, we remain largely framework agnostic when discussing fundamentals, 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 output 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 confidently 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 elements such as variable or function names, databases, data types, environment variables, statements, and keywords. TIP This element signifies a tip or suggestion.

Page 10

O’Reilly Online Learning NOTE For more than 40 years, O’Reilly Media has provided technology 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

Page 11

https://oreilly.com/about/contact.html We have a web page for this book, where we list errata and any additional information. 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 performance community. I would like to thank my colleagues on the Chrome team, including 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 Performance Tooling work over time. Thanks to Google web performance advocates like Philip Walton and Jeremy Wagner, who have authored many of the guides referenced in this book and developed the web-vitals library that makes measuring real-user performance 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 Priority 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 optimizing Core Web Vitals (including extensive guides on LCP and CLS)

Page 12

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 performance 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 performance goals and contributes in some small way to a faster, better web for everyone. OceanofPDF.com

Page 13

Part I. Performance Is User Experience OceanofPDF.com

Page 14

Chapter 1. Why Performance Is User Experience You’ve got to start with the customer experience and work backward to the technology. You can’t start with the technology, then try to figure out where to sell it. —Steve Jobs, 1997 These opening words from Steve Jobs set the stage: great technology begins with a relentless focus on the user’s experience. In the world of web development, one of the most critical yet underappreciated aspects of user experience (UX) is performance. A site that loads quickly and responds instantaneously feels effortless and satisfying to use, whereas a slow, janky site breeds frustration. As the author of this book and a longtime engineer on the Google Chrome team, I’ve spent over a decade making the web faster and more user-centric. This includes working on modern challenges like optimizing AI-generated frontends and ensuring that increasingly complex web applications—powered by AI and other cutting-edge technologies—remain fast and responsive. In this solo project, I share insights and lessons learned from my experience leading performance initiatives (like Core Web Vitals [CWVs]) and real-world UX research and audits. Using an app or site is like walking through a city: if you encounter constant stoplights, detours, or stumbling blocks, the journey becomes unpleasant. Likewise, every delay on a website—an unresponsive button, a long blank screen during load, a jerky scroll—feels like an obstacle in the user’s journey, increasing stress and the chance that they’ll give up. Users form an impression of a site within seconds, and a slow experience can erode trust in a brand. Studies have found that a significant portion of users won’t return to a site if it was painfully slow or buggy on their first visit.

Page 15

From the moment a user lands on a website or web app, performance begins to shape their opinion. Speed itself is a feature—often the very first feature users notice. Research in human-computer interaction shows that even small delays can interrupt a user’s “flow” and increase frustration. A classic rule of thumb from UX research is that there are certain thresholds in response times that determine user perception: when a system reacts within about 0.1 s, it feels instant; a 1-s response delay keeps the interaction feeling seamless; but anything more than a few seconds starts to feel sluggish and makes the user acutely aware of waiting. Beyond about 10 s, most users become frustrated and may abandon the task altogether. This book is written for intermediate to advanced software engineers who might be experts in coding or building features but who haven’t yet fully embraced performance as a cornerstone of UX. I’ll explore the science and principles that connect speed to usability, using a professional yet conversational tone. Along the way, I’ll reference both academic research and industry case studies that quantify how much performance affects user satisfaction, engagement, and business success. I’ll provide not just metrics and data but a structured narrative about why performance is essential to good UX and how to evaluate it in practice. I’ll start by examining why speed matters to users at a human level. I’ll then dive into the metrics and models that help us measure web performance from the user’s point of view, including the new Core Web Vitals. I’ll discuss designing for a range of devices and network conditions, ensuring even users on low-end hardware or spotty networks get a pleasant experience. I’ll look at frameworks like RAIL and tools like Lighthouse and Chrome User Experience Report (CrUX), which can guide our performance audits. Rather than focusing on low-level optimization techniques, I’ll initially stay at the level of principles, metrics, and outcomes—connecting the dots between a faster site and a happier user. Later sections of this book will build upon this foundation. Part II dives into the technical details of browser rendering and specific techniques for

Page 16

optimizing the Core Web Vitals. Part III takes a deep dive into the performance costs associated with JavaScript and how to manage them effectively. Part IV focuses specifically on the challenges and solutions for optimizing ubiquitous third-party scripts. Finally, Part V reinforces these concepts with real-world case studies showcasing the impact of performance engineering in various industries, as well as advice on building a performance-first culture in your organization. Throughout, you’ll find references to research (by Google and others) that back up my advice, and you’ll hear a perspective shaped by my work on Chrome’s performance team. By the end, I hope to convince you that performance is user experience and that building a fast web is key to delighting customers. The Cost of Slow: First Impressions and User Satisfaction Speed is not just a “nice-to-have”: it’s closely tied to business metrics like bounce rate, conversion, and engagement. Numerous industry studies underline this point. The BBC observed in 2018 that for every additional second their site took to load, it lost 10% of its users. This kind of loss compounds quickly; a few seconds of delay can nearly halve your audience. Even a one-second delay can cut conversion rates by a notable percentage (Walmart found that for every 1 second improvement in page load time, conversions increased by 2%, and COOK increased conversions by 7% by reducing page load time by 0.85 s). These real-world numbers make a convincing argument that performance is intrinsically linked to business success and user loyalty. Because performance is felt immediately, it heavily influences a user’s first impression. A fast, smooth experience can convey professionalism and reliability to users, whereas a slow, stuttering experience suggests neglect and can damage credibility. Users’ expectations have risen over time—they expect sites to be fast and responsive, often comparing web experiences to native apps. Patience is in short supply: one survey found many users

Page 17

wouldn’t wait beyond a few seconds for content, especially on mobile. Delays can also cause anxiety too: “Did my click register, or has the app frozen?” Internalize that speed is a pillar of user experience. Performance improvements aren’t just technical tasks for bragging rights—they directly translate into happier users, better engagement, and even positive brand perception. Adopting this mindset prepares you to “work backward to the technology” with the user’s needs (fast feedback, minimal waiting) always in focus as the guiding principle. So what exactly counts as a fast experience for users? How slow is too slow? A classic rule, originally noted by researchers like Robert B. Miller (who studied response time in 1968) and later popularized by Jakob Nielsen, holds that users perceive delays in tiers: 0.1 second or less Operations that happen in under a tenth of a second feel instantaneous. This is the threshold where interactions like clicking a button or toggling a UI element feel like there’s no delay at all. It maintains the illusion of direct manipulation: the user feels in control because the interface reacts immediately. Around one second A delay around one second is short enough that the user stays in flow, but they do start to notice the lapse. It’s the approximate threshold for a seamless continuation of thought since it feels like a natural pause. Any longer, and they might feel the interface is working on something. Two to nine seconds Delays that extend into a few seconds begin to tax the user’s patience. Research shows that user satisfaction drops as wait times increase into this range. People’s exact tolerance can vary by context (for instance, a user might wait a bit longer for a video to load than for a search result),

Page 18

but generally, progress indicators or feedback become essential in this range to reassure the user that something is happening. 10 seconds or more If they don’t see progress after about 10 s, most users will abandon what they’re doing and navigate away or try a different approach. Even if they don’t leave, their focus is broken: they might switch tasks or get distracted, severely degrading the experience. The Psychology of Waiting Let’s connect these timing thresholds to cognitive and emotional reactions. Why does a delay of more than a second feel so frustrating? You may be familiar with the idea of flow: the state of concentration where a user is fully engaged in a task. Interruptions break the user’s flow, forcing them to remember what they were doing and resist the urge to divert their attention. User tolerance can also depend on context: an urgent task like looking up emergency information might make any delay feel unbearable, whereas a casual browsing session might not test a user’s patience. Personality plays a role too. There is no single “magic number” of seconds that works for everyone. Instead, you want to be as fast as possible for as many users as possible and certainly stay below the ranges where frustration skyrockets. Performance issues aren’t just minor annoyances—they can fundamentally break the user experience by causing mistakes, double submissions, or navigation to the wrong page. One such phenomenon is “rage clicks”— when a user repeatedly clicks or taps in frustration because the interface isn’t responding. An Akamai UX study found that rage clicking tends to occur when users try to interact with a page that looks ready but isn’t actually interactive yet. In fact, many users begin interacting before the page is fully interactive; in over 30% of cases studied, pages were still not usable even after the onload event fired, and about 15% of users attempted to click between the moment the page was visually rendered and the moment it became interactive. When the site finally catches up, it might register multiple clicks or unintended actions. For instance, if a buy button

Page 19

lags, a user might tap it twice in frustration, accidentally purchasing two items. Layout instability can cause errors too: if content shifts suddenly due to slowly loading ads or images, users might click the wrong thing (like a moving link or button), derailing their intended task. If your app feels slow to respond, users will notice—and many will take action, whether that’s hammering the interface, leaving your site, or mentally checking out. This is why you need to measure and improve performance carefully. Evaluating UX Performance: Key Metrics No single metric tells the whole story of a page load. The user’s experience is a progression of moments, not one instant in time. Historically, developers have looked at metrics like onload (the moment when all resources finish loading) or simple stopwatch timings, but these often fail to capture what users actually care about. For example, a page might technically finish loading in 5 s, but if the content is visible and usable in 2 s, the user’s perceived performance is much better than the onload time would suggest. Conversely, a page might show something at 2 s but remain unresponsive until 10 s due to heavy JavaScript, yielding a bad experience. This section provides a quick high-level overview of what performance metrics are and why they’re important. Chapter 2 will dive deeper into the details of this topic, including defining various metrics that are named briefly here. Developers used to focus primarily on technical measures of performance, but these didn’t always reflect the users’ experience. I approach this by looking at four key moments in a loading experience that correspond to users’ intuitive questions as the page loads: Is it happening? Did the site respond, or is my connection dead? This is the earliest stage. The user has clicked a link or entered a URL and wants

Page 20

confirmation that the page is actually loading. A quick response from the server and some initial paint on screen (even a background color or skeleton UI) can reassure the user that progress is under way. Relevant metrics: First paint (FP) Time to first byte from the server Is it useful? How soon can the user consume or interact with the primary content? At this stage, it’s not enough that something appears; it should be something relevant, like the main text or image on the page. Relevant metrics: First contentful paint (FCP) Largest contentful paint (LCP) Is it usable? When is the page ready for user input without lag? This moment addresses interactivity. A page isn’t truly “loaded” from a UX perspective until it’s responsive to the user. Users often try to scroll or click as soon as they see content. A page that looks like it has loaded but doesn’t respond to input is a tease. This lag often happens because JavaScript is initializing event handlers or hogging the CPU. Relevant metrics: Time to interactive (TTI) Interaction to next paint (INP) Is it delightful?

Tip the Site

Web Performance Engineering in the Age of AI (for . .) (Addy Osmani) (z-library.sk, 1lib.sk, z-lib.sk)

Web Performance Engineering in the Age of AI (for . .) (Addy Osmani) (z-library.sk, 1lib.sk, z-lib.sk)

Registered users can read the full content for free

AI Reading Assistant

Passage locations

Recommended for You

Tip the Site