Eco-friendly docs

Lobsters Hottest Tools

Summary

Starlight's guide to building eco-friendly documentation sites, covering techniques to reduce page weight, caching, and power consumption.

<p><a href="https://lobste.rs/s/v5ke0d/eco_friendly_docs">Comments</a></p>
Original Article
View Cached Full Text

Cached at: 08/04/26, 07:49 PM

# Eco-friendly docs Source: [https://starlight.astro.build/environmental-impact/](https://starlight.astro.build/environmental-impact/) Estimates for the climate impact of the web industry range from between[2%](https://www.sciencefocus.com/science/what-is-the-carbon-footprint-of-the-internet/)and[4% of global carbon emissions](https://www.bbc.com/future/article/20200305-why-your-internet-habits-are-not-as-clean-as-you-think), 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 Starlight is a great start\. According to the Website Carbon Calculator, this site is[cleaner than 98% of web pages tested](https://www.websitecarbon.com/website/starlight-astro-build-getting-started/), producing 0\.01g of CO₂ per page visit\. 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](https://httparchive.org/reports/state-of-the-web)\. Starlight 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\. While Starlight provides a good baseline, images you add to your docs pages can quickly increase your page weight\. Starlight uses Astro’s[optimized asset support](https://docs.astro.build/en/guides/images/)to optimize local images in your Markdown and MDX files\. Components built with UI frameworks like React or Vue can easily add large amounts of JavaScript to a page\. Because Starlight is built on Astro, components like this load**zero client\-side JavaScript by default**thanks to[Astro Islands](https://docs.astro.build/en/concepts/islands/)\. 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](https://csswizardry.com/2019/03/cache-control-for-civilians/)\. When using Starlight, you can set a long cache time for everything in the`/\_astro/`directory\. This directory contains CSS, JavaScript, and other bundled assets that can be safely cached forever, reducing unnecessary downloads: ``` Cache-Control: public, max-age=604800, immutable ``` 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](https://docs.netlify.com/routing/headers/)by adding a`public/\_headers`file to your project: ``` /_astro/* Cache-Control: public Cache-Control: max-age=604800 Cache-Control: immutable ``` ## Power consumption [Section titled “Power consumption”](https://starlight.astro.build/environmental-impact/#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, Starlight 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](https://withcabin.com/),[Fathom](https://usefathom.com/), or[Plausible](https://plausible.io/)\. Embeds like YouTube and Vimeo videos can be improved by waiting to[load the video on user interaction](https://web.dev/iframe-lazy-loading/)\. Packages like[`astro\-embed`](https://www.npmjs.com/package/astro-embed)can help for common services\. 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](https://www.thegreenwebfoundation.org/directory/)is one tool that can help you find hosting companies\. Curious how other docs frameworks compare? These tests with the[Website Carbon Calculator](https://www.websitecarbon.com/)compare similar pages built with different tools\. FrameworkCO₂ per page visitRating[Starlight](https://www.websitecarbon.com/website/starlight-astro-build-getting-started/)0\.01gA\+[VitePress](https://www.websitecarbon.com/website/vitepress-dev-guide-what-is-vitepress/)0\.04gA\+[Read the Docs](https://www.websitecarbon.com/website/docs-readthedocs-io-en-stable-index-html/)0\.04gA[docsify](https://www.websitecarbon.com/website/docsify-js-org/)0\.04gA[Sphinx](https://www.websitecarbon.com/website/sphinx-doc-org-en-master-usage-quickstart-html/)0\.04gA[mdBook](https://www.websitecarbon.com/website/rust-lang-github-io-mdbook/)0\.05gA[Vocs](https://www.websitecarbon.com/website/vocs-dev-docs/)0\.05gA[MkDocs](https://www.websitecarbon.com/website/mkdocs-org-getting-started/)0\.08gA[Fumadocs](https://www.websitecarbon.com/website/fumadocs-dev-docs-ui/)0\.09gB[Docusaurus](https://www.websitecarbon.com/website/docusaurus-io-docs/)0\.09gB[Nextra](https://www.websitecarbon.com/website/nextra-site-docs-docs-theme-start/)0\.10gB[Docus](https://www.websitecarbon.com/website/docus-dev-en-getting-started-project-structure/)0\.11gB[GitBook](https://www.websitecarbon.com/website/gitbook-com-docs/)0\.44gF[Mintlify](https://www.websitecarbon.com/website/mintlify-com-docs-quickstart/)0\.73gFData collected on April 21, 2026\. Click a link to see up\-to\-date figures\. - [Website Carbon Calculator](https://www.websitecarbon.com/) - [GreenFrame](https://greenframe.io/) - [Ecograder](https://ecograder.com/) - [WebPageTest Carbon Control](https://www.webpagetest.org/carbon-control/) ### Articles and talks [Section titled “Articles and talks”](https://starlight.astro.build/environmental-impact/#articles-and-talks) - [“Building a greener web”](https://youtu.be/EfPoOt7T5lg), talk by Michelle Barker - [“Sustainable Web Development Strategies Within An Organization”](https://www.smashingmagazine.com/2022/10/sustainable-web-development-strategies-organization/), article by Michelle Barker - [“A sustainable web for everyone”](https://2021.stateofthebrowser.com/speakers/tom-greenwood/), talk by Tom Greenwood - [“How Web Content Can Affect Power Usage”](https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/), article by Benjamin Poulain and Simon Fraser

Similar Articles

Page weight matters

Lobsters Hottest

A call for simpler, faster websites by reducing page weight and avoiding heavy JavaScript frameworks, tracking, and ads. The author argues for returning to static HTML and CSS to respect users' time and resources.

The Tao of Datastar

Lobsters Hottest

A guide explaining the recommended practices (the 'Datastar way') for building web applications using the Datastar library, emphasizing backend-driven state, SSE streaming, and DOM morphing.

Docsio

Product Hunt

Docsio is a new tool designed to simplify the creation and management of documentation sites, branded as 'lovable for doc sites'.