サステナブルなWebサイトを実現するために考慮することをエンジニア視点で考えてみた
サステナブルという言葉をご存知でしょうか。最近になって、聞く機会が増えているかと思いますが、サステナブルとは「持続可能な」という意味があります。
つまりサステナブルなWebサイトというのは「持続可能なWebサイト」ということですね。
人間社会がこれからもずっと続けていけるように、未来に生きる人のため、これからの環境のためにできることをやっていこうという取り組みが世界中で行われています。
その具体的な取組方法や目標が「SDGs（Sustainable Development Goals）」になります。
私たちもコーポレートサイトのなどを作成している際にSDGsのページを作成させていただける機会などもあり、常日頃から意識して環境に貢献できるように節電やペーパーレスなどを推進して仕事をしています。
今回は私たちの成果物であるWebサイトそのものは、どのようにすればサステナブルにできるかというのを調べました。
私は普段業務としてプログラムを書いているため、どのようにWebサイトを構築していけばサステナブルなWebサイトを実現できるか、エンジニア視点で考えたことを簡単にまとめてみました。
なおサステナブルなWebサイトの実現にあたっては、AI設計やUXデザイン、アクセシビリティ、SEO施策などが欠かせませんが、そちらの領域は弊社のディレクターやデザイナーに譲るとして、今回は主にインフラ構築やコーディング時に考慮することをご紹介します。
目次
結論：消費電力を抑える
早速ですが、これがキモであり結論です。
いかにしてWebサイトの閲覧や配信に必要な消費電力を抑えるか、これが考えるべきたったひとつのことです。
消費電力を抑えることで、カーボンニュートラルを実現できます。
カーボンニュートラルとは、温室効果ガス（二酸化炭素やメタンなど）の排出量と吸収量を均衡させることで、実質的な排出量をゼロにする施策のことです。
Webサイトの二酸化炭素排出量を計測するWebsite Carbon Calculatorによると、平均的なWebサイトは1回のPV（ページビュー）で1.76gの二酸化炭素が放出されると書かれており、これだけ聞くと、普段のコーディングの工夫ひとつで将来排出される二酸化炭素が大きく変わっていくんだなと思ってしまうことでしょう。
Webサイトの指標にはCWV（Core Web Vitals）などのパフォーマンス（表示速度・計算速度）指標が有名です。
ほとんどの場合は「パフォーマンスが高い＝消費電力を抑えられる」と思います（一概には言えず、また使用する機器などにも左右されるかと思いますが）。
今回は考慮すべきことが広範囲にわたりすぎるため、「パフォーマンスが高い＝消費電力を抑えられる」という構図が成り立つという過程のもと、どのようにすれば消費電力を抑えることができるかを考えていきます。
インフラ構成
この領域は近年ではクラウド環境が一般的なので、要件によっては完全にはコントロールできない領域になることもあるかと思いますが、以下の点を考慮するとよいでしょう。
エッジコンピューティング
レイテンシを下げ、応答速度を早くするためにも地理的になるべく近くのサーバーからデータを配信するのがいいでしょう。
そのためにはCDN（コンテンツ配信ネットワーク）などを使用するものいいかもしません。
開発時には実稼働環境を使用しなくても動作確認ができる場合には、ローカル環境でモックサーバーを立てることも考慮するとよいでしょう。
キャッシュ
ローカルキャッシュやデータベースキャッシュ、DNSキャッシュといったキャッシュを利用することで、応答速度を早くすることが可能です。
またキャッシュの生存期間もサイト更新や保守時に影響のない程度に長くするようにすべきでしょう。
セキュリティ
Web制作者である以上、セキュリティを担保することは当たり前ですが、不正なアクセスを防ぐことはマシンの負荷を下げることにも繋がります。
DoS攻撃など典型的にサーバーに負荷を掛ける攻撃はもちろん、Webサイトの改ざんなども多くの場合、外部との通信を行っていることがあります。
なによりもその対応に多くの電力を消費することになるかと思います。
根本から不正なアクセスをシャットアウトするファイアウォールの設定はもちろん、IDS（不正侵入検知システム）やWAF、プログラミング言語の環境設定も適切に行いましょう。
Jamstack
Jamstack（JavaScriptによってAPIからデータを受け取りMarkupを配信する）構成に代表されるサーバーレスアーキテクチャを使用することで、アクセス時にサーバーサイドプログラムの実行を抑えることができ、またサーバー運用をセキュアに行う事が可能です。
Jamstackについて詳しくは割愛しますが、Jamstack構成はエンジニアリソースが必要なアーキテクチャですが、大量のアクセスを高速に捌くことができるようになります。
ただし、Jamstackも銀の弾丸ではなく、アプリケーションの種類や運用状況によっては効率的に運用できない場合もあります。
Jamstackの導入を検討する場合は、まずはJamstack本当に必要かどうかをしっかりと見極めることが重要となります。
コーディング
ネットワーク通信
外部との不要な通信を避けるようなマークアップを心がけましょう。
特にSNSやビデオなどの埋め込みコンテンツは通信量が多いため、本当に必要かどうかを吟味して使用しましょう。
また外部との通信を行うプログラムを書く際には、必ず適切な時間でタイムアウトを行うように設定をしましょう。
GPGPUとCPU
計算量が多い処理を組む場合、特に機械学習のプログラムを組む場合などはCPU処理ではなく、GPUを使って処理（GPGPU、General-Purpose computing on Graphics Processing Units）を行うことで、計算速度が向上することがあります。
ベンチマークを取ったうえで、速度向上が見込める場合はGPGPUで処理を行うことを検討するといいでしょう。
フロントエンドでビジュアル表現を行う場合についても同様に、HTML5 CanvasとGPU処理が可能なWebGLどちらが最適かを検討したうえで、使い分けることも重要です。
フロントエンドにおいてはベンチマークを図らずとも体感のフレームレート（fps）で改善するべきかどうかが判断できる場合も多いでしょう。
ブラウザキャッシュ
ブラウザキャッシュについても適切に設定を行うことで、応答速度を早くすることが可能です。
Webアプリケーションの場合はPWA（Progressive Web Apps）にすることも検討するとよいでしょう。
ディスプレイの色
ディスプレイの種類によって変わりますが、使用する色によって消費電力が異なるようです。
有機ELやVA方式・IPS方式のディスプレイの場合は黒、普及率が高い液晶TN方式のディスプレイは白が最も消費電力を抑えることができるようです。
また青系統の色が最も電力を消費する傾向にあるようです。
詳しくは以下の記事をご覧ください。
参考：
サステナブルWebデザインのために考える！ディスプレイの色で変わる消費電力｜コラム｜メンバーズ
フロントエンドエンジニアは足りないデザインを補完する機会が多いですが、もし配色を行う場合は、上記を覚えておくと良いでしょう。
ソースコードの圧縮
ソースコードのファイルサイズを圧縮することで、通信容量を削減する事が可能です。
またソースコードだけではなく、メディアファイルなども可能であれば適切なフォーマットを利用するとよいでしょう。
WEBP形式など軽量なフォーマットに変換し圧縮をかけることが望ましいです。
モバイルデバイスへの最適化
現在世界で最もトラフィックを稼いでいるデバイスはモバイルです。
皆さんもご存知の通り、現在もモバイルデバイスは画面領域が狭いため、一般的にPC閲覧用に制作されたウェブサイトよりも軽量となることがほとんどです。
モバイルデバイスに最適化させることは、通信容量を削減することに繋がります。
単にコーディングで最適化させるのはもちろんのこと、PWAを始め、方法は非常に多岐にわたります。保有するウェブサイトにもっともマッチした技術を選定しましょう。
追跡し成果を確認する
AWSでは、Customer Carbon Footprint Tool (CCFT) という機能がリリースされています。これは排出したCo2量をCSVで排出することができる機能です。
こういったデータを蓄積し、貢献できているのかを計測することも重要です。
また、改善できているのであれば、そういったデータをWebサイト上で公開するのも面白いかもしれません。
おわりに
ざっと私がサステナブルなWebサイトを設計する際に心がけるであろうことをまとめてみました。
時代の流れとしてサステナブルという言葉が取り上げられる機会が増えましたが、サステナブルという言葉から別の言葉に流行りが変わったとしても、継続して心がけていかなければならない話題だと思います。
DXが加速している現在、私たちのようなエンジニアが書くソースコードを一行変えるだけで、年間数kgの二酸化炭素の排出を抑えることができる、そんな時代が来ています。
Webの技術進歩は凄まじく、新しい技術にチャレンジすることが結果的に通信容量削減に繋がることは珍しくありません。
つまりエンジニアの技術向上自体がSDGsに繋がるということが言えなくもないのです。
少し知っていればすぐにできることもあると思うので、普段から意識してコーディングすることが大切です。
参考
本記事を執筆するにあたって、以下のサイトを参考にさせていただきました。
