performance-optimization

Diagnose and fix web performance bottlenecks using Lighthouse, RUM, and profiling data.

1|Updated Jan 28, 2025
One-click install
npx skills add https://github.com/josuenavarroaguado/josuenavarroaguado.github.io --skill performance-optimization-josuenavarroaguado
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance-optimization
Source: https://github.com/josuenavarroaguado/josuenavarroaguado.github.io/tree/main/.github/skills/performance-optimization
Command: npx skills add https://github.com/josuenavarroaguado/josuenavarroaguado.github.io --skill performance-optimization-josuenavarroaguado

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a measurement-first workflow to locate, fix, and prevent performance regressions in web and backend applications so teams can reduce user-facing latency and avoid premature optimization.

Core Features & Use Cases

  • Measurement & validation: Combine synthetic tools (Lighthouse, DevTools) and RUM data to establish baselines and confirm improvements.
  • Bottleneck diagnosis: Practical guidance for frontend issues (LCP, INP, CLS, bundle size, render-blocking resources) and backend problems (N+1 queries, missing indexes, CPU/GC).
  • Fix patterns & guardrails: Actionable anti-pattern fixes (image optimization, caching, code-splitting), performance budgets, and CI enforcement to prevent regressions.
  • Use Case: Reduce LCP and bundle size for a marketing site by identifying the biggest resource, applying image and code-splitting optimizations, and validating improvements with RUM and Lighthouse.

Quick Start

Run synthetic and RUM measurements to establish a baseline, identify the primary bottleneck, implement the targeted fix, and verify improvement with before-and-after metrics.

Frequently Asked Questions about performance-optimization

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

FAQPage Schema
How do I reduce LCP and bundle size for a web application?▼

Reduce LCP and bundle size by identifying the largest render-blocking resources, applying image optimization and code-splitting, then validating improvements using Lighthouse and RUM data.

What is the best way to diagnose frontend and backend performance bottlenecks?▼

Diagnose performance bottlenecks by analyzing synthetic Lighthouse or DevTools outputs alongside RUM measurement data to isolate frontend issues like INP and backend problems like N+1 queries.

How do I prevent performance regressions in a CI pipeline?▼

Prevent performance regressions by establishing performance budgets, enforcing CI checks against synthetic and RUM baselines, and deploying code fixes to validate before-and-after metrics.

Can I use Lighthouse and DevTools to fix Core Web Vitals issues?▼

Yes, you can use Lighthouse and DevTools outputs to establish measurement baselines, diagnose Core Web Vitals issues like CLS and LCP, and confirm remediation through before-and-after analysis.

Do I need access to profiling traces to optimize database query performance?▼

Yes, you need access to profiling traces and measurement data to locate backend bottlenecks like missing indexes or CPU overhead, and deploy code fixes to optimize database query performance.