WordPress

WPプラグイン「a3 Lazy Load」でサイトを高速化!目次のアンカーリンクがずれるのも解決!

自分のブログを読み込んでみたら表示速度が重すぎてびっくり!こんなんじゃGoogleに評価を下げられてしまう…!

ブログ記事の作成になれてくると自然と画像の数も多くなってくるもの。

サイズを圧縮したりしても、画像の数が増えるとサイトの表示速度はどうしても遅くなってしまいます。

そこで、ぜひインストールしておきたいのが画像遅延系のプラグインです。

Lazy Loadに代表される画像遅延系のプラグインは、画面に表示されてない画像の読み込みを遅らせることでサイトの表示速度を上げてくれます。

表示速度は検索エンジンによるサイト評価にも関わってくる大切な要素です。

そのため、すぐにインストールしておきたいところなのですが、困ったことに画像遅延系のプラグインは目次系のプラグインと相性が悪いという難点があります。

Table of Contents Plus(TOC+)で目次のジャンプ先がずれる場合の対応方法TOC+で生成された目次のジャンプ先がずれる場合の原因と対応についてまとめています。...

例えば、「Table of Contents Plus」(TOC+)は目次を生成してくれる代表的なプラグインですが、Lazy Loadを入れるとジャンプ先が思いっきりずれます。

利便性のために用意した目次で逆に不便に…。

そのような困った現象を解決してくれる優良プラグインが「a3 Lazy Load」です。

「a3 Lazy Load」は名前から分かるとおり画像遅延系プラグインの一つですが、画像遅延機能はそのままにTOC+でジャンプしてもずれないという特性があります。

そのため、TOC+を使用されている方にはうってつけのプラグインです。

この記事では、そんな「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の設定項目

a3 Lazy Loadの各設定項目です。

Lazy Load Activation(遅延読み込みの有効化)

a3 Lazy Load:設定画面(Lazy Load Activation)

Enable Lazy Load:「ON」で遅延読み込みを有効化します。

Lazy Load Images(遅延読み込みを行う画像)

a3 Lazy Load:設定(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)

a3 Lazy Load:設定(Lazy Load Video and iframes)
  • Video and iframes:動画やiframe
  • in Content:コンテンツ内
  • in Widgets:ウィジェット内
  • Skip Video Classes:遅延読み込みをさせたくない動画のクラスを指定
  • Noscript Support:JavaScriptが使用できないブラウザを使っているユーザーの場合、フォールバックとしてNoscriptタグを有効化する。

Exclude by URI’s and Page Types(遅延読み込みの対象外にするURLやページ)

a3 Lazy Load:(Exclude by URI's and Page Types)

Exclude by URls:対象外にしたいURLを直接指定できます。

a3 Lazy Load:

Page Type Exclusions

対象外にするページを決めることができます。トップページ、カテゴリーページ、アーカイブ、検索結果など。

特に対象外にしたいページがなければすべて「OFF」でOKです。

Effect & Style(エフェクトとスタイル)

a3 Lazy Load:設定(Effect&Style)
  • Loading Effect:ロード中のエフェクト
  • Loading Background Colour:ロード中の画像の背景色

この辺りは適当にお好みで。

Script Load Optimization(Lazy Loadの実行スクリプトの最適化)

a3 Lazy Load:設定(Script Load Optimization)

Theme Loader Function

Lazy Loadを実行するスクリプトの記述をヘッダー(wp_head)にするかフッター(wp_footer)にするかを設定します。

基本はデフォルトの「FOOTER」でよいはずで、不具合があれば「HEADER」に変えてみてください。

WordPress Mobile Template Plugins(スマートフォン対応最適化プラグイン)

a3 Lazy Load:設定(WordPress Mobile Template Plugins)
  • Disable On WPTouch:WPTouchが使われている場合、a3 Lazy Loadを無効化する。
  • Disable On MobilePress:MobilePressが使われている場合、a3 Lazy Loadを無効化する。

それぞれのプラグインを使用してなければ「ON」でOKです。

Image Load Threshold(画像のロードのしきい値)

a3 Lazy Load:設定(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:表示速度(有効化前・モバイル)
a3 Lazy Load:表示速度(有効化前・PC)

a3 Lazy Loadを有効化した後。同様に左がモバイルで右がPC。

a3 Lazy Load:表示速度(有効化後・モバイル)
a3 Lazy Load:表示速度(有効化後・PC)
改悪されとるやんけ!

どういうことかよくわからないのですが、何故かPCの方のスピードが落ちてしまいました。

改善したいモバイルはぴくりとも変わってないし何でや…。

項目の設定の仕方で変わるのかもしれませんが、ちょっと納得のいかない結果です。

これではa3 Lazy Loadを設定する意味がなっしんぐ…。

a3 Lazy LoadはWordPressテーマ「JIN」と相性がよくなかった

また、a3 Lazy Loadにはスピードが改善されない他にも、もう一点だけ大きなデメリットがあったのですね。

それが、WordPressテーマ「JIN」で使用すると一部デザインに余白が生じるということです。

PCサイトの方は特に問題はないのですが、モバイルサイトで、画面下部のページャーとプロフィールの間に謎の空白が…。

a3 Lazy Load:JINの空白

ちなみにこちらが通常の場合。

a3 Lazy Load:JINの空白なし

こちらの問題については、実はすでにJINのフォーラムで話題に出ており、解決策も示されているようです。

ひつじさんからは、

  1. a3 Lazy Loadを使用する場合はコンテンツマガジンを利用しない
  2. 余白でCSSを埋める

という解決方法が提案されています。

JINユーザーはここさえクリアできればこれで決まりと言わんばかりの良プラグインなのですが…。

まとめ:結局a3 Lazy Loadはオフにしてしまいました

結局オフにしてしまいました!

ぐだぐだな紹介になってしまいましたが、通常は普通に速度改善されるプラグインだと思います。

このブログで速度改善が見られなかった原因が分かったら、あらためてこちらの記事に追記したいと思います。

また、JINとの相性が一部よくない部分がありますが、こちらはJINに固有の現象ですので、他のテーマを使用されている場合は問題はありません。

画像遅延系はGoogleも推奨しているところで、Google謹製のNative Lazy Loadというプラグインがリリースされているくらいです。

比較しつつぜひ最適なプラグインを導入していただき、積極的に速度改善に臨んでいただければと思います。

ABOUT ME
ヨノイ
ヨノイ
ヨノイといいます!ブログや文章を書くことが好きで、ネットのさまざまなサービスや製品について発信しています!Amazonが大好きなのでそのあたりの情報が多め。記事をシェアしてくれると喜びます!\(^o^)/

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です