Page Speed Optimization Tips

Comprehensive guide to improving your website's loading speed and Core Web Vitals scores.

Image Optimization

  • Use WebP format - 25-35% smaller than JPEG/PNG
  • Lazy load images - Add loading="lazy" attribute
  • Specify dimensions - Always set width and height
  • Use responsive images - srcset for different screen sizes
  • Compress images - Use tools like TinyPNG, Squoosh
  • Use CDN - Serve images from edge locations

CSS Optimization

  • Minify CSS - Remove whitespace and comments
  • Remove unused CSS - Use PurgeCSS or similar
  • Inline critical CSS - Above-the-fold styles in <head>
  • Defer non-critical CSS - Load async with preload
  • Avoid @import - Blocks parallel downloads
  • Use CSS containment - Isolate component rendering

JavaScript Optimization

  • Minify JavaScript - Use terser, uglify
  • Defer scripts - Use defer or async attribute
  • Code splitting - Load only what's needed
  • Tree shaking - Remove unused code
  • Avoid document.write - Blocks rendering
  • Lazy load modules - Dynamic imports

Server Optimization

  • Enable GZIP/Brotli - Compress text resources
  • Use HTTP/2 - Multiplexed connections
  • Enable caching - Set proper cache headers
  • Use CDN - Reduce latency globally
  • Preconnect - Early connection to origins
  • DNS prefetch - Resolve domains early

Font Optimization

  • Use font-display: swap - Show fallback first
  • Subset fonts - Include only needed characters
  • Preload key fonts - Critical font resources
  • Use WOFF2 - Best compression format
  • Self-host fonts - Avoid third-party delays
  • Limit font weights - Only load what you use

Core Web Vitals

  • LCP < 2.5s - Optimize largest content element
  • FID < 100ms - Minimize main thread work
  • CLS < 0.1 - Reserve space for dynamic content
  • TTFB < 800ms - Server response time
  • FCP < 1.8s - First contentful paint
  • INP < 200ms - Interaction to Next Paint

Quick Code Snippets

<img src="image.jpg" loading="lazy" width="800" height="600" alt="...">
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="hero.webp" as="image">
<link rel="preconnect" href="https://fonts.googleapis.com">
<script src="analytics.js" defer></script>
<script src="chat-widget.js" async></script>

Testing Tools

PageSpeed Insights GTmetrix WebPageTest Pingdom