LCP・FID・CLSの改善案(Core Web Vitals)

SEO

今回は、2021年から始まるCore Web Vitalsに関する3つの指標(LCP・FID・CLS)の改善案をいくつか紹介します。
Core Web Vitalsとは、ウェブサイトのパフォーマンスやUXの健全性を実現するためにGoogle が新たに提唱したコンセプトです。

Core Web Vitalsとして下記の3つの指標を定義しています。

  • Largest Contentful Paint (LCP)
  • First Input Delay (FID)
  • Cumulative Layout Shift (CLS)

今回は、これらの理想値と改善案を紹介します。

LCP・FID・CLSに関してより詳しくは下記の記事を参照して下さい。

Core Web Vitalsの理想値

  • LCP : 2.5秒未満
  • FID : 100ミリ秒未満
  • CLS : 0.1未満

page speed insightの各々の値では約75%が良好となっていれば合格ラインです。
また上記のCore Web Vitalsの理想値をサイトが満たしていると離脱率が24%減少すると言われています。

緑色(良好)が75%以上で合格ライン

Core Web Vitalsの改善案

まだテスト段階のものもあるが、改善が測れた実際の施策を紹介します。

LCP

ファーストビューは遅延読み込みを行わずにbodyの最初の方に記述。そして背景画像などはhtmlに直接書き込みインライン化。またファーストビューに関係の無いJavaScriptは最後に読み込むか、htmlの最後の行に直接記述する。

画像のサイズ調整をしっかりと行い、端末(画面幅)に対して適したサイズの画像を表示させる。画像以外の要素はレスポンシブ化して端末(画面幅)に対して最適な表示にする。

FID

ユーザーの動作に関係する記述は全て非同期で読み込む。もしくは優先的に読み込み。

CLS

CSSやJavaScriptを上書きしない。
WordPressの場合、子テーマを使用しない。もしくは上書きでは無く、書き換えるようにfunction.phpで指示する。
遅延読み込みやカルーセルなどのコンテンツが動くようなものはdiv要素で囲うなどして確実にスペースを確保する。

因みにCLSの評価スコアの範囲は0~1 で、0は移動なし、1は移動量が最大であることを意味します。
この指標はユーザーが操作しようとしたときにページ要素が移動すると、UXが低下するためと言われています。そのため極論では一切動作の無いページが良好になりやすいです。


以上が「WEBに関する主な指標の改善案(Core Web Vitals)」でした。

この改善案は今後もテストを重ねて色々と追記していきたいと思います。

後ほどLCP・FID・CLS(Core Web Vitals)の評価の見方と具体的にどのような対応をすれば良いのかを調べる方法を紹介します。

下記の記事ではコアウェブバイタルの問題点の場所を確認する方法を紹介しています。合わせてどうぞ。

2020年6月5日SEOKnow-How,SEO対策

Posted by KT