Page Speed Guide
Images
- Use modern formats: WebP (90% support), AVIF (85% support) with JPEG/PNG fallback
- Compress images: lossy compression for photos (80% quality), lossless for graphics
- Serve correctly sized images: use srcset for responsive images
- Lazy-load below-the-fold images:
loading="lazy" - Set explicit width and height on all images to prevent CLS
- Preload LCP image:
<link rel="preload" as="image" href="hero.webp"> - Use CDN for image delivery
JavaScript
- Defer non-critical scripts:
<script defer src="..."> - Async for independent scripts:
<script async src="..."> - Remove unused JavaScript (tree-shaking in build tools)
- Code-split large bundles (dynamic imports)
- Minify and compress (gzip/brotli)
- Move third-party scripts to web workers where possible
- Replace heavy libraries with lightweight alternatives
CSS
- Inline critical CSS (above-the-fold styles) in <head>
- Defer non-critical CSS with media trick or loadCSS
- Minify CSS files
- Remove unused CSS (PurgeCSS for Tailwind/Bootstrap)
- Avoid @import in CSS (causes render-blocking chain)
Fonts
- Use
font-display: swaporoptional - Preload critical fonts:
<link rel="preload" as="font" crossorigin> - Use variable fonts to reduce file count
- Subset fonts to only needed characters
- Self-host fonts instead of using Google Fonts (saves DNS lookup)
Server & Caching
- Enable gzip or brotli compression (brotli preferred)
- Aim for TTFB under 200ms (server response time)
- Use HTTP/2 or HTTP/3 (multiplexing)
- Set appropriate Cache-Control headers
- Use CDN to serve static assets from edge locations
- Enable keep-alive connections
- Reduce redirect chains
Resource Hints
<!-- Preload critical resource -->
<link rel="preload" href="hero.webp" as="image">
<link rel="preload" href="main.css" as="style">
<link rel="preload" href="main.js" as="script">
<!-- Prefetch next-page resources -->
<link rel="prefetch" href="/next-page.html">
<!-- DNS prefetch for third-party domains -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//analytics.example.com">
<!-- Preconnect (DNS + TCP + TLS) -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>