ナビゲーションをスキップ
部 III 章 15

サステナビリティ

公開日：
Web AlmanacのキャラクターがWebページの上にソーラーパネルを設置しているヒーローイメージ。
Laurent Devernay Satyagraha、 Burak Güneli、 Ines Akrap、 Alexander Dawson、 Mike Gifford と Tim Frick によって書かれた。
Rafael Bonalume Lebre によってレビュ。
Lucia Harcegova、 Burak Güneli と Mike Gifford による分析。
Caleb Queern 編集。
Sakae Kotaro によって翻訳された。

序章

この章では、可能な限り2022年のサステナビリティの章を参考にします。まだ読んでいない方は、今すぐ読んでください。そう、リサイクルや再利用はサステナビリティの重要な一部なのです。

2022年のAlmanac以降、デジタルサステナビリティの分野はかなり進歩しました。とはいえ、これは複雑な問題であるため、まだ初期段階にあります。私たちのデジタルライフが物理的な地球に与える影響の全容を、絶対的な確実性をもって知ることはできません。私たちが確信できるのは、その影響の全容は一般的に考えられているよりも大きいということです。水、土地、希少鉱物、そして電力はすべて、私たちの「クリーンな」デジタルインターフェースによって消費され、有毒廃棄物もしばしば生産されます。

さらに、サステナビリティに取り組む多くの人々によって、ウェブパフォーマンス、アクセシビリティ、セキュリティ、プライバシーなどの他の主要分野の影響が、計画や意思決定の不備の二次的な結果として排出につながる可能性があることが認識されています。

前回のAlmanac以降、私たちのデジタルライフの影響に関するオープンスタンダード、オープンソースソフトウェア、オープンデータの作成が見られました。まだ開発中ですが、排出削減へのエビデンスに基づいたアプローチの始まりがあります。このテーマに関するコース、認定、書籍、ビデオ、ポッドキャスト、カンファレンスがあります。しかし、これはまだ排出削減の他の取り組みの陰に隠れている問題です。

私たちはデータセンターの影響を減らすことにもっと力を入れ、デジタルデバイスを循環型経済の一部として捉え始める必要があります。しかし、もっとも重要なことは、より大きく、より多くのデジタル体験への需要を減らし始めることです。

可能な限り、W3Cサステナブルウェブコミュニティグループのウェブサステナビリティガイドライン（WSG）の草案を活用します。2022年のAlmanacの経験を基に、今日の状況のスナップショットを提供するためのデータを強調します。

しかし、まずは2022年以降にサステナビリティ分野で何が起こったのかを簡単に振り返ってみましょう。

ウェブサステナビリティの最新情報

2022年以降、ウェブの持続可能性に対する意識は急激に高まっています。その過程で、多くのことが起こりました。

ソフトウェア炭素強度（SCI）仕様は、ISO標準になりました。炭素排出率に基づいたこの仕様は、デジタルサービスの環境効率を追跡する方法です。これは良い出発点となる可能性があります。しかし、さらなる生態学的要因（非生物資源の枯渇、水の使用量など）を通じてさらに踏み込み、プロジェクトのライフサイクルのすべてのステップを考慮して、質素さと節度を達成することが重要になる可能性があります。

この効率性の追求は、カーボンアウェアコードや、主に炭素排出量に基づいて環境への影響を削減することを目指す主要なクラウドプロバイダーなど、他のいくつかの成果をもたらしました。サステナビリティはまた、人工知能の台頭によりいくつかの欠点にも直面しました。人工知能自体は大規模なメディア報道を受けていますが、必ずしもその環境への影響については報道されていません。この出現は、環境への影響を削減するという一部の主要なクラウドプロバイダーの努力を妨げました。これは、効率だけでは不十分であり、質素さが最優先事項であるべきことを示しています。また、環境（および社会）への影響を考慮せずに新しい技術を広く採用することは避けるべきであることも強調しています。

ここで、ベストプラクティスのための新しいリポジトリについて言及すべきです。

アン・カリー、サラ・スー、サラ・バーグマンによる『Building Green Software』など、ますます多くの書籍も出版されています。

これに加えて、ウェブの環境への影響を推定するためのツールはまだ進化しており、新しいツールも登場し続けています。既存のツール（Screaming Frog SEOやWebpagetestなど）の中には、環境への影響を推定する機能を追加しているものもあります。そのため、サステナブルウェブデザインモデルがよく使用されます。しかし、影響を正確に推定することは依然として重要なトピックであり、まだコンセンサスは得られていません。環境への配慮がしばしばそうであるように、このトピックは依然として複雑です。

これらすべてのブレークスルーにさらなる文脈を与えるために、フランスですでに実施されているように、デジタルの環境への影響に関するより一般的な研究が世界中で実施されるべきです。このような広い視野は、進行中のすべての努力の利益を推定するのに役立つだけでなく、より多くの焦点が必要な場所についての洞察も与えるでしょう。

制限と仮説

環境への影響を評価する方法はたくさんありますが、留意すべき点がいくつかあります。

  • ほとんどの無料ツールは、転送データ、HTTPリクエスト数、DOMサイズのみに依存しています。これは、アニメーション、重い計算（とくにJSを使用）、ダークモードの利点に関連する過剰消費を捉えるには不十分です。これを達成するには、CPU/GPU、エネルギー、RAM/メモリ使用量などの他の指標を測定する必要があります。
  • ツールは通常、ページの読み込みと、場合によってはスクロールに固執します。これは必ずしも実際の使用状況に関連しているわけではなく、Cookieの受け入れ、クライアントサイドのキャッシュ、ビデオの再生など、いくつかの明白なことを見逃すことがよくあります。分析とユーザーのフィードバックに基づいて、実際のユーザージャーニーを測定する必要があります。
  • GHGはしばしば環境への影響の代理として使用されますが、これだけでは不十分です。影響の移転やグリーンウォッシングを避けるために、ADEMEが述べているように（PDF、フランス語、980 kB）、他の指標を使用する必要があります。

これらの概念は、ウェブ要素の環境への影響に関するこの記事で詳しく説明されています。

組み込みの環境への影響を計算に含める必要があります。ウェブは、ユーザーが2〜3年ごとにデバイスを更新することを要求すべきではありません。デジタルインフラの寿命を延ばすことを保証する必要があります。

交差する環境問題

サステナビリティは最終的には人々を巻き込みます。なぜなら、地球は最終的には自らをケアするからです。人口の範囲内で人々のニーズをサポートする公正な社会を構築することが重要です。私たちの生活を通して、私たち全員が配慮を必要とします。物理的およびデジタルの世界をナビゲートする私たちの能力は変化し、持続可能な経済はそれをサポートします。5人に1人が永続的な障害を持っており、誰もが一生のうちに一時的および状況的な障害を経験します。これについての詳細は、アクセシビリティの章をお読みください。

持続可能なデジタルインターフェースを構築する際には、障害を持つ人々を含むユーザーを考慮しなければなりません。持続可能なデジタルインターフェースは、ユーザーがタスクを達成するために迅速にナビゲートできるようにします。アクセスできないインターフェースは、最終的にユーザーが目標を達成するために持続可能性の低い経路をたどることを要求する可能性があります。

同様に、人間の多様性を考慮しなければなりません。人種、階級、性別、性的アイデンティティは人々を分断するために使用されてきました。持続可能なウェブは、気候正義を促進すべきです。

詳細については、以下を参照してください。

法的義務と報告基準

デジタルサステナビリティは、規制の状況においてますます大きな懸念事項となっています。世界中の最近の法改正により、誰もが遵守しなければならない要件が導入されました。

かつて組織は最小限の義務しか負っていませんでしたが、今では環境への影響を考慮し始めるように設計された新しい規制に直面しています。気候危機の緊急性がこの変化を加速させ、政府はますます企業に生態学的フットプリントに対する責任を負わせています。

欧州連合は現在、持続可能性規制の面で世界をリードしています。企業の持続可能性報告指令（CSRD）と欧州持続可能性報告基準（ESRS）は、大企業がスコープ1、2、3の排出量（直接、間接、バリューチェーンの排出量を含む）を毎年報告することを義務付けています。スコープ1は、企業が直接行う温室効果ガス（GHG）排出量を対象とし、スコープ2は、建物を暖房または冷房するための電力など、企業からの間接的な排出量を対象とし、スコープ3は、企業に直接関連するものではなく、組織が間接的に責任を負う他のすべての排出量を対象とします。

一方、持続可能な製品のエコデザイン規則（ESPR）とエネルギー効率指令は、物理的なインフラ（データセンターなど）と製品を循環型経済と一般的な持続可能性の原則に向かわせることを義務付けています。さらに、企業の持続可能性デューデリジェンス指令（CS3D）は、組織が職場と従業員に関連する持続可能な行動を促進することを義務付けています。

さらに、グリーンクレーム指令は、グリーンウォッシングと戦うために、持続可能性または関連用語（グリーンであることなど）の主張について明確に法律で定めています。デジタル運用レジリエンス法（DORA）は、DevOps活動に関連する運用の持続可能性を義務付けています。EU人工知能（AI）法は、人工知能とそのような技術の環境への影響に関する必要な規制を提供します。

これらの欧州連合の法律の多くは、EUの市民と居住者の両方に適用されることに注意してください。これは、EUの加盟国と取引する企業やEU内に住む人々と取引する企業にも適用されます。GDPRと同様に、これらの法律の影響は世界的に重要です。

EUからの2つのベストプラクティスリポジトリ、持続可能なデジタルサービス設計ハンドブック（GR491）と欧州デジタル権利と原則は、持続可能性への立法的な動きと広く関連付けられるようになりました。

フランスは、REEN法とデジタルサービスのエコデザインに関する一般政策フレームワーク（RGESN）の公表を通じて、デジタルサステナビリティの初期のリーダーとしての地位を確立しました。このフレームワークは、ベストプラクティスに関する明確で実行可能なガイダンスを提供し、持続可能なデジタルサービス設計の高い基準を設定します。よりエネルギー効率の高いデジタル製品/サービスを構築する方法についてエンジニアを訓練することに大きな焦点が当てられています。循環型経済の廃棄物防止法AGECも施行されており、その他のベストプラクティスAFNOR Spec 2201も利用可能であり、国は環境問題に取り組むために懸命に努力しています。

ドイツでは、気候保護を理由にデータセンターのエネルギー使用量を削減することを義務付けるエネルギー効率法（EnEfG）と、サプライチェーン全体で法的保護を提供する持続可能性の人間的側面に関する法律であるサプライチェーンおよびデューデリジェンス法（SCDDA）の開発を通じて、持続可能性に関しても進展が見られます。

カリフォルニア州の新しい排出量報告法である気候企業データ説明責任法（S.B. 253）と、その姉妹法である気候関連金融リスク法（CFRA）は、世界的に影響を与える可能性のある画期的な規制パッケージです。これらは、カリフォルニア州で事業を展開し、収益が10億ドルを超える企業に温室効果ガス排出量の開示を義務付けます。カリフォルニア州がデジタル技術の世界的なハブとしての役割を果たしていることを考えると、これらの法律は国際的に慣行と基準に影響を与える可能性が高く、世界中のデジタルエージェンシーが注意を払うことが不可欠です。

インドは、持続可能性法を策定した最後の注目すべき国であり、この場合、EUのCSRDによく似た事業責任と持続可能性報告書（BRSR）ですが、この国に住んでいるか取引している人々を対象としており、報告範囲の排出量を強制しています。

ウェブアクセシビリティと同様に、デジタルサステナビリティはビジネスを行う上で交渉の余地のない側面になりつつあります。新たな持続可能性基準への不遵守はもはや選択肢ではなく、企業はさまざまな潜在的な罰則に直面しています。

デジタルサステナビリティに影響を与える規制は多様です。CSRDのように、排出量報告の透明性と説明責任の向上に焦点を当てたものもあれば、製品やサービスに関する正確で責任あるコミュニケーションを強制することでグリーンウォッシングを防ぐことを目的としたものもあります。

グローバル・レポーティング・イニシアティブ（GRI）などの基準は、デジタルエージェンシーがこれらの新しい義務を果たすのに役立つ不可欠なフレームワークを提供します。法律は何をしなければならないかを指示し、基準はコンプライアンスのためのロードマップを提供し、ベストプラクティスはコンプライアンスが効果的かつ倫理的に達成されることを保証すると考えると役立つかもしれません。

デジタル専門家は、製品やサービスを作成する前に、デジタルサステナビリティに適用される法律、基準、ベストプラクティスを調べ、製品が進化するにつれて（進化するコンプライアンスの状況に対応するために）あらゆる開発を監視する必要があります。

最初から持続可能な慣行を採用する利点は、単なるコンプライアンスを超えて広がります。優れた顧客体験と増大する環境への配慮の必要性によってますます推進される市場で競争上の優位性を提供し、既存の作業に後付けする必要がない場合に時間とコストの節約につながる可能性があります。このレポートが概説するように、持続可能性をビジネス戦略に統合することは、罰則を回避するだけでなく、急速に進化する状況で新しい機会をつかむことでもあります。

組織は、CO2排出量を報告し、デジタルサービスの排出量を削減するために何をしているかを説明できるように、ウェブページのフッターに/sustainabilityページを追加し始めています。

