Web Performance

v1.0.0

Reviews front-end code for performance — Core Web Vitals, lazy loading, image optimization, bundle size, and rendering efficiency. Performance directly impacts conversion rates and search rankings, but degradation happens gradually and is easy to miss in development.

12 rules

1 categories

Performance(12)

Optimize Images

Serve images in modern formats (WebP/AVIF), at appropriate dimensions, and with width/height attributes. Unoptimized images are typically the largest assets on a page — a single uncompressed hero image can be larger than all your JavaScript combined, destroying load times on mobile.

ImagesWeb Performanceperformance

HIGH

Automate Web Performance checks on every PR

BeforeMerge scans your pull requests against all 12 Web Performance rules automatically. Get actionable feedback before code ships.

Join Waitlist Browse All Rules

Web Performance Review

A review skill that catches front-end performance regressions before they reach users.

What it covers

Core Web Vitals — LCP optimization, CLS prevention, INP/FID reduction strategies
Bundle size — tree-shaking effectiveness, code splitting boundaries, dynamic imports for heavy modules
Image optimization — modern formats (WebP/AVIF), responsive srcset, lazy loading below the fold
Rendering — avoiding layout thrashing, requestAnimationFrame for visual updates, virtualization for long lists
Network — resource hints (preload/prefetch), HTTP caching headers, minimizing waterfall chains
JavaScript cost — main thread blocking, Web Worker offloading, avoiding synchronous heavy computation

When to use

Run this on PRs that add new dependencies, modify page layouts, or change data-fetching patterns. Essential before major launches where performance directly affects business metrics.

Web Performance

Performance(12)

Optimize Images

Automate Web Performance checks on every PR

Optimize Largest Contentful Paint (LCP)

Prevent Layout Shift (minimize CLS)

Improve INP by keeping the main thread free

Lazy-Load Below-Fold Content

Minimize Third-Party Scripts

Serve responsive, modern-format images

Defer or async non-critical scripts

Optimize font loading

Code-split and lazy-load non-critical JavaScript

Compress and cache static assets aggressively

Preconnect to critical third-party origins

Web Performance Review

What it covers

When to use