【イラスト付き】LCPとは？用語の説明から低下の原因、改善方法まで解説！

ブルー、聞きたいことがあるんだけど

LCPって何だろう？

LCPとは、ページ内で最も大きいコンテンツを読み込むのにどのくらい時間がかかったのかを示す指標のことだよ

Largest Contentful Paintの略なんだ

そうだよ。LCPはコアウェブバイタルの1つなんだ

コアウェブバイタルとは、サイトの健全性を表す3つの指標のことで、Webサイトがどれだけ使いやすいかを検証しているんだよ

この指標はGoogleが発表したものなんだ

コアウェブバイタルにはLCPとFIDとCLSがあるんだけど、CLSとFIDについて少しだけ紹介するね

CLS（Cumulative Layout Shift）は、ページを読み込む際にページのレイアウトにズレなど問題がないかを示す指標のこと

FID（First Input Delay）は初回のページ読み込みの遅延時間を示す指標のことだよ

この3つはSEO対策においてとても重要だよ

話を戻すけど、LCPはページ速度と読み込み時間を示す指標でページの表示速度が2.5秒以内なら「GOOD」と判断されるよ

2.5秒以上時間がかかると改善が必要で、４秒以上かかってしまうと「POOR」と判断されるんだよ

４秒以上かかると、ユーザーにとって使い心地の悪いサイトと判断されるから気を付けてね

LCPの測定は主に以下の5つのツールで行うよ

1つずつ紹介するね

Lumarは独自のクローラーがWebサイトをクロールしてサイト内の問題を洗い出してくれるんだよ

LenovoやIKEAでも採用されているツールなんだ

さらにLumarは、ページレンダリングサービス（PRS）の機能で、JavaScriptのレンダリングを検証することもできるんだよ

PageSpeed Insightsは、Googleが提供しているWebサイトを診断するツールだよ

URL入力欄にURLを打ち込むとパソコンだけではなくスマートフォンでの読み込みスピードの測定ができるんだよ

ラボデータとフィールドデータも確認できるんだ

ラボデータはシミュレーションした空想のデータで、フィールドデータというのはユーザーが実際にサイトにアクセスした際の情報を収集して得たデータのことだよ

コアウェブバイタルの改善する項目や診断結果が表示されるから、わかりやすくて使いやすいんだ

Google Search Consoleは、Google検索結果でのコンテンツの検索順位やクリック数を把握したり、セキュリティなどのチェックも行い、問題があれば改善するための無料サービスだよ

SEO効果を測定するツールで、サイト全体の診断結果を蓄積しているんだ

ただし、問題点があったときは通知がされるだけで、具体的な改善点を特定することは難しいから注意してね

Web VitalsはGoogle Chromeの拡張機能なんだよ

Chromeに追加するとコアウェブバイタルを自動で測定してくれるんだ

表示中のWebサイトページのコアウェブバイタルを測定するよ

Light HouseもGoogleが無料で提供しているChromeの拡張機能だよ

自動でレポートを作成して、WebサイトをPerformance（パフォーマンス）、Accessibility（アクセシビリティ）、Best Practices（ベストプラクティス）、SEO、Progressive Web App（プログレッシブウェブアプリケーション）、の5つの項目に分けて測定してくれるんだ

Performanceは、読み込み速度やテキストが表示されるまでの時間などの速度の評価をするよ

Accessibilityは、そのWebサイトを閲覧するすべてのユーザーが使用できて見やすく作成されているかを測定するよ

Best Practicesは、Webサイトが信頼できる安全性の高いものかを測定するよ

SEOは、Webサイトが検索エンジンに最適化されているかを測定するよ

Progressive Web Appはスマートフォン上でもページの読み込み速度に問題がないかなどを測定するよ

0～100のスコアで評価されて改善点も表示してくれるんだ

LCPが低下する原因は次の3つが考えられるよ

1つずつ説明していくよ

画像のファイルサイズが大きかったり、画像が多かったりするとページの読み込みに時間がかかってしまうんだよ

特にWebサイトのメインに使っている画像やページの一番最初にある画像のファイルサイズが大きいとLCPが低いと判断されてしまう可能性があるから注意してね

サーバーのスペックが低いとページの処理速度が遅くなって表示に時間がかかってしまうんだよ

少人数がアクセスするなら問題はないけど大人数でアクセスすると応答時間の遅延の原因にもなるね

Webサイトにアクセスしたときに「今、アクセスが込み合っています」っていう表示を見たことはない？

その時に起こっていることがサーバーの応答時間の遅延だよ

JavaScriptとCSSのレンダリングブロックが原因かもしれないということにも気をつけなくちゃね

JavaScriptはブラウザを動かすプログラムでページにアニメーションを付けることができるんだ

CSSはHTMLを組み合わせて使い、Webサイトの色やレイアウトなどページのデザインができるんだよ

でも、情報量が多くなっちゃうからその分読み込みに時間がかかってLCPを下げる可能性もあるんだよ

LCPを改善していく方法は以下の3つがあるよ

1つずつ説明するね

まずは画像を適切なサイズにすることだね

そうだね

画像取得サイトなどの画像を使用するとき、1つずつ画像サイズを圧縮するのは大変だから、画像をダウンロードする時点で一番小さいサイズで取り込むようにするといいね

2つ目はJavaScriptとCSSの不要な部分は削除することだね

一度、不要な装飾がないか確認するのがおすすめだよ

3つ目はLazy Loadを設定することだよ

Lazy Loadとは、画像を遅れて読み込むためのJavaScriptライブラリのことだよ

Webサイトにアクセスすると基本的には最初にすべての画像やデータを読み込むんだけど、ページを読み始めたばかりでいきなり最後の部分を読むことはあまりないよね？

Lazy Loadを使用すれば、とりあえずユーザーが読むであろう最初のページのデータを読み込んで後の部分はユーザーが読み進めてスクロールしていく間の時間に読み込んでくれるんだ

ここまでLCPについて解説してきたからまとめるね

こんな感じかな