W3C Web Sustainability Guidelines

Showing 72 of 72 guidelines

• 2.1Manual onlyUX

  Undertake Systemic Impacts Mapping

  Identify and map the direct and indirect environmental and social impacts of your product or service throughout its lifecycle.

• 2.2Manual onlyUX

  Assess and Research Visitor Needs

  Research the needs of your visitors to ensure the product delivers genuine value and avoids unnecessary resource consumption.

• 2.3Semi-automatedUX

  Research Non-Human Actors

  Identify bots, crawlers, and automated agents that interact with your service and ensure they are served appropriately.

• 2.4Manual onlyUX

  Consider Sustainability in Early Ideation

  Incorporate sustainability criteria into the ideation and design process from the outset.

• 2.5Manual onlyUX

  Account for Stakeholder Issues

  Engage stakeholders (including users, operators, and affected communities) and address their concerns in the design process.

• 2.6Semi-automatedUX

  Create a Frictionless Lightweight Experience by Default

  Provide the lightest possible experience that satisfies user needs, reducing data transfer and processing demands.

• 2.7Semi-automatedUX

  Avoid Unnecessary or an Overabundance of Assets

  Minimize decorative assets and avoid content that does not serve user goals, reducing page weight and energy use.

• 2.8Semi-automatedUX

  Ensure Navigation and Way-Finding Are Well-Structured

  Provide clear, logical navigation so visitors find content quickly, reducing unnecessary page loads.

• 2.9Manual onlyUX

  Respect the Visitor's Attention

  Avoid dark patterns, excessive notifications, and auto-playing media that consume user time and device resources.

• 2.10Manual onlyUX

  Avoid Manipulative Patterns

  Do not use deceptive design patterns (dark patterns) that manipulate users into actions against their interests.

• 2.11Semi-automatedUX

  Avoid Bloated or Unnecessary Content

  Remove or archive outdated content and avoid padding pages with redundant material.

• 2.12Manual onlyUX

  Document and Share Project Outputs

  Share design decisions, research, and outcomes openly to foster learning and reduce duplicated effort across the industry.

• 2.13Manual onlyUX

  Use Recognized Design Patterns

  Leverage established UX patterns so users can accomplish tasks with minimal cognitive effort and fewer interactions.

• 2.14Manual onlyUX

  Implement Passive and Low-Intensity Features

  Offer passive or low-resource alternatives to high-intensity interactive features.

• 2.15Semi-automatedUX

  Use Animations Responsibly

  Limit animations to those that serve user needs, prefer CSS over JS animations, and honour prefers-reduced-motion.

• 2.16AutomatedUX

  Ensure Content Is Readable Without Custom Fonts

  Use system fonts or provide effective fallbacks so pages are readable even when custom fonts fail to load.

• 2.17Semi-automatedUX

  Provide Suitable Alternatives to Web Assets

  Supply text alternatives, transcripts, and accessible formats for media and complex visuals.

• 2.18AutomatedUX

  Consider Dark Mode

  Support a dark color scheme via prefers-color-scheme to reduce energy consumption on OLED/AMOLED displays.

• 2.19Semi-automatedUX

  Support Native User Interface Features

  Use platform-native UI controls where possible to reduce JS weight and improve accessibility.

• 2.20AutomatedUX

  Provide Print Stylesheet Alternatives

  Include print styles that remove unnecessary navigation and decorative elements to reduce ink and paper use.

• 2.21Manual onlyUX

  Align Visual Design with Sustainability

  Communicate sustainability values through visual choices such as colour, imagery, and typography.

• 2.22Manual onlyUX

  Avoid Unnecessary Scroll

  Structure content so users find what they need without excessive scrolling, reducing time-on-device.

• 2.23Manual onlyUX

  Promote Sustainable Use of Data

  Give users control over their data, minimise collection, and avoid retention beyond necessity.

• 2.24Manual onlyUX

  Consider Sustainability in Content

  Embed sustainability messaging in editorial content where relevant and accurate.

