ラーニングセンターに戻る

Largest Contentful Paint とは何ですか？また、どのように改善できますか？

Largest Contentful Paintとは何ですか？また、どのように改善できますか？ FastlyでLCPを改善する

SEO と Webサイトのパフォーマンスに関心のある方なら誰もが知っているように、Google Core Web Vitals（CWVs）は、Webサイトにおけるカスタマーエクスペリエンスを評価および改善する際の重要な考慮事項です。これらの CWVs には、3つの主要なメトリクスが含まれます：

この記事では、メトリクスのうち最初の（そして最も影響の大きい）LCPと、その改善方法について説明します。 

LCP とは何ですか？

LCP は、ページの読み込みが開始された時点から、最大のコンテンツ要素がレンダリングされる時点までの経過時間を測定します。通常、測定の対象となるのは画像、動画、テキストノードを含むブロックレベルの要素です。簡単に言うと、これはWebサイトの閲覧中にユーザーが待機する最も長い時間です。 

合格スコアは2.5秒未満です。

LCP が重要なのはなぜですか/なぜ Webサイトのパフォーマンスにとって重要なのですか？

LCPは、ユーザーエクスペリエンスとビジネスの収益の両方にとって重要です： 

  1. これはユーザー満足度に直接影響します - Webサイト上の顧客、訪問者、消費者は気まぐれです。読み込み時間のごくわずかな遅延でも、機会損失につながる可能性があります。最後に表示の遅いサイトを閲覧したときのことを考えてみてください…おそらくウィンドウを閉じたか、少なくともその体験にいら立ちを感じたはずです。 

  2. Google は、CWV が検索結果でのページの表示方法に影響すると直接かつ明確に述べているため、SEO が向上します。LCP が低いと、ランキングが下がり（ページの閲覧者も減ります）。 

  3. これは直帰率を低下させます - 顧客満足度の低さ（#1）は、直帰率の上昇と直接相関しています。読み込み時間が短縮されることで、ユーザーの満足度を維持し、サイトにとどめておくことができます。 

  4. コンバージョン率が向上します - 満足した顧客と高速に読み込まれるサイトにより、コンバージョン率が高まります。 

LCP をどのように改善できますか？

最先端の CDN を利用することは、Core Web Vitals、特に3つの CWV の中で最も重要な Largest Contentful Paint を改善するための、最も迅速かつ効果的な方法の1つです。

CDN の設定は INP と CLS の改善に役立つ可能性がありますが、これらは主な促進要因とはなりません。 

Largest Contentful Paint は、CDN 設定とAPI 設計の影響を直接受ける可能性があります。 LCP を最適化する方法のひとつとして、最初の1バイトが到着するまでの時間 (TTFB) を短縮する方法があります。API レスポンスをキャッシュし、エッジで画像を圧縮することで、最初の1バイトを受信するまでの時間 (TTFB) が改善され、その結果 LCP も改善できます。 

最適化されたAPI 設計は、動的コンテンツの読み込み速度に大きな影響を与える可能性があり、よりパーソナライズされたユーザーエクスペリエンスを提供するだけでなく、より高速な体験も実現します。 

結局のところ、これらすべての課題に対応できる最先端の CDN を利用することが最善のアプローチです

Fastly は LCP の改善にどのように役立ちますか？

Fastly のような最先端の CDN は、最初の1バイトを受信するまでの時間 (TTFB) を短縮し、API レスポンスをキャッシュし、エッジで画像を圧縮することで、LCP スコアの向上に役立ちます。

最適化された API 設計と、オープン接続を積極的に維持するネットワークにより、キャッシュコンテンツや動的コンテンツはもちろん、キャッシュされていないコンテンツの読み込み時間までもが大幅に短縮され、よりパーソナライズされた高速なユーザーエクスペリエンスを提供することが可能になります。  

失効済みコンテンツ配信

Fastly では、オリジンサーバーでの処理に時間がかかりすぎる場合に「失効済み」コンテンツを配信できます。顧客がページを読み込もうとしている際に、オリジンサーバーがダウンしているか応答に時間がかかりすぎる場合でも、Fastly は問題が解決されるまで、その訪問者に「失効済み」（キャッシュ済み）コンテンツを配信し続けることができます。つまり、オーディエンスへのコンテンツ配信が中断されることはありません。これにより、ユーザーエクスペリエンスとユーザーの満足度が維持されるだけでなく、SEO ランキングも影響を受けません (サイトの読み込み失敗や、読み込みの遅れが Google によって認識されないため)。また、オリジンが復旧して正常な稼働を開始すると、コンテンツが更新されます。

