Website Speed Optimization: The Complete Guide to Sub-Second Loading

Why Speed Matters

Google research shows:

53% of mobile users leave pages that take over 3 seconds to load
A 1-second delay reduces conversions by 7%
Speed is a direct Google ranking factor

Measuring Your Speed

Tools

Google PageSpeed Insights — scores and recommendations
GTmetrix — waterfall analysis
WebPageTest — detailed timing breakdown

Key Metrics

LCP (Largest Contentful Paint) — target under 2.5s
FID (First Input Delay) — target under 100ms
CLS (Cumulative Layout Shift) — target under 0.1
TTFB (Time to First Byte) — target under 200ms

Image Optimization (Biggest Impact)

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

Format Selection

WebP — 25-35% smaller than JPEG (supported by all modern browsers)
AVIF — even smaller but limited browser support
SVG — for icons and logos (infinitely scalable)

Compression

Use tools like ShortPixel or Squoosh
Target 80% quality — visually identical, 60% smaller

Lazy Loading

Only load images when they enter the viewport:

html

<img src="image.webp" loading="lazy" alt="Description" width="800" height="600">

Responsive Images

Serve different sizes for different screens:

html

<picture>
  <source media="(max-width: 640px)" srcset="small.webp">
  <source media="(max-width: 1024px)" srcset="medium.webp">
  <img src="large.webp" alt="Description">
</picture>

Server-Side Optimization

Enable Caching

apache

# .htaccess
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
</IfModule>

Enable GZIP/Brotli Compression

Reduces text-based files by 60-80%:

apache

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript application/json
</IfModule>

PHP OpCache

For PHP sites, enable OpCache to cache compiled scripts:

ini

opcache.enable=1
opcache.memory_consumption=128
opcache.max_accelerated_files=10000

Frontend Optimization

Minimize Render-Blocking Resources

Move CSS to <head> with media attributes
Move JavaScript to bottom or use defer/async
Inline critical CSS

Reduce HTTP Requests

Combine CSS and JavaScript files
Use CSS sprites for icons
Eliminate unnecessary plugins/scripts

Minify Everything

Remove whitespace, comments, and unnecessary characters:

CSS: CSSNano, csso
JavaScript: Terser, UglifyJS
HTML: html-minifier

CDN (Content Delivery Network)

A CDN caches your site on servers worldwide. For Indian websites:

Cloudflare — free tier available, global network
AWS CloudFront — Mumbai edge location
BunnyCDN — affordable, fast Indian PoPs

Benefits:

50-70% reduction in load time for distant users
DDoS protection included
Automatic image optimization

Database Optimization

For dynamic sites (WordPress, etc.):

Index frequently queried columns
Clean up post revisions — DELETE FROM wp_posts WHERE post_type = 'revision'
Optimize tables monthly
Use object caching — Redis or Memcached
Limit database queries per page load

Speed Optimization Checklist

Images compressed and in WebP format
Lazy loading enabled for images
GZIP/Brotli compression enabled
Browser caching headers configured
CSS and JS minified
CDN configured
Database optimized
PHP OpCache enabled
HTTP/2 or HTTP/3 enabled
Unused plugins/scripts removed

Conclusion

Speed optimization is iterative. Start with images (biggest impact), enable caching, add a CDN, and then fine-tune. Test after each change to measure improvement. A fast website isn't just better for SEO — it's a better experience for every visitor.