表示速度を改善する、3つの指標と直す順番

ページを開いたのに、なかなか表示されない。ボタンを押しても反応が遅い。読もうとしたら、広告が出てきて文章がずれた。こうした経験は、誰にでもあるはずです。

表示の遅さは、お客様にとって読む前に離れる理由になります。どんなに良い内容や商品でも、表示される前に離れられては伝わりません。この記事では、表示速度を測る3つの指標と、多くのサイトで効きやすい直す順番を解説します。

表示速度を測る3つの指標

Googleは、ページの使いやすさを測る指標として、次の3つを示しています。まとめて「Core Web Vitals（コアウェブバイタル）」と呼ばれます。

LCP：一番大きな部分が表示されるまでの時間

ページの中で一番大きな画像や文章のかたまりが表示されるまでの時間です。「ページが表示された」と感じるまでの速さを表します。2.5秒以下が目安です。

INP：操作への反応の速さ

ボタンを押したり、メニューを開いたりしたときに、画面が反応するまでの時間です。0.2秒以下が目安です。

CLS：表示中のずれ

ページを読み込んでいる途中で、画像や広告が後から入ってきて、文章やボタンの位置がずれる度合いです。0.1以下が目安です。

表示速度の測り方

PageSpeed Insightsでは、実際の訪問者のデータ（訪問者が十分にいる場合）と、その場で測ったテストの結果の両方が表示されます。判断には、実際の訪問者のデータを優先します。

ページを重くしている主な原因

ページの表示を遅くしている原因はさまざまですが、多くのサイトで、ページの重さの大半を占めているのが画像です。

• 大きすぎる画像表示される大きさよりはるかに大きい画像や、圧縮されていない画像が、そのまま使われています。
• 使っていないプログラム以前に入れたまま使っていないプラグインやアプリ、計測のタグが、読み込みを遅くしています。
• 大きさの決まっていない画像や広告後から読み込まれる画像や広告の場所が確保されていないと、表示中のずれ（CLS）が起こります。

効果が出やすい、直す順番

1. 画像を軽くする

   表示される大きさに合わせて画像を縮小し、WebPなどの軽い形式に変えます。最初の画面に入らない画像は、見える位置に来てから読み込む設定にします。多くのサイトで、もっとも効果が大きい対策です。

2. 使っていないプログラムを整理する

   使っていないプラグイン・アプリ・計測のタグを外します。残すものも、読み込みのタイミングを後ろにずらせないかを確かめます。

3. 表示のずれを防ぐ

   画像や広告、埋め込みの部分に、あらかじめ大きさを指定して場所を確保します。

4. 最初の画面を優先して表示する

   最初の画面に表示する画像や文字を先に読み込み、それ以外は後から読み込むようにします。

5. サーバーを見直す

   上の対策をしても遅い場合は、サーバーの性能や、配信の仕組み（CDN）を見直します。

直すたびにPageSpeed Insightsで測り、効果を確かめながら進めます。

ケースで見る：スマホの表示を、5.8秒から2.3秒に

まとめ

表示速度は、お客様の目に見えない接客です。LCP・INP・CLSの3つで今の状態を確かめ、画像の軽量化、使っていないプログラムの整理、表示のずれの対策の順に直していけば、多くのサイトで効果が出ます。リニューアルの機会に見直す場合は、リニューアルで検索順位を落とさない手順もあわせてご覧ください。

表示速度の改善や、速く軽いサイトづくりは、サイト・ツール制作で、診断から改善の実行までをご一緒します。