大量のリクエストの処理

増え続ける Web クローラーの需要は、サーバーに過度の負担をかけ、パフォーマンスを低下させる可能性があります。Fastly は、クローラーに「失効済み」コンテンツを配信するよう簡単に設定できるため、サーバーへの負荷を軽減できます。クローラーは依然として関連性の高い実際のコンテンツを取得しますが、必ずしも最新バージョンではない可能性があります。当社は、パフォーマンスを犠牲にすることなく、大量のリクエスト（DDoS 攻撃を含む）を容易に処理し、インターネットの接続状況をインテリジェントに回避してルーティングします。 

セキュリティランキングの向上

DDoS 攻撃、ボット対策、および TLS を含めることで、顧客にとってより安全なWebサイトを実現し、さまざまなサイバー攻撃を防止できます。Google のアルゴリズム更新では、Web サイトのセキュリティが SEO ランキングの要因として非常に重要であることが繰り返し示されています。セキュリティ対策が不十分、または欠如しているサイトは、ランキングや検索結果において悪影響を受けます。

大きなファイルの読み込み時間を短縮

顧客に大容量の動画ファイルを配信している場合、Fastly はページ速度の改善を迅速に支援できます。動画が YouTube のようなプラットフォーム上にない限り、Google は通常、動画ファイルをインデックスしません。また、同じ Web サーバーで複数の埋め込み動画をホストすると、ページの読み込みが遅くなるリスクがあります。Fastly は、動画ファイルのキャッシュ版を配信できます。これは、この課題を回避する優れた方法です。 

動的コンテンツのキャッシュ

API

Fastlyは、過剰なAPIリクエストからオリジンサーバーを保護するのに役立ちます。API トラフィックは動的すぎて CDN で処理するメリットが無いと誤解されがちです。Fastly は長年にわたり、API レスポンスをエッジでキャッシュできる API 設計のベストプラクティスを提唱してきました。残念ながら、API レスポンスは「キャッシュ不可能」と判断されることが非常に多く、その結果、エッジネットワークで API レスポンスをキャッシュしただけでパフォーマンスと信頼性を簡単に向上できる絶好の機会を逃していることになります。API の可用性はパートナーのWebサイトやサービスの可用性に影響する可能性があるため、自社の API の可用性を最高レベルに維持するために努力することが非常に重要です。適切な CDN を使用し、より多くの API コンテンツをエッジでキャッシュすることで、これが可能になります。

動的コンテンツ 

Fastly は、「動的な」コンテンツや頻繁に変化するコンテンツ（アカウント情報、場所固有のプロダクト、変動する在庫、新しい見出しなど）もキャッシュできます。従来の CDN ではトラフィックの多くがオリジンに送信されるため、レスポンス時間が遅くなるだけでなく、大量の (本来不要な) レスポンスに関連するデータ送信コストやインフラコストが高くつきます。一方、最先端の CDN では、リクエストごとに変化する真に動的なコンテンツをオリジンではなくエッジから配信することができます。これにより、エンドユーザーの近くでコードを実行できるようになり、コストと時間のかかるパフォーマンスの低下を回避できます。

画像最適化

Fastly は画像を大幅に最適化するのに役立ちます。分散されたサーバー全体に画像のコピーを保存することで、エンドユーザーには最も近い場所から画像が配信されます。これにより読み込み時間が短縮され、エンドユーザーのデバイスや画面サイズに応じて、画像のリサイズ、圧縮、形式変換を動的に行うことも可能になります。最も最適化されたバージョンの画像を配信することで、エンドユーザーに可能な限り最高の体験を提供するだけでなく、画像の読み込み時間が Webサイト に与える一般的な「負荷」も最小限に抑えます。サイトやアプリケーションで画像の処理と配信を最適化して、各画像のサイズを縮小しながら読み込み時間を短縮 (そしてオリジンサーバーの呼び出し回数を削減) することで、全体的なパフォーマンスを大きく改善できます。

Fastly が LCP の改善にどのように役立つかについてさらに詳しく知りたい場合は、お問い合わせください。

Fastly を試してみませんか？

ぜひご連絡ください
お問い合わせ