The Complete Web Performance Checklist

Lazy loading the LCP image delays its download by 200-500ms. Use fetchpriority="high" instead. Fix guide

Tells the browser to prioritize downloading this image above other resources.

Without dimensions, the browser cannot reserve space, causing layout shifts (CLS) when images load.

AVIF is 50% smaller than JPEG at equivalent quality. Use the <picture> element for format fallbacks. Fix guide

Without sizes, the browser downloads images sized for the full viewport width, wasting bandwidth on smaller screens.

Preloading starts the download during HTML parsing instead of waiting for CSS/layout.

Defers downloading non-visible images until the user scrolls near them, saving initial bandwidth.

Reduces image delivery latency from 200-500ms (origin) to 10-50ms (edge node).

The browser discovers <img> elements during HTML parsing. CSS backgrounds are discovered later, after CSS is parsed.

Ensures every image is optimized without relying on individual developers. Use Sharp or similar tools.

Sites with initial bundles under 200KB are 3x more likely to have good INP scores. Fix guide

Load only the JavaScript needed for the current page. Use React.lazy, dynamic imports, or framework-specific splitting.

Analytics, chat, and tracking scripts should not block rendering. Fix guide

Charts, editors, modals, and PDF viewers should load only when the user needs them.

CommonJS (require) cannot be tree-shaken. Use import syntax and ESM-compatible packages.

Tasks over 50ms block user interactions. Yield to the main thread between chunks of work.

Visual treemaps reveal oversized dependencies and duplication opportunities.

moment.js (300KB) to dayjs (2KB), lodash to lodash-es, axios to native fetch.

Tells the bundler which files can be safely tree-shaken, enabling more aggressive dead code elimination.

Scripts in the head without defer or async block HTML parsing and rendering.

The CSS needed for above-the-fold content should be inlined to avoid an extra network round-trip.

Use <link rel="preload" as="style"> with onload for below-fold styles.

These properties are composited on the GPU. Animating width, height, or top triggers layout recalculations that cause CLS.

Typical projects ship 80-95% unused CSS. Purging reduces stylesheet size dramatically.

Removes whitespace, merges rules, and applies structural optimizations beyond basic minification.

CSS @import creates sequential request chains. Use build tools to concatenate stylesheets instead.

Avoid animating width, height, margin, padding, or top/left/right/bottom in CSS transitions.

Ensures text is visible immediately using fallback fonts instead of showing invisible text. Fix guide

Matches the fallback font dimensions to the custom font, eliminating visible layout shift during the swap.

Add <link rel="preload"> for above-the-fold font files to start the download early.

Eliminates extra DNS lookup and connection overhead to Google Fonts or other external origins.

Latin-only subsetting reduces font file size by 60-90% for fonts with large Unicode coverage.

One variable font file replaces multiple weight-specific files, reducing requests and total download size.

Apply all font swaps in a single class toggle to consolidate multiple layout shifts into one frame.

Static pages: s-maxage=3600, stale-while-revalidate=86400. Assets: max-age=31536000, immutable. Fix guide

Serves cached responses immediately while refreshing in the background. Users always get fast responses.

Missing indexes are the most common cause of slow server responses. Add indexes on frequently-queried columns.

Use eager loading (includes/joins) to fetch related data in a single query instead of one per row.

Reduces TTFB from 200-500ms (single origin) to 10-50ms (nearest edge node).

Multiplexed connections allow parallel asset loading without head-of-line blocking.

Brotli achieves 15-25% better compression than gzip for HTML, CSS, and JavaScript.

Pre-caches critical assets so repeat visits load from local cache instead of the network.

Monitor cache hit ratio and tune cache keys to minimize unnecessary origin hits.

Largest Contentful Paint measures when the main content becomes visible. Test with field data from CrUX. LCP Guide

Cumulative Layout Shift measures visual stability. Audit with DevTools Layout Shift Regions. CLS Guide

Interaction to Next Paint measures responsiveness. Test by clicking, tapping, and typing on the page. INP Guide

Time to First Byte measures server responsiveness. While not a ranking metric directly, it affects all other metrics. TTFB Guide

First Contentful Paint measures when any content first appears. Fast FCP improves perceived performance.

Lab tests do not capture real-world network variability, device diversity, or third-party script impact. CrUX field data is authoritative.

Regressions happen silently. Continuous monitoring catches issues before they affect rankings. Monitoring guide

Search engines use heading structure to understand content organization. One h1 per page.

Compelling descriptions improve click-through rates from search results.

Controls how content appears when shared on social media, improving click-through rates.

Structured data enables rich results in search engines and improves AI citation accuracy.

Helps users and search engines understand site hierarchy. Appears in search results.

Prevents duplicate content issues when pages are accessible via multiple URLs.

Ensures search engines discover and index all pages. Include lastmod dates.

Internal links distribute authority and help search engines discover content.

Required for accessibility and provides image search optimization.

Insufficient contrast makes text unreadable for users with low vision.

Users who cannot use a mouse must be able to navigate via keyboard (Tab, Enter, Escape).

Users navigating by keyboard need to see which element is currently focused.

Lets users jump past repetitive navigation to the main content.

Buttons without visible text need aria-label for screen reader users.

Content should be readable and functional across all viewport sizes without horizontal scrolling.

Small tap targets cause frustration and missed interactions on touch devices.