PageSpeed Insights でサイトを分析する際、「改善できる項目」に「オフスクリーン画像の遅延読み込み」が表示された場合の対処方法を紹介します。
現状・条件
- レンタルサーバ環境 (Xserver)
- WordPress バージョン：5.2.4
- WordPress のテーマ：Cocoon 1.9.9.5.3
- Coccon テーマの「高速化」機能をすべて有効にした状態です。特に、「Lazy Loadを有効にする」を有効にしています。
- A8.net や もしもアフィリエイト などのアフィリエイト広告コードをサイドバーに適用しています。
Lazysizes を適用する
Cocoon テーマの「高速化」機能を使用しながら、アフィリエイト広告コードの読み込みを遅延させるときに有効です。
- ❶ lazysizes.min.js をダウンロードするPageSpeed Insights で紹介された Lazysizes を利用します。
lazysizes.min.js ファイルをダウンロードして、該当 WordPress サイトのルートディレクトリにアップロードします。
XServer の場合、「InfoPanel」> 「サーバー」> 「ファイル管理」> public_html まで移動します。
▲ エックスサーバ：インフォパネル 
▲ public_html の下にファイルをアップロードします。 https://your-domain.com/lazysizes.min.js にアクセスし、ファイルの中身が見れれば OK です！
- ❷ WordPressを設定するindex.html ファイルの </body> 上に下記の <script> タグを追加します。
ここでは Cocoon テーマの設定を利用します。
WordPress 管理画面から、
・押下：「Cocoon 設定」>「Cocoon 設定」
・ページ内：「アクセス解析・認証」タブ
「その他のアクセス解析・認証コート設定」>「フッター用コード」に下記のスクリプトを追加します。<script src="lazysizes.min.js" async></script>
「変更をまとめて保存」ボタンをクリックします。
▲ Script タグを追加する - ❸ 広告コードを編集する広告コードに Lazysizes を適用します。
WordPress 管理画面から、
・押下：「外観」>「ウィジェット」
・ページ内：「サイドバー」
広告コードのウィジェットを選択 > 「テキスト」モードを選択します。表示されるコンテンツの中をマウスでクリックし、Mac では Command＋A を、Windows なら Ctrl+A を押して全部コピー＆ CotEditor や Sublime Text などご自身の使用中のエディターにペーストします。
▲広告コードを編集する 下記のように編集します。
<img src=”images/flower3.png” alt=””>
↓↓↓
<img data-src=”images/flower3.png” class=”lazyload” alt=””>
▲実際の例 編集が終わったら、上の逆順でペーストします。
「保存」>「完了」をクリックします。
PageSpeed Insights からご自身のサイトを分析し、「オフスクリーン画像の遅延読み込み」項目が「改善できる項目」から、「合格した監査」に移動していることを確認します。
※ Cache 系のプラグインを使用中であれば、分析前に Cache を削除してからおこなってください。
今なら JavaScript を入れなくても済みます（2026 年 7 月 追記）
この記事を書いた 2019 年当時は、遅延読み込みをするのに JavaScript のライブラリが必要でした。現在は HTML の属性ひとつで済みます。
<img src="広告画像のURL" width="300" height="250" loading="lazy" alt="">loading="lazy" はブラウザの標準機能で、現在はほぼすべてのブラウザが対応しています。Lazysizes のようなライブラリを読み込む必要はなくなりました。JavaScript を 1 つ減らせるので、そもそもの目的だった表示速度にも有利です。
WordPress が自動でやってくれる範囲
WordPress 5.5 から、記事本文の画像には loading="lazy" が自動で付くようになりました。過去記事にも適用されます。5.9 からは、最初の画像だけは対象外になっています（ファーストビューの表示が遅れるのを避けるためです）。
ただし、自動で付くのは条件つきです。
<img>に width と height の属性が必要です。無いと付きません- WordPress の関数を通して出力された画像が対象です。直接書いた HTML には適用されません
- 対象は記事本文の中です。ヘッダー・フッター・サイドバーには自動では付きません
この記事が扱っているのはサイドバーに貼った広告コードです。つまり 3 つ目の条件に当てはまり、自動化の対象外のままです。広告タグの <img> に自分で loading="lazy" を書き足す必要があります。当時 Lazysizes でやっていたことを、属性の書き換えに置き換える形になります。
広告に遅延読み込みをかけるときの注意
ここは速度の話とは別に、気をつけていただきたい点です。
遅延読み込みは「画面に入るまで読み込まない」仕組みです。ということは、ページ下部の広告は、そこまでスクロールされなければ一度も読み込まれません。広告の表示回数（インプレッション）は読み込みをもとに数えられるので、集計上の数字が減ることになります。
実際に見られていない広告が数に入らないのは、本来あるべき姿ではあります。ただし ASP によっては、表示回数の計測用タグを正しく動作させることが規約で求められている場合があります。遅延読み込みでそれが動かなくなると、規約違反と見なされる可能性があります。
広告に遅延読み込みをかける前に、お使いの ASP の規約をご確認ください。速度スコアのために提携を失っては本末転倒です。
まず確認すること
手を入れる前に、テーマ側の設定を見てください。Cocoon をはじめ、多くのテーマには遅延読み込みの機能が組み込まれています。テーマ側で済むなら、それがいちばん簡単で安全です。複数の仕組みを重ねると、かえって表示がおかしくなることがあります。
※ 本節は 2026 年 7 月時点の公開情報に基づく整理であり、当方の環境での再検証は行っていません。
参考文献
Lazy load offscreen images with lazysizes
コメント