ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

Core Web VitalsのLCPを改善する「次世代フォーマットでの画像の配信」方法

  • 2021.01.14
  • SEO
Core Web VitalsのLCPを改善する「次世代フォーマットでの画像の配信」方法

ECサイトにおいて、ユーザーエクスペリエンス(UX)を最適化することは重要なことと言えます。こうしたUXの向上に不可欠なものを示す指標としてweb vitalsが存在します。その中でも特に重要な三つの指標としてCore Web Vitalsがあります。

三つのCore Web Vitals
・Largest Contentful Paint (LCP):ページの表示速度を測る指標

・First Input Delay (FID):ユーザーの応答性を測る指標

・Cumulative Layout Shift (CLS):視覚の安定性を測る指標

この三つの指標をクリアすることでwebサイトのUXの質を飛躍的に向上させることができます。今回の記事では、一つ目のLCP(ページの表示速度を測る指標)を改善する方法を紹介します。

ちなみにCLSの改善については「【画像のSEO対策】新指標のCLSとその改善策を解説」でも解説していますので、ぜひご覧ください。

LCPとは?

LCPとはユーザーがアクセスしてから表示されるまでの時間、つまり読み込み時間が適切かどうかの指標です。このLCPを改善するためには、webサイトの読み込み時間を可能な限り短くする必要があるのです。

LCPを改善する方法

LCPを検証する二つの方法

まずは、LCPの確認方法を二つ紹介します。

Chromeの拡張機能「Web Vitals」

CoreWebVitals
図1 Chromeの拡張機能「Web Vitals」

以下のURLから「Web Vitals」を追加することができます。
Chromeの拡張機能「Web Vitals」

この「Web Vitals」を用いることで簡単にWebサイトのCore Web Vitalsの値を知ることができます。

Page Speed Insights

「Web Vitals」では数値のみで改善点は記載されていませんが、「Page Speed Insights」は改善点も教えてくれます。

改善できる項目の例
図2 改善できる項目の例

図2のような改善点が示されます。図2では特に「次世代フォーマットでの画像の配信」に関する不具合が大きく読み込み時間を費やしていることが分かります。

どうやら「次世代フォーマットでの画像の配信」がLCPの改善にとても必要なことのようです。そこで、この「次世代フォーマットでの画像の配信」の解決方法を紹介します。

「次世代フォーマットでの画像の配信」の解決方法

次世代フォーマットでの画像の配信の解決方法
図3 次世代フォーマットでの画像の配信の解決方法

「Page Speed Insights」では、図3のような解決方法が示されてます。「JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。」とあるように、よく見かけるPNGやJPEG ではなく、WebPのような画像データサイズを節約できる画像フォーマットが推奨されています。

実際にWebP画像を使用したページとJPG画像を使用したページではLCPが違うのかを検証してみました。

WebP画像を使用したページ

JPG画像を使用したページ

検証結果
LCPの値
WebP画像を使用したページ →0.52s(秒)
JPG画像を使用したページ  →0.84s(秒)

Chromeの拡張機能「Web Vitals」で計測したところ、以上のような結果が得られました。このようにWebP画像を使用したページとJPG画像を使用したページとでは明らかにLCPの値に差が見られます。今回検証したページではともにLCP良好の範囲でしたが、より画像が必要なページとなるとさらに大きく差が生じ、JPG画像のままではLCPを大きく損なってしまうでしょう。

またその他のLCPの改善方法として、画像の数を減らす方法や画像の大きさを小さくする方法がありますが、これらを無理に行うとサイト内容の低下につながってしまいますので、適度に行うようにしてください。

PNGやJPGをWebPに変換する方法

PNGやJPGをWebPに変換する方法を紹介します。

以下のサイトでPNGとJPGをWebPに変換することができます。
https://lab.syncer.jp/Tool/Webp-Converter/

「変換前の画像」>「ファイルを選択」をクリックし変換する画像ファイルを選択します。次に「変換後の画像」の下の部分に変換されたWebPファイルが表示されるのでそれをクリックし、ダウンロードします。

WebPに変換することで画像サイズの節約になりますので、ぜひ使用してみてください。

WebPを扱う上での注意点

ここまでWebPを使用したLCPの改善方法を解説してきましたが、WebPを使用する上で注意しなければならない点があります。

それはWebP非対応のブラウザがあるという点です。以下のサイトではWebPがどのブラウザに対応しているかが分かります。
https://caniuse.com/?search=WebP

WebPの対応ブラウザ
図4 WebPの対応ブラウザ

2021年1月の時点ではほとんどのブラウザに対応していますが、上記のサイトの赤色で示されている非対応ブラウザでは、WebPフォーマットの画像は表示されませんので注意してください。

まとめ

以上、LCPの確認方法と改善方法を解説してきました。

LCPを改善するには第一に画像をWebPのような次世代の画像フォーマットに変更することを試みてください。

LCPを改善することでUXの向上につながり、SEOにも良い効果をもたらします。ぜひ今回の記事を参考にLCPの改善を行ってみてください。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。