Lazysizes でアフィリエイト広告画像ファイルの読み込みを遅延させる〜A8.net moshimoなど〜

PageSpeed Insights でサイトを分析する際、「改善できる項目」に「オフスクリーン画像の遅延読み込み」が表示された場合の対処方法を紹介します。

Defer offscreen images-1 — **▲ 改善できる項目：オフスクリーン画像の遅延読み込み**

現状・条件
Lazysizes を適用する

現状・条件

レンタルサーバ環境 (ブログを始めるなら国内シェアNo.1のエックスサーバー )
WordPress バージョン：5.2.4
WordPress のテーマ：Cocoon 1.9.9.5.3

Coccon テーマの「高速化」機能をすべて有効にした状態です。特に、「Lazy Loadを有効にする」を有効にしています。
A8.net や もしもアフィリエイト などのアフィリエイト広告コードをサイドバーに適用しています。

Lazysizes を適用する

Cocoon テーマの「高速化」機能を使用しながら、アフィリエイト広告コードの読み込みを遅延させるときに有効です。

Lazysizes を適用

❶ 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=””>
▲実際の例
編集が終わったら、上の逆順でペーストします。
「保存」>「完了」をクリックします。