サイトスピード ブログ

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

2020年8月21日

オフスクリーン画像の遅延読み込みの改善方法【PageSpeed Insights】
PageSpeed Insightsのオフスクリーン画像の遅延読み込みってなに?
オフスクリーン画像の遅延読み込みの改善方法を知りたい!

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

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

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

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

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

今回のテーマはこちら!

  • オフスクリーン画像の遅延読み込みとは
  • オフスクリーン画像の遅延読み込みの改善方法① WordPressプラグインで実装する方法
  • オフスクリーン画像の遅延読み込みの改善方法② ライブラリ「Lazy Load」で実装する方法
  • まとめ:オフスクリーン画像の遅延読み込みとサイトスピード

当サイトではウェブサイトやブログに関する記事を毎日投稿しています。
他の記事も合わせて読んでいただけると嬉しいです。

ブログが思うように伸びなくて挫折しかけている方へ
初心者・未経験者でも大丈夫。
読むだけでその日から実践できるSEO対策を学びませんか?
>> 個人ブログを月間96,000PVに育て上げた裏ワザを徹底解説
>> ブログ開始4ヶ月でドメインパワーを0→28に上げた方法を全部教えます

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

合わせて読みたい

Autoptimizeの設定方法と使い方をご紹介【サイトスピード高速化プラグイン】
Autoptimizeの設定方法と使い方を解説【サイトスピード高速化プラグイン】

続きを見る

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

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

  1. Autoptimizeの設定画面へ移動
  2. 画像の遅延読み込みにチェック

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

1. Autoptimizeの設定画面へ移動

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

Autoptimizeの設定画面

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

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

Autoptimizeの設定画面

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

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

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

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

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

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

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

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

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

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

  1. 画像遅延読み込みライブラリ「Lazy Load」の呼び出し
  2. 画像タグの書き換え

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

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」を呼び出しています。

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

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

項目概要
effect: "fadeIn"画像を表示させる際のエフェクト効果を指定できます。
デフォルトではshow、おすすめはfadeInです。
effectspeed: 200effectで設定したfadeInのスピードを設定できます。
この場合200ミリ秒(ms)で表示されます。
threshold: 300画像が読み込まれるまでの距離を設定できます。
この場合、画像がブラウザの表示領域に入る300ピクセル手前で読み込みが始まります。
デフォルトでは0ピクセルになっています。

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の警告はなくなります。

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

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

まとめ

  • オフスクリーン画像の遅延読み込みとはユーザーが表示している部分の画像だけ読み込むこと
  • オフスクリーン画像の遅延読み込みはサイトスピード高速化の重要な指標
  • プラグインあるいは直接コードを書き換えて画像の遅延読み込みを実装しよう

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

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

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

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

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

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

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

サイトスピードを改善・高速化する7つの方法をご紹介!
サイトスピードを改善・高速化する7つの方法を徹底解説

続きを見る

Page Speed Insights「最大コンテンツの描画(LCP)」の改善方法
PageSpeed Insights「最大コンテンツの描画(LCP)」の改善方法

続きを見る

TinyPNGの使い方【画像を超圧縮できる無料サービス】
TinyPNGの使い方【画像を超圧縮できる無料サービス】

続きを見る

  • この記事を書いた人(執筆者情報)

wagtechblog

プログラミングとWordPressに溺れた私立大学生。フリーランスのiOSエンジニアとしてアプリ開発しています。その傍らWeb集客のベンチャー企業で勤務。主にフロントエンドエンジニア・WebアプリケーションエンジニアとしてWebアプリケーション開発、SEOマーケティング、データビジュアライゼーションといった業務もしてます。好きな言語はSwiftとPythonとPHPとRuby。趣味はApex Legendsとゲーミングデバイス集め。

-サイトスピード, ブログ

Copyright © wagtechblog All Rights Reserved.