Page Speed Checklist

Use tools like Sharp, imagemin, or Squoosh to reduce image file sizes without visible quality loss.

Use loading='lazy' attribute on img elements to defer offscreen images.

Serve different image sizes based on viewport width using srcset and sizes attributes.

Use modern formats like WebP or AVIF for better compression than JPEG/PNG.

Prevents layout shifts by reserving space for images before they load.

A CDN serves images from servers closer to the user, reducing latency.

JPEG for photos, PNG for transparency, SVG for icons and logos.

Use CSS and web fonts instead of images containing text.

Remove unnecessary characters from code to reduce file size.

Use tools like PurifyCSS or tree shaking to eliminate dead code.

Load critical CSS inline and defer non-critical stylesheets.

Use defer or async attributes to prevent render-blocking scripts.

Inline above-the-fold CSS in the head to reduce render-blocking requests.

Avoid deeply nested selectors for faster rendering.

Fewer DOM nodes mean faster rendering and lower memory usage.

Split code into smaller chunks loaded on demand to reduce initial bundle size.

Identify and defer resources that block the first paint.

Prefer transform and opacity for animations — they are GPU-accelerated.

Compress text-based resources with Gzip or Brotli before sending.

Distribute content across global edge servers for faster delivery.

Optimize server performance, database queries, and caching.

Use Cache-Control and ETag headers to enable browser caching.

Multiplexing and header compression reduce latency.

Use rel=preload for critical resources and rel=prefetch for future navigation.

Reduce request overhead by serving static files from a separate domain.

Cache critical assets with a service worker for instant loading on repeat visits.

Improves TLS handshake performance by including the OCSP response.

Focus on LCP, FID/INP, and CLS for better user experience and SEO.

Use loading='lazy' on iframe elements to defer offscreen embeds.

Ensures text remains visible during web font load to prevent FOIT.

Reduce main thread work by breaking up long tasks and deferring JS.

Each redirect adds an extra HTTP round trip, increasing load time.

Audit and defer any resource that blocks the first paint.

Run Lighthouse audits to identify performance regressions.

Use rel=preconnect to warm up connections to critical third-party origins.

Set limits on bundle size, image weight, and request count.