Page Speed Optimization Guide

1. Why page speed matters

Page speed directly impacts user experience, conversion rates, and search rankings. Google uses Core Web Vitals as a ranking signal, and users abandon sites that take more than 3 seconds to load.

• A 1-second delay in page load reduces conversions by 7%
• 53% of mobile users leave sites that take over 3 seconds to load
• Core Web Vitals are a confirmed Google ranking factor

2. Measuring page speed

Before optimizing, establish a baseline. Use both lab data (synthetic tests) and field data (real user metrics).

• Lab tools: Lighthouse, WebPageTest, Dr Urls performance audit
• Field data: Chrome User Experience Report (CrUX), Google Search Console
• Key metrics: LCP, INP, CLS, TTFB, Total Blocking Time

3. Image optimization

Images typically account for 50%+ of page weight. Optimizing images is usually the single highest-impact improvement.

• Use modern formats: WebP (95% browser support) or AVIF (growing support)
• Serve responsive images with srcset and sizes
• Lazy load images below the fold
• Set explicit width and height to prevent layout shift
• Use a CDN with automatic format negotiation

<img
  src="hero.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 768px) 100vw, 50vw"
  width="1200"
  height="630"
  loading="lazy"
  alt="Descriptive alt text"
/>

4. CSS & JavaScript optimization

• Minify and compress all CSS and JS (Brotli > gzip)
• Remove unused CSS with tools like PurgeCSS
• Code-split JavaScript — load only what the page needs
• Defer non-critical JS with defer or async
• Inline critical CSS for above-the-fold content
• Tree-shake unused exports in your bundler

5. Server-side optimization

• Target TTFB under 200ms
• Use a CDN to serve content from edge locations
• Enable HTTP/2 or HTTP/3 for multiplexed connections
• Optimize database queries (indexes, connection pooling)
• Use server-side rendering (SSR) or static generation (SSG) where appropriate

6. Caching strategies

• Set long Cache-Control headers for static assets (1 year)
• Use content-hashed filenames for cache busting
• Implement a service worker for offline-first caching
• Use stale-while-revalidate for dynamic content

Cache-Control: public, max-age=31536000, immutable

7. Font optimization

• Use font-display: swap to prevent invisible text
• Self-host fonts instead of loading from Google Fonts (saves a DNS lookup)
• Subset fonts to include only the characters you need
• Use WOFF2 format (best compression)
• Preload critical fonts with <link rel="preload">

8. Third-party scripts

Analytics, chat widgets, and ad scripts are the most common cause of performance regressions.

• Audit all third-party scripts — remove any that are unused
• Load non-essential scripts after the page is interactive
• Use a tag manager to control loading order
• Consider using a facade pattern for heavy embeds (YouTube, chat)
• Set resource hints: dns-prefetch and preconnect for critical third-party origins