Google が、ユーザーエクスペリエンスに焦点を当てているサイトをより高く評価していることはよく知られています。ページの読み込みの速さや、モバイル端末に対するサイトの対応度は、長きにわたって検索ランキングの結果に影響する要因となっています。
Google は、Core Web Vitals (CWV) と呼ばれる3つの主要な指標を使用してWebサイトの「ユーザビリティ」を判断しています。CWV は、Web サイト (または Web ページ) の読み込みパフォーマンス、インタラクティブ性、視覚的な安定性を考慮します。これらの指標のいずれかで評価が低い場合、検索パフォーマンス、Web サイトの表示されやすさ、検索結果での表示順位に悪影響が生じます。
Core Web Vitals とは何ですか？
Core Web Vitals とは、Google が Web サイトのユーザーエクスペリエンスにおいて重要だと見なしている一連の要素です。Core Web Vitals は、Web サイト上のページを「不良」、「改善が必要」、「良好」の3段階で評価します。
これらのシグナルを測定するために、Google は、Web サイトが以下のページメトリクスに焦点を当てることを推奨しています。
読み込み時間 : Largest Contentful Paint (LCP)
インタラクティブ性 : Interaction to Next Paint (INP)
視覚的安定性 : Cumulative Layout Shift (CLS)
3つの Core Web Vitals の概要、そしてそれらが重要な理由
Core Web Vitals は、ユーザーエクスペリエンスに関わるさまざまな要素を評価するのに役立ちます。これら3つの各カテゴリで良好なスコアを獲得することは、Google による評価を高め、顧客に対して優れたパフォーマンスを発揮するために不可欠です。
累積レイアウトシフト
CLS は視覚的安定性を測定し、視覚的コンテンツ上で予期せず発生するレイアウトのズレの程度を数値化します。レイアウトのズレは、視覚的要素の位置が1つのフレームから次のフレームに変わるときに常に発生します。CLS は速度に関する指標ではないため、Google はレイアウトのズレが影響を及ぼす範囲と距離に基づいてスコアを計算します。
一般ユーザー向けの説明 : ユーザーがカート内で「購入を完了」ボタンをクリックしようとすると、不思議なことに、警告なしで数ピクセル下に移動し、「カートから削除」をクリックしてしまいました。合格スコアは0.1未満です。
Interaction to Next Paint
2024年から新たに CWV に加わった INP は、ユーザーがページを閲覧している全期間に発生するキーボード操作のレイテンシを観測することで、ユーザーインタラクションに対するページ全体の応答性を評価します。INP の値は、ユーザーの訪問中に観測された最も長いインタラクションです。より簡単に言えば、ユーザーがクリックしてから読み込まれるまでにかかる最長時間を指します。
良いINP値とは何ですか？
INP が200ミリ秒以下の場合、そのページは応答性が良好であることを意味します。
INP が200ミリ秒を超え500ミリ秒以下の場合、そのページの応答性は改善が必要であることを意味します。
INP が500ミリ秒を超える場合、そのページの応答性が悪いことを意味します。
ラージェスト・コンテントフル・ペイント
LCP は、ページの読み込みが開始された時点から、最大のコンテンツ要素がレンダリングされる時点までの経過時間を測定します。測定される要素は通常、画像、動画、およびテキストノードが含まれるブロックレベル要素です。
一般ユーザー向けの説明 : データ量の大きい動画だとファーストビューで読み込み中になることをご存知でしょうか？私たちは、これが速く読み込まれることを目指しています。合格スコアは2.5秒未満です。
Core Web Vitals を改善する方法
最先端の CDN を利用することは、Core Web Vitals、特に3つの CWV の中で最も重要な Largest Contentful Paint を改善するための、最も迅速かつ効果的な方法の1つです。
CDN の設定は INP と CLS の改善に役立つ可能性がありますが、これらは主な促進要因とはなりません。しかし、Largest Contentful Paint は、CDN 設定や API 設計の影響を直接受ける可能性があります。
LCP を最適化する方法のひとつとして、最初の1バイトが到着するまでの時間 (TTFB) を短縮する方法があります。API レスポンスをキャッシュし、エッジで画像を圧縮すると、TTFB が改善され、その結果 LCP の改善にも繋がります。API 設計が最適化されると、動的コンテンツの読み込み時間に大きな影響を及ぼす可能性があります。これにより、ユーザーエクスペリエンスがよりパーソナライズされるだけでなく、より高速になります。
結局のところ、これらすべての課題に対応できる最先端の CDN を利用することが最善のアプローチです
CDN で Core Web Vitals を改善する方法
Google は Core Web Vital 指標の向上に努めることを推奨しています。最先端の CDN は、これらすべての指標のパフォーマンス向上に役立ちますが、特に Google が最も重要だと考える最大コンテンツの描画 (LCP)、つまり読み込みパフォーマンスの強化に貢献します。CDN の設定と API 設計の両方を通じて、最初の1バイトを受信するまでの時間 (TTFB) の短縮、API レスポンスのキャッシュ、エッジでの画像圧縮を実現し、LCP を飛躍的に向上させることができます。
最適化された API 設計と、オープン接続を積極的に維持するネットワークにより、キャッシュ済みコンテンツや動的コンテンツはもちろん、キャッシュされていないコンテンツの読み込み時間までもが大幅に短縮され、よりパーソナライズされた高速なユーザーエクスペリエンスを提供することが可能になります。Fastly が LCP の向上に貢献できる理由について、詳しくはこちらのレポートをご覧ください。
CDN が CWV の改善に役立つ理由は次のとおりです。
失効済みデータの配信
最先端の CDN では、オリジンサーバーでの処理に時間がかかりすぎる場合に失効済みのコンテンツを配信できます。顧客のひとりが業界のトピックに関する FAQ ページを探している中、オリジンサーバーがダウンしている、あるいは応答に時間がかかりすぎるとします。そのような場合、Fastly のような CDN では問題が解決されるまで「失効済み」(キャッシュ済み) コンテンツをユーザーに配信し続けることが可能なため、ユーザーへのコンテンツ配信が中断されることはありません。これにより、ユーザーエクスペリエンスとユーザーの満足度が維持されるだけでなく、SEO ランキングも影響を受けません (サイトの読み込み失敗や、読み込みの遅れが Google によって認識されないため)。また、オリジンが復旧して正常な稼働を開始すると、コンテンツが更新されます。
大量のリクエストの処理
Web は、Web 上のありとあらゆるものを消費し続けるクローラーで溢れています。クローラーによるリクエストによってサーバーに過度の負担がかかり、パフォーマンスが低下する可能性があります。Fastly のような CDN は、クローラーに「失効済み」コンテンツが提供されるように簡単に設定できるため、サーバーへのリクエスを減らすことができます。クローラーは依然として関連性の高い実際のコンテンツを取得しますが、必ずしも最新バージョンではない可能性があります。優れた CDN は、パフォーマンスを犠牲にすることなく大量のリクエスト (DDoS 攻撃を含む) に対応し、インターネットの接続状況に応じてインテリジェントにルーティングします。
セキュリティランキングの向上
優れた CDN プロバイダーは、DDoS 対策、ボット対策、トランスポート・レイヤー・セキュリティなどのセキュリティ機能を提供しています。これにより、顧客にとってより安全な Web サイトを実現し、さまざまなサイバー攻撃を防止できます。Google のアルゴリズム更新では、Web サイトのセキュリティが SEO ランキングの要因として非常に重要であることが繰り返し示されています。セキュリティ対策が不十分、または欠如しているサイトは、ランキングや検索結果において悪影響を受けます。
大容量ファイルの読み込み時間の短縮
顧客に大容量の動画ファイルを配信している場合、CDN を活用することでページ速度を迅速に改善できます。動画が YouTube のようなプラットフォーム上にない限り、Google は通常、動画ファイルをインデックスしません。また、同じ Web サーバーで複数の埋め込み動画をホストすると、ページの読み込みが遅くなるリスクがあります。動画ファイルのキャッシュ版を CDN で配信することは、この課題を回避する有効な方法となります。
動的コンテンツのキャッシュ
API
最先端の CDN によってもたらされるもうひとつのパフォーマンス上のメリットは API リクエストに関するものです。優れた CDN ソリューションは、過剰な API リクエストからオリジンサーバーを保護します。API トラフィックは動的すぎて CDN で処理するメリットが無いと誤解されがちです。Fastly は長年にわたり、API レスポンスをエッジでキャッシュできる API 設計のベストプラクティスを提唱してきました。残念ながら、API レスポンスは「キャッシュ不可能」と判断されることが非常に多く、その結果、エッジネットワークで API レスポンスをキャッシュしただけでパフォーマンスと信頼性を簡単に向上できる絶好の機会を逃していることになります。API の可用性はパートナーのWebサイトやサービスの可用性に影響する可能性があるため、自社の API の可用性を最高レベルに維持するために努力することが非常に重要です。適切な CDN を使用し、より多くの API コンテンツをエッジでキャッシュすることで、これが可能になります。
動的コンテンツ
最先端の CDN は、より多くのデータをキャッシュできる重要な機能を備え、「動的な」コンテンツや頻繁に変化するコンテンツ (アカウント情報や地域固有の商品、変動する在庫、新しいトップニュースなど) をキャッシュできます。従来の CDN ではトラフィックの多くがオリジンに送信されるため、レスポンス時間が遅くなるだけでなく、大量の (本来不要な) レスポンスに関連するデータ送信コストやインフラコストが高くつきます。一方、最先端の CDN では、リクエストごとに変化する真に動的なコンテンツをオリジンではなくエッジから配信することができます。これにより、エンドユーザーの近くでコードを実行できるようになり、コストと時間のかかるパフォーマンスの低下を回避できます。
画像最適化
CDN は画像を大幅に最適化するのに役立ちます。分散されたサーバー全体に画像のコピーを保存することで、エンドユーザーに最も近い場所から画像が配信されます。これにより読み込み時間が短縮され、エンドユーザーのデバイスや画面サイズに応じて、画像のリサイズ、圧縮、形式変換を動的に行うことも可能になります。最適化された画像を配信することで、CDN はエンドユーザーに最高の体験を提供するだけでなく、画像読み込み時間が Web サイトに与える一般的な「負荷」も最小限に抑えます。平均すると、画像は Web ページ全体のデータ量の21％を占めており、画像の読み込みが遅いと Web サイト全体のパフォーマンスに大きな影響を与えます。サイトやアプリケーションで画像の処理と配信を最適化して、各画像のサイズを縮小しながら読み込み時間を短縮 (そしてオリジンサーバーの呼び出し回数を削減) することで、全体的なパフォーマンスを大きく改善できます。