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)

【One-Line Pitch】 A practical, user-first guide for developers and technical leads who need to keep web experiences fast and resilient when AI tools are generating more of the code—covering metrics, browser internals, and optimization strategies that work regardless of how the code was written. 【Book Arc】 - **Opening (~0%–10%)**: Sets the premise that performance is user experience and business success, introducing the book’s dual focus—classic web performance engineering plus the new realities of AI-generated code. Establishes the target audience (frontend developers, performance engineers, technical decision-makers) and assumes basic HTML/CSS/JS knowledge. - **Early (~12%–29%)**: Maps the full curriculum: human perception thresholds, Core Web Vitals (LCP, INP, CLS), browser internals (fetching, parsing, rendering), JavaScript cost mitigation, and how AI output tends to be “correct but not optimal.” Also previews tooling like Chrome DevTools AI features, Lighthouse, and the Model Context Protocol (MCP). - **Early (~34%)**: Lays out the book’s five-part structure—foundations, metrics and browser internals, JavaScript and AI-code optimization, dependency management (including third-party scripts and chatbots), and future-facing case studies. Emphasizes treating AI as “a very fast junior developer” that needs the same profiling and review discipline as human code. - **Middle (~39%–44%)**: Grounds the work in community expertise (Chrome team, web.dev contributors, WebPageTest creator) and pivots to the psychology of speed: response-time thresholds (0.1s feels instant, ~1s keeps flow, 2–9s tests patience, 10s+ causes abandonment), the concept of flow, and why performance shapes first impressions and brand trust. - **Middle (~49%–56%)**: Connects speed to business outcomes (e.g., conversion lifts from load-time reductions) and introduces a user-question framework for metrics: “Is it happening?” (FP, TTFB), “Is it useful?” (FCP, LCP), “Is it usable?” (TTI, INP), and “Is it delightful?” (smoothness, stability). Covers the RAIL model with concrete goals (response <100ms, animation at 60fps/16ms per frame, idle-time chunking, load targets). - **Late (~61%–66%)**: Addresses real-world constraints—low-end devices, high-latency mobile networks, costly data plans, and the “tail” of users at the 90th percentile. Recommends performance budgets that account for these scenarios and stresses that mobile users may tolerate 6–10s only as a last resort, with 53% abandoning at 3s+ per Google benchmarks. 【Key Takeaways】 - **Performance is user experience, not a technical nicety** (Early): Response-time thresholds—0.1s feels instant, ~1s keeps flow, 2–9s tests patience, 10s+ triggers abandonment—should guide every optimization decision. Speed is often the first feature users notice and shapes brand perception. - **AI-generated code is “correct but not optimal”** (Early): LLM outputs tend to amplify existing problems—larger bundles, heavier frameworks, more churn. Treat AI like a fast junior developer: wrap its output in profiling, review, and testing discipline rather than trusting it as an autopilot. - **Core Web Vitals map to user questions** (Middle): Frame metrics around what users ask during load—Is it happening? (FP, TTFB), Is it useful? (FCP, LCP), Is it usable? (TTI, INP), Is it delightful? (stability). This makes metric selection intuitive and user-centered. - **The RAIL model sets concrete performance goals** (Late): Response under 100ms, animation at 60fps (16ms per frame), idle time used for background work in small chunks, and load targets of ~1s for core content. These are research-backed baselines, not arbitrary numbers. - **Design for the tail, not the average** (Late): A 90th-percentile user on a five-year-old phone with poor connectivity is a real UX failure if they wait 10s+. Set performance budgets with these scenarios in mind, and respect users in developing countries where data costs and low-end devices make heavy sites practically unusable. - **Mobile patience is a last-resort tolerance** (Late): While some research shows mobile users wait 6–10s before abandoning, Google benchmarks indicate 53% abandon at 3s+. Aim to be as fast as possible on mobile, not merely under the abandonment threshold. - **Third-party scripts need active management** (Early): AI-powered widgets and chatbots join traditional analytics and ads as performance culprits. Strategies include removal, deferral, lazy loading, facades, offloading (Web Workers, server-side), and conditional loading for low-end devices—plus framework-specific tools like Next.js’s Script component. 【Reading Tips】 - **Skim the opening chapters (0–10%)** if you already know why speed matters; the real value starts with the metric framework and browser internals in the Early section. - **Deep-read the Core Web Vitals and RAIL sections (Middle ~49%–66%)**: These give you the mental model for evaluating any page—memorize the user-question framework and RAIL goals as your default diagnostic lens. - **Pay special attention to AI-specific guidance (Early ~29%)**: The sections on why LLM output underperforms and how to review/fix AI-written code are the book’s differentiator—apply these patterns to your own AI-assisted workflow. - **Use the case studies (Late, Part V) as reference, not narrative**: Skim for business metrics and before/after Core Web Vitals numbers to build evidence for performance investments in your own organization. - **Expect framework-agnostic fundamentals with specific examples**: Don’t get stuck on any single tool—the principles (removal, deferral, lazy loading, facades) transfer across stacks, while tool-specific tips (Next.js Script, Partytown) are illustrative. 【Coverage Limits】 Excerpts cover the book’s premise, structure, and early-to-middle content on perception, metrics, and RAIL, but do not include detailed chapters on browser internals, JavaScript optimization techniques, or the full case studies from Part V. Specific code examples and step-by-step tooling workflows are not represented in this guide.