2019.12.02スポンサーリンクWordPressサイトの高速化に一番効果があるのは、画像遅延読み込みを行うLazyloadプラグインだと断言します。今まで、いろいろなLazyloadプラグインを試してきました。WordpressのLazyloadプラグインは有名どころがいくつかありますが、テーマやプラグインと相性があるものが多い、というのが実感です。実際使ってみて相性問題が起きにくいのはa3lazyloadプラグインです。Lazyload以外に高速化で効果があるとされているのがCSSやJSなどの圧縮プラグインです。その中でよく利用されているのはautoptimizeプラグインだと思います。ところがa3lazyloadとautoptimizeは相性問題が起きる場合があります。実際に私の環境では、a3lazyloadとautoptimizeの相性問題が起きましたので、その解決方法を調べました。この記事では、a3lazyloadとautooptimizeの組合せで相性問題を避ける方法をご紹介します。この記事に書かれた方法を適用することで、ロリポップのような非力なサーバーでもサイトの表示の高速化が行えるようになります。a3lazyloadプラグイン画像の遅延読み込みのプラグインとして、今回ご紹介するのはa3lazyloadというプラグインです。通常、有料プラグインを販売しているベンダーの無料バージョンは避けるのですが、このプラグイン以外はメンテナンスに難があったり相性問題が起きたりしますので、私はこのプラグイン一択です。experience.wordpress.orga3lazyloadは、javascriptプラグインのlazy-load-xtを内部で使っていて、lazyloadする対象のタグを書き換えるのがメインの処理で画像の遅延表示はlazy-load-xtを呼び出しているだけです。more.wordpress.orgautoptimizeは、javascriptを圧縮しますが、もともと圧縮されているjavascriptをさらに圧縮したり、外部から呼び出すjavascriptを圧縮するとトラブルが起きる場合があります。今回、a3lazyloadの内部で呼び出しているlazy-load-xtをjavascriptの圧縮対象から外します。autoptimizeの設定画面にjs除外設定がありますので、以下を追加して、lazyloadxtを圧縮対象から除外します。jquery.lazyloadxt.extra.min.js『,』カンマで区切られているので注意してください。非力なサーバーのサーバー負荷削減にLazyloadは効果絶大ロリポップで画像の読み込みに失敗する以前、ロリポップのサーバーを使用して構築したサイトがあり、そのサイトでは画像の読み込みが失敗してサイトがまともに表示されないケースが多発しておりました。負荷削減のためa3lazyloadとautoptimzeを導入も効果なし?サーバーの負荷を下げるためにa3lazyloadとautoptimizeを使って表示高速化施策をしていましたが、さきほどのjs除外は設定していませんでした。その影響で、プラグインを導入しても表示乱れの問題は解決しませんでした。そのサイトは、a3lazyloadがONでもOFFでも画像の読み込み失敗は改善されなかったので、サーバーの問題なのかな?と思っていました。js除外指定をautoptimzeに設定したらすべて解決ところが、そのサイトに先ほどのa3lazyloadが使用しているjsの除外設定をautoptimizeに追加したところ画像の読み込み失敗が見事になくなりました。この結果からわかることは、おそらく、サーバーが非力なので画像の読み込みに失敗していた、その環境でa3lazyloadを導入してもautoptimizeとの相性で遅延読み込みがうまく機能していなかった。今回のオプションを指定したことで、本来のlazyloadの機能が動き始め、サイトの負荷がが下がったのだと思います。Observerを使いたいjQueryを使ったLazyloadプラグインは、スクロールするたびに計算するのでPCやスマホの負荷が高くなります。loadは使いたくなくなりました。pluginとしてLozad.jsがあるのでそちらを使う方が良いと思います。moregithub.comただ、そのまま使ってしまうとimgタグのsrcが空っぽになってしまうので、SEO的な不安はありますので、<noscript>タグでオリジナルは残すようにした方が良いと思います。ObserverはCocoonとかLuxeritasで使われています。WordPressのプラグインとしてはまともなものが無いようですので、もしやるとしたら、自前で実装するのが良いと思います。以下のサイトにLozad.jsを使ったLazyloadをfunction.phpから実装する方法が書かれています。imgタグだけである点、<noscript>に対応していない点など足りない点はありますが、参考になる記事だと思います。out...macarthur.meまとめWordPressの高速化にはa3lazyloadとautoptimizeがよく使われます。この2つの組合せは相性問題が起きる可能性があります。この記事では、a3lazyloadが内部で使用しているjsをautoptimizeの圧縮対象から除外する方法について紹介しました。非力なサーバーで画像の表示問題が起きていた私のサイトで実際に適用したら、画像表示の問題がきれいさっぱり無くなりました。最新情報をお届けします。この記事を書いた人ブーンはるばる日本よりオランダ王国へやってまいりました。自分の経験が少しでも参考になれば嬉しいです。お問い合わせは、『こちら』からお願い致します。国内シェアNo1の安定性と実績が魅力。SSDで死角なしの万能サーバー。変更は取り消されました。ファイルの変更をアップロードする必要があります。言うメッセ...2019.10.06サイト運営Elementorで作られたサイトのテキストをDB置換で変更するで作成したサイトでよくあるのが、グローバルメニューとかを自作していているケース。その場合、リンク先の指定がドメイン直書きだったりします。世界中に友人がいる人だったら友人に頼んでアクセスできるか確認してもよいかもしれません。いう人の方が少ないと思います。先日、Wordpress4.9.8の時代に書いた過去記事を編集する必要がありました。編集が終わって、エディタの更新ボタンを押すと、ボタンは凹みますがいつもの様な反応がありません。form7とかで期間限定の申し込みフォームを設置して、期限が来たらフォームを表示させないようにしたいという場合がありますよね。MemberというWordpressのプラグインがあります。Memberプラグインは登録フォームが無料とは思えないぐらいとても使いやすいです。U...2019.11.28無料のWooCommerceテーマで本当に使えるおススメはどれ?jQueryのSlideUp/SlideDownでstyleが埋め込まれて困った時の対処方法ホームサイト運営スポンサーリンクブーンはるばる日本よりオランダ王国へやってまいりました。自分の経験が少しでも参考になれば嬉しいです。お問い合わせは、『こちら』からお願い致します。目次TOPへ情報スポンサーリンクブーンはるばる日本よりオランダ王国へやってまいりました。自分の経験が少しでも参考になれば嬉しいです。お問い合わせは、『こちら』からお願い致します。Observerを使いたいまとめタイトルとURLをコピーしました。