• 2.25Manual onlyUX

  Reduce Cognitive Load

  Design interfaces that minimise mental effort, helping users complete tasks with fewer errors and less time.

• 3.1Manual onlyWeb Dev

  Identify Redundant Functionality

  Audit the codebase for duplicate, dead, or superseded functionality and remove it to reduce overhead.

• 3.2AutomatedWeb Dev

  Address the Situation When Websites Are Unavailable

  Provide offline pages or service-worker fallbacks so users receive a useful response even when connectivity is poor.

• 3.3AutomatedWeb Dev

  Minify Your HTML, CSS, and JavaScript

  Remove unnecessary whitespace, comments, and dead code from served assets to reduce transfer size.

• 3.4AutomatedWeb Dev

  Use Metadata Correctly

  Include accurate page metadata (title, description, Open Graph) to reduce unnecessary visits caused by misleading previews.

• 3.5Semi-automatedWeb Dev

  Reduce Duplicate Code

  Identify and consolidate repeated code patterns to shrink bundle sizes and reduce maintenance burden.

• 3.6Semi-automatedWeb Dev

  Avoid Unnecessary Code Duplication

  Prefer shared libraries and components over copy-pasted implementations.

• 3.7Semi-automatedWeb Dev

  Rigorously Assess Third-Party Services

  Evaluate the sustainability impact of third-party scripts, trackers, and widgets before including them.

• 3.8AutomatedWeb Dev

  Use HTML Elements Correctly

  Use semantic HTML elements to improve accessibility and reduce reliance on heavy CSS/JS workarounds.

• 3.9AutomatedWeb Dev

  Resolve Render Blocking Content

  Remove or defer resources that block page rendering to reduce time-to-interactive and energy use.

• 3.10AutomatedWeb Dev

  Provide Code-Based Way-Finding Mechanisms

  Include sitemap.xml, robots.txt, and structured navigation landmarks to assist bots and assistive technology.

• 3.11Semi-automatedWeb Dev

  Avoid Deprecated or Proprietary Code

  Remove deprecated APIs and vendor-specific prefixes to keep code lean and forward-compatible.

• 3.12Semi-automatedWeb Dev

  Validate Forms

  Use client- and server-side validation to reduce failed submissions and unnecessary round-trips.

• 3.13AutomatedWeb Dev

  Use Metadata, Microdata, and Schema.org

  Add structured data so search engines can display rich results, reducing clicks needed to find information.

• 3.14Semi-automatedWeb Dev

  Provide Accessible, Usable, Minimal Forms

  Design forms with only necessary fields, clear labels, and accessible error handling.

• 3.15AutomatedWeb Dev

  Provide Useful Error Pages

  Return informative 404 and error pages that help users navigate to their destination without wasted requests.

• 3.16Semi-automatedWeb Dev

  Recognize Errors and Inform the Visitor

  Surface clear, actionable error messages so visitors can recover without contacting support.

• 3.17AutomatedWeb Dev

  Use Beneficial Standards

  Adopt open web standards and publish machine-readable files (robots.txt, sitemap.xml, security.txt, humans.txt).

• 3.18AutomatedWeb Dev

  Ensure Your Site Is Indexed Correctly

  Configure canonical URLs and indexing directives to prevent duplicate content and reduce crawler load.

• 3.19Semi-automatedWeb Dev

  Reduce the Impact of Scrolling Content

  Implement lazy loading and pagination to avoid loading content the visitor never sees.

• 3.20AutomatedWeb Dev

  Provide Accessible, Performant Images

  Serve images in modern formats (WebP, AVIF), sized appropriately, with descriptive alt text and lazy loading.

• 3.21AutomatedWeb Dev

  Serve Fonts Efficiently

  Subset fonts, use font-display swap, and self-host to minimise render-blocking and unnecessary data transfer.

• 3.22Semi-automatedWeb Dev

  Ensure Videos Are Optimized

  Compress video assets, provide captions, avoid autoplay, and use efficient codecs (AV1, HEVC).

