performance-optimization

Identify and fix performance bottlenecks to meet Core Web Vitals budgets.

Updated Mar 11, 2026
One-click install
npx skills add https://github.com/Avila-Tek/avila-tek-skill-pack --skill performance-optimization-avila-tek
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: performance-optimization
Source: https://github.com/Avila-Tek/avila-tek-skill-pack/tree/main/skills/dev-performance-optimization
Command: npx skills add https://github.com/Avila-Tek/avila-tek-skill-pack --skill performance-optimization-avila-tek

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Identify and fix performance bottlenecks in web and backend applications to meet performance budgets and Core Web Vitals, reducing latency and improving user satisfaction.

Core Features & Use Cases

  • Baseline measurement and profiling for frontend and backend paths using Lighthouse, Web Vitals, and runtime traces.
  • Stack-aware optimization patterns for frontend (bundle size, image optimization, code splitting) and backend (N+1 query reduction, caching, indexing).
  • Validation and guardrails: re-measurement, thresholds, CI budgets, and production monitoring to verify improvements.

Quick Start

Run a baseline performance audit on the application and apply the recommended fixes to reduce load times and improve Core Web Vitals.

Frequently Asked Questions about performance-optimization

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

FAQPage Schema
How do I identify and fix application performance bottlenecks to meet Core Web Vitals?

To fix performance bottlenecks and meet Core Web Vitals, run a baseline performance audit using Lighthouse and runtime traces, apply stack-aware optimizations for frontend and backend paths, then re-measure to validate improvements against your performance budgets.

What is the best way to reduce frontend bundle size and improve web performance?

The best way to reduce frontend bundle size and improve web performance involves applying stack-aware optimization patterns like code splitting and image optimization, guided by initial profiling results and enforced through continuous integration performance budgets.

How do you resolve backend N+1 query issues to reduce application latency?

Resolving backend N+1 query issues to reduce application latency requires backend profiling to attribute bottlenecks, applying targeted patterns like caching and database indexing, and verifying the latency reduction with reproducible automated metrics.

Can I automate performance measurement and enforce performance budgets in CI?

Yes, you can automate performance measurement and enforce performance budgets in CI by validating improvements with automated metrics and guardrails, ensuring that code changes are safely measured before and after deployment to maintain Core Web Vitals.

Why should I measure web performance before and after applying optimization patterns?

Measuring web performance before and after applying optimization patterns is required to accurately attribute bottlenecks, validate that safe code changes actually reduce latency, and verify reproducible improvements against your defined performance budgets.

Does this performance optimization approach work for both frontend and backend stacks?

Yes, this performance optimization approach works for both frontend and backend stacks by applying stack-aware patterns like bundle size reduction and N+1 query resolution, enforcing an end-to-end workflow from baseline measurement to production monitoring.