最速で解決!PageSpeed Insightsのオフスクリーン画像の遅延読み込み問題

Blog
読者さん
読者さん
PageSpeed Insights の問題点「オフスクリーン画像の遅延読み込み」って、なにをすればいいの?

って悩みを、解決いたします。これはようするに、画面上に表示されている部分以外は、あとから読み込みなさいね!って言われているんです。

というわけで今回は、PageSpeed Insights で「オフスクリーン画像の遅延読み込み」の問題点を指摘された時の解決法をお伝えします

解決方法:a3 Lazy Load をインストールするだけ

A3lazyload settei

「オフスクリーン画像の遅延読み込み」の解決方法は、Wodpress プラグイン a3 Lazy Load をインストールするだけです。

ほんとうに、インストールするだけなんです。ほかに設定をいじる必要はありません。

問題があれば、無効化すればいいので安心ですね。

a3 Lazy Load のインストール

A3 Lazy Load thum

WordPress のプラグイン「新規追加」ページで、a3 Lazy Loadを検索し、プラグインの有効化を行ってください、

または、プラグインのダウンロードページから「a3 Lazy Load」を、ダウンロードしてください↓

症状:オフスクリーン画像の遅延読み込み

このブログも、長年運営してきました。近年 AMP 対応したので安心していましたが、そもそもモバイルやPCの表示速度は、どうなのだろう?

って疑問を感じて、久しぶりに PageSpeed Insights で速度を測ってみたんですよ。すると…

オフスクリーン画像の遅延読み込み

って問題点を指摘されてしまいました、こんな感じで↓

オフスクリーンの非表示の画像は、クリティカルなリソースをすべて読み込んだ後に遅れて読み込むようにして、インタラクティブになるまでの時間を短縮することをご検討ください。

Google 先生から、優しくご指摘をうけちゃいましたよ。先生のいうことは、絶対ですからね。すぐさま、対応させていただきました。

スポンサーリンク


解決後の動作

「a3 Lazy Load」導入後に、スマホで表示を確認してみました。たしかに画像が読み込まれるのは、画面にその画像が表示されるちょっと前からになっていました。

画像を送らせて読み込むテクニックは、これまでありましたが、新時代のモバイルファーストのワザとしてこれから当たり前になっていくんでしょうね。

トップページの画像読み込みだけは、いっきに画像読み込みの歯車が画像の上でまわりだすので、不安をおぼえちゃいました。2回目に表示するときには、キャッシュも生成されるのか、AMP並みにはやく表示されました。

プラグインの相性問題。不具合でました!

Eio webp green

画像系プラグインとの相性問題を、確認しました!

不具合の症状は、プラグイン「EWWW Image Optimizer」で、次世代フォーマットでの画像の配信(webP)に対応できなくなるというものでした。

さらに「EWWW Image Optimizer」入れておけば、「オフスクリーン画像の遅延読み込み」にも対応できるみたいです。たくさんプラグインを入れたくない人は、下の記事を読むと管理がラクになりますよ↓

まとめ

今回の解決法は、すごく簡単でした。「a3 Lazy Load」を導入するだけ!最速で解決できましたでしょうか?

ただプラグインの相性問題があるので、ご利用には注意が必要です。

ただ難しい操作や、むだに費用もかからないので、ブログの表示を早くしたい方はぜひお試しください。

他にも、最速で解決シリーズご用意しております↓

記事へのお問い合わせ

サウンドオルビス

926,851 views

あなたの問題を解決するために、情報発信をしています。悩みからの解放宣言。「音楽」「テクノロジー」が得意分野です。

プロフィール
  1. この記事へのコメントはありません。