What are the key takeaways from this guide?

Google reports that as page load time increases from 1 to 3 seconds, bounce probability increases 32%.. Images typically account for 50-70% of page weight.. Enable gzip or Brotli compression (70-80% transfer size reduction). Use `font-display: swap` to prevent invisible text during font loading. Lab data**: Lighthouse, WebPageTest (controlled environment).

Who is this guide for?

This guide is designed for beginner-level users and takes about 1 minutes to read.

How-To Beginner 1 min read 274 words

Page Speed Optimization: A Complete Checklist

Page speed is a confirmed Google ranking factor and directly impacts bounce rates. This checklist covers the highest-impact optimizations for faster load times.

Key Takeaways

Google reports that as page load time increases from 1 to 3 seconds, bounce probability increases 32%.
Images typically account for 50-70% of page weight.
Enable gzip or Brotli compression (70-80% transfer size reduction)
Use `font-display: swap` to prevent invisible text during font loading
Lab data**: Lighthouse, WebPageTest (controlled environment)

Why Speed Matters

Google reports that as page load time increases from 1 to 3 seconds, bounce probability increases 32%. At 5 seconds, it jumps to 90%. Speed is both a ranking factor and a conversion factor.

Image Optimization

Images typically account for 50-70% of page weight. Key optimizations:

Serve WebP or AVIF instead of JPEG/PNG
Resize to actual display dimensions (do not serve 3000px images in 600px containers)
Use loading="lazy" for below-the-fold images
Specify width and height attributes to prevent layout shifts

CSS and JavaScript

Optimization	Impact
Minify CSS/JS	10-30% size reduction
Remove unused CSS	Major (many sites ship 80%+ unused)
Defer non-critical JS	Faster initial render
Inline critical CSS	Eliminates render-blocking request

Server-Side

Enable gzip or Brotli compression (70-80% transfer size reduction)
Set Cache-Control: max-age=31536000, immutable for hashed static assets
Use a CDN for static files and images
Enable HTTP/2 or HTTP/3 for multiplexed requests

Fonts

Use font-display: swap to prevent invisible text during font loading
Subset fonts to include only needed character ranges
Preload critical fonts with
Limit to 2 font families and 3-4 weights

Measuring Performance

Lab data: Lighthouse, WebPageTest (controlled environment)
Field data: Chrome UX Report, Cloudflare Web Analytics (real users)
Core Web Vitals: LCP < 2.5s, INP < 200ms, CLS < 0.1

Priority Order

Optimize images (biggest impact, easiest fix)
Enable compression and caching
Defer/async non-critical JavaScript
Remove unused CSS
Optimize web fonts