A hands-on checklist to ensure your website loads fast, runs smoothly, and meets modern Core Web Vitals benchmarks across all devices.
Core Web Vitals measure three things: how fast the main content appears, how quickly the page responds to input, and how much the layout jumps. Fix them in that order. Measure field data, because lab scores flatter a fast connection.
Set the targets
- Largest Contentful Paint under 2.5 seconds at the 75th percentile.
- Interaction to Next Paint under 200 milliseconds.
- Cumulative Layout Shift under 0.1.
- Measure field data in the Chrome UX Report, not only Lighthouse.
- Measure on a mid-range Android phone on a 4G connection.
- Set a performance budget and fail the build when a page exceeds it.
Largest Contentful Paint
- Identify the LCP element on each template. It is usually the hero image or headline.
- Load the LCP image eagerly. Never lazy-load it.
- Preload the LCP image and the font it needs.
- Serve images in AVIF or WebP with correct srcset and sizes attributes.
- Remove render-blocking CSS and JavaScript from the head.
- Inline the critical CSS the first screen needs.
- Reduce server response time to under 200 milliseconds, with caching or a CDN.
Interaction to Next Paint
- Cut the JavaScript the page ships. Deleting code beats optimising it.
- Break long tasks so no single task blocks the main thread beyond 50 milliseconds.
- Defer third-party scripts, and load chat and analytics after interaction where possible.
- Avoid heavy work inside scroll and resize handlers.
- Give every interaction visible feedback within 100 milliseconds.
- Audit tag manager containers. They grow silently and nobody removes tags.
Cumulative Layout Shift
- Set explicit width and height, or an aspect ratio, on every image and video.
- Reserve space for ads, embeds and iframes before they load.
- Load fonts with font-display: swap and a metric-matched fallback.
- Never insert content above existing content after load, including banners.
- Animate transform and opacity, not properties that trigger layout.
Delivery and caching
- Serve static assets from a CDN close to your users.
- Set long cache lifetimes on fingerprinted assets.
- Enable Brotli compression on text responses.
- Enable HTTP/2 or HTTP/3.
- Preconnect to the origins the first screen depends on, and no more.
- Remove unused fonts, icon sets and libraries.
Keep it fast
- Add performance checks to continuous integration, so a regression fails the build.
- Watch field data monthly, per template, not as one site-wide average.
- Re-audit after every marketing tag is added.
- Track the size of the largest page as content editors add to it.