特定の規制と基準に関する詳細については、以下を参照してください。

ウェブサイトの環境への影響を評価する

ウェブサイトの環境への影響を評価することは、決して簡単な作業ではありません。通常、ホストするサーバーからアクセスするデバイスまで、その運用に関連するエネルギー消費と二酸化炭素排出量を評価することが含まれます。この評価では、ホスティングインフラの効率、ページ読み込み時のデータ転送量、データセンターによる再生可能エネルギーと非再生可能エネルギーの使用、ウェブサイトのコードとアセットの全体的な最適化など、さまざまな要素が考慮されます。画像、動画、その他の大きなファイルが重いウェブサイトは、読み込みと送信に多くのエネルギーを必要とし、二酸化炭素排出量の増加に貢献します。これらの要素を理解し、最適化することで、ウェブサイトの所有者はデジタルの二酸化炭素排出量を削減し、より持続可能なウェブに貢献し、環境への影響を最小限に抑えることができます。

システムのすべての部分を正確に測定し、全体的な合計をうまく計算できるツールはまだ利用できないことを心に留めておくことが非常に重要です。したがって、チームが作業するシステムの分離された部分や、特定の入力に基づいて推定を行うことができるモデルの使用に対するリソースを測定できます。現在、多くのさまざまなウェブサイトの炭素計算機で使用されており、改善が進められている1つのモデルは、サステナブルウェブデザインモデルです。このモデルは、現在出回っている他のモデルと同様に、推定するのに少し物議を醸す方法になる可能性があります。しかし、それはしばらくの間存在しており、時間の経過とともに比較を可能にし、この複雑なプロセスを簡素化することで、より良い理解と、うまくいけば問題自体の認識につながります。

通常、CO2について話しますが、eqCO2またはCO2eについて話す方がより正確です。これはCO2排出量に相当する値ですが、むしろすべての種類の温室効果ガス（GHG）に適用されます。また、影響の移転（たとえば、GHG排出量を削減することが水の消費に悪影響を及ぼす場合）や「カーボンニュートラル」などの議論の余地のある主張を避けるために、他の環境への影響も考慮する必要があります（たとえば、ライフサイクルアセスメントの場合のように）。

詳細については、以下を参照してください。

環境への影響評価に関する簡単な注記

昨年のクエリは、新しいデータ構造を反映するように更新されました。ほとんどの場合、結果に実質的な違いはありませんでした。

CO2排出量計算の更新は、グローバルページ、SSG、CMS、およびeコマースの排出量計算に反映されています。サステナブルウェブデザインモデルに基づいた排出量計算のバージョン4モデルに計算を更新しました。

主な違い：

  • 世界の炭素強度は442g/kWhから494g/kWhに変わりました。
  • 以前は、訪問あたりのウェブサイトのCO2は、ページ重量（GB単位で転送されたデータ）を考慮した「単純な」方程式であり、1GBを読み込むための推定エネルギー使用量（0.81）を乗算し、それに炭素強度を乗算していました。
  • 更新された式では、データセンター、ネットワーク、およびユーザーデバイスによって消費されるエネルギーによるエネルギー消費をセグメント化して、より深い洞察を得ています。
  • 各システムセグメントは、さらに2つのカテゴリに分類されます。運用排出量と具体化排出量です。
    • 運用: セグメント内のデバイスの使用に起因する排出量。
    • 具体化: セグメント内のデバイスの生産に起因する排出量。
  • 各セグメントには、総排出量への推定貢献度を反映する計算で特定の重みが割り当てられます。たとえば、各セグメントには、運用と具体化されたエネルギー消費の両方について推定炭素強度があります。
  • 最終的に、これにより各セグメントについてこれを推定し、合計を合計して総推定排出量を得ることができます。

ページ重量

サステナブルウェブデザインモデルは、データ転送を代理として使用します。この入力が正確な炭素排出量の推定値を提供するかどうかについては議論の余地がありますが、長年にわたるウェブサイトの肥大化が問題の一因となっていることは明らかです。より多くのデータは、それを保存するためにより多くのサーバー、それを配信するためにより多くのエネルギー、そしてエンドユーザーの画面に表示するためにより多くの処理能力を必要とします。長年にわたり、目に見える上昇傾向があったので、2024年のそのデータを見てみましょう。

ページ重量。
図15.1. ページ重量。

ページ重量は、ウェブページにアクセスするために転送されるデータの量を表します（HTTPリクエストのみに基づく）。この指標は、すべてのユーザーにとって高速な読み込みと優れたユーザーエクスペリエンスを確保するために、できるだけ低く保つことが推奨されます。90パーセンタイルでは、平均的なモバイルサイトの重量は約7.2MBですが、デスクトップサイトは約8MBです。良いニュースは、これらの数値が2022年のAlmanacの数値よりもわずかに低いことです。悪いニュースは、これらの数値が依然として高すぎることです。サステナビリティについて話すとき、私たちは通常、インクルージョンに触れます。そして、大多数のインターネットユーザーがページにアクセスでき、まともなユーザーエクスペリエンスを得られるようにするには、ページ重量を1MB未満、理想的には約500KBに保つべきです。

また、これらの数値はいわゆるラボテストから得られたものであり、ページは実際のユーザーではなくスクリプトを介してアクセスされたことを強調することも重要です。最近の多くのウェブサイトでは、遅延読み込み戦略（画像やiframeのネイティブ遅延読み込み、動的コンポーネントのプログレッシブハイドレーションなど、必要になったときにアセットを要求して読み込む）を実装しているほか、ユーザーが同意すると追加のスクリプトを読み込んで処理するため（そしてスクリプトにはユーザーインタラクションのエミュレーションは含まれていません）、平均ページ重量はさらに大きな数値になるはずです。

詳細については、以下を参照してください。

コンテンツタイプ別の重量

平均的なページの重さが約8MBであることを示すデータから、次に論理的な疑問は、それらのキロバイトがどこから来ているのかということです。現代のページは、HTML、CSS、JSなどの基本的な構成要素や、視覚的な表現を向上させるためのフォントや画像など、多くの異なる部分で構成されています。

タイプ別のキロバイト。
図15.2. タイプ別のキロバイト。
パーセンタイル別、タイプ別キロバイト（モバイル）。
図15.3. パーセンタイル別、タイプ別キロバイト（モバイル）。

収集されたデータの90パーセンタイルから、ページ全体の重量の半分以上を占める最大の割合が画像に属していることは明らかです。これはかなり予想された結果であり、小さな最適化が最大のインパクトを与えることができる部分の1つです。少し驚くべきことであり、心配なのは、画像だけでなくすべてのタイプで、デスクトップとモバイルの数値の間にまだ非常に小さなギャップがあることです。これは、モバイルファーストが15年以上前にコンセプトになったにもかかわらず、ほとんどのチームがまだモバイルネットワーク、電話プラン、および小さな画面（通常は小さな画像で十分）の制限を考慮してモバイルサイトを最適化していないことを示しています。結局のところ、モバイルフレンドリーに見えるかもしれませんが、エクスペリエンスはそうではありません。

2番目に大きい部分がJavaScriptコードであることも驚くことではありません。最新のフレームワーク、依存関係、パッケージ、およびレガシーコードは、簡単に大量のJavaScriptコードを蓄積します。最大の問題は、スクリプト処理がCPUからもっとも多くの電力を必要とし、もっとも多くのエネルギーを消費するページ読み込みの一部であることです。また、セキュリティも懸念事項であるべきです。詳細については、セキュリティの章を確認してください。

画像やJavaScriptと比較して、CSSの重さはそれほど大きくは見えません。しかし、この章の後半で取り上げる重要な問題は、このコード（CSSとJSの両方）が実際にどれだけ使用されているかということです。これらの考慮事項に加えて、そのようなコードの処理コスト（CPU/メモリ使用量）も考慮する必要があります。

フォントファイルのサイズは、一般的なカスタムフォントファイルが200KBを超えることがあることを考えると、妥当に見えるかもしれません。しかし、このサイズは、サイトのコンテンツに必要な文字のみにフォントファイルをサブセット化することで大幅に削減できます。英語のみの文字のサブセットを持つ中央値のフォントファイルは、12KB程度であるべきです。これは元の200KBの6%であり、1MB未満の見栄えの良いページに近づけることができます。

このトピックの詳細については、フォントとページ重量の章を参照してください。

詳細については、以下を参照してください。

炭素排出量

上記のように、2022年には、ページ重量に基づいて炭素排出量を推定するためにサステナブルウェブデザイン（SWD）モデルを使用しました。何度も説明したように、これは不正確ですが、常に改善されています。そのため、モデルの新しいバージョンが最近公開されました。これは結果にかなりの影響を与えるため、2024年のデータに進む前に2022年のデータから排出量を再計算することにしました。 どちらの場合も、100パーセンタイルのデータは除外します。これはある種の「最悪のシナリオ」であり、他のパーセンタイルをはるかに上回っているため、図が見にくくなります。

2022年の排出量

SWDモデルのV4に基づくと、排出量のグローバルな結果は次のようになります。

2022年のパーセンタイル別炭素排出量（g）。
図15.4. 2022年のパーセンタイル別炭素排出量（g）。

2022年のサステナビリティの章の結果を見ると、これらの新しい推定値がわずかに低いことに気づくでしょう。これが私たちがそれらを再計算した理由です。そうでなければ、2022年から2024年の間にウェブページからの排出量が大幅に減少したと考えるように導かれたかもしれません（ネタバレ：そうではありません）。これを念頭に置いて、2024年のデータを見ることができます。

2024年の排出量

SWD V4モデルに基づくと、2024年のウェブページの炭素排出量は次のとおりです。

2024年のパーセンタイル別炭素排出量（g）。
図15.5. 2024年のパーセンタイル別炭素排出量（g）。

結果は2022年のものとかなり似ていますが、炭素排出量がわずかに増加していることに気づきます。これは75パーセンタイルと90パーセンタイルでさらに顕著です。これは、すべての炭素排出量を削減することに集中すべきであるため、悪いニュースです。ページ重量が長年にわたって世界的に増加傾向にあるため、これは驚くことではありません。これについての詳細は、ページ重量の章を参照してください。サステナビリティの章の目標は、まさにこの点について意識を高め、物事を改善するための推奨事項を提供することです。

また、モバイルとデスクトップを区別して、さまざまなリソース（HTML/JS/CSS/画像/フォント）の排出量の割合を見ることもできます。

2024年のタイプ別パーセンタイル別排出量（デスクトップ）。
図15.6. 2024年のタイプ別パーセンタイル別排出量（デスクトップ）。
2024年のタイプ別パーセンタイル別排出量（モバイル）。
図15.7. 2024年のタイプ別パーセンタイル別排出量（モバイル）。

これは2022年に見つかったものとかなり似ており、同じ結論につながります。しかし、画像は通常、JSやCSSよりも処理が簡単であるという事実を主張すべきです。ここでは、JSは転送データに関して主要な違反者ですが、通常、メモリ、CPU、GPUにかなり影響を与え、それがSWDモデルではまだ考慮されていない追加の環境への影響につながります。たとえば、より多くのCPU/GPU/メモリを要求すると、スマートフォンのバッテリー放電に影響を与え、バッテリーやデバイスを予想よりも早く交換せざるを得なくなり、古いデバイスでのウェブサイトのパフォーマンスが低下する可能性があります。

いくつかの「メタ」な考察

この章を書いている途中で、チームの誰かが、HTTP Archiveの毎月のクロールに関連する総炭素排出量はどのくらいになるのだろうかと考えました。毎月、ウェブの状態を監視するために何百万ものウェブページからデータが収集されます。たとえば、Web Almanacはこのデータに基づいています。 方法論についてもっと知る。

HTTP Archiveからの他のレポートを読む。

2024年のWeb Almanacのために収集されたデータに対してクエリを実行したところ、転送されたデータの総量は約201.66TBであることがわかりました。SWDモデルを使用すると、これは27.7T CO2に相当します。これは、CO2コンバーターに基づくと、熱機関車が127,298km走行する（地球を3回以上周回する）か、323台のスマートフォンを製造するのと同じくらいの炭素排出量です。 このクロールが毎月行われることを考えると、事態はさらに悪化します。

しかし、次のことも心に留めておく必要があります。

  • これは、更新されたデータを持つための必要性です。
  • これらのページの中には、毎月何百万もの訪問を集めるものもあります。
  • それは、これらの影響を減らす方法を考えることを妨げるものではありません（そして、それがすぐに考慮されることを願っています）。

さらに進む

多くの人がサステナビリティを主に（または純粋に）炭素（GHG）排出量の削減に焦点を当てたタスクであると想定していますが、デジタルサステナビリティの考慮事項は、最初に現れるほど単純ではありません。サステナビリティを測定する方法はいくつかあり、考慮しなければならないさまざまなリソースタイプがありますが、結果の計算に影響を与える可能性のあるさまざまな変数もあります。

