WordPress「a3 Lazy Load」画像や動画を遅延読み込みするプラグイン

ワードプレスで画像や動画を遅延読み込みさせてサイト表示を高速化するプラグイン「a3 Lazy Load」を紹介します。

WordPress「a3 Lazy Load」

ワードプレスのプラグイン「a3 Lazy Load」は、画像や動画を遅延で読み込みさせる事ができるプラグインです。画像や動画を遅延で読み込みさせる事で、サイト表示を高速化する事ができます。現在のSEO対策の一つとして、モバイルのページ表示速度がかなり重要視されてきています。今後は、サイトの表示速度が遅いとGoogleに判断された場合、検索順位の上位表示も難しくなります。サイトやブログのアクセスを減らさない為にも、画像や動画を遅延読み込みさせてサイト表示を高速化させておきましょう！

ちなみにワードプレスのバージョンが「WordPress5.5」以降の場合では、デフォルトで遅延読み込みの機能が標準装備されているのですが、Googleのサイト表示速度を測るツール「PageSpeed Insights」を試してみると、やはりこのプラグインを利用した方がページの表示速度は速くなります。遅延読み込みをするプラグインは他にもたくさんありますが、いろいろと試してみた結果この「a3 Lazy Load」が一番オススメです。

ワードプレスのプラグイン「a3 Lazy Load」の設定方法

まずは「a3 Lazy Load」をインストールします。ダッシュボードのメニュー「プラグイン」の「新規追加」から、「a3 Lazy Load」と検索し「今すぐインストール」で「有効化」します。メニューの「設定」の中に表示された「a3 Lazy Load」をクリックすると、設定をする画面が表示されます。「a3 Lazy Load」の設定ですが、デフォルトのままで何も変更しなくても問題なくサイトの表示速度が速くなります。

僕の場合は、「Effect & Style」の「Loading Effect」を「SPINNER」から「FADE IN」に変更し「Image Load Threshold」の数値を「400px」に変更したのみです。

「a3 Lazy Load」の設定メニューの簡単な説明をします。「Lazy Load Activation」では、画像の遅延をさせるかという設定なのでデフォルトのまま「ON」にしておきます。「Lazy Load Images」では、記事中やウィジェット、サムネイルなどの画像の遅延を部分的に「ON」か「OFF」にする事ができます。ここも全て「ON」にしておきましょう。

「Lazy Load Videos and iframes」では、動画の遅延読み込みをするかしないかの設定です、ここもデフォルトのまま全て「ON」にしておくのがオススメです。「Exclude by URI’s and Page Types」では、遅延読み込みをさせないページを設定する事ができます。「URL」を入力するか「Page Type Exclusions」で設定できますが、こちらも遅延読み込みをさせたくないページが無いのであれば、デフォルトのままで大丈夫です。

「Effect & Style」では、遅延読み込みをしている時のエフェクト（アクション）を設定できます。「FADE IN」と「SPINNER」の2種類があるので好みのエフェクトを選択しましょう。ちなみに「SPINNER」は、クルクルと回るエフェクトがダサいので「FADE IN」がオススメです。「Loading Background Colour」は、画像を読み込みしている際の背景色になります。これは、サイトやブログの背景色と合わせておくと良いかと思います。

「Image Load Threshold」では、画像を読み込みし始めるタイミングになります。デフォルトでは「0px」になっているのですが、これだとスクロールをして画像の位置にきた時に読み込みされるので、サイトを表示した時の一番上にくるトップ画像などがスクロールをしてから表示される違和感が出ます。なので、「400px」くらいに変更しておきましょう。

　　　　　　　 　　

関連記事