LCPの意味とその改善方法

LCPの意味

LCPとはGoogleの公式サイト
https://developers-jp.googleblog.com/2020/05/web-vitals.html
によると「ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表します。感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミング」を意味します。LCPとは何かを一言でいうとWebページの「読み込みパフォーマンス」のことをいいます。

「最も有意義なコンテンツ」というのは「画像、動画、大きなブロックレベルのテキスト要素」のことです。

そしてLCPの目標値はWebページが最初に読み込まれてから2.5秒以下ということになっています。

サイトの各ページのLCPのスコアはPageSpeed Insightsでわかります。

ページエクスペリエンスシグナルの解説をしている海外の有名なweb.devというサイト
https://web.dev/optimize-lcp/
にはLCPの改善について次のように書かれています。

LCPの改善方法

LCPは、主に次の4つの要因の影響を受けます：

１、サーバーの応答時間が遅い

（１）サーバーを最適化する

→　サーバーが過負荷にならないように、レート制限、システムの修正をして安定させることが推奨されています。

《参考サイト》
https://web.dev/overloaded-server/

（２）ユーザーを近くの CDN にルーティングする

→　コンテンツ配信ネットワーク (CDN) は、さまざまな場所に分散されたサーバーのネットワークです。Web ページのコンテンツが単一のサーバーでホストされている場合、ブラウザーの要求は文字通り世界中を移動する必要があるため、地理的に離れた場所にいるユーザーの Web サイトの読み込みは遅くなります。ユーザーが遠く離れたサーバーへのネットワーク要求を待たなくても済むように、CDN の使用を検討しましょう。

（３）アセットをキャッシュする

→　HTML が静的であり、リクエストごとに変更する必要がない場合、キャッシュにより不必要に再作成されるのを防ぐことができます。生成された HTML のコピーをディスクに保存することにより、サーバー側のキャッシュは TTFB を削減し、リソースの使用を最小限に抑えることができます。

（４）HTML ページをキャッシュファーストで提供する

→　インストールすると、Service Workerはブラウザーのバックグラウンドで実行され、サーバーからの要求を傍受できます。このレベルのプログラムによるキャッシュ制御により、HTMLページのコンテンツの一部またはすべてをキャッシュし、コンテンツが変更された場合にのみキャッシュを更新することができます。

（５）サードパーティ接続を早期に確立する

→　サードパーティのオリジンへのサーバーリクエストも、特にページに重要なコンテンツを表示する必要がある場合に LCP に影響を与える可能性があります。rel=“preconnect”を使用してページがすぐに可能な限りの接続を確立しようとしていることをブラウザに通知します。

<link rel="preconnect" href="https://example.com" />

dns-prefetchを使用して、DNS ルックアップをより高速に解決することもできます。

<link rel="dns-prefetch" href="https://example.com" />

（６）署名付き交換 (SXG) を使用する

→　署名付き交換 (SXG)は、コンテンツを簡単にキャッシュできる形式で提供することにより、ユーザー エクスペリエンスを高速化できる配信メカニズムです。具体的には、Google 検索は SXG をキャッシュし、場合によってはプリフェッチします。Google 検索からのトラフィックの大部分を受け取るサイトの場合、SXG は LCP を改善するための重要なツールになる可能性があります。

《参考サイト》https://web.dev/signed-exchanges/

２、JavaScript と CSSがレンダリングをブロックする

ブラウザはコンテンツをレンダリングする前に、HTML マークアップを DOM ツリーに解析する必要があります。HTML パーサーは、
外部スタイルシート (<link rel="stylesheet">)
または同期 JavaScript タグ (<script src="main.js">)に
遭遇すると一時停止します。

スクリプトとスタイルシートはどちらもレンダリングブロッキングリソースであり、FCP を遅らせ、結果として LCP を遅らせます。Web ページのメイン コンテンツの読み込みを高速化するために、重要でない JavaScript と CSS をすべて延期します。

