ぺージの表示スピードを速くする方法【画像の遅延読み込み】

ぺージの表示スピードを速くする方法をお伝えします。

この方法を行うことで、まだ画面に表示されていない箇所の画像は読み込まなくなるため、ページの表示スピードが速くなるという特徴があります。

実際に、ページの表示スピードが速い方が Googleの評価が高くなり、「SEO対策に有効」と言われています。

また、ページの表示スピードが速い方が、訪問者にとってもストレスなく見ることができるため、ぜひ実施したほうが良い方法になりますよ。

画像の遅延読み込み（Lazy Loading）とは

「画像の遅延読み込み」とは、まだ画面に表示されていない箇所の画像は、読み込まないようにする（遅れて読み込むようにする）という方法です。

通常は、ページが表示されたときは、そのページにある「すべての画像」を先に読み込みます。そのため、ページの表示に少し時間がかかるのですよね。

しかし、「画像の遅延読み込み」を行うと、画面上に表示されていない箇所の画像は読み込まなくなるため、ページの表示スピードが速くなります。

画像をたくさん表示させているページの場合は、メリットが大きいので、ぜひ実施するようにしましょう。

ぺージの表示スピードを速くする方法の手順

手順１：ぺージの表示スピードを速くしたいページのヘッダー（</head>の真上）に、下記のソースを入れる。

【注意】

ソースを入れるページは、ぺージの表示スピードを速くしたいページです。
そして、ソースを入れる場所は、ヘッダーの中で、</head>の真上に入れます。

ソースを入れる場所については、十分、注意してください。

手順２：画像を表示している箇所は、下記のソースを使う。

通常、画像を表示するときは、<img src="gazou.jpg" alt="">と記述しますよね。しかし、「画像の遅延読み込み」を行うには、上記のソースを使います。

具体的には、「img data-src」と記述して、さらに、「class="lazyload"」を入れるという形です。

「画像の遅延読み込み」を行うには、上記のソースを使用して、画像を表示する必要があるため、ソースを修正していくようにしましょう。

手順３：ページの表示スピードが速くなったことを確認する。

実際に、ページの表示スピードが速くなったことを確認しましょう。
確認方法は、下記、「ページスピードインサイト」を使います。

・https://pagespeed.web.dev/?hl=ja

「画像の遅延読み込み」の作業を行ったページのURLをしてみてください。
次のように、ページの表示スピードが速くなっていたら、確認作業は完了です。

■ 実施前

■ 実施後