27 lines
1.7 KiB
Markdown
27 lines
1.7 KiB
Markdown
---
|
|
name: web-performance-audit
|
|
description: 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).
|