Sustainability Best Practices
CMSCloudHeartcoreDXP
  • Introduction
  • Infrastructure
    • Infrastructure Overview
    • Hosting
    • Architecture
    • Security and Bots
  • Backend
    • Backend Overview
    • Upgrades and patches
    • Cache responses
    • Sustainable Design Patterns
    • Performance Testing
    • Common pitfalls
    • SOAP, REST and GraphQL
    • SQL optimization
    • JAMstack
    • Monolithic vs. Service based Architecture
    • Async
    • Background tasks
  • Frontend
    • Frontend Overview
    • Page weight budget
    • Image optimization
    • Asset optimization
    • Limit use of 3rd parties
    • Lazyload resources
    • Mobile first
  • Editor
    • Editor Overview
    • Content Types
    • Content Optimization
    • Design Choices
    • Data Management
    • Housekeeping
  • Telemetry
    • Telemetry Overview
    • February 2024
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
Export as PDF
  1. Frontend

Mobile first

PreviousLazyload resourcesNextEditor Overview

Last updated 1 year ago

Was this helpful?

When it comes to design, we should be making sustainable choices from the outset. Consider the use of images and large graphics that could contribute to page weight. If possible, remove the use of stock images that provide little to no value.

Choose more efficient colors and provide a by default, which could reduce energy usage even further. Switching from light mode to dark mode at 100% brightness can save an average of 39%-47% battery power. Dark mode support has and should be taken into account.

Start with mobile-first and scale up if necessary, introducing design tweaks at bigger viewports. The provides some real-world examples of sustainable design in practice without compromising on the design quality.

Implement energy-saving toggles to activate a low-carbon website design during peak grid intensity. By highlighting these options to the user, we can inform them and help them to make more sustainable choices. and have both introduced this recently. There are tools such as the and the . These tools allow you to pull information about the intensity of the grid in your location.

dark mode
existed on the web since 2019
Lowww Directory
Boohoo
Herning.dk
Carbon Intensity API
Carbon Aware Software Development Kit (SDK)