Addy Osmani is an engineering leader at Google who worked on Chrome DevTools, Lighthouse, and Core Web Vitals. He is known for writing Learning JavaScript Design Patterns and advocating for practical frontend architecture that ships less code to users. This profile collects his advice on system performance, technical leadership, and the shifting role of engineers in the age of AI.

Part 1: The Craft of Software Engineering

  1. On the development process: "First do it, then do it right, then do it better." — Source: [Goodreads]
  2. On sequence: "Before you code, think. Before you write, read. Before you speak, listen. Before you comment, reflect. Before you release, test." — Source: [Goodreads]
  3. On maintaining code: "Good code is like a love letter to the next developer who will maintain it." — Source: [Addy Osmani's Blog]
  4. On future readers: "Your code is a strategy memo to strangers who will maintain it at 2am during an outage." — Source: [Vlad Iliescu]
  5. On tooling: "Really care about the tools you use because they are what make you your best." — Source: [Goodreads]
  6. On choosing problems: "The best engineers pick the right problems to solve. Every yes is an implicit no to something else." — Source: [Addy Osmani's Blog]
  7. On skill integration: "The real value in evolving as an engineer isn't solely about amassing a heap of isolated skills but weaving them into an intricate web of abilities that's greater than the sum of its parts." — Source: [Simon Willison's Weblog]
  8. On API behavior: "With enough users, every observable behavior becomes a dependency... Compatibility is product." — Source: [Simon Willison's Weblog]
  9. On action: "A bias toward action is essential, as waiting for perfect information often results in missed opportunities and delayed learning." — Source: [Addy Osmani's Blog]
  10. On technical debt: "Cognitive debt is the hidden cost of overly complex systems that require excessive mental effort to understand before any work can be done." — Source: [Addy Osmani's Blog]

Part 2: Design Patterns & Architecture

  1. On vocabulary: "Design patterns provide a shared vocabulary that allows developers to communicate complex architectural concepts efficiently without over-explaining." — Source: [Addy.ie]
  2. On decoupling: "Modules should communicate via events rather than direct dependencies to improve maintainability and fault tolerance." — Source: [Addy Osmani's Blog]
  3. On framework agnosticism: "Using facades to shield core business logic from specific framework implementations makes an application more resilient to future changes." — Source: [Addy Osmani's Blog]
  4. On pragmatism: "Avoid over-engineering; patterns should be used strategically to solve specific, observed problems rather than applied preemptively for their own sake." — Source: [Addy Osmani's Blog]
  5. On rendering choices: "The decision between Server-Side Rendering, Static Site Generation, or Islands Architecture should be driven by the specific performance and interactive needs of the user." — Source: [Patterns.dev]
  6. On module boundaries: "A well-architected frontend system should be designed so that if an individual module fails, the rest of the application can continue to function." — Source: [Addy Osmani's Blog]
  7. On continuous architecture: "Architecture is not a one-time setup step but an ongoing process of code organization, dependency management, and refactoring as requirements shift." — Source: [Patterns.dev]
  8. On pattern overuse: "If you find yourself forcing a design pattern into a scenario where a simpler solution would work, you are likely creating maintenance debt." — Source: [Addy.ie]
  9. On modern patterns: "Modern component-based libraries have shifted the focus from structural patterns to state management and rendering patterns." — Source: [Patterns.dev]
  10. On colocation: "Keeping related files and components physically close to each other in the directory structure significantly reduces the cognitive load of navigating a large codebase." — Source: [Frontend at Scale]

Part 3: Performance Mindset

  1. On the performance journey: "Improving performance is a journey. Small changes can often lead to big gains." — Source: [Goodreads]
  2. On the fastest request: "The fastest request is the one that doesn't need to be made. Ask yourself whether an image is required to deliver a good user experience." — Source: [Leanpub]
  3. On user-centric metrics: "Optimizing for the quality of the user experience is key to the long-term success of any site on the web, regardless of your role." — Source: [Speaker Deck]
  4. On measurement: "Engaging in performance work without first profiling and measuring the actual bottlenecks is essentially just guessing." — Source: [GitHub]
  5. On JavaScript costs: "JavaScript remains your most expensive asset, not just in network transfer, but in parse, compile, and execution time on the main thread." — Source: [web.dev]
  6. On adaptive loading: "Sites should adjust their behavior based on the user's actual network and hardware constraints rather than serving a heavy, one-size-fits-all bundle." — Source: [Addy Osmani's Blog]
  7. On performance budgets: "Establishing a strict performance budget keeps teams accountable and prevents gradual regressions in loading speeds over time." — Source: [web.dev]
  8. On mobile disparities: "The performance gap between high-end desktop hardware and average mobile devices requires developers to monitor parse and compile times rigorously." — Source: [web.dev]
  9. On optimization elimination: "The absolute best optimization strategy is always eliminating assets that do not strictly contribute to a good user experience." — Source: [Leanpub]
  10. On automation: "Where possible, image optimization and performance checks should be automated as first-class citizens in your build chain." — Source: [Addy Osmani's Blog]

Part 4: Core Web Vitals & Measurement

  1. On the purpose of CWV: "Core Web Vitals provide a standardized way to quantify the experience of your site and systematically identify areas for improvement." — Source: [Speaker Deck]
  2. On field vs lab data: "A complete picture of performance requires analyzing both lab data from tools like Lighthouse and field data from the Chrome User Experience Report." — Source: [Addy Osmani's Blog]
  3. On Largest Contentful Paint (LCP): "LCP is the truest reflection of when the user perceives the page as actually being useful and loaded." — Source: [web.dev]
  4. On layout shifts: "Unexpected layout shifts degrade user trust and create friction, making visual stability a core requirement of modern web design." — Source: [web.dev]
  5. On Interaction to Next Paint (INP): "Measuring interaction readiness is crucial because users judge a site's speed not just by how fast it appears, but by how fast it responds to their taps." — Source: [web.dev]
  6. On continuous monitoring: "Core Web Vitals are not a one-off audit but a set of metrics that must be monitored continuously to prevent regressions during active development." — Source: [Smashing Magazine]
  7. On metric complexity: "Even performance enthusiasts sometimes struggle to stay entirely up to date with the intricacies of evolving web optimization standards." — Source: [AWS Developer Blog]
  8. On prioritizing fixes: "When tackling Core Web Vitals issues, prioritize the changes that yield the highest impact for the lowest engineering effort, such as proper image sizing." — Source: [SEO for Google News]
  9. On Lighthouse limits: "While Lighthouse is an excellent diagnostic tool, passing a local Lighthouse audit does not guarantee a fast experience for users on slow connections." — Source: [Addy Osmani's Blog]

Part 5: Image & Asset Optimization

  1. On page weight: "Images regularly consume more than fifty percent of the average page size, making them the most obvious target for immediate optimization." — Source: [Ivan Akulov's Blog]
  2. On modern formats: "Transitioning to modern image formats like AVIF and WebP offers significant payload reductions compared to traditional JPEGs and PNGs without sacrificing quality." — Source: [Smashing Magazine]
  3. On manual work: "If your product is not image manipulation, then don't do this yourself. Services like Cloudinary do this much more efficiently and much better than you will." — Source: [GitHub Pages]
  4. On the img element: "The humble HTML image element remains one of the most critical levers for improving Core Web Vitals if utilized with modern attributes." — Source: [Smashing Magazine]
  5. On lazy loading: "Deferring the loading of off-screen images is a fundamental technique that saves both user bandwidth and initial browser rendering time." — Source: [Smashing Magazine]
  6. On responsive images: "Serving the exact right image size for the user's viewport is essential to prevent wasting data on pixels the user will never see." — Source: [Addy Osmani's Blog]
  7. On text compression: "Ensuring that all text-based assets are properly compressed using Gzip or Brotli at the server level is a non-negotiable baseline for performance." — Source: [Dev.to]
  8. On preloading: "Strategic use of preload directives can instruct the browser to fetch critical assets early, dramatically improving the Largest Contentful Paint." — Source: [Dev.to]
  9. On caching: "Implementing aggressive caching strategies ensures that returning visitors do not have to re-download the bulk of your application's static assets." — Source: [Dev.to]

Part 6: JavaScript & Tooling

  1. On code-splitting: "Breaking JavaScript bundles down into smaller, route-specific chunks ensures users only download the code they need for the current page." — Source: [web.dev]
  2. On tree-shaking: "Dead code elimination through tree-shaking is vital for keeping third-party library footprints small in production builds." — Source: [Dev.to]
  3. On bundle analysis: "Developers should regularly inspect their bundled output to detect duplicate dependencies and unexpectedly large libraries." — Source: [Addy Osmani's Blog]
  4. On third-party scripts: "Third-party analytics and marketing scripts often derail performance budgets and must be audited and deferred ruthlessly." — Source: [web.dev]
  5. On framework overhead: "While frontend frameworks boost developer velocity, the resulting client-side overhead must be carefully managed to avoid punishing the end user." — Source: [Patterns.dev]
  6. On dynamic imports: "Utilizing dynamic imports for heavy, rarely-used components allows the initial page load to remain lean and fast." — Source: [Addy.ie]
  7. On main thread blocking: "Long-running JavaScript tasks that block the main thread directly degrade interactivity and frustrate users trying to click or scroll." — Source: [web.dev]
  8. On tooling investment: "Craftsmanship fundamentally involves choosing your tools well and investing the time to master their intricacies." — Source: [Goodreads]
  9. On build chains: "Your build pipeline should serve as an automated gatekeeper, catching performance regressions and oversized bundles before they reach production." — Source: [Addy Osmani's Blog]

Part 7: AI & The Future of Development

  1. On AI assistance: "AI coding tools can get you most of the way to a solution, but not all the way. It's deceptively convincing." — Source: [Zed Blog]
  2. On the 70% trap: "AI can rapidly produce the bulk of the code for an application, but the remaining thirty percent regarding edge cases and integration can consume as much time as it ever did." — Source: [Zed Blog]
  3. On comprehension debt: "Comprehension debt is the hidden cost to human intelligence and memory resulting from excessive reliance on AI and automation." — Source: [Medium]
  4. On shifting roles: "The role of senior engineers is shifting away from writing every line of code toward managing, verifying, and orchestrating fleets of AI agents." — Source: [YouTube]
  5. On cognitive surrender: "Engineers must be wary of cognitive surrender: blindly accepting AI output without maintaining the mental model of how the underlying system works." — Source: [Apple Podcasts]
  6. On verification bottlenecks: "As AI generates code faster than humans can read it, the primary bottleneck in software engineering is shifting from creation to code review and verification." — Source: [Apple Podcasts]
  7. On engineering rigor: "Vibe coding with AI is fast, but it cannot replace the necessity of engineering rigor, architectural planning, and testing." — Source: [YouTube]
  8. On continuous learning: "The AI-native engineering landscape requires developers to constantly update their mental models rather than relying entirely on static, previously learned syntax." — Source: [Addy Osmani's Substack]
  9. On AI governance: "Moving from babysitting individual code completions to implementing secure governance for autonomous coding agents is the next major hurdle for engineering teams." — Source: [Apple Podcasts]

Part 8: Engineering Leadership & Career

  1. On meeting preparation: "If you can't say what decision you're asking for, you're not ready for the meeting." — Source: [Addy Osmani's Blog]
  2. On API design: "Most API design is actually API retirement. Someone is scraping your API, automating your quirks, caching your bugs." — Source: [Simon Willison's Weblog]
  3. On high agency: "High agency in an engineering team means finding ways to bypass blockers and deliver value rather than waiting for ideal conditions." — Source: [Addy Osmani's Blog]
  4. On the transition to management: "Moving from a developer role to an engineering manager requires a fundamental shift in how you measure your own daily productivity." — Source: [YouTube]
  5. On the soft side of architecture: "For high-level architectural roles, soft skills like strategic communication and consensus-building are just as vital as deep technical expertise." — Source: [Frontend Architecture]
  6. On mentorship: "A critical responsibility of senior engineers is to actively lower the barriers to entry for junior developers navigating complex codebases." — Source: [Reddit]
  7. On technical interviews: "Success in technical interviews relies less on rote memorization and more on the ability to clearly communicate tradeoffs and architectural reasoning." — Source: [Addy Osmani's Blog]
  8. On conferences: "Speaking at and attending tech conferences is a powerful forcing function for clarifying your own thoughts and understanding how other teams solve similar problems." — Source: [YouTube]
  9. On resilience: "Building resilient engineering cultures means creating environments where developers feel safe acknowledging mistakes and proposing experimental solutions." — Source: [Wix Engineering]