画像ファイル(IMG)を非同期読込して、サイトの表示速度をUPさせる方法

この記事では、画像ファイル(IMG)を非同期読込して、サイトの表示速度をUPさせる方法をご紹介します。

画像ファイル(IMG)の非同期読込とは?

画像は、サイズや形式によっては容量が重くなり、サイトの表示速度が遅くなる原因になります。

WEBサイトは、ソースに書かれている内容を上から順に読み込んで表示されますが、途中で画像を読み込むために時間が掛かってしまうと、ページ全体の表示速度が遅くなってしまいます。

画像ファイルの「非同期読込機能」を使うと、画像の読み込みを遅延させる(画像の表示を後回しにする)ことで、結果的にページの表示速度をUPさせることが出来ます。

1ページ中の画像が多いサイト、画像サイズが大きいサイトを運営されている方にはおすすめの機能です。

Step1「テーマ設定→高速化設定→基本」を設定

はじめに、「テーマ設定」→「高速化設定」→「基本」の順に進みます。

次に、「高速化機能の有効化設定」でON」にチェックを入れます。

最後に、「変更を保存」を押して下さい。

Step2 「IMG非同期読込」を設定

はじめに、高速化設定の画面でIMG非同期読込」のタブを押してください。

次に、「IMG非同期読込の有効化設定」で「すべての画像」「投稿本文内」のどちらかにチェックを入れます。

  • 「すべての画像」を選択するとサイト内のほぼすべての画像
  • 「投稿本文内」を選択すると記事本文内の画像のみ

が非同期読込になります。

最後に、「変更を保存」を押してください。

これで設定完了です。画像の非同期読込が有効となりました。

※1.「IMG非同期読込の有効化設定」で「OFF」を選択すると、非同期読込が無効になります。
※2.「画像の非同期読込」のエリアが表示されていない場合は、「IMG非同期読込の有効化設定」のタブをクリックすることで表示されます。

「IMG非同期読込」を使用する際の注意点

非同期読込を使用すると、閲覧者の環境によっては、画像が表示されない・黒塗りになってしまうといった現象が発生するケースがあります。

この現象は、非同期読込特有の現象であり、不具合ではありません。

閲覧者のPC環境などによって、現象発生の有無・見え方が異なります。

皆さんが使用されているPC・スマホのブラウザでスーパーリロードを実行すると画像が表示されます。

スーパーリロードは、ブラウザの種類によって方法が異なります。

「ブラウザ名+スーパーリロード」といったキーワードでネット検索するとスーパーリロードの方法を調べることができます。