# Frontend Web Performance

> Optimiza el rendimiento web midiendo Core Web Vitals, analizando el bundle y aplicando mejoras como lazy loading, code splitting y optimización de imágenes y fuentes.

- Skill: `leandrobenjaminl/frontend-web-performance` (Agent Skill)
- Install (CLI): `npx skillmds@latest add leandrobenjaminl/frontend-web-performance`
- Raw SKILL.md: https://api.skillmd.com/api/skills/leandrobenjaminl/frontend-web-performance/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend, Web Performance
- Tags: Bundle Optimization, Code Splitting, Core Web Vitals, Image Optimization, Lazy Loading, Lighthouse, Performance, Service Worker
- License: MIT
- Author: LeandroBenjaminL (https://skillmd.com/u/leandrobenjaminl)
- Updated: 2026-08-22
- Page: https://skillmd.com/skills/leandrobenjaminl/frontend-web-performance

---


# Skill: frontend-web-performance

Performance web. Medí antes de optimizar.

## Trigger

- Lighthouse da scores bajos
- La app tarda en cargar
- Las interacciones se sienten lentas
- Querés reducir el bundle de JS

## Workflow LEND

1. ANALIZAR
   ├── Core Web Vitals actuales: LCP, INP, CLS (Lighthouse o PageSpeed)
   ├── Bundle: ¿cuánto pesa? ¿qué librerías ocupan más?
   ├── Imágenes: ¿están optimizadas? ¿formatos modernos?
   └── Fuentes: ¿cargás fuentes custom? ¿con display swap?

2. OFRECER (Menú del Senior)
   ├── A) Quick wins — imágenes next-gen, lazy loading, fuentes display swap
   ├── B) Bundle optimization — code splitting, tree shaking, dynamic imports
   └── C) Full audit — todo + SSR/SSG, CDN, service worker, caching

3. ELEGIR → confirmación

4. HACER
   ├── LCP: optimizar imagen hero (WebP/AVIF, preload), reducir render-blocking resources
   ├── INP: evitar long tasks (>50ms), usar debounce en inputs, lazy load de handlers pesados
   ├── CLS: dimensiones explícitas en imágenes y iframes, no inyectar contenido arriba del fold
   ├── Dynamic imports: React.lazy + Suspense para rutas y componentes pesados
   ├── Bundle analysis: vite build --analyze o webpack-bundle-analyzer
   └── Service worker: Workbox para precaching y runtime caching

5. VERIFICAR
   ├── Lighthouse > 90 en mobile y desktop
   ├── LCP < 2.5s, INP < 200ms, CLS < 0.1
   └── El bundle JS principal es < 100KB (gzipped)