Brief Answer
- Do: image optimization (WebP/AVIF, lazy loading), minification, CDN, caching, async/defer, critical CSS, gzip/Brotli, HTTP/2, prefetch/preload, Service Workers, monitoring.
- Avoid: uncompressed images, render‑blocking assets, excessive minification without source maps, loading everything at once, plugin overload, heavy animations, ignoring mobile optimization.
Full Answer
Image optimization
- Lossless compression: TinyPNG, ImageOptim.
- Modern formats: WebP/AVIF.
- Lazy loading: load on viewport entry.
Mini example:
<img src="image.webp" loading="lazy" alt="..." />
Minification and bundling
- Minify CSS/JS/HTML (CSSNano, Terser).
- Bundle wisely: consider HTTP/2; huge bundles can hurt.
CDN
- Serve static assets via CDN to reduce latency and improve caching.
Caching
- Client: set proper
Cache-Control.
- Server: Nginx/Varnish, caching layer.
Mini example:
Cache-Control: max-age=31536000, immutable
Async/defer and critical CSS
- Load scripts with
async/defer.
- Inline critical CSS in
<head>; load the rest later.
Mini examples:
<script src="/app.js" defer></script>
<link rel="preload" href="/styles.css" as="style" />
- Enable gzip/Brotli.
- Use HTTP/2 for multiplexing.
Modern techniques
- Service Workers: offline and caching.
- Prefetch/Preload: prime important resources.
Mini example:
<link rel="preconnect" href="https://cdn.example.com" />
Monitoring and analysis
- Lighthouse, PageSpeed Insights — auditing.
- Real‑time: Analytics, New Relic, RUM.
What to avoid
- Excessive minification without source maps — harder debugging.
- Large uncompressed images — slow loads, more traffic.
- Loading all assets at once — prefer lazy loading and async.
- No caching — worse repeat visits.
- Render‑blocking CSS/JS — defer non‑critical.
- Heavy animations/large scripts — especially on mobile.
- Too many plugins — bloat and security risks.
- Ignoring mobile optimization — most users are on mobile.