→　CSS ブロッキング時間を短縮する方法

（１）CSS を縮小する　（２）重要でない CSS を延期する （３）重要な CSS をインライン化する

などがあります。

３、リソースのロード時間が遅い

CSS または JavaScript のブロック時間の増加はパフォーマンスの低下に直接つながりますが、他の多くのタイプのリソースの読み込みにかかる時間も描画時間に影響を与える可能性があります。LCP に影響を与える要素のタイプは:

1. <img> 要素
2. <image> 要素内の<svg>要素
3. <video> 要素 (ポスター画像は LCP の測定に使用されます)
4. url()関数を介して読み込まれた背景画像を持つ要素(CSS グラデーションとは対照的に)
5. テキスト ノードまたは他のインライン レベルのテキスト要素を含むブロック レベルの要素

これらのファイルをできるだけ速くロードするには、いくつかの方法があります。

（１）画像の最適化と圧縮

具体的には・・・

• 最初から画像を使わないことを検討する。内容に関係ない場合は削除する。
  →　意味もなく画像を載せることは避ける。ただし、今日のSEOでは関連性の高いオリジナル性の高い画像をページ内にたくさん載せると上位表示しやすくなるので画像を載せること自体はとても重要です。
• 画像の圧縮
  →　ロスレス圧縮

JPGファイルも、PNGファイルもすでに無駄に高品質なフォーマットで保存し サイトで使っている場合、１つ１つのファイルのフォーマットを保存しなおすのには膨大な手間がかかります。

一気にそれらのファイルを軽量化することが出来るのがロスレス圧縮です。 ロスレス圧縮はTinyjpgなどの無料ツールを使うと無料で複数のファイルを軽量化できます。

このツールはJPGとPNGに対応しており、圧縮後の画像の劣化はほとんどありません。 WordPressのプラグインバージョンもある。このプラグインをWordPressに追加するとアップする画像を自動的にロスレス圧縮してくれます。

※ https://tinyjpg.com/
※ https://wordpress.org/plugins/tiny-compress-images/

• 画像を新しい形式 (JPEG 2000、JPEG XR、または WebP) に変換する
• レスポンシブ画像を使用する

  ※ レンダリング = 何らかの抽象的なデータ集合を元に、一定の処理や演算を行って画像や映像、音声などを生成すること

  《出典》https://e-words.jp/

  ※ レスポンシブ画像 ＝ レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年11月に勧告されたHTML 5.1の新仕様です。

  主な特徴は：

  1. CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り扱える
  2. デバイスに応じた最適な「大きさ」の画像を表示できる
  3. デバイスに応じた最適な「見た目」の画像を出し分けできる

  《出典》 https://ics.media/entry/13324/

• 画像 CDN の使用を検討する

画像CDN = 画像ファイルに特化したコンテンツデリバリーネットワークで、IMGタグのURLを変更するだけで画像の読み込み速度を上げる事ができるサービスです。 imgタグの画像URLを書き換える事で、画像のみCDNのサーバーを通して読み込む事になります。

《出典》 https://note.com/taira_daishiro/n/n95e05d68a431

（２）重要なリソースをプリロードする

→アプリケーションの多くの CSS ファイルの 1 つに深く埋め込まれているフォントなど、特定の CSS または JavaScript ファイルで宣言または使用されている重要なリソースが必要以上に後で取得される場合があります。

特定のリソースを優先する必要があることがわかっている場合は、 <link rel="preload">を使用してそれをより早くフェッチします。

多くのタイプのリソースをプリロードできますが、最初は、フォント、上部にある画像や動画、クリティカル パス CSS または JavaScript などの重要なアセットのプリロードに焦点を当てる必要があります。

（３）テキストファイルを圧縮する

GzipやBrotliなどの圧縮アルゴリズムは、サーバーとブラウザーの間でテキスト ファイル (HTML、CSS、JavaScript) を転送するときに、そのサイズを大幅に削減できます。

