オフスクリーン画像の遅延読み込みの改善方法【PageSpeed Insights】

PageSpeed Insightsのオフスクリーン画像の遅延読み込みってなに？

オフスクリーン画像の遅延読み込みの改善方法を知りたい！

そんな方に向けて、今回は「オフスクリーン画像の遅延読み込み」の改善方法を2つご紹介します。

オフスクリーン画像の遅延読み込みはサイトスピードを高速化する上でかなり重要な指標の1つになります。

サイトスピードを速くするためにも、ぜひ対策しておきましょう。

私はインターン先のウェブ広告会社で、100サイト以上のページのスコアを90点以上にしました。

サイトスピード改善・高速化でお困りの方は必見です！

当サイトではプログラミングやWebサイト運営に関する記事を毎日投稿しています。
他の記事も合わせて読んでいただけると嬉しいです。

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

ツイッターを見るとオフスクリーン画像の遅延読み込みで困っている方が多く見られます。

Google サイト表示速度

新しくなってからパソコンとモバイルの結果が逆転した😅

モバイルの点数が20~40とかなり悪い。

パソコンは80点オーバー。

他の方のブログも試してみたけど、同じ結果が多い。

「オフスクリーン画像・・・(中略)」という改善案を提示される。

いまいち対処法がわからない。

— かじっくす@しろくまスタンド (@tomo345) November 20, 2018

オフスクリーン画像の遅延読み込みがプラグインをいれても全く解決しないんだけどどーしたらえーんや？

解決策がわからん😞

— たかや 山梨ブログ【たかポカン】運営中✨ (@takachan_blog) May 15, 2019

オフスクリーンの画像を遅延読み込みするだけでPageSpeed Insightsのスコアがかなり改善されるんだけど、画像を更新するのは別部署の人なので、毎回更新時にクラスや属性を仕込んでもらうのは無理そうな予感…！#駆け出しエンジニアと繋がりたい#ウェブカツ pic.twitter.com/umOAF92lvm

— ジュン🐧 (@jun_jun_0813) December 1, 2019

PageSpeed Insightで僕のブログの改善すべきところ見てもらったら、

・次世代フォーマットでの画像の配信
・オフスクリーン画像の遅延読み込み

てのが画像容量を抑えるってことの次に直すべきって出るんだけど、
何すべきかよくワカラーン笑

— とし@社畜脱出 (@toshi1103blog) February 17, 2019

仕方ないので作りかけの表示速度99だったテーマで計測してみるものの……なんで70～80ぐらいしかないんだよorz
オフスクリーン画像の遅延読み込みってそんなに重要なの？
JEPG 2000,JEPG XR,WebPなんか、webサイトで使ってるやつほとんどいないだろ……対応してないブラウザも多いんだし

— ぽよまる＠美容系雑誌ブロガー (@poyomaru_com) November 14, 2018 

ご覧のようにオフスクリーン画像の遅延読み込みで困っている人は相当存在するようです。

サイトスピード改善の鍵であることは間違いなさそうですね

ではそもそもオフスクリーン画像の遅延読み込みとは何のことなのでしょうか？

スクリーン上の画像だけ読み込む

オフスクリーン画像の遅延読み込みとは、Googleが提供している無料サイトスピード測定ツール「PageSpeed Insights」で表示される指標の1つです。

具体的にはユーザーが見ているスクリーン上の画像だけ読み込む処理のことで、ページ全体の読み込み容量が大きいときに行われます。

PageSpeed Insightsでは実際にこのように表示されます。

オフスクリーン画像の遅延読み込みの処理を行えば、最初にサイトを読み込む時のファイル容量が減るので、サイトスピードを高速化することが出来ます。

オフスクリーン画像の遅延読み込みのデメリット

画像の遅延読み込みによって容量が軽くなるなら絶対やった方がいいじゃん！

そう思われる方もいるかもしれません。

ですがサイトの容量が大して大きくないのに、むやみにオフスクリーン画像の遅延読み込みをさせると逆効果になります。

