Why “green” and “fast” align
The web uses energy: servers, networks, and devices all consume power. Heavier pages mean more data transferred, more work for devices and networks, and more energy per visit Source 1 .
The same choices that make a site faster for users—less unnecessary code, smaller images, fewer requests—also reduce the energy and resources needed to load it. Green web thinking is not a separate project; it is good performance practice with a clearer “why”.
What actually reduces impact
Less data
- Images: Right-size and compress. Use modern formats (e.g. AVIF, WebP) where supported. Do not ship huge originals “just in case”.
- Scripts and styles: Remove unused CSS and JavaScript. Lazy-load below-the-fold or non-critical assets. Fewer bytes mean less transfer and less work for the device.
- Fonts: Subset fonts to the characters you use. Prefer system fonts or a small number of weights.
Fewer requests
- Combine or inline where it helps. Avoid dozens of small requests for above-the-fold content.
- Third-party scripts (analytics, chat, ads) add requests and often block rendering. Only add what you need; load it in a way that does not block the main content.
Efficient delivery
- Caching: Serve cached responses where possible so repeat visits do not re-download everything.
- Hosting: Host close to your users to reduce network distance. Consider providers that use renewable energy or publish carbon impact data if that matters to you.
For more on performance budgets and prioritisation, see fast websites: what fast means in 2026 and third-party scripts and when to say no.
Set a performance budget
A performance budget caps page weight or load time so you notice when things drift Source 3 .
- Define a limit (e.g. total page weight, or LCP under 2.5 seconds).
- Measure in CI or before release. If a change pushes you over, fix it or question the change.
- Budgets keep “just one more script” or “one more image” from adding up. They also keep energy and data use in check.
What to avoid
- Auto-playing video: Wastes data and energy for users who do not want it. Make it optional and off by default.
- Heavy trackers and widgets: Add only what you use. Prefer privacy-friendly analytics that collect less data.
- Rebuilding when you could fix: A lean fix or refresh often uses fewer resources than a full rebuild. See website rescue: when to fix vs rebuild.
Summary
Lighter sites are faster, work better on slow connections, and use less energy. Focus on less data (images, scripts, fonts), fewer requests, and efficient delivery. Use a performance budget to stop bloat; avoid auto-playing video and unnecessary third-party scripts. Green web and good performance are the same direction.
Sources
- [1] web.dev. Why does speed matter?. Back to article
- [2] web.dev. Web Vitals. Back to article
- [3] web.dev. Performance budgets 101. Back to article