WordPressサイトでは、画面に表示されていない画像まで最初から読み込んでいることがあります。
画像が多いページでは、それだけで表示速度が遅くなってしまうことも少なくありません。
そんなときに効果的なのが、画像の遅延読み込み（lazy load）です。
WordPressでは標準機能として利用できますので、比較的簡単に取り入れられる表示速度改善の一つです。
記事を書いた人は信じられる？
最初に簡単に自己紹介をさせてください。
私は独学でサイト表示速度の改善方法を学びました。
高速化作業はPageSpeed Insightsの分析結果で図ることができ、施策効果が目に見えるもので、体感的に改善を感じることもできます。
当時はAIも今ほど普及していなかったので試行錯誤でスキルを身に付けました。
そのスキルを活かして、2019年ころからサイト高速化業務に携わってきましたが、2026年現在、1,000サイトは軽く超えた作業実績があります。
自己申告なので証拠はと言われるとなかなか示しづらいところはありますが、ココナラでのWordPress高速化作業実績がNo.1なのは確固たる証拠と言えると思います。
もちろんココナラ以外にランサーズでも作業実績があり、このサイトから直接依頼されるケースも多いです。
同業者さんから難しい改善を依頼されることも多々あります。
ネット検索でのWordPressの表示速度改善方法やAIの提案はまだまだあまく、効果がないものまで紹介、提案されることすらあります。
WordPressの表示速度改善方法を紹介している記事を、PageSpeed Insightsで分析したことはありますか？
立派なことを書いているのに残念なスコアになっていたりしませんか？
もちろん、運営するこのサイトのPageSpeed Insightsのスコアはほぼ100点です。
私は日本一サイト高速化をしてきているプロ、それも証明できる実績のあるプロだと自己評価しています。
1,000サイト以上を改善してきた本当のプロが、実践で結果を出せる本当の改善方法をご紹介します。
▽coconalaでの評価
https://coconala.com/users/2093261/reviews
lazy loadとは？
lazy load（遅延読み込み）は、ユーザーが画像の近くまでスクロールしたタイミングで読み込みを開始する仕組みです。
最初にすべての画像を読み込まないため、ページの表示が速くなり、通信量も抑えられます。
WordPressでは5.5以降、画像に loading="lazy" が自動で付与されるようになりました。
それでもPageSpeed Insightsで「画面外の画像を遅延読み込みしてください」と指摘される場合は、テーマやプラグインの影響で正しく動作していない可能性があります。
確実に画像遅延読み込みをする
画像遅延読み込みはプラグインが簡単で便利です。
私がおすすめしている画像遅延読み込みプラグインは「EWWW Image Optimizer」です。
長年使っていますが、バージョンアップのたびに便利になっている印象です。
おすすめする理由は他にも不具合の少なさやパフォーマンスの良さです。
画像遅延読み込みするプラグインは結構種類がありますが、経験上EWWW Image Optimizerが最もパフォーマンスが良いです。
パフォーマンスが良いとは、PageSpeed Insightsのスコア改善のために画像遅延読み込みをしたとして、EWWW Image Optimizerで遅延読み込みした時が最もスコアが伸びるということです。
LCPの画像は遅延読み込みしない
LCPの画像とは、ファーストビューに表示される画像で最も表示サイズが大きいものです。
ブログ記事ではアイキャッチ画像であることが多いのですが、画像遅延読み込みで重要なポイントです。
PageSpeed Insightsの評価基準としては、とにかく早くページを表示させることなので、ファーストビューに表示される画像については真っ先に表示されるのが望ましいです。
難しければ全画像遅延読み込みでも改善効果は期待できますが、これをしっかりやるかやらないかでスコアが更に10点くらい変わることもあります。
地味に効くしきい値の調整
しきい値とは今写っている画面と設置画像との距離です。
今ページ最上部なら、フッターにある画像のしきい値は高いでしょう。
このしきい値、loading=”lazy”で通信速度や端末の環境に応じて自動的に調整はされますが、おおむね2000px前後です。
残念ながらloading=”lazy”ではこのしきい値を調整する方法は現状有りません。
EWWW Image Optimizerでも使われているlazysizesのしきい値も自動調整はされるので固定値ではないのですが、おおむね800pxくらいです。
このしきい値の差からまずloading=”lazy”よりもEWWW Image Optimizerの方が優れていることが分かります。
更に、lazysizesは data-expand 属性でしきい値を調整することができます。
例えば、ファーストビューには表示されていないけど直下に重い画像がある時、普通はその重い画像もページの初回読み込みで読み込まれてしまいますが、しきい値を0に近くすることで遅延読み込みが効くようにもなったりします。
更にマイナスしきい値にすると、画面に入って少し経ってから読み込むような挙動になり、よりパフォーマンスは良くなります。
「a3 Lazy Load」プラグインはこのマイナスしきい値でパフォーマンスを上げていますね。
ただ個人的にマイナスしきい値は画像の表示が遅くなる点がユーザーにもマイナスになっているのではと考えているため、「a3 Lazy Load」ではなく「EWWW Image Optimizer」推しです。
よくある？不具合
画像を遅延読み込みしたら画像が表示されなくなったことはありませんか？
そうそうあるわけではないのですが、油断すると見落とすので、画像遅延読み込み後の表示確認は大事です。
よくあるのは独自テーマでwp_footer()関数がないパターン。
遅延処理だけが通り、読み込み処理のスクリプトが読み込まれないため、画像が表示されなくなります。
画像遅延読み込みの重複でも表示されなくなりますので、重複にも注意です。
あとは画像の表示の仕方によってはうまく遅延読み込みされないケースもあったので、そういった場合はloading=”lazy”だけでもしておくのが良いです。
まとめ
画像の遅延読み込みは、比較的簡単に導入できる表示速度改善の一つです。
業務でもすでに画像遅延読み込みが実施されているケースは多いです。
しかし、LCP画像の除外までできているサイトは稀です。
一言で画像遅延読み込みと言っても、
- どうやって実施するか
- LCP画像の除外
- しきい値の調整
などで意外な伸びしろがあることもあります。
機会があればぜひ意識してみてください。