Loading source
Pulling the file list, source metadata, and syntax-aware rendering for this listing.
Source from repo
Apply 62 React and Next.js performance optimization rules from Vercel Engineering
Files
Skill
Size
Entrypoint
Format
Open file
Syntax-highlighted preview of this file as included in the skill package.
rules/_sections.md
1# Sections23This file defines all sections, their ordering, impact levels, and descriptions.4The section ID (in parentheses) is the filename prefix used to group rules.56---78## 1. Eliminating Waterfalls (async)910**Impact:** CRITICAL11**Description:** Waterfalls are the #1 performance killer. Each sequential await adds full network latency. Eliminating them yields the largest gains.1213## 2. Bundle Size Optimization (bundle)1415**Impact:** CRITICAL16**Description:** Reducing initial bundle size improves Time to Interactive and Largest Contentful Paint.1718## 3. Server-Side Performance (server)1920**Impact:** HIGH21**Description:** Optimizing server-side rendering and data fetching eliminates server-side waterfalls and reduces response times.2223## 4. Client-Side Data Fetching (client)2425**Impact:** MEDIUM-HIGH26**Description:** Automatic deduplication and efficient data fetching patterns reduce redundant network requests.2728## 5. Re-render Optimization (rerender)2930**Impact:** MEDIUM31**Description:** Reducing unnecessary re-renders minimizes wasted computation and improves UI responsiveness.3233## 6. Rendering Performance (rendering)3435**Impact:** MEDIUM36**Description:** Optimizing the rendering process reduces the work the browser needs to do.3738## 7. JavaScript Performance (js)3940**Impact:** LOW-MEDIUM41**Description:** Micro-optimizations for hot paths can add up to meaningful improvements.4243## 8. Advanced Patterns (advanced)4445**Impact:** LOW46**Description:** Advanced patterns for specific cases that require careful implementation.47