Medium impact 🌿

Use metadata correctly

Search engines and social networks make use of the content within a website, by ensuring that your metadata is correctly marked up, you can reduce emissions by improving way-finding.

Actions checklist
  • Required Elements

    Include the required title element, plus any optional HTML head elements (such as link).

  • Meta Tags

    Include necessary meta tag references that search engines and social networks recognize, using a recognized name scheme such as Dublin Core Metadata Initiative (DCMI), Friend Of A Friend (FOAF), or RDFa.

  • Structured Data

    Embed Microdata, Structured Data (Schema), or Microformats within your pages.

☞ See on W3C

🦾

Medium impact 🌿

Adapt to user preferences

Sustainability benefits can be generated in numerous ways, by making sure that your website adheres to the requests made by a browser for specific conditions to be taken into account (such as CSS media and preference queries), you can unlock benefits for the visitor, and as a by-product reduce your emissions. It's worth noting that the introduction of user preferences and APIs has increased the risk of visitor fingerprinting and privacy issues.

Actions checklist
  • Media and Preference Queries

    Apply the monochrome, prefers-contrast, prefers-color-scheme, prefers-reduced-data, and prefers-reduced-motion CSS preference queries if they will benefit your website or application. Also consider the print & scripting CSS media queries if they will improve the sustainability of your website.

☞ See on W3C

🦾

Medium impact 🌿

Develop a mobile first layout

Visitors approach our products and services on a wide variety of devices these days. Ensuring that your device works on the widest range of devices and differing screen resolutions ensures that you will have a compatible website or application. As such, visitors can actively choose to browse on devices which emit less carbon if they wish.

Actions checklist
  • Mobile-First

    Allow a website or app to work on mobile devices primarily (testing with various connection speeds), expanding to accommodate larger displays thereafter (mobile-first). It is much more effective to do the hard work to ensure that it works well on a mobile device and then scale it up to larger interfaces.

  • Responsive Design

    Utilize progressive enhancement and responsive web design to ensure that your work accommodates a device's capabilities, different screen sizes, and will not fail if it meets an unsupported technology.

  • Carbon Aware Design

    To maximize the use of renewable energy, adapt your website or service to electricity availability using carbon-aware design techniques.

  • Alternative Browsing

    Consider supporting other indirect methods of interaction such as voice (speech), code (QR, etc), reader view (browser, application, or RSS), or connected-technology (watch, appliance, transport, etc).

☞ See on W3C

🦾

High impact 🌿

Use beneficial javascript and its apis

When new best practices or if beneficial scripting guidance exists which will improve the visitor experience, following it should be of the highest priority (only using scripts ethically should be promoted).

Actions checklist
  • Beneficial JavaScript

    Improve sustainability through accessible and performant code implementations.

  • API Requests

    When using an API, make sure you only call it when necessary. On the other side, make sure no unrequired data is sent by the API.

☞ See on W3C

🦾🦾

Medium impact 🌿

Ensure your scripts are secure

The dangers of scripting are well known, and vulnerabilities are discovered with increasing regularity. As such, it's of ethical benefit for authors to ensure all code used regularly passes security processes.

Actions checklist
  • Script Security

    Check the code for vulnerabilities, exploits, header issues, and code injection.

☞ See on W3C

🦾🦾

Medium impact 🌿

Manage dependencies appropriately

While JavaScript may not cause the most website bloat, it can cause very high emissions in terms of CPU load due to the rendering process, thereby it makes sense to consider the use of dependencies and third-party code carefully.

Actions checklist
  • Dependency Management

    Prevent developers from downloading and installing JavaScript libraries to run locally (client-side) when they are not needed by checking for unused dependencies and uninstalling those that aren't needed and removing them from your package.json file.

  • Dependency Necessity

    Reduce the amount of JavaScript that has to be downloaded and parsed by the browser by only using libraries where necessary. Consider whether you can use a native JavaScript API instead. Check the package size using a tool like Bundlephobia, and whether individual modules can be installed and imported rather than the whole library.

  • Dependency Updates

    Regularly check dependencies and keep them up-to-date.

☞ See on W3C

🦾

Low impact 🌿

Include files that are automatically expected

Search engines and browsers regularly examine websites, requesting specific files by default (they expect them to exist). If the files don't exist, this will lead to potential errors and emissions being caused when they could be created, especially as the files offer SEO, user-experience, and other benefits to visitors.

Actions checklist
  • Expected File Formats

    Take advantage of the favicon.ico, robots.txt, opensearch.xml, site.webmanifest, and sitemap.xml documents.

☞ See on W3C

🦾

Low impact 🌿

Use plaintext formats when appropriate

There are several small assets which can be included within a website, conferring a range of benefits upon the website or application that utilizes them. They each have a low carbon footprint, so while they do create emissions, it's worth including them for the benefits they provide.

Actions checklist
  • Beneficial File Formats

    Utilize standards such as ads.txt, carbon.txt, humans.txt, security.txt and robots.txt.

☞ See on W3C

🦾