お問い合わせはコチラから

a3 lazyloadとautoptimizeの共存でサイト高速化する際の注意点

サイト運営

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の圧縮対象から除外する方法について紹介しました。

非力なサーバーで画像の表示問題が起きていた私のサイトで実際に適用したら、画像表示の問題がきれいさっぱり無くなりました。是非お試しください。

 

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

タイトルとURLをコピーしました