Page Speed Checklist

Identify the LCP element using DevTools and ensure it loads as fast as possible. Compress images, use modern formats (WebP/AVIF), and set explicit width/height.

Add <link rel="preload"> for the LCP image or font so the browser fetches it early without waiting for CSS or JS.

Serve images, fonts, and other assets from a CDN to reduce latency for users across different geographic locations.

Defer non-critical CSS and JS. Inline critical CSS to speed up first render and avoid blocking the LCP element.

Serve appropriately sized images for each viewport using srcset and sizes attributes to avoid downloading oversized images.

Keep Time to First Byte under 800ms. Use server-side caching, optimize database queries, and consider edge rendering.

The LCP element should load eagerly. Set loading="eager" or use fetchpriority="high" for the hero image.

Split JavaScript tasks longer than 50ms into smaller chunks using requestIdleCallback, setTimeout, or scheduler.yield().

Reduce JavaScript execution time by removing unused code, deferring non-essential scripts, and using code splitting.

Keep event handlers lightweight. Move heavy computations to web workers or defer them with requestAnimationFrame.

Keep DOM under 1,500 nodes. Large DOMs slow down style calculations, layout, and paint operations triggered by interactions.

Do not read layout properties (offsetHeight, getBoundingClientRect) immediately after writing DOM changes.

Add contain: content or contain: layout on independent sections to limit the scope of browser re-layout.

For scroll, resize, and input events, use debouncing or throttling to prevent excessive processing per frame.

Always include width and height attributes (or use CSS aspect-ratio) so the browser reserves space before the media loads.

Use min-height or aspect-ratio containers for ad slots, iframes, and dynamically injected content.

Do not dynamically insert banners, cookie notices, or notifications that push existing content down after load.

Prevent layout shifts from web fonts by using font-display: swap along with size-adjust or font fallback metrics.

Use CSS transitions for size changes instead of abrupt resizing. Animate with transform instead of width/height.

Apply content-visibility: auto on below-the-fold sections with contain-intrinsic-size to stabilize layout.

Compress HTML, CSS, and JS responses with Brotli (preferred) or gzip. Most hosting platforms support this natively.

Remove whitespace, comments, and unused code from CSS and JS bundles. Use tools like Terser and cssnano.

Set Cache-Control headers with appropriate max-age for static assets. Use immutable for hashed filenames.

Audit third-party scripts (analytics, chat widgets, etc.). Lazy-load or defer them and consider using Partytown.

Ensure your server supports HTTP/2+ for multiplexing, header compression, and faster resource delivery.

Use dns-prefetch and preconnect for third-party origins. Add <link rel="preconnect"> for critical external domains.

Use dynamic imports and tree shaking to send only the JavaScript needed for each page. Reduces initial bundle size.