dsh-skills/skills/web-performance-audit/SKILL.md

name, description

name	description
web-performance-audit	Use when analyzing web application performance, Core Web Vitals (LCP, INP, CLS), JavaScript bundle size optimization, rendering bottlenecks, and memory leaks.

Web Performance & Core Web Vitals Optimization

Purpose

Systematically audit, profile, and optimize frontend web applications for load speed, rendering responsiveness, and minimal memory footprints.

Key Audit Areas

1. Core Web Vitals

• LCP (Largest Contentful Paint < 2.5s): Optimize hero images (priority hints fetchpriority="high", modern formats WebP/AVIF), preload critical fonts, eliminate render-blocking CSS/JS.
• INP (Interaction to Next Paint < 200ms): Break long JavaScript tasks into chunks (requestIdleCallback, scheduler.yield()), debounce high-frequency input handlers, offload heavy calculations to Web Workers.
• CLS (Cumulative Layout Shift < 0.1): Set explicit width and height on images and embeds, reserve space for dynamic ads/widgets, avoid injecting DOM elements above existing content.

2. Bundle Size & Code Splitting

• Run visual bundle analyzers (rollup-plugin-visualizer / webpack-bundle-analyzer).
• Replace bloated libraries with lightweight alternatives (e.g., date-fns or native Intl over moment.js).
• Implement route-based and component-based lazy loading (React.lazy(), dynamic import()).

3. Rendering & React Performance

• Prevent unnecessary re-renders with targeted memoization (useMemo, useCallback, React.memo), but avoid speculative over-memoization.
• Virtualize large lists (tanstack-virtual / react-window) when rendering hundreds of DOM nodes.
• Minimize layout thrashing (batch DOM reads before writes).