炭素排出量は、最終的にはアクションの処理（画面にレンダリングされるオブジェクトの数や、このアクティビティに必要なCPU、GPU、RAMのエネルギー強度など）を通じて消費されるエネルギー（電力）の量を通じて測定できます。そのため、より簡単に計算でき、有益な場合は削減できます。しかし、インターネットインフラやウェブに接続されたデバイスによって消費される他の天然資源もあります。たとえば、水（機器の冷却用）、材料や化学物質（印刷など）、電子廃棄物（古いデバイスの廃棄）などです。これらの問題の持続可能性への影響も、製品やサービスのライフサイクルチェーンで考慮する必要があります。

詳細については、以下を参照してください。

リクエスト数

リクエストは、ページを読み込むためにファイルが必要になるたびに生成され、ページのネットワークやサーバーへの影響に関する洞察を提供します。環境への影響を計算するためにも使用されます。これらのリクエストを分析することで、最適化の機会を発見できます。これは、さまざまな種類のアセットや外部リクエストを調査する際に価値があります。

リクエスト数を最小限に抑えることが不可欠です。最初に25という上限を設定することは前向きな一歩ですが、トラッカーや同様の要素が存在するため、この目標を達成するのはしばしば困難です。

パーセンタイル別のリクエスト数。
図15.8. パーセンタイル別のリクエスト数。

抽出されたデータから、リクエスト数はモバイルページとデスクトップページでかなり似ていることがわかりますが、これは理想的ではありません。モバイルネットワークとプランの制限を尊重するために、モバイルで読み込まれるリソースが少なくなり、リクエスト数が少なくなるのが望ましいです。 リクエストの量は一般的にかなり高いので、これらのリクエストがどのリソースを呼び出しているかを見てみましょう。

パーセンタイルおよびリソースタイプ別のリクエスト数（モバイル）。
図15.9. パーセンタイルおよびリソースタイプ別のリクエスト数（モバイル）。

ここで、あまり良くない驚きは、リクエストのほとんど、90パーセンタイルで約70件がJSファイルを取得しており、次に50件以上が画像を取得していることです。このパターンはすべてのパーセンタイルで繰り返されていることがわかります。これは非常に興味深いです。なぜなら、2022年のレポートでは、画像を取得するリクエストの数がJSを取得するリクエストの数よりも大きかったからです。次の質問は、リクエスト数の変化が取得されたアセットのサイズにも影響を与えるかどうかです。それでは、それを確認してみましょう。

パーセンタイル別、タイプ別キロバイト（モバイル）。
図15.10. パーセンタイル別、タイプ別キロバイト（モバイル）。

取得された画像のサイズは、90パーセンタイルで取得されたJavaScriptのサイズのほぼ2倍であるため、「古い」パターンはまだ存在します。これは、サイトが読み込む画像の数は少ないが、わずかに重く、一般的にJavaScriptが多くなっているという結論につながります。これは、より多くの処理能力が必要になり、古いデバイスを持つユーザーがサイトにアクセスできなくなる可能性があるため、良い傾向ではありません。

詳細については、以下を参照してください。

より持続可能なホスティング

二酸化炭素排出量を削減するもっとも簡単な方法の1つは、持続可能なホスティングプロバイダーを選択することです。この世界をナビゲートするのは非常に難しい場合があります。なぜなら、排出物は常に何らかの形で存在するため、どのプロバイダーも真に100%カーボンニュートラルになることはないからです。しかし、機器の電力供給方法、ハードウェアの保守方法、廃棄物と冗長性の処理方法は、生成される排出量に大きな影響を与える可能性があります。したがって、適切なサプライヤーを選択することは、生成する排出量を軽減する能力にかなりの影響を与える可能性があります。

持続可能なホストの最も重要な特徴の1つは、エネルギー要件をどのように取得するかです。ホストは、通常の電力会社から電力供給を受ける場合があります。電力会社は、（場所によっては）石炭やガスからエネルギーのかなりの部分を生成します。太陽光、風力、潮力、その他の自然源からエネルギー要件を生成するホスティングプロバイダーを持つことは、地球にとってより有益です。

考慮すべき他の要因は、ホスティングプロバイダーが機器をどのように冷却するかです。多くのホストは水冷を必要とします（そして、淡水が貴重な限られた資源である場合、これは問題になる可能性があります）。たとえば、より寒い気候で自然冷却を使用するサプライヤーが好ましい場合があります。

エネルギー要件（PUE、WUE、CUE）や、使用しているエネルギー量（CPU、GPU、RAM）をアクティブかつログベースで監視できるホストは、ホスティングを拡張して無駄を減らすのに役立ちます。ホストが使い捨て文化ではなく、機器を回収、リサイクル、アップサイクルする場合、これは電子廃棄物を削減できます（機器をできるだけ長く保持する場合も同様です）。

サーバー側での排出量の補償は複雑な作業になる可能性があり、ホスティングプロバイダーとの透明性も少し地雷原になる可能性がありますが、プロバイダーは徐々に持続可能性を意識するようになり、二酸化炭素排出量を削減するのに役立つ専門プロバイダーがいるため、製品やサービスをより環境に優しい場所に収容するための措置を講じることは比較的簡単です。

詳細については、以下を参照してください。

HTTP Archiveにリストされているサイトのうち、グリーンホスティングで実行されているサイトはいくつありますか？

組織や個人が「より環境に優しい」ホスティングを選択するのを支援するために、グリーンウェブ財団は、「グリーン」基準に一致するプロバイダーのデータセットを維持しています。リストは定期的に拡大および更新されているため、この指標を追跡するのは簡単ではありませんが、現在の状態を見てみましょう。

% グリーンホスティング。
図15.11. % グリーンホスティング。

HTTP Archiveのモバイルサイトのわずか14%、デスクトップサイトはそれよりわずかに多いサイトが「グリーンホスティング」プロバイダーを使用してホストされていることがわかります。これは2022年の10%からわずかに増加していますが、この分野の進歩が非常に遅く、ウェブサイトの所有者に「より環境に優しい」ホスティングへの切り替えを奨励することと、より多くのプロバイダーが「より環境に優しい」ホスティングを提供することの両面で、まだ長い道のりがあることを示しています。

上位ランクのサイトには大きな違いがあり、上位10000にランク付けされたサイトの55%がグリーンホストされていると見なされていることを示しています。この数字は、上位10000にランク付けされたサイトで48%だった2022年からわずかに良いジャンプをしています。これは良いことのように聞こえるかもしれませんが、AmazonやGoogleなどの多くの大手ホスティングプロバイダーが「グリーン」と見なされているという事実に簡単に起因する可能性があります。

ウェブサイトの環境への影響を削減する

ウェブサイトの環境への影響を理解することは第一歩にすぎません。行動が重要です。ウェブサイトのフットプリント、とくに未使用のコードとフォントの使用に関する最新の洞察により、緩和のためのより的を絞った効果的な戦略を探求できるようになりました。この知識を具体的で持続可能なウェブプラクティスに変換する方法を調べてみましょう。

詳細については、以下を参照してください。

無駄を避ける

無駄を避けることは、ウェブサイトの環境への影響を減らすためのもっとも効果的な方法の1つです。

  • 不要なコンテンツとコードを最小限に抑える：多くのウェブサイトには、依然として余分な機能とコンテンツが含まれています。各ページ要素の必要性を批判的に評価してください。私たちの分析によると、未使用のCSSとJavaScriptは、依然としてページの肥大化の主な原因です。未使用のコードと不要なスクリプトを徹底的に排除してください。
  • 処理効率を最適化する：JavaScriptは、依然としてユーザーデバイスのエネルギー消費の大きな原因です。私たちのデータは、JavaScriptの使用量が増加するという懸念すべき傾向を明らかにしています。可能な限り、より軽量な代替手段を選択するか、その機能が本当に必要かどうかを検討してください。静的なHTMLとCSSは、多くの場合、十分であり、リソースの消費量もはるかに少なくなります。
  • 軽量なアセットを優先する：テキストは依然としてもっとも環境に優しいコンテンツタイプですが、私たちのフォント分析によると、タイポグラフィでさえ無駄に貢献する可能性があります。可能な場合はデフォルトのシステムフォントを選択し、カスタムフォントを使用する場合は、その配信を最適化してください。画像や動画の場合は、圧縮されていること、必要な場合にのみ読み込まれることを確認してください。
  • 長寿命とアクセシビリティのために設計する：古いデバイスや低速接続でもうまく機能するウェブサイトを作成してください。このアプローチは、環境への影響を減らすだけでなく、アクセシビリティも向上させます。古いテクノロジーをサポートすることで、デバイスの寿命を延ばすことを奨励します。これは、デジタルの環境フットプリントを減らすためのもっとも影響力のある方法の1つです。
  • スマートな読み込み戦略を実装する：遅延読み込み、コード分割、条件付き読み込みなどの手法を使用して、アセットが必要な場合にのみ配信されるようにします。このアプローチは、不要なデータ転送と処理を大幅に削減できます。

未使用のアセットの読み込み

ページの現在のビューを表示するために不可欠なアセットのみを読み込む必要があります。これは、遅延読み込み、クリティカルCSSの抽出、インタラクション時のインポートや可視性時のインポートなどのパターンなどの手法によって実現できます。また、とくに画像やフォントなどのアセットを、各クライアントデバイスに適したサイズで読み込むことも重要です。このセクションでは、主に未使用のコードを最小限に抑え、フォントの読み込みを最適化することに焦点を当てます。なぜなら、私たちのデータによると、これらは依然として不要なページ重量の大きな原因であるためです。

詳細については、以下を参照してください。

フォント

最適な持続可能性のためには、システムフォントが最良の選択であり、追加のダウンロードは必要ありません。カスタムフォントが必要な場合は、環境への影響を最小限に抑えるために次の戦略を検討してください。

  • 優れた圧縮と幅広いサポートのためにWOFF2形式を使用します。
  • 複数のフォントファイルを1つの多用途なファイルに置き換えるために、可変フォントを実装します。
  • サブセットを使用するか、subfontなどのツールを使用することも良いでしょう。
  • カスタムフォントの場合は、分析ツールを使用して不要なグリフや機能を削除します。
  • サードパーティのフォントサービスを使用する場合は、その最適化オプションを活用しますが、より良い制御のためにセルフホスティングを検討してください。

追加のフォントの太さやスタイルはそれぞれペイロードを増加させることを忘れないでください。美的ニーズと持続可能性の目標のバランスを取ります。アイコンには、より良い効率とアクセシビリティのためにアイコンフォントの代わりにスカラーベクターグラフィックス（SVG）を検討してください。

タイポグラフィに慎重に取り組むことで、データ転送とエネルギー消費を削減しながら、視覚的に魅力的なウェブサイトを作成できます。

詳細については、専用のフォントの章を参照し、最新のウェブフォント最適化の実践について最新情報を入手してください。

詳細については、以下を参照してください。

未使用のCSS

過剰なコードの環境への影響は、単なる非効率性を超えて広がります。それは、サーバーとユーザーデバイスの両方でエネルギー消費の増加と二酸化炭素排出量の増加に直接つながります。CSSフレームワークは開発効率を向上させますが、多くの場合、大量の未使用のスタイルを導入します。この肥大化は、ページの読み込み時間に影響を与えるだけでなく、データ転送と処理要件を不必要に増加させます。世界的なインターネット利用が拡大し続ける時代において、この過剰なコードがエネルギー消費に与える累積的な影響は重大です。

最新の開発ツールにより、未使用のCSSを特定して排除することがよりアクセスしやすくなりました。Chrome DevToolsのカバレッジ分析などの機能は、スタイルシートをトリミングするための強力な分析を提供します。しかし、キャッシュ目的ですべてのCSSを事前に読み込むという慣行は、微妙な課題を提示します。これにより、サーバーリクエストが減り、リピーターのパフォーマンスが向上する可能性がありますが、ページの読み込みの初期の炭素コストが増加する可能性があります。

ウェブアプリケーションが複雑になるにつれて、包括的なスタイリングと持続可能な慣行のバランスを取ることがますます重要になります。未使用のCSSは、初期読み込みが遅くなることでユーザーエクスペリエンスに影響を与えるだけでなく、レンダリングと処理におけるエネルギー使用量の増加にも貢献します。未使用のCSSに対処することは、開発者がデジタルエコシステムの環境への影響を減らすために実行できる具体的なステップとして際立っています。

未使用のCSS。
図15.12. 未使用のCSS。

2022年と2024年のデータを比較すると、いくつかの微妙な変化が見られます。10パーセンタイルは変更されておらず、不要なCSSが読み込まれていないことは良い兆候ですが、残りの他のパーセンタイルでは未使用のCSSがわずかに増加しています。

これらの変化は小さいものの、CSSフットプリントがわずかに大きくなるという一般的な傾向を示唆しています。これは、ウェブアプリケーションの複雑化、より機能豊富なCSSフレームワークの採用、または高度なスタイリングやアニメーションのためのCSSの使用の増加に起因する可能性があります。データによると、90パーセンタイルまでに、ウェブサイトは依然として200KBを超える未使用のCSSを読み込んでいます。これは、パフォーマンスと持続可能性の両方に影響を与える可能性のある、かなりの量の不要なデータ転送と処理を表しています。

これらのわずかな増加にもかかわらず、全体像は2022年から劇的に変化していません。これは、CSSの使用を最適化するためのいくつかの努力があったものの、とくにパーセンタイルの高いウェブサイトでは、まだかなりの改善の余地があることを示唆しています。

詳細については、以下を参照してください。

