AFFINER5にテーマを変更して、画像の遅延読み込みプラグインをいくつか試したみたのですが、なかなかどれも相性が悪い。
例えば「Lazy Load」は遅延読み込みは無いけど、画像がチラつく。
相性がひどく悪いものだと、画像が表示されなかったり、スクロールしたタイミングで画像が消えたりと結構散々なもの。
STINGER系テーマ公式のプラグイン「Lazy Load SEO」を導入したら話は早いのでしょうが、いかんせ有料(5,000円)です。
テーマの購入で先行投資がかさんだばかりなので、当面は無料プラグインでしのいでいきます。
色々試した結果、私のAFFINER5の現設定で不具合なく動作したのが『Lazy Loder』。
本記事ではLazy Loder の導入方法と設定内容を掲載します。
Contents
AFFINER5設定の「フェードイン」では遅延読み込みにはなりません！
ちなみに画像遅延読み込みの方法をWebで調べるていると、他所のサイトでAFFINGER5の設定で「画像をスクロールでフェードインする」をONすると、遅延読み込みになるという情報がありました。
この情報は正しくありません。
該当設定が演出設定の中にあることから想像できる通り、見た目上で画像をフェードインさせているだけで実際に画像を遅延で読み込んでるわけではありません。
該当設定箇所は「AFFINGER 管理」⇒「その他」⇒「記事エリアの画像表示をスクロールでフェードインする」と「サイト全体の画像表示をスクロールでフェードインする」
（特に理由が無ければ、「画像の演出をリセットする」の設定で良いかと思います。）
画像の遅延読み込みしているか？の確認方法
ブラウザのディベロッパーツールを使用して、画像の表示領域に入ったタイミングでダウンロードされていれば遅延読み込みが正しく動作していることが分かります。
Chrome(Windows端末)の場合、ブラウザを開き「F12」を押します。
ディベロッパーツールが開くので「Network」のタブをクリックします。
この状態でブラウザから確認したいWebページを開くと、通信状況がディベロッパーツール上に表示されるかと思います。
通信の都度ここに表示が追加されていくので、スクロールに応じて画像ファイルのダウンロード処理がリストに追加表示されるようなら遅延読み込みが機能しています。
逆にスクロールする前の状態で、ページ内の全画像ファイルがダウンロードされているようであれば遅延読み込みされていません。
Fillterに「png」「jpg」などを入力して、画像ファイルに一覧表示を絞ると分かりやすいかと思います。
Lazy Loder の導入と設定
WordPressの「プラグイン」⇒「新規追加」から「Lazy Loder」で検索します。(下記画像の左上)
「今すぐインストール」を実行し、インストールが完了したら「有効化」します。
インストール済みプラグインから「Settings」で設定メニューを開きます。
現在本サイトで設定している内容を紹介します。今のところ不都合はでていませんのでご参考までに。
設定変更ポイントは2か所。
使用しているテーマや設定、他のプラグインとの相性によって不具合が出る可能性もあるため、必要に応じて調整を行ってください。
サムネイルを実寸法にトリミングする (通常は相対的な縮小によりサムネイルを作ります)
チェックOFFにします。
理由は他のプラグインでリサイズを行っているため。アップロードした画像のリサイズもLazy Loaderで行いたい場合はチェックONでも問題ありません。
Enable lazy loading for iframes
チェックONにします。
iframe内で表示している埋め込みコンテンツ(Google広告とか、YouTubeとか)も画像と同じく、遅延読み込みの対象としておきます。
Lazy Loader で遅延読み込みした結果、結構高速化した。
簡易的な測定として下記のブックマークレットを使用しました。
ページ読み込み時のブラウザ処理の時間でざっくり比較します。
- Lazy Load 無し（遅延読み込み無し）の場合
赤枠箇所が画像ダウンロード時間を含んでいる部分のため、ここに着目します。遅延読み込み無しの場合は「1,915ms」です。
画像が多いページなのでページロードでまとめてダウンロードするとそこそこ遅いです。
- Lazy Loader あり（遅延読み込みあり）の場合
同一ページで遅延読み込みありの場合を測定します。
結果「519ms」。ページロード時の画像ダウンロードをしない分、早くなってますね。
画像多めのページだとかなり高速化に貢献しそうです。
まとめ
AFFINGER5 と画像遅延読み込み系プラグインは何かとトラブルがつきもの。
無料のプラグインで対応するなら、今のところ本サイトで不具合なく動作確認できている「Lazy Loader」がおすすすめ。
SEO対策は云々のかたは、Lazy Load SEO へどうぞ。
