Webサイトを表示するためのファイルの中でも、画像ファイルのサイズは比較的大きく、サイトの表示速度が遅くなる原因の1つとなります。
この記事では、「a3 Lazy Load」というプラグインを使って画像の遅延読み込みを行い、ページの表示速度を高速化する方法をご紹介しています。
Webサイトの表示が遅いのは画像に原因が？
Webサイトは、様々なファイルを読み込んで1つのページを表示しています。ファイルの種類は様々で、コンテンツに関して記述されているHTMLや、スタイリングに関するファイルであるCSSファイル、処理やアニメーションなどを行うJavaScriptなど、色々な種類があります。
実は、Webサイトを表示されるファイルの中で画像や動画ファイルは非常にサイズが大きいファイルです。そのため、画像が何枚も貼られているページでは、それだけファイルの読み込みサイズが大きくなり、ページの表示が遅くなる原因となってしまいます。
そこで、その対策に有効なのが「画像の遅延読み込み」と呼ばれるものです。
画像の遅延読み込みとは？
画像の遅延読み込みとは、簡単に言ってしまうと「画像を後で読み込むようにする」という方法です。
ページファイルを読み込む時に画像ファイルを除外すれば、それだけ早くページの読み込みを完了させることができます。
では、画像ファイルはいつ読み込むのか？という疑問が出てきますが、答えは「必要な時に画像ファイルを読み込む」です。
普段PCやスマホでWebサイトを見るときに、スクロールしてコンテンツを読んでいきますよね。そのスクロールに合わせて画像を読み込むというのが画像の遅延読み込みの行ってくれることになります。
WordPressなら「a3 Lazy Load」がおすすめ
WordPressで画像の遅延読み込みを行う方法はとても簡単で、プラグインを追加するだけです。
たったそれだけで画像の遅延読み込みを行うことができるようになるので、WordPressでサイトを作ったら忘れずに設定しておきましょう。
一番おすすめのプラグインは「a3 Lazy Load」というプラグインです。
[plink 1148]
このプラグインは、インストールするだけで有効化することができ、画像のフェードインアニメーションもスムーズなので、ストレス無く画像を表示することができます。
a3 Lazy Loadの設定
a3 Lazy Loadは基本的に初期設定のままで問題なく使用することができますが、デフォルトだとスピナーがクルクルと回るアニメーションが適用されているので、これをフェードインのアニメーションに変更しておきましょう。
設定画面を開くと、「Effect & Style」という設定項目があるので、ここを「FADE IN」に設定しておきましょう。
これで設定は完了です。実際に投稿ページをチェックして、正しく画像の遅延読み込みが行えているか確認してみてください。