未使用のJavaScript

未使用のJavaScriptは、サーバーとユーザーデバイスの両方のエネルギー消費と二酸化炭素排出量に大きな影響を与えます。JavaScriptフレームワークは開発効率を向上させますが、多くの場合、未使用のコードを大量に導入し、ページの読み込み時間に影響を与え、データ転送を不必要に増加させます。

ツリーシェイキングやコード分割などの最新のテクニックは、JavaScriptを最適化するために不可欠です。次の手順は、未使用のJavaScriptを減らすのに役立つ可能性がもっとも高いです。

  • ツリーシェイキングは、最終的なバンドルからデッドコードを排除し、とくにES6モジュールで効果的です。
  • コード分割は、コードをより小さなチャンクに分割し、現在の機能に必要なものだけを読み込みます。
  • JavaScriptライブラリとフレームワークを慎重に評価します。
  • 定期的にコード監査とリファクタリングを行い、バンドルサイズを小さくします。
未使用のJS。
図15.13. 未使用のJS。

2022年と2024年のデータを比較すると、すべてのパーセンタイルで大幅な増加が見られます。

90パーセンタイルまでに、ウェブサイトはデスクトップで900KB以上、モバイルで800KB以上の未使用のJavaScriptを読み込むようになり、パフォーマンスと持続可能性に大きな影響を与えています。10パーセンタイルで0KBの値が消えたことは、もっとも最適化されたサイトでさえ、現在では未使用のJavaScriptが含まれていることを示しています。

2022年から2024年の間に未使用のJavaScriptが大幅に増加したことは、ウェブ開発コミュニティがパフォーマンスと持続可能性を向上させるためにこれらの最適化技術を採用する必要性が急務であることを強調しています。

詳細については、以下を参照してください。

その他の技術的な最適化

さまざまなリソースタイプにはさまざまなエネルギー強度レベルがあり、製品やサービスに何を含めるかを選択する際には、これを考慮に入れる必要があります。HTMLやCSS [PDF]などの構文言語はかなり単純ですが、各コンポーネントを画面にレンダリングする必要があり（排出物を生成します）、排出物を生成します。

CSSには、アニメーションやトランジションなど、追加の排出物を発生させる可能性のある（再描画による）単純な状態ベースのインタラクションという追加の複雑さがあります。JavaScriptはより技術的な言語であり、ビルドの複雑さが増すにつれて蓄積される可能性のあるレンダリング要件もあります。また、クライアント側とサーバー側の両方で使用でき、ページとの対話中に（状態を管理する能力により）影響を与える可能性があります。

すべてのサーバーサイド言語（PHPなど）も、リソース使用率とエネルギー効率[PDF]に影響を与えます（パフォーマンスに基づく）。画像やメディアも画面上で処理する必要があり、そのサイズと品質のためにかなり影響力がある可能性があります。

コンテンツを最適化する

ウェブサイトの環境への影響、とくに未使用のCSS、JavaScript、フォントの使用に焦点を当てて検討したので、次は最適化に注意を向けましょう。不要なコンテンツや機能を削除することは依然として重要ですが、今年は残っているものの効率の重要性を強調しています。

このセクションでは、不可欠なコンテンツをできるだけ持続可能にする方法を探ります。ウェブサイトの環境フットプリントに大きく貢献する要素である画像、動画、アニメーション、フォントの最適化について詳しく説明します。これらのコンポーネントを微調整することで、ユーザーエクスペリエンスを損なうことなくリソース消費を大幅に削減できます。

詳細については、以下を参照してください。

モバイルファーストデザイン

モバイルファーストのアプローチを採用することは、ユーザーエクスペリエンスを向上させるだけでなく、持続可能性にも大きなメリットをもたらします。モバイルデバイス向けの必須コンテンツと機能を優先することで、自然と、すべてのプラットフォームでエネルギーと帯域幅の消費が少ない、よりスリムで効率的なウェブサイトを作成できます。

このアプローチは、開発者が各要素の必要性を批判的に評価することを奨励し、データ転送と処理要件の削減につながります。ただし、これにより、サイトの複数のデバイス固有のバージョンが作成され、全体的なリソース消費が増加する可能性があることを確認することが重要です。

慎重に実装すれば、モバイルファーストデザインは、読み込み時間の短縮、エネルギー消費の削減、デジタルプレゼンスの二酸化炭素排出量の削減につながる可能性があります。未使用のコードを最小限に抑え、アセットを最適化するなど、他の持続可能性の実践ともよく一致します。

モバイルファーストがウェブサイトのパフォーマンスにどのように影響するかについての詳細な洞察については、パフォーマンスの章を参照してください。

詳細については、以下を参照してください。

画像の最適化

画像は、依然としてウェブページの重量とエネルギー消費の大きな原因です。

画像の最適化は、持続可能性に大きなメリットをもたらします。 データ転送を削減し、データセンターとネットワークインフラストラクチャのエネルギー使用量を削減します。 ユーザーデバイスの処理要件を減らし、エネルギー消費を削減する可能性があります。 読み込み時間を短縮し、ユーザーの待機時間と関連するエネルギー消費を削減する可能性があります。

画像最適化を実装する際は、ファイルサイズの削減と必要な品質の維持のバランスを取ります。最新のフォーマット、レスポンシブ読み込み技術、適切な圧縮レベルを活用してください。画像最適化戦略のパフォーマンスへの影響と技術的な実装の詳細については、パフォーマンスの章を参照してください。

詳細については、以下を参照してください。

フォーマット（WebP/AVIF）

最新の画像フォーマットの採用は、ウェブの持続可能性において依然として重要な要素です。WebPは、その優れた圧縮率と幅広いブラウザサポートにより、画像の最適化において頼りになるフォーマットであり続けています。一方、AVIFは、多くの場合、さらに優れた圧縮率を提供するため、注目を集めています。 これらのフォーマットの使用が2022年から2024年にかけてどのように変化したかを見てみましょう。

画像フォーマットの採用、2年間の変化。
図15.14. 画像フォーマットの採用、2年間の変化。

このデータは、画像フォーマット採用の進化する状況を示しています。WebPは大幅に成長し、使用量が34%増加しました。AVIFは386%という驚異的な増加を示していますが、デスクトップクライアントでのAVIFフォーマットの使用はわずか1.40%、モバイルクライアントでは1.05%であるため、誤解を招く可能性があります。JPEGなどの従来のフォーマットは減少傾向にあり、PNGとGIFの使用は比較的安定しています。2024年の現在の統計は、私たちがどこにいるのかをより明確に示しています。

画像フォーマットの採用。
図15.15. 画像フォーマットの採用。

明確な利点にもかかわらず、多くのウェブサイトはまだこれらの最新のフォーマットを完全に採用していません。ページ重量を削減し、読み込み時間を改善する可能性は依然として大きいです。最適な持続可能性のために：

  1. 主要なフォーマットとしてWebPを使用し、古いブラウザにはJPEGまたはPNGにフォールバックします。
  2. それをサポートするブラウザにはAVIFを実装することを検討してください（フォールバック付き）。多くの場合、優れた圧縮を提供します。
  3. アイコンや単純なグラフィックには、最適化されたSVGが最良の選択です。HTTPリクエストを減らすために、頻繁に使用されるSVGをHTMLに直接インライン化することを検討してください。
  4. JPEG/WebPの場合は、80〜85%の品質を目指します。目視検査に基づいて調整します。
  5. srcsetとsizes属性を使用して、適切な画像サイズを提供します。
  6. 重要でない画像を遅延読み込みします。スクロールしなければ見えない場所にある画像にはloading="lazy"（ネイティブHTML属性）を使用します。
  7. メタデータを削除します。不要なEXIFデータを削除してファイルサイズを削減します（これにより、潜在的なプライバシーの問題も回避できます）。
  8. ブラウザの機能に基づいてもっとも効率的なフォーマットを提供するために、コンテンツネゴシエーション戦略を実装します。
  9. 新しい技術が登場するにつれて、定期的に画像を確認し、再最適化します。

これらのフォーマットを採用することでデータ転送と処理要件を大幅に削減できますが、圧縮と必要な画質の維持のバランスを取ることが重要であることを忘れないでください。過度の圧縮は、ユーザーエクスペリエンスの低下と再アップロードの可能性につながり、持続可能性の利点の一部を打ち消す可能性があります。

これらのフォーマットの実装とパフォーマンスへの影響に関する詳細については、パフォーマンスの章を参照してください。

レスポンシブ性、サイズ、品質

ウェブにアクセスするデバイスの多様性が増え続けるにつれて、適切にサイズ設定された画像を提供することは、パフォーマンスと持続可能性の両方にとって依然として重要です。レスポンシブ画像技術により、各シナリオに最適化された画像を提供でき、不要なデータ転送と処理を削減できます。 画質は必ずしも最大である必要はないことを覚えておく価値があります。

レスポンシブ画像の種類。
図15.16. レスポンシブ画像の種類。

データは、レスポンシブ画像技術の採用における心強い進歩を示しています。

  1. srcset属性の全体的な使用率は、2022年の約33〜34%から2024年にはデスクトップとモバイルの両方で42%に大幅に増加しました。
  2. 画像選択をより正確に制御できるsizes属性付きのsrcsetの使用も、約25〜26%から32%に増加しました。
  3. sizesなしのsrcsetの使用がわずかに増加しています。これは理想的ではありませんが、それでもいくつかのレスポンシブ性の利点を提供します。
  4. <picture>要素の使用は、デスクトップとモバイルの両方で8%から約9.3%にわずかに増加しました。

この傾向は、レスポンシブ画像の重要性に対する開発者の意識の高まりを示しています。しかし、現在、ウェブサイトの半分未満しかこれらの技術を利用していないため、まだかなりの改善の余地があります。

持続可能性のために画像を最適化するには：

  1. srcsetとsizes属性を実装して、さまざまなビューポートサイズに適したサイズの画像を提供します。
  2. <picture>要素を使用してアートディレクションを行い、WebPやAVIFなどの最新のフォーマットを適切なフォールバックとともに提供します。
  3. 画質を最適化し、目立った画質低下なしにサイズを削減できるスイートスポットを目指します。
  4. ビルドプロセスに自動化ツールを実装して、レスポンシブ画像を生成および最適化することを検討してください。

傾向は前向きですが、レスポンシブ画像が普及するまでにはまだ長い道のりがあります。ウェブ専門家として、私たちはより持続可能でパフォーマンスの高いウェブサイトを作成するために、これらの技術を提唱し、実装し続けるべきです。より詳細な実装戦略とパフォーマンスへの影響については、パフォーマンスの章とメディアの章を参照してください。

遅延読み込み

遅延読み込みは、ウェブ開発におけるパフォーマンスと持続可能性の両方を向上させるための重要なテクニックであり続けています。画像を段階的に読み込むことで、初期ページの読み込み時間と不要なデータ転送を大幅に削減できます。このアプローチは、ユーザーが決して見ない可能性のある画像の読み込みを防ぎ、エネルギーとリソースを節約するため、とくに持続可能性に有益です。

<img>でのloading=lazyの採用。
図15.17. <img>でのloading=lazyの採用。

過去2年間のデータは、最適化された画像読み込みの重要性に対する意識の高まりを反映しています。しかし、ウェブサイトのかなりの部分がまだ何らかの形の遅延読み込みを実装していないため、まだかなりの改善の余地があります。iframeに関しては、アドバイスはほとんど変わっていません。

  1. ネイティブの遅延読み込みはiframeに適用でき、画像と同様の利点を提供します。
  2. しかし、最適な持続可能性のためには、可能な場合はiframeを完全に避けることを検討してください。iframeの使用は、過度に使用されたり、埋め込みコンテンツが制御または最適化されていない場合（たとえば、サードパーティのトラッカーや広告）、不要なリソース消費につながる可能性があります。
  3. ファサードパターンは、埋め込み動画やインタラクティブマップなどの外部コンテンツを統合するための推奨されるアプローチであり続けています。

より深い洞察と分析については、パフォーマンスの章とメディアの章を参照してください。

画像を効率的にエンコードする

画像エンコーディングは、ウェブの持続可能性において重要な役割を果たし、ネットワークを介して転送されるデータの量と、その過程で消費されるエネルギーに直接影響します。効率的なエンコーディングは、ウェブページの総サイズの大部分を占めることが多い画像のサイズを縮小します。このデータ転送の削減は、データセンター、ネットワークインフラストラクチャ、およびユーザーデバイスのエネルギー消費の削減につながります。さらに、小さく、適切にエンコードされた画像は、デコードしてレンダリングするために必要な処理能力が少なくなります。

何十億ものウェブページにわたる効率的な画像エンコーディングの累積的な効果は、世界的なエネルギーの大幅な節約につながる可能性があります。

動画

動画は、ウェブサイト上で最もリソースを消費する要素の1つであり、持続可能性に大きな影響を与えます。詳細については、メディアの章を参照してください。サードパーティの動画を組み込む場合は、ファサードを利用することが依然として推奨されるアプローチです。

さらに、動画を慎重に設定してください。

  1. 不要なデータ転送を減らすために、プリロードと自動再生を避けてください。
  2. スクロールしなければ見えない場所にある動画には遅延読み込みを実装してください。
  3. 適切な圧縮技術を使用して、品質を損なうことなくファイルサイズを削減してください。
  4. さまざまなネットワーク状況に対応するために、アダプティブビットレートストリーミングの使用を検討してください。

