ブログ記事の作成になれてくると自然と画像の数も多くなってくるもの。
サイズを圧縮したりしても、画像の数が増えるとサイトの表示速度はどうしても遅くなってしまいます。
そこで、ぜひインストールしておきたいのが画像遅延系のプラグインです。
Lazy Loadに代表される画像遅延系のプラグインは、画面に表示されてない画像の読み込みを遅らせることでサイトの表示速度を上げてくれます。
表示速度は検索エンジンによるサイト評価にも関わってくる大切な要素です。
そのため、すぐにインストールしておきたいところなのですが、困ったことに画像遅延系のプラグインは目次系のプラグインと相性が悪いという難点があります。
例えば、「Table of Contents Plus」（TOC+）は目次を生成してくれる代表的なプラグインですが、Lazy Loadを入れるとジャンプ先が思いっきりずれます。
そのような困った現象を解決してくれる優良プラグインが「a3 Lazy Load」です。
「a3 Lazy Load」は名前から分かるとおり画像遅延系プラグインの一つですが、画像遅延機能はそのままにTOC+でジャンプしてもずれないという特性があります。
そのため、TOC+を使用されている方にはうってつけのプラグインです。
この記事では、そんな「a3 Lazy Load」についてご紹介していきます。
ちょっとした落とし穴があったんですよね。この記事ではそれについてもあわせてご紹介したいと思います。
目次
- a3 Lazy Loadとは
- a3 Lazy Loadの設定方法
- a3 Lazy Loadのインストール
- a3 Lazy Loadの設定項目
- Lazy Load Activation（遅延読み込みの有効化）
- Lazy Load Images（遅延読み込みを行う画像）
- Lazy Load Video and iframes（遅延読み込みを行う動画やiframe）
- Exclude by URI’s and Page Types（遅延読み込みの対象外にするURLやページ）
- Effect & Style（エフェクトとスタイル）
- Script Load Optimization（Lazy Loadの実行スクリプトの最適化）
- WordPress Mobile Template Plugins（スマートフォン対応最適化プラグイン）
- Image Load Threshold（画像のロードのしきい値）
- a3 Lazy Loadはなぜ目次のアンカーリンクでずれないのか
- a3 Lazy Loadを表示速度測定ツールで計測した結果
- a3 Lazy LoadはWordPressテーマ「JIN」と相性がよくなかった
- まとめ：結局a3 Lazy Loadはオフにしてしまいました
a3 Lazy Loadとは
a3 Lazy Loadとは画像遅延系のWordPressプラグインです。
本家Lazy Loadに触発され開発されたプラグインとのことで、本家と同様に画面に表示されてない画像の読み込みを遅延させ、サイト全体の速度を向上させてくれます。
Lazy Load系のプラグインにはいくつかあり、有名なものとしてはa3 Lazy Loadを含めて下記の4種類があります。
それぞれ設定できる内容などが異なりますが、他のプラグインとの相性なども含めてどれを使うか決めていくかたちになるかと思います。
a3 Lazy Loadの設定方法
以下では簡単にa3 Lazy Loadのインストールから設定項目について説明します。
a3 Lazy Loadのインストール
WordPressの管理画面からインストールします。ワードで検索しましょう。
インストール後は「有効化」します。
a3 Lazy Loadの設定項目
a3 Lazy Loadの各設定項目です。
Lazy Load Activation（遅延読み込みの有効化）
Enable Lazy Load：「ON」で遅延読み込みを有効化します。
Lazy Load Images（遅延読み込みを行う画像）
- Enable Lazy Load for Images：画像について遅延読み込みを有効にする。
- Images in Content：記事内の画像
- Images in Widgets：ウィジェット内の画像
- Post Thumbnails：サムネイル画像
- Gravatar：グラバター（Globally Recognized Avatar）
- Skip Images Classes：遅延読み込みをさせたくない画像のクラスを指定
- Noscript Support：JavaScriptを使用できないブラウザのユーザーの場合はフォールバックとしてNoscriptタグを有効化する。
Lazy Load Video and iframes（遅延読み込みを行う動画やiframe）
- Video and iframes：動画やiframe
- in Content：コンテンツ内
- in Widgets：ウィジェット内
- Skip Video Classes：遅延読み込みをさせたくない動画のクラスを指定
- Noscript Support：JavaScriptが使用できないブラウザを使っているユーザーの場合、フォールバックとしてNoscriptタグを有効化する。
Exclude by URI’s and Page Types（遅延読み込みの対象外にするURLやページ）
Exclude by URls：対象外にしたいURLを直接指定できます。
Page Type Exclusions：
対象外にするページを決めることができます。トップページ、カテゴリーページ、アーカイブ、検索結果など。
特に対象外にしたいページがなければすべて「OFF」でOKです。
Effect & Style（エフェクトとスタイル）
- Loading Effect：ロード中のエフェクト
- Loading Background Colour：ロード中の画像の背景色
この辺りは適当にお好みで。
Script Load Optimization（Lazy Loadの実行スクリプトの最適化）
Theme Loader Function：
Lazy Loadを実行するスクリプトの記述をヘッダー（wp_head）にするかフッター（wp_footer）にするかを設定します。
基本はデフォルトの「FOOTER」でよいはずで、不具合があれば「HEADER」に変えてみてください。
WordPress Mobile Template Plugins（スマートフォン対応最適化プラグイン）
- Disable On WPTouch：WPTouchが使われている場合、a3 Lazy Loadを無効化する。
- Disable On MobilePress：MobilePressが使われている場合、a3 Lazy Loadを無効化する。
それぞれのプラグインを使用してなければ「ON」でOKです。
Image Load Threshold（画像のロードのしきい値）
Threshold：しきい値（ピクセル）
ページ中の画面上に表示されているポイントから何ピクセル先までロードするかを設定します。
0pxであれば事前に全くロードしないので表示されて初めてロードし始めます。
多めに取っておけばそれだけ急な表示にも対応できますが、その分、表示速度の改善の度合いは薄れてしまいます。
僕は400pxで設定しています。
a3 Lazy Loadはなぜ目次のアンカーリンクでずれないのか
TOC+などの目次系プラグインは、ページの読み込み時にアンカーリンクのジャンプ先までの距離を設定します。
それにより、目的の見出しまで正確にジャンプできるのですが、Lazy Loadは画像の読み込みを遅延させてしまいます。
そのため、読み込まれてない画像は高さが0pxで設定されてしまい、距離に誤差が生じてしまいます。
しかし、a3 Lazy Loadはまだ読み込まれてない画像の高さも取得できるため、アンカーリンクが正確に機能します。
また、Lazy Load系プラグインは画像がスクロールしない限り読み込まれないことから、検索エンジンのクローラーが取得し漏らしてしまうという弱点もあります。
画像がクローラーに認知されないことから検索エンジンにインデックスされないため、訪問機会を失っているとの見方もあるようです。
a3 Lazy Loadではこの問題もクリアしており、記事中の画像も全てクローラーに認識されるというメリットがあります。
a3 Lazy Loadを表示速度測定ツールで計測した結果
設定を行った前後の変化を表示速度測定ツールで計測してみました。
使用させてもらったサイトはこちらのサイト。
Google様に測っていただきます。世界の公式なので間違いありません。
その結果がこちら。
有効化前で、左がモバイルで右がPC。
a3 Lazy Loadを有効化した後。同様に左がモバイルで右がPC。
どういうことかよくわからないのですが、何故かPCの方のスピードが落ちてしまいました。
項目の設定の仕方で変わるのかもしれませんが、ちょっと納得のいかない結果です。
これではa3 Lazy Loadを設定する意味がなっしんぐ…。
a3 Lazy LoadはWordPressテーマ「JIN」と相性がよくなかった
また、a3 Lazy Loadにはスピードが改善されない他にも、もう一点だけ大きなデメリットがあったのですね。
それが、WordPressテーマ「JIN」で使用すると一部デザインに余白が生じるということです。
PCサイトの方は特に問題はないのですが、モバイルサイトで、画面下部のページャーとプロフィールの間に謎の空白が…。
ちなみにこちらが通常の場合。
こちらの問題については、実はすでにJINのフォーラムで話題に出ており、解決策も示されているようです。
ひつじさんからは、
- a3 Lazy Loadを使用する場合はコンテンツマガジンを利用しない
- 余白でCSSを埋める
という解決方法が提案されています。
JINユーザーはここさえクリアできればこれで決まりと言わんばかりの良プラグインなのですが…。
まとめ：結局a3 Lazy Loadはオフにしてしまいました
ぐだぐだな紹介になってしまいましたが、通常は普通に速度改善されるプラグインだと思います。
このブログで速度改善が見られなかった原因が分かったら、あらためてこちらの記事に追記したいと思います。
また、JINとの相性が一部よくない部分がありますが、こちらはJINに固有の現象ですので、他のテーマを使用されている場合は問題はありません。
画像遅延系はGoogleも推奨しているところで、Google謹製のNative Lazy Loadというプラグインがリリースされているくらいです。
比較しつつぜひ最適なプラグインを導入していただき、積極的に速度改善に臨んでいただければと思います。
