performance-optimization

Establish performance baselines and identify frontend and backend bottlenecks.

23|6|Updated May 9, 2026
One-click install
npx skills add https://github.com/vinvcn/addyosmani-agent-skills-zh --skill performance-optimization-vinvcn
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: performance-optimization
Source: https://github.com/vinvcn/addyosmani-agent-skills-zh/tree/main/skills/performance-optimization
Command: npx skills add https://github.com/vinvcn/addyosmani-agent-skills-zh --skill performance-optimization-vinvcn

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses application performance issues by replacing guesswork with data-driven measurement, helping you identify and resolve bottlenecks that impact user experience and system efficiency.

Core Features & Use Cases

  • Performance Profiling: Provides workflows for measuring both frontend (Core Web Vitals) and backend (API/Database) performance.
  • Bottleneck Identification: Offers a systematic approach to diagnose issues like N+1 queries, render-blocking resources, and memory leaks.
  • Use Case: If your application experiences slow page loads or high latency, use this Skill to establish a baseline, profile the main thread or database queries, and implement targeted optimizations.

Quick Start

Use the performance-optimization skill to analyze the current page load time and identify potential bottlenecks in the frontend bundle.

Frequently Asked Questions about performance-optimization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I identify performance bottlenecks in my web application?

To identify performance bottlenecks, you must replace guesswork with data-driven profiling. This Skill provides a systematic approach to measure frontend and backend systems, diagnosing issues like render-blocking resources, N+1 queries, and memory leaks.

What is the best way to reduce API latency and improve Core Web Vitals?

Reducing API latency and improving Core Web Vitals requires establishing performance baselines and profiling database queries. This Skill applies targeted optimizations to resolve slow page loads and ensure adherence to established performance budgets.

How do I establish a performance baseline before optimizing my application?

Establishing a performance baseline involves measuring current page load times and system latency before making changes. This Skill helps you profile the main thread and database queries, providing data-backed performance tuning to prevent regressions.

Can I use this approach to fix memory leaks and N+1 database queries?

Yes, this approach systematically diagnoses resource-heavy components, including memory leaks and N+1 database queries. By profiling backend performance and frontend bundles, you can implement targeted fixes based on measured bottlenecks.

When should I use performance profiling instead of guessing at optimizations?

Performance profiling should be used whenever your application experiences slow page loads or high latency to ensure data-backed tuning. Guessing at optimizations risks introducing regressions, whereas profiling establishes baselines and identifies actual bottlenecks.

Does performance optimization work for both frontend Core Web Vitals and backend API performance?

Yes, performance optimization applies to both frontend Core Web Vitals and backend API performance. This Skill provides workflows for measuring both areas, allowing you to profile main thread rendering and database queries simultaneously.