Page Speed Checklist: Optimize Your Site's Core Web Vitals

Page speed directly affects search rankings, user engagement, and conversion rates. Google uses Core Web Vitals as a ranking signal, and studies consistently show that every extra second of load time increases bounce rates by 20-30%. Our interactive Page Speed Checklist walks you through every optimization category so nothing gets missed.

Why Page Speed Matters for SEO

Google’s page experience update made Core Web Vitals an official ranking factor. Sites that load faster earn better positions in search results, especially on mobile where network conditions vary. Beyond rankings, faster pages lead to longer sessions, more page views, and higher conversion rates.

Checklist Categories

Image Optimization

Images are typically the largest assets on a page and the easiest to optimize.

Use modern formats. WebP and AVIF deliver 30-50% smaller files than JPEG and PNG with comparable quality. Serve them with <picture> fallbacks for older browsers.
Set explicit dimensions. Always include width and height attributes on <img> tags to prevent layout shifts (CLS).
Lazy load below-the-fold images. Add loading="lazy" to images that are not visible on initial load. Keep hero images eager-loaded.
Use responsive images. Provide multiple sizes with srcset and sizes so browsers download only the resolution they need.
Compress aggressively. Use tools like Squoosh or Sharp to reduce file size. Most images can be compressed 60-80% without visible quality loss.

CSS and JavaScript

Render-blocking resources are the second most common cause of slow pages.

Minify CSS and JS. Remove whitespace, comments, and unused code. Build tools like Vite, esbuild, and webpack handle this automatically.
Defer non-critical JavaScript. Add defer or async to script tags that are not needed for initial render. Move analytics and third-party scripts to load after the main content.
Inline critical CSS. Extract the CSS needed for above-the-fold content and inline it in the <head>. Load the rest asynchronously.
Remove unused CSS. Audit your stylesheets with coverage tools. Frameworks like Tailwind CSS purge unused classes at build time.
Code split large bundles. Break JavaScript into smaller chunks loaded on demand. Route-based splitting is the most effective starting point.

Server and Caching

Server response time sets the floor for how fast your page can load.

Enable compression. Serve all text resources (HTML, CSS, JS, SVG, JSON) with Brotli or gzip compression. Brotli delivers 15-20% better compression than gzip.
Set cache headers. Static assets (images, fonts, JS, CSS) should have long cache lifetimes (max-age=31536000 with immutable). HTML should use shorter caching or revalidation.
Use a CDN. Serve static assets from edge locations close to your users. CDNs like Cloudflare, Fastly, and CloudFront reduce latency dramatically for global audiences.
Reduce Time to First Byte (TTFB). Aim for under 200ms. Slow TTFB often points to database queries, missing caches, or overloaded servers.
Enable HTTP/2 or HTTP/3. Modern protocols allow multiplexed requests, header compression, and faster connection setup.

Font Optimization

Custom fonts improve design but can block text rendering if not handled correctly.

Use font-display: swap. This renders text immediately with a fallback font, then swaps in the custom font when it loads. Prevents invisible text (FOIT).
Preload critical fonts. Add <link rel="preload" as="font" crossorigin> for fonts used above the fold.
Subset fonts. If you only use Latin characters, remove Cyrillic, Greek, and other unused glyphs. This can reduce font files by 70% or more.
Self-host fonts. Serving fonts from your own domain avoids extra DNS lookups and connection setup to third-party servers like Google Fonts.
Limit font variations. Each weight and style is a separate file. Use only the weights you actually need.

Core Web Vitals

The three metrics Google uses to measure real-world user experience.

Largest Contentful Paint (LCP). Measures how quickly the main content loads. Target: under 2.5 seconds. Optimize by preloading the LCP image, reducing server response time, and eliminating render-blocking resources.
Interaction to Next Paint (INP). Measures responsiveness to user input. Target: under 200ms. Optimize by breaking up long tasks, reducing main-thread JavaScript, and using requestIdleCallback for non-urgent work.
Cumulative Layout Shift (CLS). Measures visual stability. Target: under 0.1. Optimize by setting image dimensions, reserving space for ads and embeds, and avoiding dynamically injected content above the fold.

How to Use Our Page Speed Checklist

Open the checklist and review each category
Check off items you have already implemented
Focus on unchecked items as your optimization roadmap
Work through categories in order — images and server optimizations typically yield the biggest gains
Re-test with Lighthouse or PageSpeed Insights after making changes to measure improvement

Frequently Asked Questions

What is a good page speed score? Aim for 90 or above on Google PageSpeed Insights for both mobile and desktop. Scores between 50-89 need improvement, and below 50 indicates significant problems.

Which optimization has the biggest impact? Image optimization and server-side caching typically produce the largest improvements. Compressing images and enabling a CDN can cut load times in half on image-heavy pages.

How often should I check page speed? Run an audit at least monthly and after every major deployment. Performance regressions from new features and third-party scripts are common and easy to miss.

Do Core Web Vitals affect all search results? Yes. Core Web Vitals apply to all web results, both mobile and desktop. They act as a tiebreaker when content quality and relevance are similar between competing pages.

Try our free Page Speed Checklist to systematically optimize your site’s performance.