performance-optimization

Identify and resolve performance bottlenecks in frontend and backend architectures.

7|Updated Apr 10, 2026
One-click install
npx skills add https://github.com/carl10086/ys-powers --skill performance-optimization-carl10086
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: performance-optimization
Source: https://github.com/carl10086/ys-powers/tree/main/skills/performance-optimization
Command: npx skills add https://github.com/carl10086/ys-powers --skill performance-optimization-carl10086

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill addresses application performance degradation by providing a structured, data-driven methodology to identify and eliminate bottlenecks in frontend rendering, backend query execution, and overall system latency.

Core Features & Use Cases

  • Evidence-Based Optimization: Enforces a measure-first approach to prevent premature optimization and ensure changes provide measurable value.
  • Comprehensive Diagnostics: Covers Core Web Vitals, N+1 query detection, bundle size management, and React re-render optimization.
  • Use Case: When a dashboard experiences slow load times, use this skill to profile the network waterfall, identify unoptimized database queries, and implement code-splitting or caching strategies to meet performance budgets.

Quick Start

Use the performance-optimization skill to analyze the current codebase and identify potential bottlenecks affecting the main landing page load time.

Frequently Asked Questions about performance-optimization

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

FAQPage Schema
How do I systematically diagnose and resolve web application performance bottlenecks?

To resolve performance bottlenecks, apply a measure-first methodology to identify issues in frontend rendering, database query execution, and overall system latency, ensuring data-driven optimizations that provide measurable value.

What is the best way to optimize Core Web Vitals and reduce latency budgets for a slow dashboard?

The best way to optimize Core Web Vitals and meet latency budgets is profiling the network waterfall, identifying unoptimized queries, and implementing code-splitting or caching strategies for data-driven performance tuning.

How do I detect and fix N+1 query problems during backend performance profiling?

Detect N+1 query problems by profiling backend query execution to identify inefficient database calls, then resolve them by applying data-driven query optimization strategies to eliminate performance degradation.

Can I use this approach to prevent performance regressions before deployment?

Yes, you can prevent performance regressions by enforcing evidence-based optimization and strict latency budgets during development, ensuring changes provide measurable value and adhere to data-driven performance tuning requirements.

Does premature optimization affect systematic performance tuning of React re-renders?

Premature optimization affects performance tuning by introducing unmeasured changes; applying an evidence-based methodology to React re-render optimization ensures diagnostics target actual bottlenecks and bundle size issues.

Why does my frontend application still experience slow load times after bundle size management?

Slow load times persist after bundle size management when unoptimized database queries or network waterfall issues remain; comprehensive diagnostics across frontend rendering and backend execution are required to eliminate all bottlenecks.