当サイトの場合、サイトバーにアフィリエイトサイトの広告コードを挿入してありますが、これらが PageSpeed Insights の分析結果で「改善できる項目」に入っていましたので、修正した内容を紹介します。
現状・条件
- レンタルサーバ環境 ( ブログを始めるなら国内シェアNo.1のエックスサーバー
) - WordPress バージョン：5.2.4
- WordPress のテーマ：Cocoon 1.9.9.5.3
- サイトには A8.net や もしもアフィリエイト のようなアフィリエイト広告コードを使用中です。
対応方法
- ❶ テーマ対応Cocoon テーマの「高速化」機能を使用中
「Lazy Load 設定」> 「遅延読み込み」> 「Lazy Load を有効にする」にチェックを入れた場合、
PageSpeed Insights の「改善できる項目」には、ランダムで「次世代フォーマットでの画像の配信」、「効率的な画像フォーマット」、「適切なサイズの画像」など画像関連の指摘が出るし、スコア ( パソコン ) も 60 〜 70 台までに落ちてしまいます。
- ❷ 手動対応「Lazysizes」を適用して画像を遅らせる
Lazysizes で行うのは サードパーティの画像ファイルを遅らせることです。
例：アフィリエイト用の広告コード - ❸ プラグイン対応Autoptimize を利用する
WordPress 管理画面から、
・押下：「設定」>「Autoptimize」
・ページ内：「Images」タブ
「Image optimization」>「Lazy-load images?」にチェックを入れて「変更を保存」ボタンをクリックするだけです。
これで設定は完了です。
Cache を使用中であれば削除して、PageSpeed Insights で確認してみてください。
個人的にはプラグインを使用しないなら Lazysizes を適用し、プラグインを使用するなら Autoptimize を使えば楽かと思います。
他、PageSpeed Insight でパソコン 最大 97 点、モバイル最大 68 点までスコアをアップさせるために行ったこと！
参考文献
Defer offscreen images
PageSpeed Insights
リンク
コメント