Gzip はすべてのブラウザーで効果的にサポートされており、さらに優れた圧縮結果を提供する Brotli は、ほぼすべての新しいブラウザーで使用できます。

リソースを圧縮すると、配信サイズが最小化され、ロード時間が改善され、結果として LCP が改善されます。

（４）ネットワーク接続に基づいてさまざまなアセットを配信 (アダプティブサービング)

ページのメイン コンテンツを構成するリソースを読み込む場合、ユーザーのデバイスやネットワークの状態に応じて、条件付きでさまざまなアセットを取得すると効果的です。これは、Network Information、Device Memory、およびHardwareConcurrencyを使用して実行できます。

初期レンダリングに不可欠な大きなアセットがある場合、ユーザーの接続またはデバイスに応じて、同じリソースのさまざまなバリエーションを使用できます。たとえば、4G 未満の接続速度では、ビデオの代わりに画像を表示できます。

→　ネット接続環境によって表示するパーツに変化をつける

（５）Service Worker を使用してアセットをキャッシュする

Service Workerと = ブラウザが Web ページとは別にバックグラウンドで実行するスクリプトオフラインのアプリを実現・サポートするために作られたもの。

《出典》 https://qiita.com/y_fujieda/items/f9e765ac9d89ba241154

Service Worker は、この記事の前半で説明した小さな HTML 応答の提供など、多くの便利なタスクに使用できます。これらは、繰り返し要求時にネットワークからではなく、ブラウザに提供できる静的リソースをキャッシュするためにも使用できます。

Service Worker を使用して重要なリソースを事前キャッシュすると、特に弱い接続で Web ページをリロードする (またはオフラインでアクセスする) ユーザーの場合、ロード時間を大幅に短縮できます。Workboxなどのライブラリを使用すると、事前キャッシュされたアセットを更新するプロセスを、自分で処理するカスタム Service Worker を作成するよりも簡単にできます。

４、クライアント側のレンダリングが遅い

多くのサイトでは、クライアント側の JavaScript ロジックを使用して、ブラウザーでページを直接表示します。React、Angular、Vueなどのフレームワークとライブラリにより、Web ページのさまざまなファセットをサーバー上ではなくクライアント上で完全に処理するシングルページ アプリケーションを簡単に構築できるようになりました。

ほとんどがクライアントでレンダリングされるサイトを構築している場合、大きなJavaScriptバンドルが使用されていると、LCPに与える影響に注意する必要があります。それを防ぐための最適化が行われていない場合、ユーザーは、すべての重要な JavaScript のダウンロードと実行が完了するまで、ページ上のコンテンツを表示したり操作したりすることはできません。

クライアント側でレンダリングされたサイトを構築するときは、次の最適化を考慮しましょう。

（１）重要な JavaScript を最小限に抑える

• JavaScript の縮小
• 未使用の JavaScript の延期
• 未使用のポリフィルを最小限に抑える

（２）サーバーサイドレンダリングを使用する

ページのメイン コンテンツがクライアントだけでなくサーバーで最初にレンダリングされるようにする。

（３）事前レンダリングを使用する

事前レンダリングは、サーバー側のレンダリングよりも複雑でない別個の手法であり、アプリケーションの LCP を改善する方法も提供します。ユーザー インターフェイスのないブラウザーであるヘッドレス ブラウザーは、ビルド時にすべてのルートの静的 HTML ファイルを生成するために使用されます。

以上がLCPの意味と改善方法です。内容的にWeb制作や開発の知識が必要ですが、ご自分が制作や開発をしていない場合は、これらの情報を担当の方に伝え、適切な対策をとってもらうようにして下さい。

【関連情報】

• コアウェブバイタルが2021年5月からGoogleの検索順位決定要因になる！
  https://www.web-planners.net/blog/archives/000362.html