持続可能なウェブデザインとは何か、そしてそれを達成する方法
公開: 2022-12-01
「私は本当に電気自動車が欲しいのですが、私にはそれを買う余裕がありません」と、私の友人は数ヶ月前に悔やみながら言いました。 彼と私は、気候変動と、私たち二人が私たちの習慣に加えた変化について話し合っていました.
私は笑いました。
「電気自動車もエネルギーを消費することは知っています。再生可能エネルギーを使用するコンセントから電気自動車を充電しなければ、それでもかなりの量を汚染していることになりますよね?」
彼はそれを知っていると言ったが、彼と彼の20歳のフォルクスワーゲンは、より持続可能で環境に優しい生活を送るための彼のすべての努力に直面して、平手打ちであると感じていた.
「これはどうでしょうか。デジタル世界を通じて炭素排出量を削減する方法を教えてあげましょう」と私は提案しました。 彼は当惑したような表情を私に向けた。 それから、いくつかの統計によると、平均的なインターネット ユーザーは、普通の車で 1000 km 移動した場合とほぼ同じ量の CO2 を生成し、さまざまな活動が貢献していると彼に話しました。
彼は、私が自分の電話でデータを取り出すまで、ほぼ 10 分間このアイデアと戦っていました。 正直なところ、私は彼を責めませんでした。私がアクセスする各 Web ページには、それを維持するために使用されるエネルギーという隠れたコストが伴うことに気付いた日と同じ反応があったことを覚えているからです。
いわば、インターネットの汚い秘密。
Website Carbon Calculator によると、平均的な Web サイトはページ ビューごとに約 0.5 グラムの CO2 を生成するため、月間ビュー数が 100,000 の Web サイトの場合、年間 500 kg になります。 それはウェブサイトごとであることを覚えておいてください！
参考までに、平均的な車は 1,000 km あたり 1,200 kg の CO2 を排出するため、インターネットが気候変動と地球温暖化に与える影響は非常に明白です。
質問は次のとおりです。あなたのサイトが私たちの環境に与える影響を軽減するために、ウェブサイトの所有者として何ができるでしょうか?
もちろん、持続可能なウェブデザイン。
Kualo では、本質的に持続可能性の概念に深く関わっているため、このトピックを探求するのは自然なことだと感じました。 この記事では、次のことを学びます。
ウェブサイトの二酸化炭素排出量を最小限に抑えるのに役立つ正確な青写真を提供したいと考えています。
これは持続可能なウェブ デザイン マニフェストで読むことができるものであり、このウェブサイトでは、この信条が何を包含するかを簡単に説明しています。 6つのポイントを簡単に説明しましょう。
上記のすべての点を考慮すると、このマニフェストが求めているのは、持続可能な Web デザインだけでなく、実際に持続可能なビジネス慣行と持続可能な経済の基盤であることがわかるかもしれません。 より良い未来を築くためには、環境や人々への悪影響を最小限に抑え、有意義で有用なサービスや製品を提供する企業が必要です。
つまり、持続可能なウェブ デザインを目指すなら、次のことを行う必要があります。
さて、この記事の冒頭で述べたこと (およびインターネットの環境への影響に関するインフォグラフィック) に戻ると、これは基本的に増え続けるエネルギーのブラックホールであることがわかります。 一方で、インターネットが多くの人にとって重要であることもわかっています。自動車やラップトップのように、よりエネルギー効率の高いバージョンと交換できるわけではありません。
しかし、何を交換できるか知っていますか？
もちろん、私たちのウェブサイトのデザイン。
ウェブサイトのサイズとその構築方法が、生成される CO2 の量に直接影響することが主なポイントである場合、これはウェブサイトの所有者として対処する必要があることです。
しかし、Web デザインに関して私たちのやり方を変えることには、追加の利点があるのでしょうか?
私は絶対にそう言うでしょう。
マーケターとして、私は自分のデジタルへの取り組みと、それが自分のプロジェクトに与える影響をあらゆる角度から検討することに慣れています。ウェブデザインとここにいくつかの理由があります：
明らかな理由から、ユーザーは時間を無駄にしないため、より短いユーザー ジャーニーを好みます。 ただし、顧客体験は別として、必要なものを見つけるためにアクセスするページが少なくなるため、訪問による二酸化炭素排出量が削減されます。
(画像クレジット: https://www.appcues.com/blog/user-journey-map)
ユーザー ジャーニーの概念をよく理解してから、ユーザー ジャーニー マップを自由にデザインできるようになったら、Web デザインをそれらに適応させることをお勧めします。
摩擦点を回避する優れたユーザー エクスペリエンス (UX) は、必然的にエネルギー消費の削減と顧客満足度の向上につながります。
再生可能エネルギーを利用した持続可能なホスティングを提供するプロバイダーを選択することは必須です。 また、全体的な環境ポリシーを確認し、ホスティング プロバイダーが CO2 排出量を補うために追加の措置を講じているかどうか、および/または他の持続可能性の実践に関与しているかどうかを確認することもお勧めします。
サイトにキャッシュがない場合、サーバーの負荷が高くなります。 誰かが Web サイトのページにアクセスするたびに、PHP コードを処理し、データベースにクエリを作成し、これを Web サイトを表示する HTML コンテンツに変換することにより、ページ コンテンツをその場で構築する必要があります。
これにより、サーバーの CPU、メモリ、およびディスクがより多く使用され、プロセスでエネルギーが消費されます。 サーバーはすべての訪問者とすべてのページに対してこれを行う必要があるため、訪問者とページが多いほど、より多くのエネルギーを消費します.
キャッシュを設定すると、この集中的なワークロードのほとんどは、訪問者が最初にページを要求したときにのみ実行されます。 生成された HTML はキャッシュに保存されるため、後続の各ページの読み込みでそれほど面倒な作業を行う必要はありません。
さらに、ページの読み込みが速くなります。 これは、あなたとあなたの訪問者にとってメリットがあるだけでなく、訪問者がページの読み込みを待ってアイドリング状態になる時間が減り、その過程で消費されるエネルギーが少なくなることも意味します。
Web サイトをキャッシュする方法はたくさんあります。Kualo では、ページのキャッシュには LiteSpeed Cache を好み、データベース クエリのキャッシュには Redis と Memcached も使用しています。 超高速のウェブサイトと優れた持続可能性 - 気に入らないことはありませんか?
これは、マーケティング指向のプラグインや、私たちが忘れてしまった複製プラグインの場合によくあります. あなたが持っているものを評価し、次に必要なものを評価し、他のものを起動します.
(代理店 Johnson Banks が Duolingo 用に作成したカスタム フォント)
一般的なカスタム フォント ファイルは、1 つのウェイトを含めると 200 KB を簡単に超える場合があります。 さまざまなウェイトや書体を使用すると、必然的に加算され、速度とエネルギー消費の両方に影響を与えます。
したがって、カスタム フォントは、ブランドおよび実用的な目的にとって本当に重要であると思われる場合にのみ使用することをお勧めします。
https://youtu.be/eY-VyLd2t-Q
LiteSpeed Cache for WordPress には自動画像最適化が含まれているため、自分で行うことを心配する必要はありません。 さらに、PNG や JPG 画像と比較してサイズが約 25% 小さい WebP などの最新のファイル形式を使用するように画像を変換できます。
最適化だけでなく、それらの使用が正当で目的があるかどうかも考慮する必要があります。
たとえば、一部の製品写真は役に立たない場合があります (角度が非常に似ているなど)。 また、ランダムなストック画像など、ページで使用されている画像を SVG グラフィックなどの代替画像に簡単に置き換えたり、CSS スタイルを使用して同じ効果を実現したりすることもできます。
特にサイズが大きい可能性がある大量の画像やビデオが含まれている場合、そのデータはすべて、たとえ決して見られなくても、インターネット上を移動する必要があります。
遅延読み込みとは、ユーザーがページを下にスクロールしたときにのみ、このコンテンツをリクエストすることを意味します。 これらのセクションは、そのコンテンツが表示される直前に表示されるため、訪問者の観点からは、常にそこにあるかのように見えます。知覚できる違いはありません。
不要なデータの送信を回避するだけでなく、Web サイトの重量を軽減することで PageSpeed スコアも向上します。
一部のアプリケーションには、組み込みの遅延読み込みが付属しているか、プラグインでボルトインできます。 WordPress の場合、LiteSpeed Cache には遅延読み込み機能が含まれており、ページが非常に長い場合は、画像、動画、埋め込みコンテンツ、または HTML ブロック全体から何でも遅延読み込みできます。
通常、アニメーションには戦術的な目的がないため、使用は最小限に抑えてください。 動画に関しては、動画がどのような目的に役立つかが大きく左右されるため、ユーザーにとって役立つと思われる場合は、実際に動画を使用し、可能な限り最適化されていることを確認してください。
多くの場合、HTML、CSS、および Javascript コードには、スペース、改行、コメントなどの追加データが含まれます。 これらのスペースまたはコメントは、開発者がコードを簡単に読んで理解できるようにするためにのみ役立ちますが、ブラウザーがコードを解釈する方法に違いはありません。
コードを縮小すると、この不要な重量がすべて取り除かれ、インターネット経由で転送する必要があるファイルのサイズが小さくなり、サイトの読み込みが速くなります。
WordPress の場合、LiteSpeed Cache がこの側面を処理しますが、他のほとんどのアプリケーションにも、プラグインを介して同様の機能を利用できます。
サイトのどこにも使用しない、さまざまなレイアウト、スタイル、または機能を含むテーマまたはページ ビルダーを使用したことがあるかもしれません。
すべてのコードが CSS および JS ファイルに残るため、インターネット経由で転送する必要があるデータの量が増え、正当な理由もなくサイトの読み込みが遅くなります。
どのコードを手動で削除するかを正確に判断するのは難しい場合がありますが、WordPress の場合、LiteSpeed Cache を使用すると、未使用の CSS を自動的に削除できます。 これにより、未使用の CSS が取り除かれ、ページごとに固有の CSS ファイルが生成されます。 これは、ページ数が少ない場合は価値があるかもしれませんが、サイトに多数のページがある場合は、単一の CSS ファイルを使用する方が効率的である可能性があります。
Javascript を削除するのはより複雑になる可能性がありますが、LiteSpeed は少なくともユーザーのアクティビティが検出されるまでロードを遅らせることができます。 スクロールせずに見えるコンテンツで必要ない場合は、これが適切な場合があります。
最終的に最善のアドバイスは、可能な限りページ ビルダーや肥大化したプラグインの使用を避け、実際に必要であることがわかっているクリーンなコードを使用することです。
彼らは、探しているものを見つけようとしてより多くの時間を費やすため、より多くのエネルギーを消費します。
これを回避するには、ユーザーに最適なエクスペリエンスを提供するために、デザインがこれらの変数のできるだけ多くにうまく適応していることを確認してください。
しかし、より重要なことは、持続可能性の観点から、データを世界のさまざまな場所に転送するには多くのエネルギーが必要になるため、これが CO2 の削減に役立つことです。 また、データが遠くに移動するほど、より多くのエネルギーが必要になります。
また、CDN 経由で提供される画像は、通常、この手順をスキップした場合、サイズが縮小されることにも注意してください。 多くの CDN は、画像のサイズ、ピクセル密度、フォーマット、圧縮の縮小など、画像を最適化するためのツールを提供します。
もちろん、Cloudflare などの再生可能電力を使用する CDN を選択することが重要です。
それらを手動でスカウトするか、Google アナリティクスを使用して、どのページが古くなっているかパフォーマンスが低下しているかを評価できます。 次に、それらを適応させて役立つ最新のコンテンツにするか、単にごみ箱に入れる運命にあると判断するかを決定できます。
木を植えて炭素をオフセットするプロジェクトに参加することは、Web デザインだけでなく、ビジネス全体の持続可能性を改善する驚くべき方法です。 木は、CO2 排出量を吸収して酸素に変換するため、CO2 排出量の削減に関して絶対的な勝者です。
Ecologi (または他の同様の組織) のパートナーを訪問して、それらの木を植え始めてください!
私は笑いました。
「電気自動車もエネルギーを消費することは知っています。再生可能エネルギーを使用するコンセントから電気自動車を充電しなければ、それでもかなりの量を汚染していることになりますよね?」
彼はそれを知っていると言ったが、彼と彼の20歳のフォルクスワーゲンは、より持続可能で環境に優しい生活を送るための彼のすべての努力に直面して、平手打ちであると感じていた.
「これはどうでしょうか。デジタル世界を通じて炭素排出量を削減する方法を教えてあげましょう」と私は提案しました。 彼は当惑したような表情を私に向けた。 それから、いくつかの統計によると、平均的なインターネット ユーザーは、普通の車で 1000 km 移動した場合とほぼ同じ量の CO2 を生成し、さまざまな活動が貢献していると彼に話しました。
彼は、私が自分の電話でデータを取り出すまで、ほぼ 10 分間このアイデアと戦っていました。 正直なところ、私は彼を責めませんでした。私がアクセスする各 Web ページには、それを維持するために使用されるエネルギーという隠れたコストが伴うことに気付いた日と同じ反応があったことを覚えているからです。
いわば、インターネットの汚い秘密。
Website Carbon Calculator によると、平均的な Web サイトはページ ビューごとに約 0.5 グラムの CO2 を生成するため、月間ビュー数が 100,000 の Web サイトの場合、年間 500 kg になります。 それはウェブサイトごとであることを覚えておいてください！
参考までに、平均的な車は 1,000 km あたり 1,200 kg の CO2 を排出するため、インターネットが気候変動と地球温暖化に与える影響は非常に明白です。
質問は次のとおりです。あなたのサイトが私たちの環境に与える影響を軽減するために、ウェブサイトの所有者として何ができるでしょうか?
もちろん、持続可能なウェブデザイン。
Kualo では、本質的に持続可能性の概念に深く関わっているため、このトピックを探求するのは自然なことだと感じました。 この記事では、次のことを学びます。
- 持続可能なウェブデザインとは？
- なぜ持続可能なウェブデザインが必要なのか?
- 持続可能なウェブデザインの利点は何ですか?
- 持続可能な Web デザインのベスト プラクティス
ウェブサイトの二酸化炭素排出量を最小限に抑えるのに役立つ正確な青写真を提供したいと考えています。
持続可能なウェブデザインとは？
「持続可能な Web デザインは、人と地球を第一に考えた Web サービスを設計するためのアプローチです。 持続可能なウェブ マニフェストの原則を尊重するデジタル製品とサービスを提供します: クリーン、効率的、オープン、誠実、再生的、回復力。」これは持続可能なウェブ デザイン マニフェストで読むことができるものであり、このウェブサイトでは、この信条が何を包含するかを簡単に説明しています。 6つのポイントを簡単に説明しましょう。
- クリーン: ウェブサイトで使用されるサービスは、再生可能エネルギー源を利用する必要があります。つまり、ウェブ ホスティングは環境に優しいものでなければなりません。
- 効率的: 提供するサービスは、可能な限り最小限のエネルギー (および材料) を使用するように完全に最適化されている必要があります。
- オープン: 提供するサービスは、誰でもアクセスでき、ユーザーが自分のデータを完全に制御できるようにする必要があります。
- 正直なところ、あなたのウェブサイトは誤解を招くコンテンツを提供したり、ウェブデザインを通じてユーザーを誤解させようとしたりしません
- 再生的: あなたのサービスは、コミュニティと環境をサポートすることを目的とした経済に参加します。
- レジリエント: 最も必要なときに、必要な場所でサービスが提供されます
上記のすべての点を考慮すると、このマニフェストが求めているのは、持続可能な Web デザインだけでなく、実際に持続可能なビジネス慣行と持続可能な経済の基盤であることがわかるかもしれません。 より良い未来を築くためには、環境や人々への悪影響を最小限に抑え、有意義で有用なサービスや製品を提供する企業が必要です。
つまり、持続可能なウェブ デザインを目指すなら、次のことを行う必要があります。
- 最小限のリソースを使用する
- デザインする各ページに目的があることを確認する、よく考えられたコンテンツ プランを作成し、それに従います。
- 最適化されたウェブサイト ビルドを利用する
- ユーザーが望んでいないアクションを実行するようにユーザーを誤解させることは避けてください。
持続可能なウェブデザインが重要な理由
このように、インターネットは社会に多くのメリットをもたらしますが、それには膨大な環境コストが伴います。 平均的な Web ユーザーは、コンピューターまたはモバイル デバイスで 1 日あたり 5 ～ 6 時間、オンライン コンテンツを消費します。 私たちはこれまで以上に頻繁にテクノロジーを使用し続けているため、数十億人が 8 種類のデバイスを使用して世界中の Web サイトを閲覧するようになるまで、これは将来的に増加するだけです!さて、この記事の冒頭で述べたこと (およびインターネットの環境への影響に関するインフォグラフィック) に戻ると、これは基本的に増え続けるエネルギーのブラックホールであることがわかります。 一方で、インターネットが多くの人にとって重要であることもわかっています。自動車やラップトップのように、よりエネルギー効率の高いバージョンと交換できるわけではありません。
しかし、何を交換できるか知っていますか？
もちろん、私たちのウェブサイトのデザイン。
ウェブサイトのサイズとその構築方法が、生成される CO2 の量に直接影響することが主なポイントである場合、これはウェブサイトの所有者として対処する必要があることです。
持続可能なウェブデザインのメリット
さて、一般的に言えば、これを読んでいるということは、持続可能なウェブサイトを望む正当な理由が既にあり、その理由は環境保護に関係しているということです。 基本的に、あなたは地球のヒーローになりたいと思っています。私はあなたを尊敬しています。しかし、Web デザインに関して私たちのやり方を変えることには、追加の利点があるのでしょうか?
私は絶対にそう言うでしょう。
マーケターとして、私は自分のデジタルへの取り組みと、それが自分のプロジェクトに与える影響をあらゆる角度から検討することに慣れています。ウェブデザインとここにいくつかの理由があります：
- 支出を減らすことができます: デザイナーの費用からコンテンツの制作まで、追加ごとに費用がかかります。 より複雑なデザインには費用がかかり、より多くのコピーライティングとコンテンツには費用がかかります。 ミニマリストになり、本当に必要なものだけを持つことは、費用を削減する優れた方法です
- 顧客の満足度が向上します。昔は Web サイトが目新しかった時代、人々はさまざまな機能を楽しんでいましたが、今では 1 日中 Web サイトを閲覧しているため、誰もが Web サイトに圧倒されています。 つまり、平均的なユーザーにとって、Web サイトが明確であればあるほど、X ボタンを押して時間を無駄にしていない人に行く代わりに、必要なものを見つける可能性が高くなります。
- SEO の取り組みがより効果的になります: Google のランキングに関しては、数年前からスピードが重要視されてきましたが、年を追うごとに、SEO に関してはこれがますます重要になっていることがわかります。 Google は遅い Web サイトを嫌い、軽量で高速なサイトを絶対に優先します。 ちなみに、これは顧客体験にも当てはまります。
ウェブサイトを持続可能なものにする方法
1.ユーザージャーニーを計画することから始めます
この概念に慣れていない場合、ユーザー ジャーニーとは、ユーザーがサイトにアクセスして特定の目標 (サインアップ、購入など) を達成するために行う一連のアクションを指します。明らかな理由から、ユーザーは時間を無駄にしないため、より短いユーザー ジャーニーを好みます。 ただし、顧客体験は別として、必要なものを見つけるためにアクセスするページが少なくなるため、訪問による二酸化炭素排出量が削減されます。
(画像クレジット: https://www.appcues.com/blog/user-journey-map)
ユーザー ジャーニーの概念をよく理解してから、ユーザー ジャーニー マップを自由にデザインできるようになったら、Web デザインをそれらに適応させることをお勧めします。
摩擦点を回避する優れたユーザー エクスペリエンス (UX) は、必然的にエネルギー消費の削減と顧客満足度の向上につながります。
2.環境に優しいホスティングプロバイダーを選ぶ
私たちは最終的にはホスティング会社であるため、これは少し利己的に聞こえることは承知していますが、現実には、二酸化炭素排出量を削減したい場合、毎日あなたのウェブサイトに誰が力を与えるかが絶対に重要です. 残念ながら、データセンターは、インターネットに電力を供給するためのエネルギーの大部分を消費します。 100% 再生可能な資源に迅速に移行することが不可欠です。再生可能エネルギーを利用した持続可能なホスティングを提供するプロバイダーを選択することは必須です。 また、全体的な環境ポリシーを確認し、ホスティング プロバイダーが CO2 排出量を補うために追加の措置を講じているかどうか、および/または他の持続可能性の実践に関与しているかどうかを確認することもお勧めします。
3. すべてキャッシュ！
多くの Web サイト (WordPress、Magento、Drupal など) と同様に、PHP 駆動型のアプリケーションを使用している場合、持続可能性のためにキャッシュは必須です。サイトにキャッシュがない場合、サーバーの負荷が高くなります。 誰かが Web サイトのページにアクセスするたびに、PHP コードを処理し、データベースにクエリを作成し、これを Web サイトを表示する HTML コンテンツに変換することにより、ページ コンテンツをその場で構築する必要があります。
これにより、サーバーの CPU、メモリ、およびディスクがより多く使用され、プロセスでエネルギーが消費されます。 サーバーはすべての訪問者とすべてのページに対してこれを行う必要があるため、訪問者とページが多いほど、より多くのエネルギーを消費します.
キャッシュを設定すると、この集中的なワークロードのほとんどは、訪問者が最初にページを要求したときにのみ実行されます。 生成された HTML はキャッシュに保存されるため、後続の各ページの読み込みでそれほど面倒な作業を行う必要はありません。
さらに、ページの読み込みが速くなります。 これは、あなたとあなたの訪問者にとってメリットがあるだけでなく、訪問者がページの読み込みを待ってアイドリング状態になる時間が減り、その過程で消費されるエネルギーが少なくなることも意味します。
Web サイトをキャッシュする方法はたくさんあります。Kualo では、ページのキャッシュには LiteSpeed Cache を好み、データベース クエリのキャッシュには Redis と Memcached も使用しています。 超高速のウェブサイトと優れた持続可能性 - 気に入らないことはありませんか?
4. コードを書いている場合は、それがクリーンなコードであることを確認してください
大多数のユーザーは何らかの CMS を使用しますが、コードを記述する場合は、理解しやすく、変更しやすく、不要な重複や操作を避けるようにしてください。5. 役に立たないプラグインやアドオンを避ける
これは上記のルールに関連していますが、WordPress、Magento、Craft、Laravel などの CMS を実際に使用している人向けです。 プラグイン市場が提供するすべての可能性に興奮しすぎて、不要なプラグインでウェブサイトを溺れさせることがあります。これは、マーケティング指向のプラグインや、私たちが忘れてしまった複製プラグインの場合によくあります. あなたが持っているものを評価し、次に必要なものを評価し、他のものを起動します.
6.最小限のカスタムフォントを避けるか使用する
これは驚くかもしれませんが、カスタム フォントを使用すると、Web サイトのファイル サイズが確実に増加する可能性があります]。(代理店 Johnson Banks が Duolingo 用に作成したカスタム フォント)
一般的なカスタム フォント ファイルは、1 つのウェイトを含めると 200 KB を簡単に超える場合があります。 さまざまなウェイトや書体を使用すると、必然的に加算され、速度とエネルギー消費の両方に影響を与えます。
したがって、カスタム フォントは、ブランドおよび実用的な目的にとって本当に重要であると思われる場合にのみ使用することをお勧めします。
7. メディア ファイルを賢く使う (そして最適化する)
言うまでもなく、Web サイト上のすべての画像のサイズを最適化する必要があります。 これは、ウェブサイトの速度 (およびその後の SEO) に関するベスト プラクティスからわかっています。 サイトの速度が遅い理由を尋ねる顧客を時々見かけますが、非常に大きなオリジナルをアップロードしたため、ホームページに 4 MB の画像が含まれていることがわかりました。 それらの同じ画像は、それらを最適化することで、品質を低下させることなく提供できる場合があります。https://youtu.be/eY-VyLd2t-Q
LiteSpeed Cache for WordPress には自動画像最適化が含まれているため、自分で行うことを心配する必要はありません。 さらに、PNG や JPG 画像と比較してサイズが約 25% 小さい WebP などの最新のファイル形式を使用するように画像を変換できます。
最適化だけでなく、それらの使用が正当で目的があるかどうかも考慮する必要があります。
たとえば、一部の製品写真は役に立たない場合があります (角度が非常に似ているなど)。 また、ランダムなストック画像など、ページで使用されている画像を SVG グラフィックなどの代替画像に簡単に置き換えたり、CSS スタイルを使用して同じ効果を実現したりすることもできます。
8.フォールドコンテンツの下の遅延読み込み
各 Web ページには、スクロールしなければ見えない位置にある多くのコンテンツ、つまり、訪問者がページを下にスクロールしない限り表示されないコンテンツが含まれている場合があります。特にサイズが大きい可能性がある大量の画像やビデオが含まれている場合、そのデータはすべて、たとえ決して見られなくても、インターネット上を移動する必要があります。
遅延読み込みとは、ユーザーがページを下にスクロールしたときにのみ、このコンテンツをリクエストすることを意味します。 これらのセクションは、そのコンテンツが表示される直前に表示されるため、訪問者の観点からは、常にそこにあるかのように見えます。知覚できる違いはありません。
不要なデータの送信を回避するだけでなく、Web サイトの重量を軽減することで PageSpeed スコアも向上します。
一部のアプリケーションには、組み込みの遅延読み込みが付属しているか、プラグインでボルトインできます。 WordPress の場合、LiteSpeed Cache には遅延読み込み機能が含まれており、ページが非常に長い場合は、画像、動画、埋め込みコンテンツ、または HTML ブロック全体から何でも遅延読み込みできます。
9. 動画やアニメーションの使用を制限する
Web サイトを Word ページのように見せたり、ペストのようにビデオやアニメーションを避けたりする必要はありませんが、画像と同様に、代わりに質素に使用してください。通常、アニメーションには戦術的な目的がないため、使用は最小限に抑えてください。 動画に関しては、動画がどのような目的に役立つかが大きく左右されるため、ユーザーにとって役立つと思われる場合は、実際に動画を使用し、可能な限り最適化されていることを確認してください。
10. サイトの HTML、CSS、Javascript を縮小する
繰り返しますが、速度を上げるために既にこれを行っているかもしれませんが、そうでない場合は、この背後にある理由を簡単に説明しましょう。多くの場合、HTML、CSS、および Javascript コードには、スペース、改行、コメントなどの追加データが含まれます。 これらのスペースまたはコメントは、開発者がコードを簡単に読んで理解できるようにするためにのみ役立ちますが、ブラウザーがコードを解釈する方法に違いはありません。
コードを縮小すると、この不要な重量がすべて取り除かれ、インターネット経由で転送する必要があるファイルのサイズが小さくなり、サイトの読み込みが速くなります。
WordPress の場合、LiteSpeed Cache がこの側面を処理しますが、他のほとんどのアプリケーションにも、プラグインを介して同様の機能を利用できます。
11. 不要な CSS と Javascript を削除する
縮小は不要なデータを取り除きますが、そのコードのいずれかが実際にサイトで使用されているかどうかは分析していません。サイトのどこにも使用しない、さまざまなレイアウト、スタイル、または機能を含むテーマまたはページ ビルダーを使用したことがあるかもしれません。
すべてのコードが CSS および JS ファイルに残るため、インターネット経由で転送する必要があるデータの量が増え、正当な理由もなくサイトの読み込みが遅くなります。
どのコードを手動で削除するかを正確に判断するのは難しい場合がありますが、WordPress の場合、LiteSpeed Cache を使用すると、未使用の CSS を自動的に削除できます。 これにより、未使用の CSS が取り除かれ、ページごとに固有の CSS ファイルが生成されます。 これは、ページ数が少ない場合は価値があるかもしれませんが、サイトに多数のページがある場合は、単一の CSS ファイルを使用する方が効率的である可能性があります。
Javascript を削除するのはより複雑になる可能性がありますが、LiteSpeed は少なくともユーザーのアクティビティが検出されるまでロードを遅らせることができます。 スクロールせずに見えるコンテンツで必要ない場合は、これが適切な場合があります。
最終的に最善のアドバイスは、可能な限りページ ビルダーや肥大化したプラグインの使用を避け、実際に必要であることがわかっているクリーンなコードを使用することです。
12. Web サイトがさまざまなデバイスで適切に機能することを確認する
さまざまな画面サイズ、ブラウザー、デバイス、および帯域幅速度でサイトをテストするのはかなり時間がかかりますが、持続可能な Web デザインと密接に関連しています。 これはポイント n.1 と関係があります。つまり、コンテンツとデザインの不適切な表示は、UX の低下とユーザー間の多くの混乱につながります。彼らは、探しているものを見つけようとしてより多くの時間を費やすため、より多くのエネルギーを消費します。
これを回避するには、ユーザーに最適なエクスペリエンスを提供するために、デザインがこれらの変数のできるだけ多くにうまく適応していることを確認してください。
13. CDN を使用してコンテンツを提供する
では、CDNとは何ですか? コンテンツ配信ネットワーク (CDN) は、地理的に異なる場所にあるサーバーのネットワークです。 コンテンツの読み込みを高速化する方法は、ユーザーの近くの場所から提供することです。 つまり、これは速度とユーザー エクスペリエンスの両方に関連しています。しかし、より重要なことは、持続可能性の観点から、データを世界のさまざまな場所に転送するには多くのエネルギーが必要になるため、これが CO2 の削減に役立つことです。 また、データが遠くに移動するほど、より多くのエネルギーが必要になります。
また、CDN 経由で提供される画像は、通常、この手順をスキップした場合、サイズが縮小されることにも注意してください。 多くの CDN は、画像のサイズ、ピクセル密度、フォーマット、圧縮の縮小など、画像を最適化するためのツールを提供します。
もちろん、Cloudflare などの再生可能電力を使用する CDN を選択することが重要です。
14. コンテンツを監査して、戦略に従っていることを確認する
大規模な Web サイトの場合、そのコンテンツを定期的に監査することが重要です。 一部のページは必然的に時代遅れになるか、その目的を果たせなくなります。 これは特にナレッジベースに当てはまりますが、製品ページやブログ投稿などにも当てはまります。それらを手動でスカウトするか、Google アナリティクスを使用して、どのページが古くなっているかパフォーマンスが低下しているかを評価できます。 次に、それらを適応させて役立つ最新のコンテンツにするか、単にごみ箱に入れる運命にあると判断するかを決定できます。
15. 二酸化炭素排出量を相殺して CO2 排出量を削減する
気候変動に積極的な企業になることは、持続可能性をレベルアップするという点で、おそらく私たちがこれまでに下した最良の決定の 1 つです。 これまでに 50,000 本以上の木を植え、2,000 トン以上の CO2 をオフセットしました。この旅を今後も継続するつもりです。木を植えて炭素をオフセットするプロジェクトに参加することは、Web デザインだけでなく、ビジネス全体の持続可能性を改善する驚くべき方法です。 木は、CO2 排出量を吸収して酸素に変換するため、CO2 排出量の削減に関して絶対的な勝者です。
Ecologi (または他の同様の組織) のパートナーを訪問して、それらの木を植え始めてください!