1. Performance Is Sustainability
Every kilobyte you don’t ship saves energy up and down the stack—radio, backbone, CDN, CPU, and battery. The same optimizations that lower carbon also improve conversion and retention.
Treat sustainability as a **non-functional requirement**: it lives in the Definition of Done, not in a one-off sprint.
Key takeaways:
- Less data → less energy
- Faster = better business
- Helps low-end devices most
2. Measure First: Vitals, Budgets, and CO₂ Estimates
Create per-route **KB budgets** and enforce them in CI. Track Core Web Vitals (LCP, CLS, INP) with real-user monitoring. Monitor average bytes for images, video, and fonts. Even rough CO₂ estimates can keep the team honest.
Green sites are **measured** sites—set targets and show progress in the same dashboards product managers watch.
Key takeaways:
- Page-level KB budgets
- LCP/CLS/INP dashboards
- Media & font weight per route
3. Asset Strategy: Images, Fonts, and Video
Export multiple sizes and serve modern formats (AVIF/WebP). Use `<img srcset>` and priority hints so the browser makes great choices. For fonts, start with **system fonts** or variable fonts with subsetted ranges and `font-display: swap`.
Video is the biggest lever: poster frames, muted autoplay only when it truly adds value, and never ship 4K to mobile.
Key takeaways:
- AVIF/WebP
- Fluid image sizes & priority hints
- System fonts as a feature
4. Architecture: SSR/ISR, Edge Caching, and Hydration Discipline
Use SSR/ISR hybrids and cache **by content key**. Hydrate only interactive parts; avoid shipping a SPA shell for static pages. Progressive enhancement ensures older devices get a usable experience without the heavy JS.
Key takeaways:
- Move bytes to the edge
- Render only what you use
- Progressive enhancement
5. Low-Energy UI Patterns
Prefer subtle motion and reserve parallax for moments of real meaning. Build a color system with strong contrast and clear elevation. Skeletons communicate progress with far less perceived waiting than infinite spinners.
Key takeaways:
- Reduce motion by default
- Readable color systems
- Skeletons over spinners
6. Governance & Culture
Make budgets blocking in CI. Publish shared scoreboards where everyone sees wins and regressions. Celebrate PRs that **delete** code and images—shipping less is a skill.
Key takeaways:
- Budget gates in CI
- Shared scoreboards
- Celebrate deletions
