ウェブサイトのパフォーマンスを改善することが地球を救うのにどのように役立つか
公開: 2022-03-10あまり考えないかもしれませんが、インターネットは膨大な量の電気を使用しています。 この電気はどこかで生産する必要があります。 ほとんどの国では、これは化石燃料の燃焼を意味します。 これは、インターネットの二酸化炭素排出量が世界の空の旅を凌駕するまでに成長したことを意味し、これによりインターネットは地球上で最大の石炭火力発電所になります。
Mozilla Internet Health Report 2018は、特にインターネットが新しい領域に拡大するにつれて、「持続可能性がより大きな優先事項になるはずだ」と述べています。 しかし、現状では、Webサイトはますます肥満になっています。これは、インターネットのエネルギー需要が指数関数的に増加し続けていることを意味します。
その間、気候変動の影響は年を追うごとに悪化し、さらに多くなります。 気候科学者の大多数は、世界中の異常気象の猛威と頻度の増加を気候変動に起因していると考えています。これは主に人間の活動に起因しています。 科学に疑問を呈する人もいますが、世界最大の石油会社でさえ今ではそれを受け入れており、ビジネスモデルを変える必要があることを認めています。
地球上のすべての国（米国を除く）は、パリ気候協定に署名しています。 米国は物議を醸しているが、米国の人口と経済の半分以上を代表する米国で最も影響力のある個人、都市、州、企業の多くは、米国の誓約イニシアチブを通じて合意へのコミットメントを維持している。
Web開発者として、これは私たちが影響を与える問題ではないと感じることは理解できますが、これは真実ではありません。 ウェブ上の状況を改善するために多くの努力が行われています。 Green Web Foundationは、再生可能エネルギーによって完全に電力を供給されているか、少なくともカーボンニュートラルであることを約束しているWebホストの増え続けるデータベースを維持しています。 2013年、A List Apartは、JamesChristieによるSustainableWebDesignを公開しました。 過去3年間、SustainableUX会議では、Webの持続可能性の専門家が、さまざまなWebベースの分野で知識を共有してきました。
2009年以来、グリーンピースは、クリッククリーンキャンペーンを通じてエネルギーミックスをクリーンアップするように大手インターネット企業に圧力をかけてきました。 このキャンペーンの結果もあり、Googleは昨年、世界の運用消費量の100％に相当する十分な再生可能エネルギーを初めて購入したと発表しました。
では、再生可能エネルギーでサーバーに電力を供給する以外に、Web開発者は気候変動について他に何ができるでしょうか。
「測定できないものを管理することはできません」
ウェブサイトをより持続可能にすることに関しておそらく最大の勝利は、パフォーマンス、ユーザーエクスペリエンス、持続可能性がすべてきちんと絡み合っていることです。 デジタル製品の持続可能性を測定するための重要な指標は、そのエネルギー使用量です。 これには、サーバー、クライアント、および2つの間でデータを送信する中間通信ネットワークによって行われる作業が含まれます。
それを念頭に置いて、おそらく最初に考慮すべきことは、Webサイトのエネルギー使用量をどのように測定するかです。 これは実際には想像以上に難しい作業であり、ここで正確なデータを取得することは困難です。 ただし、エネルギー使用量を示す、使用できるいくつかの優れたフォールバックがあります。 これには、データ転送（つまり、Webサイトを表示するためにブラウザーがダウンロードする必要のあるデータの量）およびWebサイトを提供および受信するハードウェアのリソース使用量が含まれます。 ここでの明らかなメトリックはCPU使用率ですが、メモリ使用率やその他の形式のデータストレージもその役割を果たします。
データ転送は、私たちが非常に簡単に測定できるものの1つです。 すべての主要なブラウザは、ネットワークアクティビティを測定できる開発者ツールを提供します。 たとえば、以下のこのスクリーンショットでは、Smashing MagazineのWebサイトを初めてロードすると、1メガバイト未満のデータ転送が発生することがわかります。 Firefoxの開発者ツールは、実際には2つの数値を提供します。1つは転送されたファイルの非圧縮サイズで、もう1つは圧縮サイズです。
アセットがネットワーク上を移動するときにアセットを圧縮するための最も一般的なツールはgzipであるため、これら2つの数値の違いは、通常、gzipの作業の結果です。 この後者の数値は、実際に送信されたデータの量を表しており、注意を払う必要があります。
注：非常に尊敬されているWebPagetestなど、データ転送のメトリックを提供するツールは他にもたくさんあります。
CPU使用率を測定するために、Chromeには、メモリフットプリント、CPU使用率、および個々のタブのネットワークアクティビティを表示する詳細なタスクマネージャーが用意されています。 より冒険的/技術的な場合、top（プロセスの表）コマンドは、macOSやUbuntuなどのほとんどのUnixライクなオペレーティングシステムで同様のメトリックを提供します。 一般的に、シェルアクセス権を持つ任意のサーバーでtopコマンドを実行することもできます。
幸い、WebsiteCarbonやEcograderなど、これらの指標を特定のCO2値（WebsiteCarbonの場合）またはスコア（Ecograderの場合）に変換しようとする取り組みがあります。
持続可能なウェブデザイン
これで、サイトの影響を測定する方法がわかりました。次は、サイトをより持続可能で、パフォーマンスが高く、一般的に使用しやすいものにするために、最適化する方法について考えます。
ここで私たちを助けるために私たちが利用できるいくつかの既存の作品があります。 2016年、O'ReillyはTimFrickによる「DesigningForSustainability」を公開しました。 この本では、ティムは私たちを持続可能なデザインの理由と方法のツアーに連れて行ってくれます。 しかし、持続可能性に明確に焦点を当てていなくても、持続可能なWebデザインの哲学と大きく重複している、既存のアイデア、会議の講演、記事を豊富に利用することもできます。 ここで特に良い例は、BradFrostのサイドプロジェクト「DeathToBullshit」、Heydon Pickeringの記事と、あまり気にしないコードの記述に関する講演、AdamSilverのブログ投稿「DesigningForActualPerformance」です。
Webサイトを完全に再設計する場合、または新しいWebサイトを最初から開始する場合は、ここでいくつかの非常に高レベルの質問から始めることができます。 たとえば、ホームページに実際に表示する価値がある、または表示する必要があるものは何ですか？ より具体的には、ホームページの各要素はどのような価値をもたらしますか？ ヘイドンピカリングが言うように：
「Webサイトの最もパフォーマンスが高く、アクセス可能で、保守が容易な機能は、そもそも作成しない機能です。」
私はWordPress.comのVIPチームで働いているので、この流れの中で、ミニマリストのWordPressテーマをまとめて、持続可能なWebデザインのテクニックをどこまで取り入れられるかを考えて挑戦することにしました。 結果はSustyと呼ばれるテーマであり、私がまとめた付随するWebサイトsustywp.comで実際に動作しているのを見ることができます。 その特定の例では、Webサイトは6KBをわずかに超えるデータ転送で配信されます。これは、Webサイトの中央値が約1.5MBであることを考えると気持ちがいいです。
それで、私は何をしましたか？ さて、お話しします。
ネットワーク要求を減らす
上で概説したように、ネットワークリクエストは簡単に測定できるものなので、出発点として適しています。 Sustyをまとめると、必要ではないように思われるHTTPリクエストが多数発生していることに気付きました。 たとえば、WordPressには、絵文字の使用を検出し、それらが不正な文字として表示されないようにするCSSとJavaScriptがバンドルされています。 これには本質的に問題はありませんが、絵文字を使用する予定がない場合、またはさまざまなシステムのデフォルトでカバーできると確信している場合は、絵文字が読み込まれないようにすることができます。
これは比較的わずかな節約に相当しますが、不要なコードやページからのリクエストを削除するという哲学を確立することで、パフォーマンスを大幅に向上させることができます。 例えば：
- いくつかの基本的なDOM操作のためにjQuery全体をロードしていますか？
純粋なJavaScriptで同じ目的を達成できますか？ Jeremy WagnerによるGoogleのこの投稿で、より高度なデッドコード除去（別名ツリーシェイク）について読むことができます。 - 画像のカルーセルはありますか？
これらすべての画像が本当に必要ですか？ それらはユーザーエクスペリエンスを大幅に向上させていますか？ それとも、それを1つの強力なイメージに減らすことができますか？ または、リピーターにダイナミズムの感覚を与えるために、選択した画像の1つをランダムに表示することもできますか？ ちなみに、ここで行われた調査によると、ほとんどのユーザーはカルーセルを好きでも関与もしていません。 - 多くの画像を使用している場合、それをサポートするブラウザーにWebP形式を使用して画像を提供することでメリットがありますか？
長い間、WebPのサポートは苛立たしいほど制限されてきました。 しかし、Firefoxはバージョン65（2019年1月に予定）でサポートを開始する予定であるため、Safariのような残りのストラグラーが追いつくのは時間の問題です。 - 数百キロバイトのWebフォントを読み込んでいますか？
ロードしているすべてのWebフォントを使用していますか？ Webフォントも必要ですか？ 最近のほとんどのデバイスには、半分まともなフォントのスタックがありますが、好みに応じて並べて表示したいフォントのリストを指定できますか？ Webフォントを使用する必要がある場合は、フォントが合理的に可能な限りパフォーマンスが高いことを確認する必要があります。 - YouTubeビデオを埋め込んでいますか？
埋め込まれたYouTubeビデオは、通常、だれかがそれと対話する前に、約1メガバイトのデータ転送を追加します。 私たちのユーザーのごく一部だけが実際に座って私たちのウェブサイトに埋め込まれたビデオを見るつもりなら、代わりにそれにリンクすることができますか？
すべてを精査する
このように、ページのあらゆる側面を調べることもできます。 本当にそこに値するものは何ですか？ 私たちのサイドバーは本当の価値を追加しますか、それともウェブサイトにサイドバーがあると慣習が定めているので、そこにそれを置くだけですか？ そこで、1つ追加して、がらくたで埋めました。
Sustyを使用して、ナビゲーションを独自のページに任せるという、やや異例のアプローチを試しました。 これにより、ユーザーの明示的な要求があった場合にのみ追加のコンテンツをロードして、文字通り必要不可欠なものにまで切り詰められたページを作成できます。 Sustyは非常に軽量で高速であるため、ユーザーの調査（別名、私のパートナー）を通じて、メニューの読み込みが実際には新しいページのように感じられないことに気付いたので、オーバーレイのように見せることにしました。実際には前のページに戻るだけです。
快適に軽量なページを作成するのに役立つだけでなく、降格されたナビゲーションにより、それを表示するための凝った非表示/表示コードも不要になります。 この時点で、Sustyが持続可能なWebデザイン手法を極限まで追求した例であることを明確にしたいと思います（これが優れたWebサイトの原型であることを示唆しているわけではありません）。
あなたの祖母のようにCSSを書く
深刻なパフォーマンスの向上に関しては、文字通りコードのすべての文字が重要であることを覚えておく必要があります。 すべての文字はバイトを表し、gzipで圧縮された後でも、まだ重みを占めています。 CSSは、多くの肥大化が見られるドメインです。 幸いなことに、未使用のCSSを取り除くのに役立つツールがますます複雑になっています。 Sarah Dayanによるこの素晴らしい投稿では、CSSバンドルを259KBから9KBに削減した方法について概説しています。
ゼロから始める場合は、そもそもCSSの記述方法についてもっと深く考える必要があります。 Heydon Pickeringは、構文の設計方法の長所を生かした方法でCSSを作成する方法と、開発者が繰り返しを防ぐのにどのように役立つかについて、優れた投稿を書きました。 Heydonは、HTMLとCSSの両方で、divとclassesを過度に使用するとどれだけの無駄が発生するかも指摘します。
何を分析していますか？
Google Analytics、KISSmetrics、Piwikなどのツールを使用して、Webサイトの訪問者が何をしているのかを分析することは、Web上で多かれ少なかれ普及しているようです。正当な使用例があることは間違いありませんが、実際にすべてのウェブサイトで分析が必要ですか？ 私は、当然のことながら、私が管理するすべてのサイトに通常GoogleAnalyticsを追加しました。 しかし、比較的最近、問題のWebサイトのほとんどで、これはほぼ完全に無意味な試みであることに気づきました。「今日、6人がFacebook経由でこの投稿にアクセスしました。」 誰も気にしない？
本当に必要で、データを分析して行動する場合を除いて、分析を捨てて、今日WebサイトXにアクセスした人の数の平凡さをじっと見つめるよりも良い方法を見つけてください。
ページの重みを増すだけでなく、Google Analyticsのようなものを使用すると、Googleに代わってユーザーに収集するデータに関する倫理的な質問が発生します。つまり、GoogleがAnalyticsを無料で提供するのには理由があります。
基本を忘れないようにしましょう
最近は次のような情報がたくさんありますが、決して自己満足して忘れてはいけません。 上記のすべてに加えて、HTML、CSS、JavaScriptを常に縮小し、必要に応じて連結する必要があります。 また、すべての画像を圧縮してできるだけ小さくし、適切な設定で適切な形式を使用し、プログレッシブレンダリングを使用する必要があります。
サーバー側のパフォーマンス
これまでのところ、私たちの焦点はほぼ完全にフロントエンドにありましたが、サーバー側でも最適化しないと、これの多くは無関係になります。 すでに数回言及しましたが、常にgzip圧縮を有効にする必要があります。
サーバーにとって可能な限り簡単にWebサイトを提供できるようにする必要があります。 私は主にNginxを使用していますが、FastCGIキャッシュが特に好きで、特に効率的であることがわかりました。 自分のサーバーにシェルアクセスできる場合は、サーバーの構成方法を説明する投稿があります。 サーバーをそれほど制御できない（またはしたくない）場合は、技術的なオプションは少なくなります。 WordPressの分野で特に人気があるのは、WPスーパーキャッシュです。
HTTPSを介したHTTP2を使用する必要があります。 HTTPSを使用すると、サービスワーカーのような新しいウェブ技術の世界が開かれ、ネットワーク自体を便利なものとして扱うことができます。 これについてもっと知りたい場合は、ジェレミー・キースの新しい本「GoingOffline」を強くお勧めします。
注： ApacheとNginxの両方で利用できるGoogleのPageSpeedモジュールを調査することもできます。
最後に、ここで私たちが持つことができる最大の影響は、再生可能エネルギーを動力源とするデータセンターでWebサイトをホストすることです。 英国では、サイトを直接ホストしている企業の観点から、KrystalとKualoを強くお勧めします。 （グリーンウェブホストの完全なディレクトリについては、グリーンウェブファンデーションをチェックしてください。）
結論は
私たちのウェブサイトをより持続可能なものにするために努力する価値があることをあなたに確信させたことを願っています。 特にその過程で私達は私達のウェブサイトも作ります：
- よりパフォーマンスの高い、
- よりユーザーフレンドリー、
- よりアクセスしやすく、
- よりサーバーフレンドリー、
- 検索エンジン向けに最適化されています。
持続可能なウェブデザインのアイデアに対して一部の人々が持っている反応は、それは不合理ではありませんが、それは環境問題への非常に小さな譲歩であるように思われるということです。 もちろん、どの程度の影響を与えることができるかは、作業しているWebサイトがどれだけ忙しいかによって異なります。 しかし、Webがもう少し環境にやさしいものになるのを助けるだけでなく、持続可能なWebデザインは基本的にベストプラクティスのWebデザインです。
避けられない炭素排出量を相殺することも検討する価値があります。 カーボンオフセットは時々嘲笑され、正当な理由があります。 オフセットの主な問題は、通常、炭素がオフセットされる期間が非常に長いことです。 たとえば、植林の場合、炭素隔離の量について示されている数値は、通常、100年の期間に基づいています。 したがって、現在の炭素排出量の削減という点では、それは実際には解決策ではありません。 しかし、それは何もないよりはましです。
myclimateのモットーは、最善を尽くし、残りを相殺することです。 私はあなた自身のカーボンオフセットスキームを転がすことについてのブログ投稿を書きました。 また、1％For ThePlanetイニシアチブを強くお勧めします。 最後に、あなたが事業主であり、より良い社会的、環境的、経済的正義を見たいと考えている企業の同盟に参加したい場合は、CertifiedBCorporationスキームをチェックしてください。