Fastly でさらにスピーディでサステナブルなWebサイトを構築するための5つのヒント
Principal Solutions Architect, Fastly
私は Fastly の Solutions Engineering チームの一員として、Fastly の柔軟なエッジコンピューティングクラウドを使用するお客様向けのソリューションを開発しています。これらのソリューションの多くは、Web パフォーマンスの向上に重点を置いています。最近サステナブルな開発目標について調査をしている際に、デジタルサステナビリティと Web パフォーマンスの強い関連性を発見し、嬉しい驚きを覚えました。
デジタルサステナビリティの資料を集めることには少々苦戦していたため、W3C Sustainable Web Design Community Group によって情報が収集され、最近になって Web Sustainability Guidelines の草案が公開されたことに感謝しています。
このガイドラインは複数の推奨事項で構成され、それぞれに番号が振られています (以下のリストの通り)。この推奨事項一つひとつについて、詳細、成功基準、メリット、例、リソースが記載されています。なかでも目を引くのは、Web パフォーマンスを大幅に向上させるための5つの推奨事項です。
ガイドラインには、これらの推奨事項の効果を高める、以下のような提案も含まれています。
2.6 デフォルトでスムーズな軽量のエクスペリエンスを生み出す
2.7 不要なアセットや過剰なアセットを避ける
2.16 メディアアセットに対してサステナブルなアプローチを採用する
2.18 フォントに対してサステナブルなアプローチを採用する
2.26 各メジャーリリースのサイクルにパフォーマンステストを組み込む
3.1 適切なテクニカル指標を特定する
3.2 HTML、CSS、JavaScript を軽量化する
3.7 サードパーティのサービスを厳密に評価する
3.9 レンダリングをブロックするコンテンツを解消する
5.27 パフォーマンス予算と環境予算を定義する
ここでは、主要な5つの推奨事項について詳しく見ていきます。
2.15 画像アセットに対してサステナブルなアプローチを取る
画像は便利なツールであり、平均的なWebサイトやアプリケーションでは通常、多くの画像が使われています。そのため、転送速度に影響を与えるデータの大部分は画像が占めています。そのため、画像のサイズを縮小し、不必要な画像の読み込みを減らすことでサステナビリティを高めることができます。
成功基準 - 画像の最適化 : 各画像に対してリサイズ、最適化、圧縮 (ブラウザ外で) を行い、画面解像度に合わせて異なるサイズの画像を提供します。
パフォーマンス上のメリット : 画像を最適化することで、HTTP リクエスト、データ転送、場合によっては物理的なレンダリングを試みる際にも、Webサイトの速度を大幅に改善できます。これらはすべて、訪問者のユーザーエクスペリエンスとアクセス速度に影響します。
Fastly のコア技術 : Fastly Image Optimizer は、画像が多用されているページの画像をエッジで変換して最適化し、ページの読み込みを高速化することで、ユーザーエクスペリエンスを犠牲にすることなくパフォーマンスを向上させます。サイトの読み込み時間が短縮され、より快適なユーザーエクスペリエンスを実現できると同時に、開発チームはより重要な作業に専念できるようになります。
4.2 ブラウザキャッシュを最適化する
ブラウザキャッシュによって、毎回サーバーからファイルをリロードする必要がなくなり、状況によってはオフラインでもファイルを閲覧できるようになります (リバースプロキシの場合には、サーバー側の追加の計算やコンピューティングなしに即座にキャッシュ済みコンテンツへのリクエストを送信します)。そのため、サステナビリティとパフォーマンスの面でメリットが生まれます (例えば最初の1バイトを受信するまでの時間 (TTFB) が大幅に短縮されるなど)。
成功基準 - サーバーサイドキャッシュ : コンテンツ管理システム (CMS) を使用している場合は、オンザフライのサーバーサイドキャッシングを可能にする適切なプラグインをインストールします。CMS を使用していない場合は、提供されるサーバー設定ファイルを使用して、expires、bfcache、cache-control HTTP ヘッダーでファイルタイプのキャッシュの有効期限を設定および調整します。リクエストに基づいてページを生成する言語やフレームワークを使用している場合は、静的ページのレスポンスをキャッシュして、今後の訪問者向けに再利用できるようにします。
パフォーマンス上のメリット : 変更のないファイルを毎回再ダウンロードする必要がなくなり (データ転送量を削減)、サーバーサイドキャッシュにより必要なコンピューティングリソースの量が少なくて済みます (HTTP リクエストの送信が減るため)。また、キャッシュされるコンテンツを選別することで、リロードの高速化と新しいページのリクエストの必要性との間でバランスを取ることができます。データが反復リクエスト向けに保持されるため、訪問者側のレイテンシが減る可能性があります。
Fastly のコア技術 : Fastly はキャッシュを重視しています。ブラウザと Fastly の両方でキャッシュすることで強力なパフォーマンスを発揮できます。詳細とベストプラクティスについては、キャッシュの鮮度と有効期限に関するガイドをご覧ください。
4.3 ファイルを圧縮する
どのファイルもサーバーのハードドライブ上で一定の容量を占領し、そのデータは各訪問者に転送される必要があります。これによりリソースが消費されますが、圧縮アルゴリズムを使用することで各ファイルを圧縮し、送信時の影響を抑えることができます。
成功基準 - サーバーサイドの圧縮 : CMS を使用している場合は、Brotli や GZIP など、オンザフライのサーバーサイドの圧縮を可能にする適切なプラグインをインストールします。CMS を使用していない場合は、提供されるサーバー設定ファイルを使用し、要件に合わせてパフォーマンス関連の機能を設定および調整します。
Fastly のコア技術 : アセットのロスレス圧縮により、パフォーマンスを確実に向上できます。Fastly は、キャッシュできるコンテンツもできないコンテンツも圧縮できます。詳細は、Fastly 経由で圧縮コンテンツを配信する方法に関するガイドを参照してください。
4.7 更新頻度を訪問者のニーズに合わせる
訪問者が必要とする場合にのみサーバーからのデータ送信を行います。可能な限り、クライアントサイド/サーバーサイドのキャッシュと、クライアントサイド/ローカルのストレージを利用します。特定の頻度でデータを更新するのではなく、訪問者からの手動の更新リクエストに対応します。
成功基準 - 更新頻度 : キャッシュ、ローカルに保存されたデータ、ページの更新頻度は、訪問者のニーズに応じて定義します。
経済的メリット : キャッシュを利用することで、ネットワーク経由のデータ転送量が減少し、コストを削減できる可能性があります。
Fastly のコア技術 : Fastly でコンテンツをキャッシュするポイントとして、コンテンツをキャッシュする期間を変更できることが挙げられます。詳細については キャッシュの鮮度と有効期限に関するガイドをご覧ください。また、コンテンツに変更があった際のキャッシュの無効化については、パージに関するガイド を参照してください。
4.10 CDN とエッジキャッシュを検討する
エッジキャッシュと CDN 配信を通じてWebサイトのトラフィックをインターネット経由で送信する方法を最適化することで、デジタルサービスのサステナブルな配信を最適化できます。
成功基準 - コンテンツ配信ネットワーク (CDN) : グローバルなオーディエンス向けにWebサイトを構築する場合は、CDN を使用することで、事前に生成された読み取り専用のリソースを迅速かつ効率的に保存して配信できます。ただしこれによってパフォーマンスを確実に向上させることができる一方で、インフラストラクチャのレイヤーが追加されることになるため、サステナビリティの面での考慮が必要です。
パフォーマンス上のメリット : 訪問者とサーバー間の距離が短縮されるため、レイテンシが少なくなります。
Fastly のコア技術 : エッジキャッシュによって高速かつパーソナライズされたエクスペリエンスをグローバルに配信できます。ぜひお勧めします。
Fastly と一緒に構築
Fastly とのパートナーシップを通じて、さらにスピーディでサステナブルなWebサイトを構築できます。