動画配信の最適化はすべて、ファイルサイズが大きいため、大幅な省エネにつながる可能性があることを忘れないでください。動画の品質と持続可能性の目標のバランスを取ることが、魅力的でありながら環境に配慮したウェブ体験を作成するための鍵です。

詳細については、以下を参照してください。

プリロード

動画を自動的にプリロードすることは、ウェブの持続可能性にとって懸念事項です。この慣行には、すべてのユーザーにとって有用ではない可能性のあるデータを取得することが含まれ、とくにトラフィック量の多いページでは、不要なデータ転送とエネルギー消費につながる可能性があります。持続可能性の観点から、プリロードは理想的には避けるべきか、ユーザーの操作によってのみ開始されるべきです。

動画のプリロードの使用状況。
図15.18. 動画のプリロードの使用状況。

2022年と2024年のプリロード属性の使用状況を比較すると、いくつかの変化が見られます。プリロードを使用していないウェブサイトの割合は、デスクトップで58%から55%に、モバイルで60%から56%にわずかに減少しました。この変化は、プリロード属性の使用がわずかに増加したことを示唆しており、持続可能性に影響を与える可能性があります。

プリロード属性には、none、auto、metadata（デフォルト）の3つの有効な値しかないことを覚えておくことが重要です。値なしまたは不正な値でプリロード属性を使用すると、「metadata」と解釈される可能性があり、メタデータを取得するために動画の最大3%を読み込む可能性があります。持続可能性の観点から、「none」がもっとも環境に優しいオプションであり続けます。

「metadata」の使用がわずかに増加し、プリロードの不使用が減少したことは、ウェブの持続可能性を高めるために、動画のプリロードの実践にもっと注意を払う必要があることを示唆しています。

このトピックの詳細については、Steve Soudersの2013年の記事と、動画のプリロード戦略に関するweb.devの2017年の記事を参照してください。

自動再生

自動再生を取り巻く考慮事項は、持続可能性の観点から引き続き重要です。動画を自動再生すると、ユーザーが表示に興味がない可能性のあるコンテンツのデータとエネルギーが消費され、不要なリソースの使用につながる可能性があります。

自動再生属性はプリロード設定を上書きできることに注意することが重要です。なぜなら、自動再生は当然、動画コンテンツの読み込みを必要とするからです。この強制的な読み込みは、データ消費とエネルギー使用にさらに影響を与えます。

動画の自動再生の使用状況。
図15.19. 動画の自動再生の使用状況。

2022年と2024年の自動再生の使用状況を比較すると、いくつかの注目すべき変化が見られます。自動再生を明示的に使用していないウェブサイトの割合は、デスクトップで53%から45%に、モバイルで53%から45%に減少しました。これは、持続可能性への取り組みにとって懸念事項となる可能性があります。また、この属性に空の値を使用するウェブサイトがわずかに増加していることに気づきます。これも自動再生をトリガーし（持続可能性には悪影響です）、持続可能性には悪影響です。

自動再生はブール属性であり、その存在は、空の値であっても、自動再生動作をトリガーすることを覚えておくことが重要です。明示的な自動再生の使用（autoplay、TRUE、その他の値を含む）の合計割合は、デスクトップとモバイルの両方で約8%で比較的安定しています。

持続可能性への影響を考えると、潜在的な自動再生の使用（空の値による）が増加する傾向は懸念されます。開発者は、意図的でなくても、自動再生属性を含めることに注意する必要があります。なぜなら、不要なデータ消費とエネルギー使用につながる可能性があるからです。持続可能性の観点から、不要なデータ転送と処理を減らすために、ほとんどの場合、自動再生を避けることが推奨される慣行であり続けます。

アニメーション

アニメーションは、ウェブデザインにおいて依然として両刃の剣です。ユーザーエクスペリエンスを向上させることができますが、アクセシビリティ（詳細はアクセシビリティの章を参照）と持続可能性の両方に課題をもたらします。

持続可能性の観点から、アニメーションはリソースを大量に消費する可能性があります。

  • バッテリー消費とCPU/GPU使用量を増加させ、とくにモバイルデバイスではデバイスの寿命を縮める可能性があります。
  • アニメーションは多くの場合、追加のコードを必要とし、レンダリングを遅らせ、ページ重量を増加させる可能性があります。
  • 最適化が不十分なアニメーションは、不要な再描画やリフローにつながり、デバイスのリソースをさらに圧迫する可能性があります。

非合成アニメーションに関する最近のデータは、ウェブサイト全体でのその使用状況に関する洞察を提供します。

ページごとの非合成アニメーション。
図15.20. ページごとの非合成アニメーション。

このデータは次のことを明らかにしています。

  • 少なくとも50%のウェブサイトは非合成アニメーションを使用していません。これは持続可能性の観点から前向きです。
  • より高いパーセンタイルでは使用量が大幅に増加しており、90パーセンタイルではデスクトップで12、モバイルで11のアニメーションが示されています。このジャンプは、ウェブページのアクセシビリティ、パフォーマンス、持続可能性に深刻な影響を与える可能性があります。

カルーセルの事例は依然として議論の的です。ユーザー、開発者、デザイナーはそれを軽蔑する傾向がありますが、組織はそれに固執しています。

カルーセルの使用に反対する議論については、以下をご覧ください。

デザインにアニメーションが必要な場合：

  • 可能な場合はCSSアニメーションを使用してください。一般的にJavaScriptベースのアニメーションよりもパフォーマンスが高いためです。
  • prefers-reduced-motionメディアクエリを使用して、動きを減らすというユーザーの好みを尊重することを検討してください。
  • ページ読み込み時にすぐに見えないアニメーションを遅延読み込みします。

詳細については、以下を参照してください。

ファビコンとエラーページ

ファビコンとエラーページは、ウェブサイトのパフォーマンスと持続可能性において、微妙ながらも重要な役割を果たし続けています。

主な考慮事項は次のとおりです。

  • 不要な404リクエストを防ぐために、常にファビコンを含めてください。
  • 繰り返しのリクエストを減らすために、ファビコンが適切にキャッシュされていることを確認してください。
  • 404ページのHTMLをできるだけ軽量になるように最適化してください。
  • ユーザーが探しているコンテンツを見つけられるように、リダイレクトを適切に設定してください。
  • 存在しないページを閲覧すると404ページが表示されるはずですが、存在しないリソースを読み込むと、（一部のサーバーの場合のように）404 HTMLページ全体ではなく、テキストメッセージが返されるべきです。また、リンク切れを探す必要があります。

最適なファビコンの持続可能性のために：

  1. SVG：理想的な選択肢です。SVGは軽量でスケーラブルであり、複数のサイズを必要としないため、データ転送とストレージのニーズを大幅に削減します。
  2. 最適化されたPNG：適切に最適化されたPNG（ベースディレクトリにapple-touch-icon.pngという名前のiOS用の180x180ピクセル）は、ファイルサイズと幅広い互換性の間の良い妥協点になる可能性があります。SVGが提供されていない場合、ブラウザはこれを（使用されている場合はメタタグに基づいて）探すため、ファイル名と場所の要件に注意してください。
  3. 互換性のためにサイズ32x32と16x16のfavicon.ico（古いブラウザはベースディレクトリ内でこれを探すため、ファイルがあるとエラーが減ります）。 これらのフォーマットは、適切に実装されると、データ転送を最小限に抑え、ストレージ要件を削減し、ウェブエコシステム全体のエネルギー消費を削減します。常に、選択したフォーマットが最高の持続可能性への影響のために適切に最適化されていることを確認してください。
ファビコンの使用状況。
図15.21. ファビコンの使用状況。

2024年のデータを2021年のデータ（2021年のマークアップの章以来ファビコンのデータがなかったため）と比較すると、2021年から2024年にかけての変化は、より持続可能なファビコンの実践に向けた前向きな傾向を示していると言えます。ICOからPNG、SVG、WebPなどのより効率的なフォーマットへの移行は、ファイルサイズとパフォーマンスへの影響に対する意識の向上を示唆しています。また、欠落しているアイコンの減少は、細部への注意の向上を示しており、不要なサーバーリクエストを削減しています。最後に、SVGとWebPの使用の増加は、まだ小さいものの、より持続可能でスケーラブルなフォーマットへの移行を表しています。

とくにSVGやWebPなどの高効率フォーマットのさらなる採用にはまだ改善の余地がありますが、全体的な傾向は、開発者がファビコンのような小さな要素でさえ、持続可能性への影響をますます考慮していることを示唆しています。

詳細については、以下を参照してください。

外部コンテンツの最適化

ウェブ開発の強みの1つは、フレームワークやライブラリからサードパーティのウィジェットやメディアまで、外部コンテンツを簡単に統合できることです。しかし、この利便性は、必要性と効率性の考慮事項を上書きすべきではありません。外部コンテンツの環境への影響は2つあります。コンテンツの転送と処理の即時コスト、および定期的な更新と継続的な接続からの継続的なエネルギー消費です。

追加を検討する各外部要素について、評価してください。

  • エネルギーフットプリント：運用エネルギー（転送、処理）と具体化エネルギー（ストレージ、インフラストラクチャ）の両方のコストを考慮します。
  • リソースの必要性：より軽量でエネルギー効率の高いソリューションで機能を実現できませんか？
  • キャッシュ効率：リソースはどのくらいの頻度で更新する必要があり、より長いキャッシュ時間は繰り返しの転送を減らすことができますか？
  • ネットワークへの影響：このリソースは永続的な接続を維持する必要がありますか、それとも頻繁なバックグラウンドリクエストをトリガーしますか？

サードパーティ

サードパーティのリクエストはウェブ上のリクエストの大部分を占めるため、それらが「グリーン」なホストから来ていることを確認することは興味深いことです。2022年には、サードパーティのリクエストの91%が「グリーン」なホストから来ていると推定しました。2024年現在、それはなんと97%にまで上昇しています！

% グリーンなサードパーティリクエスト。
図15.22. % グリーンなサードパーティリクエスト。

これは本当に素晴らしいニュースのように聞こえますが、これはいくぶん偏っていることを心に留めておくべきです。ほとんどのサードパーティは、サーバーが「グリーン」と見なされているGoogleから発信されています。より一般的には、多くのクラウドプロバイダーは「グリーン」と見なされていますが、グリーンホスティングのセクションで説明したように、真実はもう少し複雑かもしれません。

これらすべてについての詳細は、今年のサードパーティの章をご覧ください。

サードパーティのリソースは、現代のウェブ機能に不可欠であることが多い一方で、ウェブサイトの持続可能性とパフォーマンスに大きな影響を与える可能性があります。スクリプトからスタイルシートまで、これらの外部アセットは、ページ重量を増加させ、パフォーマンスのボトルネックを生み出す可能性があります。これらの要因はすべて、より高いデータ転送とエネルギー消費に貢献します。

より持続可能なウェブサイトを作成するには、サードパーティの使用状況を定期的に監査し、最適化することが重要です。このプロセスには、不要なサービスを削除することが含まれる場合があります。

GoogleのLighthouseなどのツールは、サードパーティのコードがサイトのパフォーマンスに与える影響に関する貴重な洞察を提供します。Lighthouseのサードパーティ使用状況監査は、外部リソースがページの読み込み時間と全体的なパフォーマンスにどのように影響するかを特定するのに役立ちます。

サードパーティのリソースを慎重に管理することで、必要な機能とウェブサイトの効率のバランスを取ることができます。このアプローチは、ユーザーエクスペリエンスを向上させるだけでなく、より持続可能なウェブエコシステムにも貢献します。

サードパーティのリクエストをより持続可能にする

サードパーティのリクエストをより持続可能にするには、開発の初期段階から戦略的なアプローチが必要です。特定のサービスをアウトソーシングすることで開発時間と冗長性を削減できる可能性がありますが、各サードパーティコンポーネントの生態学的影響を厳密に評価することが重要です。

可能な限り、埋め込みサードパーティサービスよりもセルフホストコンテンツを優先してください。このアプローチにより、パフォーマンスと排出量をより細かく制御できます。避けられないサードパーティコンテンツについては、「インタラクション時にインポート」パターンを使用して「クリックして読み込む」遅延画面を実装してください。このテクニックは、初期ページの読み込みと不要なデータ転送を大幅に削減します。

ライブラリやフレームワークを評価する際は、同じ目標をより少ないオーバーヘッドで達成できるパフォーマンスの高い代替手段を選択し、そのようなツールを使用しないことも選択肢の1つであることを念頭に置いてください（たとえば、バニラJSに固執するなど）。サードパーティのホストされたソリューションに頼るのではなく、独自のクリック可能なアイコンやウィジェットを作成することを検討してください。

サードパーティの統合を慎重に管理し、ユーザーの好みを優先することで、機能性とユーザーエクスペリエンスを維持しながら、デジタル製品の生態学的フットプリントを大幅に削減できます。これは通常、パフォーマンス、セキュリティ、プライバシー、アクセシビリティにも有益です。

詳細については、以下を参照してください。

サードパーティの使用状況の分析と最適化に関する詳細については、Chromeデベロッパーのドキュメントを参照してください。

