トンゼミ
1999年からの信頼のEコマース運営実績 本気でネットショップを運営するウェブマスターを応援!

ネットショップ経営戦略支援コンサルタント トンゼミCEO 一般社団法人ジャパンEコマースコンサルタント協会 理事

Core Web Vitals(コア ウェブ バイタル)のLCPを改善する方法

LCP(Largest Contentful Paint)とは

LCPLargest Contentful Paint)は、サイトの読み込みに関する指標で、Webページのなかで最も有意義なコンテンツ(大きなブロック単位のテキスト、最大画像、動画など)をどれだけ早く読み込まれ、表示することができるかを表す指標です。ということは多くの場合で画像が対象となりますので、画像の最適化を行うことで読み込み速度を速めることができるようになります。

画像の最適化

画像サイズを確認してみます。画像サイズを軽くすることによって読み込み速度はかわります。
しかし圧縮しすぎると画質が荒くなるのでという声もよく聞きますが、画像編集ソフトの各機能をうまく活用し圧縮したり、リサイズを行うなどして画像の最適化を行いましょう。

また画像で使用されているフォーマットですが「JPEG」「GIF」「PNG」の3種類を多く使用されているかと思います。「Page Speed Insights」で表示される改善点に「次世代フォーマットでの画像の配信」との表記があるかと思います。説明を読むと「WebP や AVIF などの画像形式は、一般的に PNG や JPEG より圧縮率が高く、ダウンロード時間やデータ消費量が抑えられます」と記載されています。 「JPEG」「GIF」「PNG」 で作成した画像を「 WebP 」に変更することも検討してください。しかし、 「 WebP 」 非対応のブラウザもありますので、変更された場合には、必ず表示確認をお願いします。

レンダリングを早く

JavaScriptやCSSも読み込みに影響を与えています。タグを見直して不要なJavaScriptやCSSは削除したり、最少化、圧縮をしたり、初期の読み込みで不要なJavaScriptは後から読み込むなど無駄な動きをしないように修正をお願いします。今は使用していないけどそのまま残しているというようなコードなども削除するようにしましょう。

サーバーの対応時間を早く

レンタルサーバーを利用のショップさんが多いかと思いますが、サーバーに負荷がかかると表示速度は遅くなりますので、サーバー環境も見直すことも検討されるとよいかと思います。また、キャッシュの活用も検討ください。

今回は、 「Core Web Vitals(コアウェブバイタル)」 の一つの指標であるLCP(Largest Contentful Paint)の改善方法についてご紹介しました。まずは画像の最適化からなど一つ一つ改善を行うようにしましょう。次回はFID(First Input Delay)の改善方法についてご紹介します。

▲ PAGE TOP