Web eco-design means reducing the environmental footprint of a website or digital application while maintaining (or even improving) its performance and accessibility. At VOID, we integrate these principles into every project because performance and frugality go hand in hand.
Why Web Eco-Design is Strategic
Digital currently accounts for 4% of global CO2 emissions, and this share is expected to double by 2025. Every web page consumes energy at 3 levels:
- Network: Data transfer (images, JS, CSS, fonts...)
- Servers: Page generation, databases, CDN
- Devices: CPU/GPU to render the page (especially on mobile)
A Lean Website is One That:
- Loads fewer resources (less KB = less network energy)
- Uses less CPU (less JS = saved battery)
- Displays faster (better UX = less frustration = less bounce)
Next.js: Frugal Architecture by Default
At VOID, we use Next.js to create lightweight and performant websites. Here's why Next.js is a natural choice for eco-design:
1. Automatic Code Splitting
Unlike monolithic frameworks that load all JavaScript at once, Next.js automatically splits code into chunks:
- Each page only loads the JS it needs
- Shared components are in a separate chunk (browser cache)
- 50-70% reduction in downloaded JS compared to a classic SPA
Concrete Example: On void.ma, the homepage loads 102 KB of JS, compared to 400+ KB for a typical React CRA.
2. Server-Side Rendering (SSR) & Static Generation
Next.js allows generating pages server-side or statically:
- SSR: HTML sent directly to browser (instant FCP, less client CPU)
- SSG: Pre-generated pages served via CDN (zero server computation per request)
- ISR: Incremental regeneration (freshness + cache)
Environmental Impact: A static page consumes 10x less energy than a page generated dynamically on every request.
3. Built-in Image Optimization
Images represent on average 60% of page weight. Next.js includes next/image which:
- Automatically resizes images according to viewport (responsive)
- Converts to WebP / AVIF (formats ~50% lighter than JPEG)
- Lazy-loads by default (loading only if visible on screen)
- Generates blurred placeholders (better CLS, less layout shift)
Result: 60-80% reduction in image weight without perceived quality loss.
Eco-Frugal Framework Comparison
All frameworks are not equal in terms of eco-design. Here's a comparison based on our VOID benchmarks:
| Framework | Avg JS | SSR/SSG | Image Optim | Code Split |
|---|---|---|---|---|
| Next.js | ~100 KB | ✅ Native | ✅ next/image | ✅ Auto |
| Create React App | ~400 KB | ❌ CSR only | ❌ Manual | ⚠️ Lazy |
| Gatsby | ~150 KB | ✅ SSG | ✅ gatsby-image | ✅ Auto |
| WordPress | ~250 KB | ✅ SSR | ⚠️ Plugins | ❌ Monolith |
| Drupal (trad.) | ~200 KB | ✅ SSR | ⚠️ Manual | ❌ Monolith |
| Drupal + Next.js (Vactory) | ~100 KB | ✅ SSG/ISR | ✅ next/image | ✅ Auto |
Key Insight: Next.js and Vactory (Drupal + Next.js) offer the best eco-frugal balance: minimal JS, automatic optimization, and flexible rendering (SSG/ISR/SSR).
Eco-Design in UX Design
Eco-design isn't just about code: UX Design plays a major role in digital sobriety.
1. Inverse Dark Patterns: Guide Users Efficiently
A user who finds what they're looking for quickly consumes fewer resources:
- Clear navigation: Streamlined menu, max 7 items (Miller's law)
- Short paths: 3 clicks max to access key info
- Search first: Visible search bar (avoids exploratory navigation)
- Breadcrumbs: Immediate spatial orientation
VOID Case Study: On Attijariwafa bank, we reduced the number of pages viewed per session by 40% by optimizing navigation → less network transfers.
2. Minimalist Design and Priority Content
- Above the fold: Essential content visible without scrolling (avoids loading unnecessary assets)
- Progressive disclosure: Show details only when requested (accordions, tabs)
- System typography: Use native system fonts (0 KB of webfonts)
- Optimized colors: Black pixels consume less energy (OLED)
3. Sober Interactions
- Pure CSS animations: Avoid resource-heavy JS animations (transform + opacity only)
- Videos as fallback: Offer static image by default, playback on demand
- Infinite scroll OFF: Classic pagination (user controls what they load)
- Autoplay OFF: Respect user's bandwidth
Images: Stock Photos or Illustrations?
A strategic question for eco-design. Here's VOID's recommendation:
❌ When to Avoid Stock Images
- Purely decorative: If the image adds nothing to the message → remove it
- Redundant: If text is enough (ex: "email" icon + "email" text)
- Excessive weight: 3000x2000px HD photos to display 400x300px
✅ Leaner Alternatives
- SVG: ~2-10 KB vs. 50-200 KB for a photo (icons, logos, simple illustrations)
- CSS gradients: 0 KB, GPU rendered (backgrounds, separators)
- Data visualization: Client-side generated charts with Chart.js (lightweight JSON data)
- Aggressive lazy-loading: Load only if visible (via Intersection Observer)
✅ When to Use Optimized Images
If the image is essential (product photo, portfolio, human testimonial):
- WebP / AVIF format (50-80% lighter than JPEG)
- 85% quality compression (imperceptible to the eye)
- Responsive images with
srcset(serve 400px on mobile, not 2000px) - CDN + aggressive caching (1 year minimum)
VOID Budget: We aim for max 100 KB of images per page to stay under the 500 KB total bar (GreenIT recommendation).
VOID Eco-Design Checklist
For each project, we apply this grid:
📊 Performance
- ✅ Lighthouse score > 90 (Performance, Accessibility, SEO)
- ✅ FCP < 1.5s (First Contentful Paint)
- ✅ LCP < 2.5s (Largest Contentful Paint)
- ✅ CLS < 0.1 (Cumulative Layout Shift)
- ✅ TTI < 3.5s (Time to Interactive)
💾 Weight
- ✅ HTML + CSS + JS < 200 KB (gzipped)
- ✅ Images < 100 KB per page
- ✅ Fonts: 0 KB (system) or < 50 KB (webfont subset)
- ✅ Total page < 500 KB (ideal < 300 KB)
♻️ Architecture
- ✅ Code splitting (Next.js automatic)
- ✅ Tree-shaking (remove unused JS)
- ✅ SSG/SSR priority over CSR
- ✅ CDN + aggressive caching (stale-while-revalidate)
- ✅ HTTP/2 + Brotli compression
🎨 UX
- ✅ Navigation < 3 clicks to key info
- ✅ Visible search bar
- ✅ Autoplay disabled (video/carousel)
- ✅ Progressive disclosure (accordions, tabs)
- ✅ CSS-only animations
Business Benefits of Eco-Design
Eco-design isn't just good for the planet—it's good for business:
📈 Better Conversion
Faster sites convert better. 1 second improvement = 7% more conversions (Google study)
💰 Lower Costs
Less bandwidth, fewer servers, lower hosting costs. Static sites can handle 10x more traffic
📱 Mobile-Friendly
Lightweight sites work better on 3G/4G, reaching more users in emerging markets
🏆 Better SEO
Page speed is a ranking factor. Core Web Vitals directly impact search visibility
Tools to Measure Your Impact
- Website Carbon Calculator: websitecarbon.com - Estimate CO2 per page view
- Ecograder: ecograder.com - Sustainability audit
- Lighthouse: Performance metrics directly in Chrome DevTools
- PageSpeed Insights: Google's performance tool with field data
- WebPageTest: Detailed waterfall analysis and optimization suggestions
Real-World Examples
VOID.ma: Our Own Website
- Tech Stack: Next.js 14 + Static Generation
- Homepage Weight: 220 KB total (target <300 KB)
- Lighthouse Score: 98/100 Performance
- CO2 per Page View: 0.15g (cleaner than 87% of web)
- Fonts: System fonts (0 KB)
Client Project: Banking Portal
Before eco-design:
- 2.5 MB per page
- LCP: 4.2s
- Bounce rate: 42%
After eco-design:
- 480 KB per page (-81%)
- LCP: 1.8s (-57%)
- Bounce rate: 28% (-33%)
- Conversions: +22%
Ready to Build a Sustainable Website?
Our VOID team can help you implement eco-design principles in your projects:
- Eco-design audit of your existing site
- Performance optimization with sustainable practices
- Next.js development for lightweight, fast sites
- UX design focused on efficiency and accessibility
- Carbon footprint reduction strategy
Additional Resources
- Sustainable Web Design: Community and resources
- W3C Sustainable Web Guidelines
- Web Performance Morocco: our performance services
- React & Next.js Expertise: our React services
- All our publications: tech guides and news
Article published on 2025-12-06. Complete guide to web eco-design: performance, frugality, and sustainability.