技術的な最適化の実装

歴史的に、ウェブパフォーマンスは効率に貢献する多くの推奨事項を導入し、それによって持続可能性を向上させてきました。また、時には質素さを奨励することもあります。しかし、環境への影響に悪影響を及ぼす可能性のある（または少なくともいくつかの議論と慎重な検討が必要な）パフォーマンスの推奨事項がまだいくつかあります。たとえば、CDNは注意して扱う必要があり（以下の専用セクションを参照）、プリロードや予測読み込みは、決して使用されないリソースを読み込む結果になる可能性があるため、避けるべきです。

JavaScript

JavaScriptは、ウェブの成長において重要な言語であり、動的でインタラクティブな体験を可能にしてきました。しかし、最適化されていない場合、パフォーマンスとエネルギー消費にも影響を与える可能性があります。いくつかの簡単な勝利に焦点を当てましょう。実装が簡単で、持続可能性に優れた最適化です。これらの調整は、機能を犠牲にすることなく、サイトの効率を大幅に向上させることができます。JavaScriptの長所と短所について詳しく知りたい場合は、包括的なJavaScriptの章をご覧ください。

ミニフィケーション、ツリーシェイキング、コード分割

ミニフィケーション、ツリーシェイキング、コード分割によるJavaScriptの最適化は、ウェブサイトのパフォーマンスと持続可能性を向上させるために依然として重要です。これらの最適化技術に焦点を当てることで、データ転送を大幅に削減し、読み込み時間を改善し、最終的にウェブブラウジングに関連するエネルギー消費を削減できます。サイトごとのわずかな節約でも、何十億ものページビューにわたって累積的な利益につながる可能性があることを忘れないでください。

未圧縮のJavascriptの節約。
図15.23. 未圧縮のJavascriptの節約。

2022年と比較して、これらの数値は、より高いパーセンタイルで潜在的な節約がわずかに増加していることを示しており、一部のウェブサイトがより多くの未圧縮コードを蓄積していることを示しています。

多くのサイトが効果的にJavaScriptを縮小していますが、とくに大規模なサイトでは、依然としてかなりの節約の可能性があります。

開発者として、私たちはアプリとウェブサイトをより持続可能にすることができます。

  • ツリーシェイキングを実装してデッドコードを排除します。これにより、ミニフィケーションを超えて追加の節約がもたらされる可能性があります。
  • コード分割を使用してJavaScriptをオンデマンドで読み込み、初期ペイロードサイズを削減します。

JavaScriptの長所と短所について詳しく知りたい場合は、包括的なJavaScriptの章をご覧ください。

詳細については、以下を参照してください。

CSS

カスケーディングスタイルシート（CSS）も、インターネットの人気が高まる上で重要な機能でした。ページやアプリに文体的な装飾を加える機能は、コンテンツや機能に独自の視覚的な魅力を与えます。しかし、ウェブの視覚的な複雑さは、持続可能な製品やサービスを提供する上で課題をもたらします。

ウェブパフォーマンスは、あまりにも多くのページの再描画やCPUへの重い負担がクライアント側でエネルギーを消費する可能性があるため、重要な役割を果たします。CSSはまた、資産の読み込みを不必要にトリガーしたり、物理的なオブジェクト（印刷）に変換された場合に重要な材料資源を浪費したりするのを避けるために、消費されているフォームを最大限に活用する方法など、要因を考慮する必要があります。

JavaScriptセクションでおなじみのいくつかの簡単な勝利に焦点を当てて、機能を犠牲にすることなくコードの効率を向上させるのに役立てましょう。

ミニフィケーション

JavaScriptのミニフィケーションは一般的な慣行ですが（この章で前述）、得られるデータ節約のために、CSSファイルなどの他の静的テキストアセットをミニファイすることの価値を認識することも重要です。IDE内のツールは、このプロセスを自動化および合理化して効率を高めるのに役立ちます。

未圧縮のCSSの節約。
図15.24. 未圧縮のCSSの節約。

2022年と比較して、これらの数値は潜在的な節約がわずかに減少していることを示しており、CSSのミニフィケーションの実践がわずかに改善されたか、より効率的なCSSオーサリングへの移行の可能性を示唆しています。2022年以降の潜在的なCSSの節約の減少は進歩を示していますが、さらなる最適化が可能です。

開発者として、私たちはアプリとウェブサイトをより持続可能にすることができます。

  • 未使用のスタイルを排除するのに役立つCSSモジュールのアプローチを使用することを検討してください。
  • 重要なCSS技術を実装して、不可欠なスタイルをインライン化し、重要でないCSSの読み込みを遅延させます。

詳細については、以下を参照してください。

印刷スタイルシート

物理的な文書の影響を減らすことは非常に重要です。なぜなら、単回使用のアイテムは材料資源（紙やインクなど）を使用するだけでなく、アイテムが適切にリサイクルされない、またはその生産が持続可能な供給源から来ていない可能性があるというリスクが伴うからです。したがって、私たちはそのようなアイテムの作成を貴重な商品として扱い、過剰な廃棄物を減らすために必要以上に生産しないようにしなければなりません。

@media printと@page at-ruleを使用した印刷に適したスタイルシートを持つことで、印刷されたページで最終製品がどのように表示されるかに文体的に影響を与えるスタイルを定義できます。これにより、コンテンツをページにより良く収まるように整理し、デジタルから印刷にうまく移行しないコンテンツ（ナビゲーションなど）を削除し、必要に応じて追加情報（たとえば、リンクと一緒にURL）を含めることができます。

印刷に適したスタイルシートを作成するときは、カラーまたはモノクロ出力に対するユーザーの好み、プリンタートレイで使用される用紙の色、印刷用に提供される用紙のサイズ、および用紙の向き（印刷に存在する一種のレスポンシブデザイン）を考慮してください。

詳細については、以下を参照してください。

ユーザー設定（ダークモード）

訪問者はウェブサイトを閲覧する独自の方法を持っており、もっとも一般的な好みの1つは「ライトオンまたはオフ」、つまりダークモードの使用です。これは表面的には視覚的または文体的な選択のように見えるかもしれませんが、この選択にはいくつかの持続可能性とアクセシビリティの考慮事項があります。

持続可能性の利点に入る前に、一部の人々にとってダークモードの使用は読みやすさを向上させることができますが、乱視を持つ人々の引き金として機能することで他の人々に悪影響を与える可能性があることを簡単に説明する価値があります。したがって、ダークモードのような機能のオンとオフを切り替える機能が訪問者に利用可能であり、ユーザーの好み（OSまたはブラウザ上）が考慮されることが重要です。

ダークモード自体は、薄暗いピクセル（黒と低彩度色）の使用により、OLED画面での持続可能性に真の利点をもたらす可能性があります。研究によると、そのようなデバイスではエネルギー使用量の削減はさまざまですが、真の違いをもたらします（そして、画面はハンドヘルドデバイスの主要なエネルギーエミッターであるため、これは重要です）。

CSSで利用できる他のいくつかのユーザー設定メディアクエリがあり、（使用法によっては）訪問者に持続可能性の利点をもたらす可能性があります。たとえば、モノクロ（単一のカートリッジタイプへのデフォルト印刷）、prefers-reduced-motion（プロセッサを多用するアニメーション効果を減らす）、および今後のprefers-reduced-data（低帯域幅デバイスを中心に設計できる）などです。

詳細については、以下を参照してください。

HTMLに直接コードをできるだけ含めない

JavaScriptとCSSをHTMLに直接インライン化する慣行は、HTMLファイルを肥大化させ、全体的なパフォーマンスと持続可能性、そしてセキュリティに悪影響を与える可能性があります。この問題は、コンテンツ管理システム（CMS）で構築されたウェブサイトや、クリティカルCSSメソッドを実装しているウェブサイトでとくに蔓延しています。

この章の前半でも触れましたが、関心の分離（HTML、CSS、JavaScript）の重要性は、過小評価できません。CSSは、JavaScriptのようにレンダリングをブロックするアセットを遅延または非同期で読み込むことはできませんが（JavaScript自体に依存しない限り）、それでもそのようなアセットをキャッシュできるという同じ重要な利点を保持しています。そうすることで、大規模なCSSスタイルのライブラリを再ダウンロードすることなく、多くのページで再利用できます。

詳細については、以下を参照してください。

スタイルの使用状況。
図15.25. スタイルの使用状況。

今年のデータを2022年のデータと比較すると、次のことがわかります。

  1. インラインスタイルシートの使用の増加：
    • デスクトップ：2022年の25%から2024年には31%に。
    • モバイル：2022年の25%から2024年には32%に。
  2. 外部スタイルシートの使用の対応する減少：
    • デスクトップ：2022年の75%から2024年には69%に。
    • モバイル：2022年の75%から2024年には68%に。

この傾向は、とくにモバイルデバイスで、CSSのインライン化への明確な移行を示しています。このアプローチはHTTPリクエストを減らすことで初期レンダリング時間を改善できますが、課題も提示します。

  • HTMLファイルサイズの増加、初期ページの読み込みを遅くする可能性があります。
  • インラインスタイルはHTMLとは別にキャッシュできないため、キャッシュ効率が低下します。
  • 複数のページにわたる冗長なコードの可能性があります。 最終的に、クリティカルCSSをインライン化することで初期レンダリング時間を短縮できる可能性がありますが、それ以上インライン化しないように注意する必要があります。なぜなら、まったく逆の効果をもたらし、初期レンダリングを遅らせる可能性があるからです。

廃止されたコード

急速に進化するウェブ開発の状況において、廃止されたコードは、ウェブサイトの持続可能性フットプリントに大きな影響を与える可能性のある、見過ごされがちな非効率性の原因です。

廃止されたコードとは、コードベースに残っている不要、時代遅れ、または冗長なコードを指します。これには次のものが含まれます。

  • 非推奨のJavaScriptおよびCSS機能。
  • 古いブラウザ用のポリフィル。
  • サイトの以前のイテレーションからの未使用の関数またはスタイル。
  • 廃止された機能をサポートするレガシーコード。

持続可能性の観点から、廃止されたコードはいくつかの理由で問題があります。

  1. ファイルサイズの増加：廃止されたコードはJavaScriptとCSSファイルを肥大化させ、ファイルサイズが大きくなります。これにより、データ転送が増加し、送信と処理の両方でより多くのエネルギーが消費されます。
  2. 不要な処理：ブラウザは、使用されていなくても、廃止されたコードを解析して実行する必要があります。これにより、追加のCPUサイクルが消費され、その結果、ユーザーデバイスでより多くのエネルギーが消費されます。
  3. メンテナンスのオーバーヘッド：廃止されたコードは、コードベースの保守を困難にし、非効率的な回避策やさらなるコードの肥大化につながる可能性があります。
  4. セキュリティ：廃止されたコードは、ユーザーを危険にさらす可能性のある既知のセキュリティ問題を持つ可能性がはるかに高くなります。

詳細については、以下を参照してください。

CDN

コンテンツ配信ネットワーク（CDN）は、ウェブパフォーマンスを最適化し、ひいてはウェブアプリケーションの持続可能性を向上させる上で重要な役割を果たします。コンテンツを複数の地理的に分散したサーバーに配信することで、CDNはデータが移動する必要のある距離を短縮し、読み込み時間を短縮し、エネルギー消費を削減します。

ウェブでのCDNの使用状況。
図15.26. ウェブでのCDNの使用状況。

このデータを2022年のデータと比較すると、いくつかの注目すべき傾向が見られます。

  • CDN採用の増加：CDNを使用していないウェブサイトの割合は、デスクトップで69.7%から66.88%に、モバイルで71.2%から67.20%に減少しました。これは、CDNの利点に対する認識の高まりを示しています。
  • Cloudflareの成長：Cloudflareは、デスクトップで16.9%から18.28%に、モバイルで15.1%から18.16%に市場シェアを拡大し、主要なCDNプロバイダーとしての地位を固めました。
  • Googleの拡大：GoogleのCDN使用量は大幅に増加し、デスクトップで5.2%から7.40%に、モバイルで6.5%から7.95%に上昇しました。
  • 市場の変化：Fastlyの使用量はわずかに減少しましたが、Amazon CloudFrontはその地位を維持しています。Vercelなどの新しいプレーヤーがトップ10に入り、ダイナミックで進化するCDN市場を示しています。

持続可能性の観点から、CDNの採用の増加は前向きな傾向です。

  • データ移動の削減：地理的に近い場所からコンテンツを提供することで、CDNはデータが移動する必要のある距離を最小限に抑え、ネットワーク全体のエネルギー消費を削減します。
  • キャッシュの改善：CDNは多くの場合、高度なキャッシュメカニズムを提供し、繰り返しのデータ転送とサーバー処理の必要性を減らします。
  • 負荷分散：トラフィックを複数のサーバーに分散することで、CDNはサーバーの過負荷を防ぎ、トラフィックの急増時のエネルギー消費を削減する可能性があります。
  • エッジコンピューティング：多くの最新のCDNはエッジコンピューティング機能を提供しており、エンドユーザーに近い場所でデータ処理を可能にし、エネルギー消費をさらに削減できます。

CDNについて詳しく知りたい場合は、包括的なCDNの章をご覧ください。

