【LCP改善】サイトの表示スピード改善！

こんにちは！今回は、サイトの表示速度に影響を与える「Largest Contentful Paint（LCP）」を改善する方法についてお話しします。

LCPは、Googleがサイトを評価する際の指標の１つコアウェブバイタルの一部で、サイトのパフォーマンスを評価する重要な指標です。
LCPの数値を最適化することがサイト表示速度の改善にもつながります。

今回この問題に取り組む機会があったので、実際に行った改善方法を紹介します。
サイト表示速度改善に取り組もうと思われている方の参考になれば幸いです！

1. LCP（Largest Contentful Paint）とは？

まず最初に、LCPが何を意味するのか簡単に説明します。

LCPとは、ページが最初にロードされてから、最も大きなコンテンツ要素（画像やテキストなど）が表示されるまでの時間を示す指標です。

これは、サイトの表示速度を測る重要な要素で、Googleがサイトを評価する際に使う基準の一つです。

理想的なLCPの時間は2.5秒以内と言われています。

これを超えてしまうと、ユーザー体験に影響を及ぼしてサイトの離脱率が上がる原因とされています。

LCPの計測には、Googleが公式に推奨しているツール「PageSpeed Insights」を使うのが一般的です。
このツールを使って、サイトのURLを入力すれば、LCPの数値を簡単に計測できます。

表示される結果の中で、「Largest Contentful Paint」という項目がLCPの計測値です。
この数値が理想的な範囲（2.5秒以内）に収まっているかどうかを確認しましょう。

私が実際に行ったLCP改善策を紹介します。今回は、主に「LazyLoadの設定」と「フォント読み込みの最適化」に焦点を当てました。

LazyLoad（遅延読み込み）は、ページが読み込まれたときにすぐに表示しなくても良い画像やスクリプトの読み込みを後回しにする設定です。これによって、最初に表示されるコンテンツが素早く表示されるようになります。

これはGoogleの開発者ツールで、Networkタブを確認してどのファイルの読み込みに時間がかかっているかを確認することである程度検討することが出来ます。

私のケースでは、analytics.jsやgooglesitekit.js（Google AnalyticsやGoogle Site Kitのスクリプト）など、計測ツール関連のファイルが読み込みに時間がかかっていました。

これらはページ表示に直接関係しないので、遅延読み込みの設定を行いました。

WordPressを使っているサイトだったので「FlyingScripts」というプラグインを使いました。
このプラグインをインストールし、設定で遅延させたいJSファイルのキーワードを指定するだけで、読み込みを遅らせることができます。

設定はとても簡単で、プラグインの「Settings」メニューから遅延させたいJSファイルのキーワードを追加するだけです。これで、ユーザーにとって重要なコンテンツが早く表示され、計測に使うスクリプトは後回しにされます。

実は、このフォントを読み込んでいることが一番表示スピードに影響をするところでした。。
Google Fontsから読み込んでいた2つのフォントが、ページの他の要素よりも先に読み込まれていたため、表示速度を遅くしていました。

この問題を解決するために、Google Fontsからフォントファイルをダウンロードし、自サーバーに配置しました。
フォントの読み込みをネットワーク越しでやらなくなったので、表示速度がかなり改善されました。

具体的な手順としては、Google FontsのURLにアクセスし、表示されるCSSコードをコピーします。
その中で、src部分に記載されているリンクからフォントファイルをダウンロードし、自サーバーに配置します。

配置後、CSSで自サーバーから読み込むように設定します。

実際にこれらの改善策を実施した結果、LCPの数値が大きく改善されました。モバイルとPCの両方で、表示速度が向上し、特にフォント読み込みの変更が最も効果的でした。

LCP（Largest Contentful Paint）は、サイトの表示速度を改善するために重要な指標です。
今回のように、LazyLoadの設定やフォントの最適化を行うことで、LCPの改善に大きな効果がありました。

サイトの表示速度が遅いと感じている方は、まずはPageSpeed InsightsでLCPを計測し、改善策を試してみることをおすすめします。
改善後は、ユーザーエクスペリエンスが向上し、SEOにも良い影響を与えるので、ぜひ実践してみてください！