無料個別相談 
問い合わせ 
ウェブマーケティングでは、サイト内のページがどれだけ早く表示されるかは重要なポイントとなります。
サイトに訪れるユーザーにとっても、早くページ全体が表示されることでストレスなく読み進めることができるでしょう。
ページ表示に関する言葉にLCPと呼ばれるものがあり、内容を知り対策を行なうことでより価値のあるサイトを完成させることができます。
LCPとは何なのか、確認するための測定ツールや改善方法、注意点など詳しく解説します。
Contents
LCPとは？
ウェブマーケティングにおいて重要視されるLCPとは、Largest Contentful Paintの略称であり、ページの表示速度や読み込み時間のことを指しています。
Largestという言葉が含まれていますが、最もサイズの大きなコンテンツを読み込むまでにかかる時間に注目していることを意味しています。
SEOにおいてもLCPは見過ごせない点であり、その重要性を知った上で適切に施策をしていくことが求められます。
ユーザーは少しでも早く求めている情報にたどり着きたいと思い、インターネットを利用しているはずなので、LCPは注目しておきたい点となるのです。
LCPは、ページが読み込まれるまでの時間によって以下のように評価基準が異なります。
- 2.5秒以内・・・GOOD
- 4秒以内・・・POOR
GOODとPOORの間に位置する場合は、改善していく必要があると判断されます。
LCPとCore Web Vitals
LCPについて理解する際、Core Web Vitals(コアウェブバイタル)の存在について知る必要があります。
Core Web Vitalsはサイトのランキングを決定づける際に追加される要素になり、サイトの健全性を示す指標のなかでも特に重要されているものです。
このCore Web Vitalsのなかに含まれている一つがLCPであり、ユーザーファーストを意識したコンテンツを作成していく上では欠かせない点となってくるのです。
LCPと順位の関連性
LCPを改善すると、スムーズにページが表示されることからストレスなく読み進められるようになります。
しかし、LCPを改善したからといって必ずしもサイトの順位が上がるというわけではありません。
Core Web Vitalsに注目してLCPを改善していくことはもちろん大切ですが、SEOとしては質の高い記事であることが順位を決定する大きな要素となっています。
記事の質を高めることを意識しつつ、LCPにも注目することでよりユーザーに届くページが完成します。
LCPを測定するためのツール
LCPを測定してページの読み込み速度を知ることで、自サイトの改善すべき点がみえてきます。
LCPの測定ができるツールにはいくつか種類があるため、使いやすいものや無料のものなどをチェックしてサイトのページ読み込み速度を調べてみましょう。
PageSpeed Insights
最近では、スマホを使ってウェブ検索をする人が増えています。
パソコンやタブレット、スマホなど、インターネットを利用できる機器は豊富に揃うようになりました。
「PageSpeed Insights」は、パソコンとスマホの両方のページ読み込み速度を測定できる無料ツールです。
トップページにアクセスし、測定したいページのURLを入力して分析ボタンをクリックするだけで、すぐに結果が表示されます。
分析結果のなかには、診断と改善できる項目について一覧があり、ページごとの読み込み速度改善を図ることができます。
無料かつ簡単に利用できるLCP測定ツールです。
Google Search Console
「Google Search Console」を使って、ページの読み込み速度を調べることもできます。
ページの平均順位や表示速度などのユーザビリティに関するレポートや、サイト運営に関する情報が集約されているのが「Google Search Console」です。
公式の無料ツールとなっているため、ウェブマーケティングにおいて安心かつ信頼して利用できるのも特徴です。
LCPについて確認する際は、「ウェブに関する主な指標」という機能のなかでページ読み込み速度のレポートを参考にすると良いです。
レポートは良好・改善が必要・不良の三段階で表示されるようになっており、ページの読み込み速度がどれくらいなのかを把握することができます。
ただ改善点がどこにあるのかという点は具体的には提示してもらえないため、他のLCP測定ツールと併用しながら利用すると良いツールです。
Web Vitals
GoogleChromeの拡張機能である「Web Vitals」を活用して、LCPを測定することができます。
GoogleChromeで開こうとしているページのLCPを自動で計測してくれるツールで、公式ページから「Web Vitals」をダウンロードした後、簡単なステップでページの読み込み速度を測定することができるので便利です。
ダウンロード後、「拡張機能を追加」してから調べたいページが表示されているときにウィンドウの右上にある四角いアイコンをクリックするだけでOKとなっています。
Lighthouse
「Web Vitals」は、Googleが提供するページのパフォーマンスをトータルで測定することができるツールです。
Performance、Progressive Web App、Accessibility、Best Practice、SEOと5つの要素に関して測定することができ、このなかのPerformanceの部分でLCPについて調べることができます。
LCPのスコアを緑・黄・赤と3つに色分けし、緑は良好、黄は改善が必要、赤は不良という意味を示しています。
単にLCPを測定するだけでなく、何を改善していけば良いかという問題点についても提示してくれるため、実用的なツールといえるでしょう。
使い方は2通りあるので、利用しやすい方法を選ぶと良いです。
1つはGoogleChromeの拡張機能としてインストールして使う方法と、もう1つはコマンドラインツールとして使用する方法です。
GoogleChromeの拡張機能として利用する方が、使い勝手が良いのでおすすめです。
DeepCrawl
有料ツールにはなりますが、「DeepCrawl」も、LCPの測定ができるツールです。
大手企業にも導入されており、世界基準で用いられているSEOツールとなっています。
独自のクローラーがサイト内をクロールし、検索順位に影響を与える問題点がないか探っていきます。
サイトをより良い状態にするために何を改善していくべきかを、明確に教えてくれるツールです。
LCPが低下する原因について
LCPを測定できるツールで調べた際に改善点が見つかることがあります。
では、何が原因でLCPは低下するのでしょうか？
測定ツールを活用していくなかで、LCPが低下する原因についても理解しておきましょう。
LCPが低下する原因としては、以下の点が考えられます。
- サーバーの応答速度が低下しているため応答時間が長くなっている
- レンダリングをブロックするJavaScriptとCSSが多くなっている
- リソース、主に画像の読み込み時間に遅れが生じている
さらに詳しく、LCPの原因について見ていきましょう。
サーバーの応答速度が低下しているため応答時間が長くなっている
LCPが低下する原因について、一つ目にサーバーの応答時間が低下して応答時間が長くなっているという点が挙げられます。
ブラウザがサーバーからページを受信するのに時間がかかると、その分受け取ったデータの描画にも時間がかかります。
サーバーの応答速度が遅いと、その分ページが表示されるまでにも時間がかかり、LCPが低下している状態に陥ってしまいます。
サーバーの応答速度は先に紹介したツール「PageSpeed Insights」で調べることができ、サーバーの初期応答時間を知ることでLCP対策ができます。
サーバーの初期応答時間は600ms以上かかる場合エラーとなってしまうため、数値を参考に調べてみましょう。
レンダリングをブロックするJavaScriptとCSSが多くなっている
LCPが低下する原因は、レンダリングをブロックするJavaScriptとCSSが多くなっていることが考えられます。
サイトを読み込むとき、ブラウザが受け取った情報をサーバーに送信し、情報を変換してサーバーからの応答とともに処理が開始されます。
この応答内容の中に含まれるHTMLやJavaScript、CSSのコードの情報量や動きが多すぎるとJavaScriptやCSSの処理を行なうのに時間がかかるため、不要なコードが多いと読み込み時間が大幅に遅くなりLCPが低下してしまうのです。
リソースの読み込み時間に遅れが生じている
3つ目に挙げられるLCPが低下する原因として、リソースの読み込み時間に遅れが生じているという点があります。
LCPに影響を及ぼすリソースには、次のような種類があります。
- <img>
- <video>
- 関数を介して読み込まれた背景画像が含まれている要素
- インラインレベルなどのテキスト要素を含むタグ以外の文字データ
ファーストビューの中に配置された画像によって、ページの読み込み速度が低下することがあります。
LCPが低下する原因としてよく挙げられる事例となっており、ファイルサイズの大きい画像を配置することで読み込みに時間がかかってしまうのです。
コンテンツは、適宜画像を配置することでユーザーにとって読みやすいページとなりますが、画像のファイルサイズが大きかったり量が多いといった状態がLCPの低下要因となるため注意しましょう。
LCPを改善するための方法
LCPを改善することで、よりユーザーにとって快適に閲覧できるページとなります。
同時に、Googleからも評価されやすいコンテンツと認められるでしょう。
では、LCPを改善していくためには具体的にどのような対策を行なえば良いのでしょうか？
測定ツールを活用しLCPが低下する原因を押さえたうえで、実践できる改善方法について見ていきます。
画像の状態を最適化・圧縮する
画像のファイルサイズによってLCPが低下することがあると紹介したように、画像の状態を整えていく必要があります。
そこで、画像の最適化・圧縮を行ない、LCPの改善を図りましょう。
測定ツールを利用してLCPが低下していると判明したときは、まず画像の状態を改善することから始めていきたいです。
スマホで撮影した写真を使用する場合は、圧縮してから利用するのがおすすめです。
また、WordPressなどで画像を取り込み表示させる際は、画像の最適化や圧縮といったプラグインを利用して、画像をできるだけ軽くしてみましょう。
【合わせて読みたい記事】
コードの軽量化・圧縮
コードの軽量化・圧縮を行なうことで、LCPの改善が可能です。
不要なスペースやコメントを削除することで、コードの軽量化・圧縮を行なうことができます。
フリーツールなどを活用して、コードの圧縮を行なってみましょう。
コードの量に応じて軽量化・圧縮を図りLCPを改善していくと、ユーザーにとって快適なページとなります。
画像CDNの導入
CDN（コンテンツデリバリーネットワーク）の導入を行なうことで、オリジナルサーバーの負荷を軽減できます。
サーバーの負荷が軽減することで画像の読み込み速度が速まるため、サイトに訪れたユーザーが、スムーズに記事を読み進めることができます。
LCPを改善していく際にぜひ試してみましょう。
CMSの場合、プラグインを行なうとCDN配信化が簡単にできます。
Lazy Loadの設定を行なう
Lazy Loadは、遅延ロードを行なうためのJavaScriptライブラリのことを指します。
ブラウザは指定されたページに含まれるすべての画像を読み込もうとしますが、実際にユーザーが目にする画像以外も含まれており、本来不要なものです。
遅延ロードは、画像の読み込みに時間差を設けて画面が表示される速度を速めるという仕組みです。
Lazy Loadを利用すると遅延ロードの処理が簡単にできるため、LCPを改善する際に役立てることができます。
最初のサーバーの応答速度を速める
LCPを改善していきたいと考えるとき、最初のサーバーの応答速度を速めることを意識してみましょう。
サーバーの応答速度を速くすると、LCPを改善することができます。
サーバーのスペックを上げる方法を用いると、スムーズに応答速度を速めることが可能です。
サーバーが古い場合やアクセス数に対してスペックが不足しているというときは、サーバーのスペックアップを図ってみましょう。
WordPressを使ってサイトを作成している場合は、プラグインを使用することでサーバーの応答速度を改善することができるので試してみてください。
LCPを改善していく際の注意点
LCPを改善していくとき、いくつかの注意点もあるので確認しておきましょう。
LCPを改善する前には必ずバックアップをしておくこと
LCPの改善を図るとき、事前にバックアップすることを忘れないようにしましょう。
事前にコードをローカルに落としておくなどして、バックアップが完了した状態で作業に取り掛かることが大切です。
WordPressのプラグインは入れすぎないように
WordPressを使ってサイトを作っているときは、プラグインを利用することでサーバーの応答速度を改善できると解説しました。
しかし、プラグインの入れすぎには注意が必要です。
WordPressのプラグインを入れすぎることで、次のような問題が生じてしまう恐れがあるからです。
- サイトの更新や機能を追加するときの手間が生じる
- 情報の流出やサイバー攻撃など、セキュリティ面でのリスクが増える
- ページの表示速度が低下、同時にアクセス数の上限値が低下することがある
ただプラグインを多く入れるのではなく、どの部分に必要なのかを考えた上で設定をしていきましょう。
LCPを理解してツールを活用しながら、サイトの質を高めていこう
ページが表示されるまでの読み込み時間を指すLCPは、ウェブマーケティングの観点においてスルーできない大切な施策となります。
自サイトのLCPを知り、改善点を理解することでユーザーやGoogleにとって評価されるページを作成することができます。
便利で使いやすい測定ツールを使ってチェックして、自サイトのLCPに関する問題点を明らかにすることから始めてみましょう。
一つずつ丁寧に確認を行ない、LCPの改善を図っていくことでサイトの質も高まっていきます。
