Low-Carbon Web Design

1. Lazy Load Images

Load images only when they're visible to reduce initial bandwidth:

<img src="image.jpg" loading="lazy" alt="..." />

2. Modern Image Formats

Use .webp or .avif for 50-80% smaller files:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Example image" />
</picture>

3. System Fonts

Skip web font downloads and use system fonts:

font-family: system-ui, -apple-system, sans-serif;

4. Dark Mode Support

OLED screens use 60% less energy with dark themes:

@media (prefers-color-scheme: dark) {
  body { background: #111; color: #eee; }
}

5. Reduce HTTP Requests

Bundle CSS/JS files and use CSS sprites for icons:

/* Inline critical CSS */
<style>/* critical styles */</style>
<link rel="preload" href="main.css" as="style">

6. Optimize JavaScript

Tree-shake unused code and defer non-critical scripts:

<script defer src="non-critical.js"></script>
<script type="module">/* modern JS only */</script>

7. Enable Compression

Use Gzip/Brotli compression for 70% smaller payloads:

# .htaccess
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>

8. Cache Strategically

Set proper cache headers to reduce repeat requests:

Cache-Control: public, max-age=31536000, immutable

9. Use CDN & Edge Computing

Serve content from locations closer to users:

💡 Tip: Choose CDNs powered by renewable energy like Cloudflare

10. Minimal Design

Embrace simplicity - fewer elements = less energy:

/* Less is more */
.simple { padding: 1rem; background: #f5f5f5; }

11. Efficient Animations

Use CSS transforms instead of changing layout properties:

/* Efficient */
.element { transform: translateX(100px); }
/* Avoid */
.element { left: 100px; }

12. Video Optimization

Use modern codecs and provide fallbacks:

<video preload="none" poster="thumb.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

13. Database Optimization

Optimize queries and use indexes:

-- Add indexes for frequently queried columns
CREATE INDEX idx_user_email ON users(email);

-- Use LIMIT to reduce data transfer
SELECT * FROM posts ORDER BY date DESC LIMIT 10;

14. Reduce Redirects

Each redirect adds latency and server processing:

⚡ Audit your site for unnecessary redirects with tools like GTmetrix

15. Progressive Enhancement

Build core functionality first, enhance with JavaScript:

<form action="/submit" method="POST">
  <!-- Works without JS -->
  <button type="submit">Submit</button>
</form>

16. Avoid Third-Party Scripts

Each external script adds network overhead and CPU load:

🔍 Audit: Use tools like WebPageTest to see third-party impact

17. Green Hosting

Choose providers powered by renewable energy:

🌱 Examples: GreenGeeks, Krystal, A2 Hosting, DreamHost

18. Monitor & Measure

Track your site's carbon footprint regularly:

📊 Tools: Website Carbon Calculator, EcoGrader, Lighthouse

19. Responsive Images

Never send a 2000px photo to a 400px phone screen:

<img src="photo-800.jpg"
  srcset="photo-400.jpg 400w,
          photo-800.jpg 800w,
          photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="..." />

20. Lazy-Load Iframes and Use Facades

A single video embed can pull in over 1MB before anyone presses play:

<iframe src="..." loading="lazy" title="..."></iframe>

💡 Better still: show a static thumbnail and only load the real embed on click

21. Respect Save-Data

Some visitors explicitly ask for a lighter page. Honour it:

@media (prefers-reduced-data: reduce) {
  .hero { background-image: none; }
}

22. Prefer SVG for Icons and Logos

Vector marks are usually a few hundred bytes and scale to any screen:

<svg viewBox="0 0 24 24" width="24" height="24">
  <path d="M12 2 2 22h20Z" />
</svg>

23. Subset and Preload Web Fonts

If you must use web fonts, ship only the glyphs you actually need:

<link rel="preload" href="/fonts/subset.woff2" as="font"
      type="font/woff2" crossorigin>

@font-face { font-display: swap; }

🔤 One variable font often replaces four static weights

24. Static Site Generation

Render HTML once at build time instead of on every single request:

⚡ A prerendered page costs the server almost nothing to serve

25. Service Worker Caching

Serve repeat visits from the device instead of the network:

caches.open('v1').then(c => c.addAll(['/', '/main.css']));

26. Reduce DOM Size

Every node costs memory, layout and paint work on the client:

🌳 Aim for under ~1,500 elements and shallow nesting

27. Carbon-Aware Scheduling

Run heavy batch jobs when the grid is at its greenest:

🌍 Tools: Carbon Aware SDK, Electricity Maps, WattTime

28. Delete Unused Assets and Data

"Dark data" nobody reads still sits on spinning, powered storage:

🗑️ Prune old builds, unused images, stale backups and dead logs

29. Never Autoplay Media

Autoplay burns bandwidth and battery for content nobody asked for:

<video preload="none" controls poster="thumb.jpg"></video>

30. Respect Reduced Motion

Skip animation work entirely for users who have opted out:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

🌱 Low-Carbon Web Design