Environmental Impact

Estimates for the climate impact of the web industry range from between 2% and 4% of global carbon emissions, roughly equivalent to the emissions of the airline industry. There are many complex factors in calculating the ecological impact of a website, but this guide includes a few tips for reducing the environmental footprint of your docs site.

The good news is, choosing Doks is a great start. According to the Website Carbon Calculator, this site is cleaner than 97% of web pages tested, producing 0.03g of CO₂ per page visit.

Page weight#

The more data a web page transfers, the more energy resources it requires. In April 2023, the median web page required a user to download more than 2,000 KB according to data from the HTTP Archive.

Doks builds pages that are as lightweight as possible. For example, on a first visit, a user will download less than 50 KB of compressed data — just 2.5% of the HTTP archive median. With a good caching strategy, subsequent navigations can download as little as 10 KB.

Images#

While Doks provides a good baseline, images you add to your docs pages can quickly increase your page weight. Doks uses Hyas’ Images integration to optimize local images in your Markdown and HTML files.

Caching#

Caching is used to control how long a browser stores and reuses data it already downloaded. A good caching strategy makes sure that a user gets new content as soon as possible when it changes, but also avoids pointlessly downloading the same content over and over when it hasn’t changed.

The most common way to configure caching is with the Cache-Control HTTP header. When using Doks, you can set a long cache time for everything in the /public/ directory. This directory contains CSS, JavaScript, and other bundled assets that can be safely cached forever, reducing unnecessary downloads:

Cache-Control: public, max-age=31536000

How to configure caching depends on your web host. For example, Vercel applies this caching strategy for you with no config required, while you can set custom headers for Netlify by adding a headers section to your netlify.toml file:

[[headers]]
  for = "/*"
  [headers.values]
    Cache-Control= '''
    public,
    max-age=31536000'''

Power consumption#

How a web page is built can impact the power it takes to run on a user’s device. By using minimal JavaScript, Doks reduces the amount of processing power a user’s phone, tablet, or computer needs to load and render pages.

Be mindful when adding features like analytics tracking scripts or JavaScript-heavy content like video embeds as these can increase the page power usage. If you need analytics, consider choosing a lightweight option like Cabin, Fathom, or Plausible. Embeds like YouTube and Vimeo videos can be improved by waiting to load the video on user interaction.

Hosting#

Where a web page is hosted can have a big impact on how environmentally friendly your documentation site is. Data centers and server farms can have a large ecological impact, including high electricity consumption and intensive use of water.

Choosing a host that uses renewable energy will mean lower carbon emissions for your site. The Green Web Directory is one tool that can help you find hosting companies.

Comparisons#

Curious how other docs frameworks compare? These tests with the Website Carbon Calculator compare similar pages built with different tools.

Data collected on 12 Dec 2023. Click a link to see up-to-date figures.

More resources#

Tools#

• Website Carbon Calculator
• GreenFrame
• Ecograder
• WebPageTest Carbon Control
• Ecoping

Articles and talks#

• “Building a greener web”, talk by Michelle Barker
• “Sustainable Web Development Strategies Within An Organization”, article by Michelle Barker
• “A sustainable web for everyone”, talk by Tom Greenwood
• “How Web Content Can Affect Power Usage”, article by Benjamin Poulain and Simon Fraser