Web Performance Tips for Static Sites
Static sites already have a massive speed advantage over server-rendered apps, but there’s still room to optimize. Here are the techniques I use on this site.
1. Ship minimal JavaScript
Every kilobyte of JS the browser has to parse delays interactivity. Render components to HTML at build time by default, and only hydrate interactive parts when genuinely needed.
2. Optimize images
- Serve images in modern formats like WebP or AVIF
- Always set explicit
widthandheightattributes to prevent layout shift - Use
loading="lazy"for images below the fold
3. Use system fonts or self-hosted WOFF2
Web fonts from third-party CDNs add DNS lookups and blocking requests. Self-hosting WOFF2 files with font-display: swap gives you fast text rendering without layout jank.
4. Cache aggressively
For hashed assets (/assets/style.abc123.css), set Cache-Control: public, max-age=31536000, immutable. For HTML files, use short caches with ETag or Last-Modified revalidation.
5. Preload critical resources
Use <link rel="preload"> for your most important stylesheet or hero image to hint the browser to fetch them early.
These are simple but effective. Combined with a good static hosting setup, you can achieve sub-second page loads consistently.