环保文档

网络行业对气候影响的估计范围从2%到全球碳排放量的4%，大致相当于航空业的排放量。计算网站生态影响的因素很多，但本指南包含了一些减少文档站点环境足迹的技巧。

好消息是，选择 Starlight 是一个很好的开始。根据网站碳计算器的数据，本站点比 99% 的网页更环保，每个页面访问产生 0.01g 的 CO₂。

页面大小

网页传输的数据越多，它所需的能源资源就越多。根据来自 HTTP 存档的数据，2023 年 4 月，中位数网页需要用户下载超过 2,000 KB。

Starlight 构建的页面尽可能轻量。例如，在第一次访问时，用户将下载少于 50 KB 的压缩数据，仅为 HTTP 存档中位数的 2.5%。通过良好的缓存策略，后续导航可以下载少至 10 KB。

图片

虽然 Starlight 提供了一个很好的基线，但是你添加到文档页面的图片可能会快速增加页面的大小。 Starlight 使用 Astro 的优化的资源支持来优化 Markdown 和 MDX 文件中的本地图片。

UI 组件

使用 React 或 Vue 等 UI 框架构建的组件可以轻松地向页面添加大量 JavaScript。因为 Starlight 是基于 Astro 构建的，所以这样的组件默认情况下不会加载任何客户端 JavaScript，这要归功于 Astro 岛屿。

缓存

缓存用于控制浏览器存储和重用已下载数据的时间。良好的缓存策略确保用户在内容更改时尽快获得新内容，但也避免了在内容未更改时反复下载相同的内容。

最常见的配置缓存的方法是使用 Cache-Control HTTP headers。使用 Starlight 时，你可以为 /_astro/ 目录中的所有内容设置长时间缓存。该目录包含可以安全永久缓存的 CSS、JavaScript 和其他捆绑的资源，从而减少不必要的下载：

Cache-Control: public, max-age=604800, immutable

如何配置缓存取决于你的 Web 主机。例如，Vercel 会自动为你应用这种缓存策略，而 Netlify 可以通过在项目中添加 public/_headers 文件来为 Netlify 设置自定义 headers：

/_astro/*
  Cache-Control: public
  Cache-Control: max-age=604800
  Cache-Control: immutable

功耗

网页的制作方式会影响其在用户设备上的运行功率。通过使用最少的 JavaScript，Starlight 减少了用户手机、平板电脑或电脑加载和呈现网页所需的处理能力。

当添加诸如分析跟踪脚本或 JavaScript 重型内容（如视频嵌入）之类的功能时，请注意这些功能会增加页面的功耗。如果你需要分析，请考虑选择像 Cabin、Fathom 或 Plausible 这样的轻量级选项。等待用户交互时加载视频可以改善 YouTube 和 Vimeo 视频等嵌入。 astro-embed 等包可以帮助常见的服务。

托管

网页托管在哪里会对你的文档站点的环保程度产生很大的影响。数据中心和服务器农场可能会对环境产生很大的影响，包括高耗电量和大量使用水资源。

选择使用可再生能源的主机将意味着你的站点的碳排放量更低。绿色网络目录是一个可以帮助你找到主机公司的工具。

比较

好奇和其他文档框架相比如何？下面使用 Website Carbon Calculator 的测试比较了使用不同工具构建的类似页面。

框架	每页访问量产生的 CO₂	评级
Starlight	0.01g	A+
Read the Docs	0.05g	A+
Sphinx	0.06g	A+
VitePress	0.07g	A+
Docus	0.09g	A+
docsify	0.10g	A
Nextra	0.11g	A
MkDocs	0.19g	B
Docusaurus	0.21g	B
GitBook	0.43g	C
Mintlify	1.22g	F

数据收集于 2024 年 7 月 22 日。点击链接查看最新数据。

环保文档

页面大小

图片

UI 组件

缓存

功耗

托管

比较

更多资源

工具

文章和演讲