詳細については、以下を参照してください。

テキスト圧縮

テキスト圧縮は、送信されるデータのサイズを削減するための重要なテクニックであり、ウェブサイトのパフォーマンスと持続可能性の両方を向上させる上で重要な役割を果たします。HTML、CSS、JavaScriptなどのテキストベースのリソースをネットワーク経由で送信する前に圧縮することで、データ転送を大幅に削減し、その結果、エネルギー消費を削減できます。

一般的なテキスト圧縮方法には次のものがあります。

  • Gzip：広くサポートされており、ほとんどのテキストベースのコンテンツに効果的で、通常60〜80%の圧縮率を達成します。
  • Brotli：Gzipよりも優れたパフォーマンスを発揮することが多い新しいアルゴリズムで、とくに小さなファイルの場合、Gzipよりも15〜25%の圧縮改善の可能性があります。
  • Zopfli：より良い圧縮率を達成できるGzip互換のアルゴリズムですが、圧縮時間が長くなるという犠牲を払って、静的コンテンツに適しています。
  • Zstandard（zstd）も、圧縮とデコードの両方で優れたパフォーマンスを示す真剣な競争相手です。

これについての詳細は、Paul Calvanoのこの記事をご覧ください。

テキストリソースで使用される圧縮。
図15.27. テキストリソースで使用される圧縮。

データによると、ウェブサイトの半数以上が何らかの形のテキスト圧縮を使用しておらず、デスクトップサイトの53.47%とモバイルサイトの51.38%が非圧縮コンテンツを送信しています。これは、データ転送を削減し、その結果、エネルギー消費を削減するための大きな機会を逃していることを表しています。

圧縮を使用しているサイトの中では、GzipがBrotliよりもわずかに普及しており、デスクトップサイトの24.05%とモバイルサイトの24.65%で使用されています。Brotliは、優れた圧縮能力にもかかわらず、デスクトップサイトの21.59%とモバイルサイトの23.03%で使用されています。

テキスト圧縮はデータ転送量を大幅に削減できることを考えると、普及が進んでいないことは、ウェブのエネルギー効率を高めるための大きな機会を表しています。圧縮、とくにBrotliなどのより効率的なアルゴリズムの使用を奨励することは、データセンターのエネルギー使用量、ネットワークトラフィック、およびクライアント側の処理要件の有意義な削減につながる可能性があります。

より持続可能なウェブに向けて動くにつれて、テキスト圧縮は、デジタルの二酸化炭素排出量を削減するための比較的に簡単でありながら非常に効果的な方法を提供する、最適化ツールキットの重要なツールであり続けます。

詳細については、以下を参照してください。

キャッシュ

キャッシュは、ウェブ最適化における重要なテクニックであり、持続可能性への取り組みに大きく貢献します。繰り返しのデータ転送とサーバー処理の必要性を減らすことで、キャッシュはウェブ運用に関連するエネルギー消費を最小限に抑える上で重要な役割を果たします。

持続可能性の観点から、効果的なキャッシュはいくつかの重要な利点を提供します。

  • データ転送の削減：リソースをユーザーの近くに保存することで、キャッシュはネットワークを介して送信されるデータの量を劇的に減少させます。これは、ウェブインフラストラクチャ全体のエネルギー消費の削減に直接つながります。
  • サーバー負荷の軽減：オリジンサーバーに到達するリクエストが少なくなることで、データセンターの全体的なエネルギー使用量を大幅に削減できます。
  • 累積的な環境への影響：頻繁にアクセスされるリソースの場合、エネルギー節約はキャッシュヒットごとに複合され、時間の経過とともに全体的な二酸化炭素排出量の大幅な削減につながる可能性があります。
キャッシュ制御ヘッダーの使用状況。
図15.28. キャッシュ制御ヘッダーの使用状況。

2022年から2024年にかけてのキャッシュヘッダーの使用状況を分析すると、キャッシュの実践に微妙な変化が見られます。

  • Cache-ControlとExpiresの両方のヘッダーの使用は、デスクトップで51%から48.08%に、モバイルで48.57%にわずかに減少しました。逆に、Cache-Controlのみの使用は、デスクトップで23%から26.65%に、モバイルで22%から25.92%に増加しました。
  • どちらのキャッシュヘッダーも使用していないサイトの割合は比較的安定しており、デスクトップで25%から24.89%にわずかに減少し、モバイルで26%から25.13%にわずかに減少しました。

これらの変化は控えめですが、Cache-Controlヘッダーのより集中的な使用への傾向を示しています。持続可能性の観点から、キャッシュヘッダーを使用していないウェブサイトの4分の1が持続していることは、リソース効率を改善し、不要なデータ転送を削減するための大きな機会を表しています。

Cache-Controlのみの使用への移行は、Cache-Controlがキャッシュ動作をよりきめ細かく制御できるため、最新のキャッシュのベストプラクティスに対する意識の高まりを示唆しています。しかし、キャッシュヘッダーの使用が全体的にわずかに減少していることは、より持続可能なウェブエコシステムを作成する上で効果的なキャッシュ戦略の重要性を強調する必要性が続いていることを示しています。

キャッシュ技術、実装戦略、パフォーマンスへの影響に関する詳細については、包括的なパフォーマンスの章を参照してください。

詳細については、以下を参照してください。

SEOとサステナビリティ

2024年の検索生成体験の出現は、検索エンジン最適化（SEO）に関する新たな持続可能性の懸念を浮き彫りにします。これらのAI対応検索を動かすためのエネルギーと水の要件は重要です。いくつかの推定によると、単一のAI搭載検索は、従来の検索よりも最大30倍多くのエネルギーを使用する可能性があります。

ほとんどのウェブサステナビリティの懸念と同様に、課題は量に正比例します。私たちは毎日何十億もの検索を行っています。さらに、検索生成体験は、誤解を招く、不正確、または虚偽の結果を生み出すことが知られています。これにより、何十億もの検索者がより正確な結果を生み出すためにクエリを再考し、再実行しなければならない場合、誤報のリスクと環境への影響が増加します。

さらに、現在、これらの機能の使用をオプトアウトする方法はありません。ウェブチームとデジタルマーケターは、AI検索機能を日常業務に組み込むことを余儀なくされています。

SEOの取り組みをより持続可能にするために、マーケターは次のような重要な問題にも取り組む必要があります。

  • AIやその他の新興技術は、検索キャンペーンをより効率的に実行するのに役立ちますか、それとも社会的および環境的な影響は単に努力に見合わないのでしょうか？
  • 組織のリソースと定められた気候目標によって課せられる制限と、一貫して優れたコンテンツを作成する必要性のバランスをどのように取るべきですか？
  • 私たちのコンテンツマーケティングの取り組みは、適切なオーディエンスに届き、より良い意思決定とより持続可能な選択をするのに役立っていますか？ 関連性を維持するために、古いまたは時代遅れのコンテンツをどうすべきですか？
  • 7年前、あるいは3年前の検索データや分析データを保持する必要がありますか？

これを念頭に置いて、検索マーケティングの取り組みに、より持続可能なSEO戦略を取り入れる7つの方法を次に示します。

  1. ターゲットとする人々とコミュニティに測定可能な利益を提供し、彼らが必要な情報を迅速かつ障壁なく見つけられるように支援します。
  2. E-E-A-T—経験、専門知識、権威性、信頼性—を活用して、検索マーケティングの取り組みにおいて量よりも質に焦点を当てます。
  3. 継続的な改善を通じて、現実的に測定および維持できる検索マーケティングプロセスを作成します。これらの取り組みに持続可能性の指標を含め、うまくいくことをより多く行い、うまくいかないことをより少なくします。
  4. 検索マーケティングが地球に与える影響を最小限に抑えるために、可能な限り悪影響を減らします。
  5. ウェブサステナビリティの取り組みと同様に、転送、収集、保存するデータの量を減らします。
  6. 適切に構造化されたメタデータは、潜在的な訪問者を教育するために使用できるウェブサイトに関する重要な情報を伝えることができます。多くのサイトでは、ユーザーが実際にドメインにアクセスしなくても、その目的を達成できます。
  7. 最後に、検索マーケティングの取り組みをW3Cウェブサステナビリティガイドライン（WSG）1.0、とくにSC 2.6、2.14、2.15、2.16、2.19、3.5、3.12、4.4と整合させます。

マーケティングに利害関係者の視点とニーズを含めることで、成功を再定義することが可能です。これにより、より伝統的な（しばしば搾取的な）成長のエンジンではなく、幸福のエンジンになります。これらの取り組みの一環として、検索プラットフォームが気候危機を悪化させる上での自らの役割について所有権と行動を取ることも必要です。

持続可能なデータとコンテンツ管理

テックプラットフォームのビジネスモデルは、多くの場合、顧客が時間の経過とともにデータ使用量を増やすことに依存しています。マーケティング戦略の一環として、プラットフォームは、コンバージョン率の最適化、ドリップおよびマーケティングオートメーションキャンペーン、通知、その他の手段を通じて、顧客にアップグレードしてより大きなデータプランを購入するように促します。魅力を高めるために、彼らは定期的に大量のデータを比較的に低コストで提供します。

残念ながら、これはずさんなデータ慣行を奨励し、データは重要でない、またはデータ主導の未来の利点と比較して重要でないという神話を広めます。しかし、現実は別の話です。

たとえば、データセンター業界—現在約1,253億5,000万ドルと評価されています—は、現在から2030年までの間に年率10%で成長すると予想されています。残念ながら、データセンターは、騒音や大気汚染、電子廃棄物、排出量とエネルギー使用量の増加、水の使用、その他の影響など、さまざまな生態学的問題を引き起こします。この点において、人工知能の急速な台頭はとくに問題です。

さらに、収集されたデータの最大90%が3か月後には使用されなくなります。このデータのほとんどは、適切に処分されることはありません。さらに、不十分なデータガバナンスは、不平等、プライバシー、セキュリティのリスクも引き起こします。

これらすべてを念頭に置くと、低コストで大容量のデータソリューションに対する私たちの集合的な渇望が、重大な持続可能性の懸念を引き起こす理由が簡単にわかります。データと分析のリテラシーも多くの組織にとって戦略的な差別化要因であることが多いため、これは残念なことです。

デジタル製品やサービスを作成および管理する人々の間で、より持続可能なデータ慣行を標準にするために、組織はデータとの関係を再定義する必要があります。マーケターや製品チームにとって、これはデータガバナンスを改善し、作成、購読、またはその他の方法で維持する製品やサービス全体でコンテンツをより効果的に管理することで達成できます。毎年恒例のデジタルクリーンアップデーは、このトピックに関する意識を高める良い方法になる可能性があります。

データガバナンスと持続可能性

データの持続可能性には、効果的な長期的なガバナンス戦略が必要です。優れたデータガバナンスは、組織のチームや部門全体でデジタルガバナンスが機能するための鍵です。持続可能性の実践と連携して、これら2つの分野は、組織がウェブベースの製品やサービスを長期的に管理し、同時にデータの収集、管理、保護、処分の方法を改善するのに役立ちます。

データガバナンスを改善するための具体的な戦術は次のとおりです。

  1. 持続可能性の原則と継続的な改善に基づいた、長期的な組織のデータおよびデジタルガバナンス戦略を策定します。明確なKPIを定義し、時間の経過とともに進捗状況を測定します。
  2. 優れたガバナンスを推進するために、内部チームメンバーにデータサイエンスのトレーニングを実施します。組織内でデジタルおよびデータガバナンスを所有する専任のリーダーを任命します。
  3. 組織の持続可能性目標に沿ったデジタルサプライチェーンの戦略的パートナーを特定します。
  4. リスクと無駄を減らすために、データおよびデジタル製品とサービスを定期的に監査します。
  5. 情報を収集する前に再考し、収集する場合は、この情報をどのくらいの期間保持すべきかを文書化します。
  6. 最後に、データガバナンスの取り組みをW3Cウェブサステナビリティガイドライン（WSG）1.0、とくにSC：2.1、2.25、4.12、5.6、5.12、および5.20と整合させます。

より持続可能なコンテンツ管理

同様に、コンテンツマーケティングは、多くの組織にとってデータ収集を促進することがよくあります。ウェブフォーム、ランディングページ、ブログ投稿、ビデオチュートリアル、ソーシャルメディア投稿、その他の形式のコンテンツはすべて、組織のマーケティング、製品管理、コンテンツガバナンス、およびデジタルサステナビリティの取り組みにおいて重要な役割を果たします。

これは、チームが組織内でより持続可能なコンテンツ管理をサポートする機会を提供します。例は次のとおりです。

  1. コンテンツ戦略の取り組みを、特定の持続可能性目標とチームの能力に合わせます。
  2. 包括的な言語を使用し、5年生が理解しやすく、必要なだけ長く、短い段落、箇条書き、明確な見出しなどでざっと読めるようにフォーマットされた、アクセスしやすいコンテンツを公開します。
  3. 定期的にコンテンツ監査を実施して、コンテンツが時間の経過とともに利害関係者に価値を提供し続けることを確認します。このプロセスを使用して、必要に応じてコンテンツを編集、削除、追加、明確化、またはその他の方法で改訂します。
  4. 持続可能性を念頭に置いてコンテンツアセットを管理します。必要に応じてアセットを圧縮、タグ付け、再利用します。オーディオ、ビデオ、アニメーションなどの重いメディアアセットは、必要な場合にのみ使用します。また、デジタルアセット管理またはデザインシステムを使用して、ソースファイルやその他のアセットを整理します。
  5. ツールを定期的に監査して、チームがリソースに比例して必要な機能にアクセスできることを確認します。新しい機能やプロセスについてチームメンバーをトレーニングまたはスキルアップします。
  6. 最後に、コンテンツ管理の取り組みをW3Cウェブサステナビリティガイドライン（WSG）1.0、とくにSC：2.6、2.8、2.14、2.15、2.16、2.21、2.23、2.25、3.5、5.3、5.4、および5.12と整合させます。

