サイトスピード ブログ

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

更新日 :

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

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

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

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

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

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

この記事でわかること

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

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

無料で被リンクを獲得できる120サイトをご紹介無料で被リンクを獲得できる64サイトをご紹介個人ブログを月間96,000PVに育て上げた方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

合わせて読みたい

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

Autoptimizeってどんなアプリなの?設定方法や使い方を知りたい! 今回はこんな疑問にお答えしていきます。 WordPressをご使用の皆さん「Autoptimize」は使ってますか? 「Aut ...

続きを見る

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

オフスクリーン画像の遅延読み込みの改善方法① 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つの方法を徹底解説

ウェブサイト運営やSEO対策の関係者の皆さん、サイトスピードの高速化は出来ていますか? サイトスピードはサイトのユーザービリティを大きく左右する重要な項目です。 私はインターン先のウェブ広告会社で、1 ...

続きを見る

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

サイトスピードを改善している時 PageSpeed Insightsで警告された項目は全部クリアしたのに点数が低い... PageSpeed Insightsで最大コンテンツの描画(LCP)が赤字の警 ...

続きを見る

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

「ウェブサイトに掲載する画像を圧縮したい!」 「画像ファイルが重くてサイトスピードが遅い...」 ウェブサイトの読み込みファイルの中で、画像ファイルはかなりの割合を占めています。 そのため画像ファイル ...

続きを見る

  • この記事を書いた人(著者情報)
wagtechblog

wagtechblog

本サイトの運営者・管理人。慶應義塾大学環境情報学部卒。人材系のWeb系メガベンチャー企業に新卒入社。兼業でフリーランスとしてiOSアプリ開発、Web開発、Webメディア運営、SEOマーケティング等を行う。IT人材系のベンチャー企業でiOSエンジニア、Web系メガベンチャー企業でWebアプリケーションエンジニア、士業のスタートアップ企業でフロントエンドエンジニア、Web系メガベンチャー企業でプロダクトマネージャー兼SEOディレクター、ゲーム系のスタートアップ企業で最高技術責任者(CTO)、学生向けプログラミングスクールで講師の勤務経験あり(インターンを含む)。好きなプログラミング言語はSwiftとPythonとPHPとRubyとJavaScript。侍エンジニア塾元受講生。エンジニアやプログラミングスクールでの体験・経験に基づいた記事を執筆。
保有資格:ITパスポート / 基本情報技術者試験 / TOEIC730点 / 日商簿記3級

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

Copyright © wagtechblog All Rights Reserved.