というのも画像の遅延読み込みにはライブラリを使用するため外部との通信を行う必要があり、その分サイトスピードが遅くなるのです。

つまり大してサイト容量が重くもないのに無理して画像の遅延読み込みをするとサイトスピードの低速化につながるリスクがあることを知っておきましょう。

PageSpeed Insightsでの警告があまりにも目立つようだったら取り入れたほうが良いでしょう

オフスクリーン画像の遅延読み込みの改善方法①
WordPressプラグインで実装

それでは早速、オフスクリーン画像の遅延読み込みの改善方法をご紹介します。

WordPressを使ってサイト運営をしている方はプラグインを使ってカンタンに画像遅延読み込みを実装できます。

使用するのは、サイトスピードに特化したプラグイン「Autoptimize」です。

ここではAutoptimizeのインストール＆有効化が済んでいる前提で解説します。

具体的な手順は以下の通りです。

それでは詳しく見ていきましょう。

1. Autoptimizeの設定画面へ移動

まずはAutoptimizeの設定画面に移動します。

WordPressダッシュボードから「設定」→「Autoptimize」に移動したら「画像」タブを選択しましょう。

2. 画像の遅延読み込みにチェック

するとこのように「画像の遅延読み込み(Lazy-load)を利用」というチェック項目がありますので、こちらにチェックを入れましょう。

これでオフスクリーン画像の遅延読み込みの処理設定は完了です！

これでPageSpeed Insightsの警告はなくなるはずです。

さすがWordPressプラグイン、とてもカンタンですね。

オフスクリーン画像の遅延読み込みの改善方法②
ライブラリ「Lazy Load」で実装

続いてはWordPressを利用していない方に向けてオフスクリーン画像の遅延読み込み処理をする方法をご紹介します。

ライブラリを用いてHTMLコードを少し修正します。

具体的な手順は以下の通りです。

それでは詳しく見ていきましょう。

1. 画像遅延読み込みライブラリ「Lazy Load」の呼び出し

まずは対象ページのHTMLファイルを開いたら「Lazy Load」というライブラリを呼び出すコードを書いていきます。

headタグの下の方に以下のコードを追加してください。

 html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<script type="text/javascript">
$(function(){
$(".lazy").lazyload({
effect: "fadeIn",
effectspeed: 200,
threshold: 300
});
});
</script>

上2行のコードではjQueryと画像遅延読み込みのライブラリ「Lazy Load」を呼び出しています。

下部分のコードでは遅延読み込みの際の画像の表示形式を設定しています。

それぞれの意味は以下の通りです。

2. 画像タグの書き換え

続いてHTMLで記載している画像(img)タグの記述方法を変更していきます。

通常imgタグは以下のように記載されているはずです。

 元のHTMLコード
<img src="images/top.png" class="" alt="">

このコードを次のように書き換えてください。

 新しいHTMLコード
<img data-original="images/top.png" class="lazy" alt="">

このようにdata-original属性とlazyクラスを付与してあげることでライブラリの動作を反映させることができるのです。

オフスクリーン画像の遅延読み込み処理はこれで完了です。

少々面倒ですが、これでPageSpeed Insightsの警告はなくなります。

まとめ：オフスクリーン画像の遅延読み込みとサイトスピード

今回はサイトスピードを改善・高速化するための指標のひとつオフスクリーン画像の遅延読み込みの改善方法を２つ紹介しました。

サイトスピードはユーザービリティに影響するため、SEOでも重要な指標の一つとなっています。

特にWordPressを利用している方はプラグインを使ってボタン一つでカンタンに実装できるのでぜひ挑戦してみてください。

オフスクリーン画像の遅延読み込みを改善してより良いサイトを作っていきましょう！

わからない部分がある方はお問合せフォームで質問して貰えばすぐに返信します。

今サイトではこれからもウェブサイト運営に関する有益な情報をたくさん発信していきたいと思っていますので応援よろしくお願いします！

▼サイトスピード高速化の詳細を知りたい方はこちらをご覧ください▼