2019WordPressの画像遅延読み込みプラグイン5選WordPress2019年9月6日Googleはページの表示速度を重要視しているということで、高速表示施策がアツいです、個人的に。今回はそんな高速表示施策の1つであるオフスクリーン画像の遅延読み込みついて。WordPressにはすでにそれをやってくれるプラグインがいくつかあったので、どれがいいか実際に使いながら試してみまたのでレビューします。Loader」というプラグインがいい感じだったのでこれを使うことにしたんだけどね。環境や相性もあると思うので一概にこれ!とは言い切れないけど、同じようなことをしたい人のに少しでも参考になればいいなと思います。追記オフスクリーン画像の遅延読み込みとは?目次へ戻るオフスクリーン、つまりブラウザで表示されていない領域の画像の読み込みを遅らせるということです。画像はテキストに比べてサイズが大きいので、まずはページが表示されているところの画像だけを表示し、あとはスクロールして表示されてから読み込んだ方が効率良いよね、ってこと。これを1からやるのはhtmlを書き換えたりJavaScriptを用意したりと結構大変だけど、WordPressにはプラグインがあるのがいいところ。今回試したのは全て無料だし、そのプラグインでうまくいけばそれ以上言うことなしです。今回試した画像遅延読み込みプラグイン目次へ戻る以下の5つです。Optimizerは画像圧縮プラグインだけど遅延読み込み機能もあるので一応候補に。全て公式に登録済みのプラグインなので、管理画面から検索すれば出てくるはずです。それではレビューしていきます。Load問題なく動きました。当然といえば当然ですが、中にはちょっと表示がおかしいものもあったので。口コミを見てると他のプラグインとの相性が悪いという方もいましたが、私は特にそういう問題は無かったです。設定項目も豊富だし、画像だけでなく動画やインラインフレームの遅延読み込みも設定できました。多機能なのでいろいろいじってみたい方向けかなと思います。Load有効化するだけでオフスクリーンの画像が遅延読みこされるようになります。設定項目はないのかな?ありそうなところを見てみましたが見つかりませんでした。有効化するだけでやりたいことはできるし、設定項目がないのもシンプルでいいかな。言いたいところだけど問題が1つ・・・。それはWPデフォルトのブログカードのGravatarで取ってきているサイトアイコン画像が遅延読み込みされないというところ。小さな画像だし、WPデフォルトのブログカードを使わない人にとっては何ら問題ないんですが。Insightsで調べるときっちり指摘されます。Loaderについて。Loaderこれも問題なく動作してくれました。Loadほどではないけどあります。設定はちょっと変わっていて、「ダッシュボード」→「設定」→「メディア」から。Loaderを使うことにしました。Loadでも問題なく遅延読み込みできたんだけど、こっちにした理由は出力されるコードがすっきりしていたからです。Loaderは1つだけでした。同じ動きをするのならソースもすっきりしていた方が軽いし、個人的に好きなのでね。Optimizerについて。Optimizerこちらもいい感じにオフスクリーン画像を遅延読み込みしてくれるのですが1点だけ。WPデフォルトのブログカードのサムネイルが消えてしまいました。う~ん、残念あと一歩。Loaderではきちんと表示されていたので、環境か相性が悪いのかも知れません。WPデフォルトのブログカードを使わない人なら関係ない部分だし、候補の1つには入るかなと言ったところです。Optimizerについて。Optimizer画像圧縮プラグインとして有名ですが、遅延読み込みの機能もあったんですね。Load」という項目があるので、これにチェックを入れればOKです。肝心の動作の方なのですが、残念ながらWPデフォルトのブログカードの画像が表示されず。サムネイルもサイトアイコンもどちらもダメでした。言え画像圧縮も大事なのでそちら目的で使っているんですけどね。目次へ戻る有効インストール数や評価、最終更新日も一緒にまとめてみました。※2019年8月19日時点。Loadの人気ぶりがうかがえます。Loaderにしましたが、環境や相性に左右されるので、ぜひ自分に合ったプラグインを探してみてください。あ、そうそう、属性についても少し触れておきます。属性について目次へ戻る技術的な話になるけど、画像の遅延読み込みをする時には通常のimgタグで使われるsrc属性とは別な属性が使われていると思います。それが何かってことで、上の表からも「data-src」っていうのが一般的っぽいけど、中には違うものもありまして。これの何が問題なのかというと、テーマを自作しちゃうような人。phpで変数を出力する時、サニタイズをする方がほとんどだろうけど、その時のサニタイズの仕方によってはこの属性が消えてしまって、うまく画像遅延読み込みができなくなってしまうということです。JavaScriptはしっかり読み込んでるし、書き方も間違っていない!でもうまく動かないという時は、ソースも確認して属性もチェックしてみるといいかも。特定の画像だけがうまく表示されないっていう時は特にこれが怪しいです。Loaderあたりがうまく動作してくれたのでおすすめです。理由は出力されるコードがすっきりしていて軽そうだし好みだったから。あとがき目次へ戻るよし、これで画像の遅延読み込みについてはGoogleさんもうるさく言ってこないでしょう。WordPressでやる場合はJavaScriptを読み込むだけじゃなくて、ソースの方も置換ちなくちゃいけないから大変だね。実はこっそりjQueryのプラグインを使って自作してみようと思ったんだけど、htmlの置換が大変で。記事部分だけじゃなくてテーマ部分にもフィルターで置換したり。ブログカードとかGravatarとかの画像もコードも置換したりで。́ω`*)ま、目的は達成されたし自分好みのプラグインとも出会えたし、結果オーライさ。Loader良かったんだけど、私が使っているテーマではAMPとの相性が悪かった><画像の遅延読み込みって最終的にはJavaScriptだよね?AMPではJavaScript使えないし、そもそもAMPでは最初から遅延読み込みしてくれているような・・・。AMPページの時はプラグインが作動しないようにするのが無何だね。MEYossybunnyウサギが大好きなフリーランサー。フリーランス歴5年以上。WordPressテーマやプラグインを自作しています。