Performance Checklist

Use loading="lazy" or Intersection Observer for below-the-fold images.

Split bundle by route or component to reduce initial payload.

Ensure dead code elimination in production builds.

Compress responses on the server or CDN.

Use <link rel="preload"> for above-the-fold CSS, fonts, and hero images.

Use font-display: swap to prevent invisible text during font loading.

Use a CDN for static assets to reduce latency.

Enable HTTP/2+ for multiplexed connections.

Avoid layout shifts by setting explicit dimensions on images, ads, and embeds.

Ensure first contentful paint happens quickly by inlining critical CSS.

Optimize largest contentful paint element — preload, optimize image, reduce server response.

Keep interaction to next paint under 200ms by breaking up long tasks.

Extract and inline above-the-fold CSS to avoid render-blocking.

Batch DOM reads and writes. Avoid forced synchronous layout.

Use WebP or AVIF for smaller file sizes with same quality.

Serve appropriately sized images for each viewport.

Compress and resize images before deployment.

Use SVG sprites or inline SVG instead of icon fonts.

Audit bundle for unused imports and dead code.

Limit frequency of expensive event handlers (scroll, resize, input).

Use Web Workers for CPU-intensive computations.

Defer non-critical work with requestIdleCallback or requestAnimationFrame.

Set appropriate Cache-Control headers for static assets.

Cache static assets for offline and faster repeat visits.

Use <link rel="prefetch"> for likely next navigations.

Add dns-prefetch for third-party domains.

Use proper heading hierarchy, landmarks, and ARIA where needed.

All meaningful images have descriptive alt attributes.

Title, description, Open Graph, and Twitter cards are set.

Add JSON-LD schema markup for rich search results.

Responsive design works on all screen sizes.