人気のフレームワーク、プラットフォーム、CMS

オンラインプラットフォームとCMSツールは、個人や企業がコンテンツを公開したり、オンラインで商取引を行ったりするための障壁を大幅に低減します。さらに、開発フレームワークとサイトジェネレーターは、ウェブ開発者のプロジェクト開始を迅速化し、一般的な開発問題に対処する事前設定された構成とソリューションを提供します。これらのツールではパフォーマンスが考慮されることがよくありますが、サイトを実装する人にとっては、より大きなサーバーを入手する方がほとんどの場合安価です。

デジタルサステナビリティでは、スケーリングがもっとも重要です。1バイトは、単一のページであれば、持続可能性への影響はごくわずかです。そのバイトが100万を超えるサイトで読み込まれ、1日に何兆回もダウンロードされると、はるかに大きな影響を与えます。

付随のチャートは、上位5つのもっとも人気のあるeコマースプラットフォーム、CMSツール、サイトジェネレーターツール全体のページ重量の中央値を示しています。これらの比較は、私たちが使用するツールの集合的な影響を強調するためのものです。

CMS別の中央値kB。
図15.29. CMS別の中央値kB。

注目すべきは、すべてのレポートでモバイルページの重量の中央値が全体の2MBの中央値を上回っていることです。これらの値を2022年の中央値サイズと比較すると、各CMSで構築されたほとんどのウェブサイトが2年前よりも重くなっていることがわかります。これは、すべてのページのグローバルな排出量で気づいた傾向を確認するものです。より大きな成長はSquarespaceのウェブサイトのデスクトップであり、Drupalは依然として他よりも優れているように見えます（改善の余地はありますが）。

セグメント全体で興味深いもう1つの点は、デスクトップバージョンとモバイルバージョンのページサイズに顕著な違いがあることです。これは、多くの場合、モバイルプラットフォームでの画像最適化の強化に起因します。たとえば、CMSセグメント内では、WixとSquarespaceは、他の主要なプラットフォームと比較して、デスクトップバージョンとモバイルバージョンのページサイズに大きな不一致を示しています。

上記のように、炭素排出量を計算するために使用するモデルは2022年から2024年の間に変更されました。SWDモデルV4に基づいて、2024年のデータとより関連性の高い比較のために2022年のデータに基づいて排出量を再計算しました。両方を以下に示します。

CMS別の中央値排出量 - 2024年。
図15.30. CMS別の中央値排出量 - 2024年。

比較のために、SWD V4モデルで計算された2022年の排出量データを以下に示します。

CMS別の中央値排出量 - 2022年。
図15.31. CMS別の中央値排出量 - 2022年。

2024年のスキャンには、WordPressの約500万インスタンス、Wixの50万インスタンス、Squarespaceの25万インスタンス、Joomlaの25万インスタンス、Drupalの20万インスタンスが含まれていました。これは、これら5つのCMSの600万を超える一意のインスタンスです。したがって、このレポートを生成するだけでも、測定可能な気候への影響があります。

上記のグラフの排出量の中央値の平均は約0.3グラムの炭素です。700万のURLでこれらのクエリを実行すると、約2125kgのCO2が生成されます。これは、上位5つのCMSをサンプリングしただけです。これが、これらのウェブサイトの使用を通じて生成されるCO2のほんの一部にすぎないことはわかっています。

CMSおよびリソースタイプ別の中央値kB。
図15.32. CMSおよびリソースタイプ別の中央値kB。

注：リソースタイプを表示する図では、HTML+Javascript+CSS+画像+フォントのみを考慮し、ビデオ、オーディオ、一部の「未確認」のサードパーティサービスなどの他のリクエストは省略しています。

5つのCMSのうち、画像サイズが全体的に減少したのは良いことです。Squarespaceは依然として最大で、モバイルデバイスでの画像の平均は1.3Mbです。JavaScriptが一般的に増加しているのは残念です。Wixは現在、2024年に1.3Mbで最大のJavaScriptフットプリントを持っています。ほとんどのCMSでは、HTMLがもっとも小さいリソースタイプです。上記のグラフは、Wixがプラットフォームで大幅に積極的な画像最適化を実装しているように見えることを示しています。

CMSおよびリソースタイプ別の中央値排出量。
図15.33. CMSおよびリソースタイプ別の中央値排出量。

この情報をリソースタイプ間で分類すると、無駄がある場所も示されるため便利です。CO2の観点からは、シンプルで静的なHTML/CSSウェブサイトに勝るものはありません。私たちはウェブ上でより豊かで、よりインタラクティブで、視覚的なコンテンツを期待していますが、常にそうだったわけではありません。ウェブフォントがウェブの一部になったのは2009年になってからです。2024年には、カスタムフォントがCMSの実装の一部になっていることを見ると、それらはほとんど期待されています。サイトは少しユニークに見えるかもしれませんが、ウェブパフォーマンスと、もちろん持続可能性を犠牲にしています。

CMSはまた、質の高い仕事の定義をシフトさせる上で強い役割を果たしています。Wagtail CMSはこの分野のリーダーです。なぜなら、彼らは二酸化炭素排出量を削減することに焦点を当てたリリースを提供しているからです。WordPress、Drupal、Joomlaはすべて、いくつかの持続可能性への取り組みを行っています。これらのコミュニティは、良い製品と見なされるものに大きな影響を与える可能性があります。オープンウェブアライアンスのような組織を通じて、ベストプラクティスを実装するためのさらに大きな協力があるかもしれません。

eコマース別の中央値kB。
図15.34. eコマース別の中央値kB。
eコマース別の中央値排出量 - 2024年。
図15.35. eコマース別の中央値排出量 - 2024年。

比較のために、SWD V4モデルで計算された2022年の排出量データを以下に示します。

eコマース別の中央値排出量 - 2022年。
図15.36. eコマース別の中央値排出量 - 2022年。

eコマースプラットフォームを他のCMSプラットフォームと比較すると、ページ読み込みサイズと環境への影響が大幅に重いことは明らかです。これらの数値は主にホームページに関連しているため、より多くの製品や最適化されていないコンテンツが原因であると推測することしかできません。しかし、これはまだ改善の余地があることを示しています。

サステナブルeコマースハンドブックは、素晴らしい出発点になる可能性があります。いずれにせよ、eコマースの環境への影響のほとんどは、ウェブサイトの外で発生すること（たとえば、販売された製品の製造、輸送、使用、および寿命の終わり）を心に留めておく必要があります。

静的サイトジェネレーター別の中央値kB。
図15.37. 静的サイトジェネレーター別の中央値kB。
静的サイトジェネレーター別の中央値排出量 - 2024年。
図15.38. 静的サイトジェネレーター別の中央値排出量 - 2024年。

比較のために、SWD V4モデルで計算された2022年の排出量データを以下に示します。

静的サイトジェネレーター別の中央値排出量 - 2022年。
図15.39. 静的サイトジェネレーター別の中央値排出量 - 2022年。

サイトジェネレーターがビルドの一環として最適化を優先していることは明らかです。Astro、Hugo、Jekyllはすべて、分類されたすべてのCMSよりも排出量が大幅に低くなっています。

これらの洞察は、プラットフォームとフレームワークが持続可能なウェブ開発を促進する上で重要な役割を果たしていることを強調しています。効果的なデフォルトを設定することで、プラットフォームの作成者とフレームワークの開発者は、最初から環境に優しいウェブサイトの構築を可能にします。

これらの例外は、静的サイトジェネレーターのカテゴリに属し、とくにHugoとJekyllは、通常、ブログやテキストの多いコンテンツに焦点を当てたサイトをサポートし、JavaScriptの使用は最小限です。静的サイトジェネレーターは、パフォーマンス上の利点から選択されることも多く、標準的なCMS駆動のサイトの規範を超えた最適化の可能性が高いことを示唆しています。

詳細については、以下を参照してください。

結論

サステナビリティは急速に進化し、しっかりと確立された分野であり、ウェブ向けの製品やサービスを作成する人々にとって、ますます重要な位置を占めるようになるでしょう。アクセシビリティと同様に、法律は適合の必要性と、それが人々と地球の両方にもたらす利益を推進するのに役立っています。ウェブサイトやアプリケーションの作成方法、設計と開発の背後にある倫理的な決定、業界のベストプラクティスを考慮し、現実世界に影響を与える可能性のあるデジタルの変数に取り組むことで、私たち一人ひとりがサステナビリティの擁護者になることができます。

2022年の章から始めて、ウェブの持続可能性のために物事が非常に速く動いており、多くの課題に直面していることに気づきました。

  • 情報はますます増えており、追跡するのが難しくなる可能性があります。新しいリソースやツール、既存のものの更新などです。
  • 新興技術（メタバースは現れたのと同じくらい速く消え、AIはどこにでもある）に目を光らせることが不可欠であるように思われます。なぜなら、それらはすべて環境への影響（そしておそらく利益も）を持っているからです。解決策主義は増大するリスクです。
    • 独自のインパクトを考慮せずに気候変動と戦うためのデジタルソリューションを提供する。
    • デジタルの環境への影響を減らすための特効薬の提供。
  • グリーンウォッシングは、たとえ善意であっても、どこにでもあります。

結局のところ、技術的なベストプラクティスの採用は一般的に広まっていますが、排出量は依然として増加しています。効率は必須ですが、節度と質素さが進むべき道です。

あなたができること

持続可能なウェブサイトを作成するには、理解、計画、行動の組み合わせが必要です。課題は困難に思えるかもしれませんが、今日から持続可能性の旅を始めたり、進めたりするために実行できる実用的な手順は数多くあります。迅速な評価ツールから包括的なガイドラインまで、計画フレームワークから継続的な学習リソースまで、このセクションでは、有意義な進歩を遂げるのに役立つ主要なアプローチの概要を説明します。持続可能性は、すぐに完璧を達成することではなく、むしろ、環境への影響を集合的に削減する一貫した改善と情報に基づいた決定を行うことであることを忘れないでください。

クイックチェック

持続可能性の状況を迅速に評価するために実行できるもっとも簡単な手順の1つは、自動測定ツールを使用することです。アクセシビリティツールと同様に、これらは物語の一部しか語らず、人間がテストできる側面（自動化ではなく）を考慮することはできず、正確なデータを測定するためのデータがまだ多くありません。しかし、それでも水に足を踏み入れるには良い場所です。

詳細については、以下を参照してください。

計画と報告

迅速な評価を超えて実行できるもう1つのステップは、具体的な計画を立てるか、さらに良いことに、持続可能性の旅について報告を始めることです。できることを測定し、努力を文書化し、発見と進捗状況をできるだけオープンにしてください。持続可能性は旅であり、進歩は常に完璧よりも有益です。持続可能性に関する声明を持つことは、そのような計画と達成した成功を提供するのに最適な場所になります。

詳細については、以下を参照してください。

WSG

W3Cサステナブルウェブコミュニティグループのウェブサステナビリティガイドラインは、ウェブサイトやアプリケーションにサステナビリティを実装しようとしている人にとって非常に有益なリソースです。彼らが作成した仕様は、専門知識（UX、ウェブ開発、DevOps、ビジネス）に基づいてセクションに分かれており、追加のリソース（仕様の冒頭にリンクされています）が利用可能であり、製品やサービス内でのサステナビリティの理解と実装を支援できます。

詳細については、以下を参照してください。

最新の知識

クリエイターとして、圧倒的な業界で知識を最新の状態に保つことは課題であり、急速に進化する分野である持続可能性においても例外ではありません。本を読んだり、関連するビデオを見たり、コースを受講したり、研究や論文を見たり、最新の基準やベストプラクティスを常に把握したりすることが不可欠です。Web Almanacのこの章で最初のステップを踏み出しました。楽しんでいただけたなら、経験をさらに広げるために他に何が興味を引くか見てみましょう。

結果を調べる

結果を表示 クエリを表示 編集を提案する 翻訳ヘルプ

著者

引用

BibTeX 
@inbook{WebAlmanac.2024.サステナビリティ,
author = "Satyagraha、Laurent DevernayとGüneli、BurakとAkrap、InesとDawson、AlexanderとGifford、MikeとFrick、TimとLebre、Rafael BonalumeとHarcegova、LuciaとQueern、Caleb",
title = "サステナビリティ",
booktitle = "2024 Web Almanac",
chapter = 15,
publisher = "HTTP Archive",
year = "2024",
language = "日本語",
doi = "10.5281/zenodo.14065377",
url = "https://almanac.httparchive.org/en/2024/sustainability"
}