Open Skills Logo
Open Skills

performance-optimization

Optimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance regressions, when Core Web Vitals or load times need improvement, when N+1 query patterns need fixing, or when profiling reveals bottlenecks.

Author

@addyosmani

Category

Development Tools

Install

Hot:32

Download and extract to your skills directory

Copy command and send to AI Agent for auto-install:

Download and install this skill https://openskills.cc/api/download?slug=addyosmani-skills-performance-optimization&locale=en&source=copy

Performance Optimization

Skill Overview

The performance optimization skill helps developers measure before optimizing, using a systematic approach to identify and resolve genuine performance bottlenecks in the frontend, backend, and database queries, while avoiding the complexity caused by premature optimization.

Applicable Scenarios

  • Slow page load times: Use this skill to quickly determine whether the problem is caused by network requests, server response times, or client-side rendering when above-the-fold content takes too long to load, Lighthouse performance scores are low, or Core Web Vitals do not meet the required thresholds.

  • Slow API responses: Use this skill to identify database and server-side bottlenecks when one or more API endpoints take longer than expected to respond, or when issues such as N+1 queries, missing indexes, or inadequate caching strategies exist.

  • Need to establish performance monitoring: Use this skill to build a complete optimization process—from measurement to validation—when a project lacks performance monitoring or baseline data, or when performance tests need to be integrated into CI.

    • Core Features

  • Measurement-first performance diagnostic workflow: Provides a five-step optimization workflow—“measure → identify → fix → validate → safeguard”—using Lighthouse, the Web Vitals library, and APM tools to establish real performance baselines and avoid optimizing based on guesswork.

  • Guide to fixing common performance anti-patterns: Covers typical issues such as N+1 queries, unbounded data fetching, unoptimized images, unnecessary React re-renders, excessive bundle size, and missing caching, with concrete code comparisons and solutions.

  • Core Web Vitals optimization standards: Defines acceptable thresholds for metrics such as LCP (≤2.5s), INP (≤200ms), and CLS (≤0.1), helping developers turn the abstract concept of “good performance” into measurable, specific goals.

    • Frequently Asked Questions

    When should performance optimization be performed?

    Optimization should only be performed when there is evidence of a performance problem. Common triggers include performance requirements specified in the documentation, users or monitoring reports indicating slow behavior, Core Web Vitals scores falling below their thresholds, suspected regressions introduced by a recent change, or the development of features that process large amounts of data or handle high traffic. Avoid the mindset of “optimize first and ask questions later”—optimization without measurement data often increases complexity without improving the metrics that actually matter.

    How can you identify the true performance bottleneck?

    Choose a measurement starting point based on the symptoms: for slow initial loads, inspect the network waterfall (DNS, TCP, TLS, server wait time), bundle size, and render-blocking resources; for sluggish interactions, analyze long main-thread tasks (>50ms), component re-renders, and layout shifts; for slow pages after navigation, measure API response times and client-side rendering duration; for slow backend APIs, analyze database query logs, indexes, connection pools, and caching strategies. Use the Chrome DevTools Performance panel, Lighthouse, and the Web Vitals library to collect real data.

    How should the results be validated after performance optimization?

    Every performance-related change requires specific before-and-after data. Validation checks should include: whether the core Web Vitals metrics meet the “good” thresholds, whether the bundle size has not increased significantly, whether the new code contains no N+1 queries, whether the performance budget passes in CI, and whether existing tests still pass (ensuring the optimization has not broken functionality). For optimizations that affect user experience, also combine the results with real user monitoring (RUM) data to confirm that the improvement takes effect in real-world environments.