コンテンツにスキップ
Starlight

環境に優しいドキュメント

ウェブ産業が気候に与える影響は、世界の炭素排出量の2％から4％であり、航空業界の排出量にほぼ匹敵すると推定されています。ウェブサイトの生態学的影響の計算には多くの複雑な要因がありますが、このガイドではドキュメントサイトの環境への負荷を減らすためのいくつかのヒントを紹介します。

幸いなことに、Starlightを選ぶことは素晴らしいスタートです。Website Carbon Calculatorによると、このサイトはテスト対象のウェブページの99％よりもクリーンであり、ページ訪問あたり0.01gのCO₂を生成します。

ページの重さ

ウェブページが転送するデータが多いほど、より多くのエネルギー資源が必要になります。2023年4月現在、HTTPアーカイブのデータによると、中央値のウェブページでは、ユーザーは2,000KB以上のデータをダウンロードする必要がありました。

Starlightは、可能な限り軽量なページを作成します。たとえば、初回訪問時にユーザーがダウンロードする圧縮データは50KB未満であり、HTTPアーカイブの中央値のわずか2.5％にすぎません。優れたキャッシュ戦略により、後続のナビゲーションのダウンロードは10KB程度に抑えられます。

画像

Starlightは優れたベースラインを提供しますが、ドキュメントページに追加した画像はページの重さを急速に増加させます。Starlightは、Astroの最適化されたアセットサポートを使用して、MarkdownとMDXファイル内のローカル画像を最適化します。

UIコンポーネント

ReactやVueなどのUIフレームワークで作成されたコンポーネントを使うと、大量のJavaScriptがページに追加される可能性があります。StarlightはAstro上に構築されており、Astroアイランドのおかげで、このようなコンポーネントがデフォルトでロードするクライアントサイドJavaScriptはゼロとなります。

キャッシュ

キャッシュは、ブラウザがすでにダウンロードしたデータをどのくらいの期間保存して再利用するかを制御するために使用されます。優れたキャッシュ戦略は、コンテンツが変更されたときにユーザーができるだけ早く新しいコンテンツを取得することを保証し、また変更されていないときに同じコンテンツを何度も無駄にダウンロードするのを避けます。

キャッシュを設定する最も一般的な方法は、Cache-Control HTTPヘッダーを使用するものです。Starlightを使用する場合、/_astro/ディレクトリ内のすべてに対し長めのキャッシュ時間を設定できます。このディレクトリには、CSS、JavaScript、その他のバンドルされたアセットが含まれており、安全に永続的なキャッシュを設定できるため、不要なダウンロードを減らすことができます。

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

キャッシュの設定方法は、ウェブホストによって異なります。たとえば、Vercelは設定不要でこのキャッシュ戦略を適用しますが、Netlifyではプロジェクトにpublic/_headersファイルを追加することでNetlify用カスタムヘッダーを設定できます。

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

電力消費

ウェブページをどのようにビルドするかは、ユーザーのデバイス上で実行するために必要な電力に影響します。Starlightは、最小限のJavaScriptを使用することで、ユーザーの携帯電話、タブレット、そしてコンピューターがページをロードしてレンダリングするために必要な処理量を削減します。

アナリティクスのトラッキングスクリプトのような機能や、ビデオ埋め込みのようなJavaScriptを多用するコンテンツを追加すると、ページの電力消費量が増加する可能性があるため注意してください。アナリティクスが必要な場合は、Cabin、Fathom、あるいはPlausibleのような軽量なオプションを選択することを検討してください。YouTubeやVimeoのような埋め込みは、ユーザーの操作に応じて動画をロードすることで改善できます。astro-embedのようなパッケージは、一般的なサービスに対し有効です。

ホスティング

ウェブページをホスティングする場所は、あなたのドキュメントサイトがどれだけ環境に優しいかどうかに大きく影響します。データセンターやサーバーファームは、高い電力消費や水の集中的な使用など、生態系に大きな影響を与える可能性があります。

再生可能エネルギーを使用するホストを選択すれば、サイトの炭素排出量を少なくできます。Green Web Directoryは、ホスティング会社を見つけるのに役立つツールの1つです。

比較

他のドキュメントフレームワークとの比較に興味がありますか？Website Carbon Calculatorを用いた以下のテストでは、異なるツールで作成された類似のページを比較しています。

フレームー枠ページ訪問ごとのCO₂
Starlight0.01g
VitePress0.05g
Docus0.05g
Sphinx0.07g
MkDocs0.10g
Nextra0.11g
docsify0.11g
Docusaurus0.24g
Read the Docs0.24g
GitBook0.71g

データは2023年5月14日に収集されたものです。リンクをクリックすると、最新の数値が表示されます。

その他のリソース

ツール

記事と講演