Web Performance Optimization: How to Build Fast Websites

If your website takes longer than 3 seconds to load, you're losing half your visitors. Google also penalizes slow sites. Web performance optimization is critical for both user experience and SEO.

Why Performance Matters

• Every 1-second delay reduces conversion rate
• Google uses speed as a ranking factor
• Mobile users are impatient — they leave in 3 seconds
• Amazon: 100ms delay = 1 percent sales loss
• Slow site = low NPS and increased customer churn

Core Web Vitals

Google's 3 fundamental performance metrics:

LCP (Largest Contentful Paint)

When the largest content element becomes visible.

• Good: Under 2.5 seconds
• Needs improvement: 2.5-4 seconds
• Poor: Over 4 seconds

INP (Interaction to Next Paint)

Time from user interaction to visual response.

• Good: Under 200ms
• Needs improvement: 200-500ms
• Poor: Over 500ms

CLS (Cumulative Layout Shift)

How much the page unexpectedly moves.

• Good: Under 0.1
• Needs improvement: 0.1-0.25
• Poor: Over 0.25

Optimization Techniques

1. Image Optimization

Images typically make up 50-70 percent of page size.

• Use WebP/AVIF format (30-50 percent smaller than JPEG)
• Lazy loading — Don't load off-screen images
• Responsive images — Device-appropriate sizes
• Image CDN — Cloudinary, Imgix
• next/image — Next.js automatic optimization

2. JavaScript Optimization

• Code splitting — Per-page bundle splitting
• Tree shaking — Remove unused code
• Dynamic import — Load on demand
• Minification — Reduce size
• Async/defer — Don't block rendering

3. CSS Optimization

• Critical CSS — CSS needed for first paint
• Minification
• Remove unused CSS (PurgeCSS)
• Use CSS-in-JS carefully

4. Server Optimization

• CDN — Content Delivery Network (Cloudflare, AWS CloudFront)
• Gzip/Brotli compression
• HTTP/2 or HTTP/3
• Edge computing — Server close to user

5. Caching Strategy

• Browser cache — Cache-Control headers
• Service Worker cache — Offline support
• CDN cache — Static files
• API cache — Redis, in-memory

6. Font Optimization

• font-display: swap — Show text immediately
• Use WOFF2 format
• Load only used character sets
• Self-host (instead of Google Fonts)

Performance Measurement Tools

| Tool | Type | Price | |------|------|-------| | Lighthouse | Lab test | Free | | PageSpeed Insights | Lab + field data | Free | | WebPageTest | Detailed analysis | Free | | GTmetrix | Performance report | Freemium | | Chrome DevTools | Developer tool | Free | | Vercel Analytics | Real user data | Freemium |

Performance Budget

Set limits for performance:

| Resource | Target | |----------|--------| | Total page size | Under 1 MB | | JavaScript | Under 300 KB | | CSS | Under 100 KB | | Images | Under 200 KB each | | Fonts | Under 100 KB | | LCP | Under 2.5 seconds |

Conclusion

Web performance is the intersection of user experience and SEO. Small improvements create big differences. Measure properly, optimize continuously, and stay within your performance budget.

For web performance optimization of your site, get in touch: info@cagribilgehan.com. Check out my projects: cagribilgehan.com