• 3.23Semi-automatedWeb Dev

  Reduce the Impact of Animation

  Use CSS animations rather than JS where possible and implement prefers-reduced-motion support.

• 3.24Semi-automatedWeb Dev

  Use Efficient CSS Selectors

  Avoid overly broad or deeply nested CSS selectors that force expensive style recalculations.

• 3.25AutomatedWeb Dev

  Use the Latest Stable Language Version

  Use modern, efficient language features and avoid polyfills for widely-supported APIs.

• 3.26AutomatedWeb Dev

  Identify Errors and Status Codes Appropriately

  Return correct HTTP status codes so clients and intermediaries can cache, retry, or handle responses efficiently.

• 4.1Semi-automatedHosting

  Choose a Sustainable Hosting Provider

  Select a hosting provider that uses renewable energy and publishes sustainability commitments.

• 4.2AutomatedHosting

  Optimize Browser Caching

  Set appropriate cache-control headers so browsers and CDNs cache assets, reducing repeat downloads.

• 4.3Semi-automatedHosting

  Use Content Delivery Networks

  Distribute static assets via a CDN to reduce round-trip latency and data-centre energy consumption.

• 4.4AutomatedHosting

  Avoid Redirects Where Possible

  Minimise HTTP redirects to reduce unnecessary requests and the associated latency and energy use.

• 4.5Manual onlyHosting

  Limit Usage of Additional Environments

  Consolidate staging, development, and testing environments to reduce idle infrastructure overhead.

• 4.6Semi-automatedHosting

  Implement Lean Data Strategies

  Collect only the data you need, archive or delete stale data, and optimise database queries.

• 4.7AutomatedHosting

  Compress Files and Data

  Enable gzip or Brotli compression on the server to reduce the size of transferred resources.

• 4.8AutomatedHosting

  Use Efficient Cache Policies

  Apply long-lived cache headers to immutable assets and short-lived headers to frequently updated content.

• 4.9Manual onlyHosting

  Consider Serverless, Containerized, or Virtualized Infrastructure

  Use serverless or container-based infrastructure to scale to zero and reduce idle resource consumption.

• 4.10Manual onlyHosting

  Monitor and Improve Operational Efficiency

  Continuously monitor server performance and efficiency metrics and act on findings.

• 4.11Manual onlyHosting

  Use Edge Computing

  Process requests at the network edge where beneficial to reduce latency and central data-centre load.

• 4.12AutomatedHosting

  Apply Appropriate Security Measures

  Use HTTPS, security headers, and dependency auditing to prevent attacks that waste resources.

• 5.1Manual onlyBusiness

  Have an Ethical and Sustainability Product Strategy

  Define and communicate a strategy that places sustainability at the core of product decisions.

• 5.2Manual onlyBusiness

  Assign a Sustainability Champion

  Designate a team member responsible for tracking and improving sustainability outcomes.

• 5.3Manual onlyBusiness

  Support Open Source and Open Standards

  Contribute to and rely on open-source software and open standards to reduce duplicated environmental cost.

• 5.4Manual onlyBusiness

  Engage and Educate Stakeholders

  Communicate sustainability goals and progress to all stakeholders including clients, leadership, and users.

• 5.5Manual onlyBusiness

  Use Sustainable Design Patterns

  Adopt and share design patterns that reduce the environmental footprint of digital products.

• 5.6Semi-automatedBusiness

  Avoid Unnecessary Resource Requests

  Audit features regularly and remove those that are rarely used or generate disproportionate resource costs.

• 5.7Manual onlyBusiness

  Establish if a Digital Solution Is Necessary

  Question whether a digital product is the most sustainable answer to a problem before building it.

• 5.8Manual onlyBusiness

  Contribute to Sustainability Efforts

  Participate in industry sustainability initiatives and share learnings to accelerate collective progress.

• 5.9Semi-automatedBusiness

  Communicate Sustainability Commitments

  Publish a sustainability statement or environmental policy that is accessible from the website.