WordPressサイトの高速化に一番効果があるのは、画像遅延読み込みを行うLazyloadプラグインだと断言します。
今まで、いろいろなLazyloadプラグインを試してきました。WordpressのLazyloadプラグインは有名どころがいくつかありますが、テーマやプラグインと相性があるものが多い、というのが実感です。
実際使ってみて相性問題が起きにくいのはa3lazyloadプラグインです。
Lazyload以外に高速化で効果があるとされているのがCSSやJSなどの圧縮プラグインです。その中でよく利用されているのはautoptimizeプラグインだと思います。ところがa3lazyloadとautoptimizeは相性問題が起きる場合があります。
実際に私の環境では、a3lazyloadとautoptimizeの相性問題が起きましたので、その解決方法を調べました。
この記事では、a3lazyloadとautooptimizeの組合せで相性問題を避ける方法をご紹介します。この記事に書かれた方法を適用することで、ロリポップのような非力なサーバーでもサイトの表示の高速化が行えるようになります。
Lazy load : a3lazyloadプラグイン
画像の遅延読み込みのプラグインとして、今回ご紹介するのはa3lazyloadというプラグインです。
通常、有料プラグインを販売しているベンダーの無料バージョンは避けるのですが、このプラグイン以外はメンテナンスに難があったり相性問題が起きたりしますので、私はこのプラグイン一択です。
a3lazyloadは、javascriptプラグインのlazy-load-xtを内部で使っていて、lazyloadする対象のタグを書き換えるのがメインの処理で画像の遅延表示はlazy-load-xtを呼び出しているだけです。
CSS/JS optimize : autoptimizeプラグイン
autoptimizeは、javascriptを圧縮しますが、もともと圧縮されているjavascriptをさらに圧縮したり、外部から呼び出すjavascriptを圧縮するとトラブルが起きる場合があります。
今回、a3lazyloadの内部で呼び出しているlazy-load-xtをjavascriptの圧縮対象から外します。
autoptimizeの設定画面にjs除外設定がありますので、以下を追加して、lazyloadxtを圧縮対象から除外します。
jquery.lazyloadxt.extend.js, jquery.lazyloadxt.srcset.min.js, jquery.lazyloadxt.extra.min.js
『,』カンマで区切られているので注意してください。
非力なサーバーのサーバー負荷削減にLazyloadは効果絶大
ロリポップで画像の読み込みに失敗する
以前、ロリポップのサーバーを使用して構築したサイトがあり、そのサイトでは画像の読み込みが失敗してサイトがまともに表示されないケースが多発しておりました。
負荷削減のためa3lazyloadとautoptimzeを導入も効果なし?
サーバーの負荷を下げるためにa3lazyloadとautoptimizeを使って表示高速化施策をしていましたが、さきほどのjs除外は設定していませんでした。その影響で、プラグインを導入しても表示乱れの問題は解決しませんでした。
そのサイトは、a3lazyloadがONでもOFFでも画像の読み込み失敗は改善されなかったので、サーバーの問題なのかな?と思っていました。
js除外指定をautoptimzeに設定したらすべて解決
ところが、そのサイトに先ほどのa3lazyloadが使用しているjsの除外設定をautoptimizeに追加したところ画像の読み込み失敗が見事になくなりました。
この結果からわかることは、
おそらく、サーバーが非力なので画像の読み込みに失敗していた、その環境でa3lazyloadを導入してもautoptimizeとの相性で遅延読み込みがうまく機能していなかった。
今回のオプションを指定したことで、本来のlazyloadの機能が動き始め、サイトの負荷がが下がったのだと思います。
本当はIntersection Observerを使いたい
jQueryを使ったLazyloadプラグインは、スクロールするたびに計算するのでPCやスマホの負荷が高くなります。
以前はそれでも仕方なし、という風潮でしたが、Intersection Observerという技術が登場してからjQueryを使ったLazy loadは使いたくなくなりました。
Intersection ObserverはJavascriptで実装できますが、便利なjs pluginとしてLozad.jsがあるのでそちらを使う方が良いと思います。
ただ、そのまま使ってしまうとimgタグのsrcが空っぽになってしまうので、SEO的な不安はありますので、<noscript>タグでオリジナルは残すようにした方が良いと思います。
Intersection ObserverはCocoonとかLuxeritasで使われています。
WordPressのプラグインとしてはまともなものが無いようですので、もしやるとしたら、自前で実装するのが良いと思います。
以下のサイトにLozad.jsを使ったLazyloadをfunction.phpから実装する方法が書かれています。
imgタグだけである点、<noscript>に対応していない点など足りない点はありますが、参考になる記事だと思います。
まとめ
WordPressの高速化にはa3lazyloadとautoptimizeがよく使われます。しかしこの2つの組合せは相性問題が起きる可能性があります。
この記事では、a3lazyloadが内部で使用しているjsをautoptimizeの圧縮対象から除外する方法について紹介しました。
非力なサーバーで画像の表示問題が起きていた私のサイトで実際に適用したら、画像表示の問題がきれいさっぱり無くなりました。是非お試しください。