## 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
```
### Responsive Images
Serve different sizes for different screens:
```html
```
## Server-Side Optimization
### Enable Caching
```apache
# .htaccess
ExpiresActive On
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
```
### Enable GZIP/Brotli Compression
Reduces text-based files by 60-80%:
```apache
AddOutputFilterByType DEFLATE text/html text/css application/javascript application/json
```
### 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 `` 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.):
1. **Index frequently queried columns**
2. **Clean up post revisions** — `DELETE FROM wp_posts WHERE post_type = 'revision'`
3. **Optimize tables** monthly
4. **Use object caching** — Redis or Memcached
5. **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.
```
### Responsive Images
Serve different sizes for different screens:
```html
```
## Server-Side Optimization
### Enable Caching
```apache
# .htaccess
ExpiresActive On
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
```
### Enable GZIP/Brotli Compression
Reduces text-based files by 60-80%:
```apache
AddOutputFilterByType DEFLATE text/html text/css application/javascript application/json
```
### 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 `` 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.):
1. **Index frequently queried columns**
2. **Clean up post revisions** — `DELETE FROM wp_posts WHERE post_type = 'revision'`
3. **Optimize tables** monthly
4. **Use object caching** — Redis or Memcached
5. **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.