画像の遅延読込でサイトを高速化してくれるプラグイン「a3 Lazy Load」

スポンサーリンク

a3 Lazy Loadとは

a3 Lazy Load」プラグインは、サイトを表示する際に遅くなる原因の画像や動画を遅らせて読み込むことでサイトの表示を高速化してくれます。他にも似たようなプラグインがたくさんあるのですが、更新が止まっていたり設定が複雑だったりしたので、このプラグインを使っています。

a3 Lazy Loadのインストール

「a3 Lazy Load」プラグインのインストール方法は他のプラグインと同じです。

「プラグイン」->「新規追加」をクリックし、「a3 Lazy Load」で検索します。

「a3 Lazy Load」が表示されたら、「今すぐインストール」ボタンをクリックしてインストールします。インストール完了後に「有効化」ボタンをクリックすれば、使用できるようになります。

a3 Lazy Loadの設定

「a3 Lazy Load」の設定は簡単です。レイアウトが崩れない限りは全部を有効にして良いと思います。

Lazy Load Activation

遅延読み込みを有効にするかです。有効にする場合は「Enable Lazy Load」を「ON」にしてください。

Lazy Load Images

画像の遅延読み込みの設定になります。遅延読み込みの有効にする画像の種類を選択できます。問題が起こらない限り全て有効でかまわないです。

Lazy Load Videos and iframes

動画とiframeタグの遅延読み込みの設定になります。こちらも種類ごとに選択できますが、問題がなければ全て有効でかまいません。

Script Load Optimization

スクリプトの読み込みをどこで行うかの設定になります。基本「FOOTER」で良いと思いますが、テーマによってはレイアウトが崩れる可能性があるのでその場合は「HEADER」を選択してください。

WordPress Mobile Template Plugins

特定のモバイル用テンプレートプラグインを使用しているときに無効にするかどうかの設定です。わざわざこういう設定があるということはなにか問題があるのかもしれないので、無効にしておいた方が良いかもしれません。私の場合は両方使っていないため無効にしています。

Effect & Style

遅延読み込み時のエフェクトの設定です。アニメーションや色を変更できるので、サイトに合ったエフェクトに変更できます。

Iamge Load Threshold

遅延読み込み時に表示されているエリアからどこまで読み込むかです。「0」を設定すると画像が表示されるときに初めて読み込みを開始します。私は「200」に設定していますが、もう少し幅をとっても良さそうです。

まとめ

「a3 Lazy Load」プラグインを使うことでサイトの表示が目に見えて速くなりました。画像や動画をたくさん使っているサイトでは必須のプラグインといっても良いんじゃないでしょうか。

検証環境

macOS High Sierra
WordPress 4.8.3
a3 Lazy Load 1.8.2