Wordpressで画像の遅延読み込みプラグインと言えば「a3 Lazy Load」です。
a3 Lazy Loadの使い方は簡単で、基本的にはインストールして有効化するだけで効果が出ますが、ここではa3 Lazy Loadの設定について詳しく解説します。
ページ高速化のために”とりあえずプラグインをインストールしただけ！”という方は多いと思いますので、この記事でプラグインの設定項目について理解を深めていただければと思います。
a3 Lazy Loadの設定は初期設定でもOKですが、見直すと更によくなります。
この記事の目次
a3 Lazy Loadの使い方と設定方法
「a3 Lazy Load」の役割はパソコンやスマホなどの画面（Viewport）外にある画像の読み込みを遅延させ、必要になったタイミングで読み込むことでページを高速化することにあります。
PageSpeed Insightsには”オフスクリーンの画像遅延読み込み”という改善項目がありますが、この項目の解決手段として「a3 Lazy Load」を選んだ方も多いと思います。
そしてプラグインのインストールとセットで行うのが設定なのですが、a3 Lazy Loadの設定画面は残念ながら英語表記です。
また、少し専門的な内容も含まれるので、この記事で噛み砕いて解説します。
a3 Lazy Loadの使い方
インストールや使い方は簡単なので割愛気味でいきます。
a3 Lazy Loadの使い方ですが、このプラグインはインストールして有効化するだけでサイト内の画像やiframeなどが遅延読み込みになります。
注意点としてa3 Lazy Loadを使う場合、他の画像遅延機能は全てOFFにしましょう。
ポイント
人気のWordpressテーマや、一部のプラグインには「画像の遅延読み込み機能（Lazy Load機能）」が同梱されていることが良くあります。
この機能がONになっているとプラグインと干渉する可能性があります。
プラグインのインストール
執筆時プラグインは管理画面からインストールできました。
管理画面左メニュー＞プラグイン＞新規追加＞a3 Lazy Load
プラグイン＞新規追加から「a3 Lazy Load」と検索し、今すぐインストールを押して有効化すればOKです。
念のためプラグインのページも以下にリンクしておきます。
外部リンク
【プラグインの公式ページ】
a3 Lazy Load – WordPress プラグイン | WordPress.org 日本語
インストールして有効化したら設定を確認しましょう！
a3 Lazy Loadの設定方法
ここがメインでa3 Lazy Loadの設定画面（Settings）です。
a3 Lazy Loadの設定はメニューから
設定画面は英語表記ですが、順番に詳しく見ていきましょう！
ブラウザの翻訳機能が便利！
説明の前に…英語が苦手な方はブラウザの翻訳機能を使ってみて下さい・ｗ・
Chromeの翻訳機能
設定画面で右クリックしてメニューを出してそこから翻訳を起動すればOK！
翻訳機能で項目の意味がある程度分かる
翻訳機能を使用している状態でも設定変更は出来ます。
この記事では英語をもとに説明しますが、翻訳も見ながらやれば更に簡単です。
設定項目は全部で１０個です。（執筆時）
上から順番に詳しく見ていきましょう！
Plugin Framework Global Settings
「プラグインフレームワークのグローバル設定」という項目です。
この設定画面の設定と、プラグイン削除時の設定ができます。
Open Box Display
オンにすると設定変更後もこの設定画面の管理パネルの開閉位置が保持されます。
１０項目しかないので全部開いてもしれています…OFFのままでOK！
Clean up on Deletion
a3 Lazy Load自体を削除（無効化ではなくアンインストール）した時にデータベースにプラグインのデータを残すかどうかの設定です。
ONにしたままプラグインを削除すれば綺麗サッパリですが、データベースの"掃除"はプラグインで簡単にでき、これくらいでは重くならないので気にしなくてOK！
結論
どちらもOFFでOK！
Lazy Load Activation
「遅延読み込みのアクティブ化」という項目です。
Lazy loadは画像の遅延読み込みです。つまりこのプラグインのON、OFFです。
結論
ONでなければこのプラグインを導入している意味がなくなります…
Lazy Load Images
どの部分の画像を遅延読み込みするか？を選ぶ項目です。
| Enable Lazy Load for Images | 画像の遅延読み込みの有効化 |
|---|---|
| Images in Content | コンテンツ内（記事内）の画像 |
| Images in Widgets | ウィジェット内（サイドバー等）の画像 |
| Post Thumbnails | サムネイル画像 |
| Gravatars | アバター画像 |
| Noscript Support | JavaScript無効時のフォールバック |
結論
基本的に全てON推奨です。
遅延読み込みを適用したくない画像がある場合は、この下の設定でクラス指定をして除外する方が良いです。
Noscript Supportについてですが、これはオンにしておいて下さい。
ページのコード量は少し増えますが、検索エンジンが遅延対象の画像を認識できないという問題を防げる可能性があります。
（クローラーの性能は上がりましたが、このコードはあった方が良いと思います。）
Exclude Images
遅延読み込みから除外したい画像のクラスを指定すれば除外できます。
具体的にはimgタグの中に入っているクラス名などを指定します。
（例）
image-class1,image-class2
data-skip-lazyという名の属性を画像に追加しても除外されるとのことです。
Horizontal Scroll
a3 Lazy Loadは水平スクロールの画像表示領域も遅延読み込みできるとのこと。
多分スライダーやギャラリーみたいなパーツのことでしょう…
遅延読み込みするには水平スクロール部分のidかclassを指定しないと有効にならないようです。
参考
画像に付与したクラス名や、水平スクロール部分のidなど、CSSやHTML属性に関する知識が必要になります。
Lazy Load Videos and iframes
動画とiframe（YouTube埋め込み等）を遅延読み込みするかどうかの設定です。
| Video and iframes | 動画（iframe）の遅延読み込みの有効化 |
| In Content | コンテンツ内（記事内） |
| In Widgets | ウィジェット内 |
| Noscript Support | JavaScript無効時のフォールバック |
結論
基本的に全てON推奨です。
先ほどの「Lazy Load Images」の項目の動画版と思っていただければOKです。
Exclude Videos / iframes
先ほどの画像の時と同様です。
除外する動画やiframeのクラスを指定するか、専用の属性を付与すれば遅延読み込みから除外できます。
Exclude by URI's and Page Types
Exclude by URIs
「Exclude by URIs」という欄では、指定した文字列が含まれるURL（ページ）全体の画像や動画を遅延読み込みから除外する設定です。
（例）
URL：example.com/2022/hoge/の場合
/hoge/と入力すれば投稿ページが除外。
/2022/と入力すればURLに2022を含む全ページが除外。
Page Type Exclusions
その下にある「Page Type Exclusions」ではWordpressの投稿タイプごとに遅延読み込みを除外できます。
| Home Page | サイトホーム |
| Front Page | フロントページ |
| Posts | 投稿（記事） |
| Pages | 固定ページ |
| Post Categories | カテゴリーページ |
| Post Tags | タグページ |
| Search Page | 検索ページ |
| Author Pages | 著者ページ |
| Archive Pages | アーカイブページ |
結論
特別な理由がない限り全てOFF（遅延除外ページなし）でOK！
Script Load Optimization
「スクリプトの読み込みの最適化」という項目です。
簡単に言うと「a3 Lazy Load」のプログラムをサイトのどの部分で読み込むかです。
基本的にはヘッダーよりもフッターで読み込んだ方がページの描画は速くなります。
結論
そのまま（フッター）でOK！
画像表示などに問題がある場合はヘッダーに変更すると治る可能性あり。
WordPress Mobile Template Plugins
調べたところ、Wordpressを簡単にモバイル対応に出来るプラグインとして「WPTouch」や「MobilePress」というものがあるようで、これらのプラグインが使用されている時は「a3 Lazy Load」を無効にするという設定のようです。
多分プラグイン同士で干渉して問題が発生するのでしょう…
結論
そのままONが無難。OFFにする理由がない？
Effect & Style
遅延した画像を表示する時の演出を「スピナー」と「フェードイン」から選ぶことができます。
これは試してみて気に入った方で良いと思います。
参考
個人的にはスピナーは味気ない気がします…
フェードインの方が今風でエレガントでオススメ！
その下の「Loading Background Colour」は画像読み込み時の背景色です。
サイトの背景と同色に設定しておくと画像表示時に違和感が無くなるはずです。
Image Load Threshold
画像読み込みのしきい値（閾値）の設定です。
簡単に言うとこの設定でpx（ピクセル）数を大きくした分だけ画像が早いタイミングで読み込まれることになります。
これは画像の方が分かりやすいです。
Threshould:しきい値のイメージ
例えば設定値が０だと閲覧端末の画面に触れたタイミングで画像が読み込まれます。
設定値を400pxに設定すると、画面サイズ＋400pxの領域に画像が触れたタイミングで画像が読み込まれるようになります。
動作としては画面サイズを設定したpx分だけ広げて扱っているようです。
400pxほどに設定すれば画像が画面内に入ってくるよりも前に読み込みが始まるので、より自然に画像が表示できるという事です。
ただ、当サイトではこのあたりが原因でアンカーリンクにズレが発生していました。
-
- 【解決】アンカーリンク（目次）のジャンプ先がずれる原因と対処法まとめ。
続きを見る
Threshouldの値を０以外に設定する場合はアンカーリンク（目次など）のジャンプ先がズレていないか確認した方が良いと思います。
Jetpack Site Accelerator (Photon) Compatibility
Wordpressプラグインの「Jetpack」に含まれるサイトアクセラレータ（旧:Photon）を使っている方は、この設定をONにすることでCDN経由の画像にも「a3 Lazy Load」の遅延読み込みを適用できるようです。
使っていない方はそのままOFFで使いましょう。
余談ですが、以前CloudflareのCDNを使用していた時は、この設定に関係なく遅延読み込みが効いていた覚えもあるのですが…別のプラグインだったかもしれません。
a3 Lazy Loadで画像が表示されない時がある？
少し気になったので最後に補足です。
a3 Lazy Loadの公式サポートページを読んでいると、ごく稀にa3 Lazy Loadがうまく動かない事があるようです。
実際に今までのサイトで画像の表示に問題が起こったことが無いので、具体的な話は出来ませんが、経験上a3 Lazy Loadで画像が表示されなくなる原因には以下のようなものがあると思います。
- サーバーのPHPが古い：推奨は7.4以上（執筆時）
- サーバーのMySQLが古い：推奨は5.6以上（執筆時）
- JS最適化が問題：主にJSコードの圧縮や結合が原因
- テーマや他のプラグインの遅延機能が干渉している
- サーバー、ブラウザなどのキャッシュの問題
- a3 Lazy Loadの読み込み位置（フッター）が原因
サポートページを見たところjQueryは関係なさそうで、JavaScriptが怪しそうです。
特に最適化プラグイン、Wordpress高速化プラグインなどのオプションでJSを圧縮したり結合している時は何かと不具合が出がちです。
こんな時は一度プラグインを全停止してみると良く分かります。
a3 Lazy Loadの設定にミスが考えられるなら、設定画面最下部の「Reset Settings」を押せばリセットすることができます。
まとめ
以上、Wordpressプラグイン「a3 Lazy Load」の使い方と設定についてでした。
現在のインターネット回線の速度なら、体感できるほどスピードアップはしないかもしれませんが、少なくともGoogleが提供しているサイトスピードテストツールであるPageSpeed Insightsのスコアは伸びます。
サイトスピードはSEO的にもますます重要になってきたので、この手のプラグインは必須ですね！
