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

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

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

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

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

A3lazyload settei

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

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

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

a3 Lazy Load のインストール

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

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

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

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

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

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

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

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

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

スポンサーリンク


解決後の動作

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

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

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

まとめ

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

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

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

そのほか、記事更新に役立つブログツールは、こちらの記事をご覧ください↓

【終了間近】Amazon Music Unlimitedが4ヶ月99円!

ふだんはApple Music 推しなサウンドオルビスですが、「Amazon Prime Unlimited」の安さには、度胆を抜かれました。

安い!安すぎる!だって、4ヶ月間 99 円でつかえるんですよ!

今年の夏。はじめての音楽ストリーミングは、Amazon Music Unlimited できまりでしょう。

残り時間が迫っていますので、決断はおいそぎください。

2019年7月16日23時59分まで、いそげ↓

記事へのお問い合わせ

サウンドオルビス

1,261,173 views

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

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

ブログについて

「サウンド」「テクノロジー」をキーワードに、最新情報・商品レビュー・ハウツー講座・噂・小技など、個人で稼ぎたいクリエイターが役立つ情報を集めたメディアです。
Soundtech-Labo とは?

NEW POSTS