「オフスクリーン画像の遅延読み込み」とは?改善方法も解説【PageSpeed Insights】

Googleが提供する無料のWebページ診断「PageSpeed Insights」。診断にかけるとWebページの読み込み時間の短縮につながるヒントが得られます。
その中のひとつである「オフスクリーン画像の遅延読み込み」とはどういう意味か、また診断結果を改善する方法についても解説します。

 

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

page speed insightsのチェック項目の一つに、「オフスクリーン画像の遅延読み込み」というものがあります。これは「画面外の画像を読み込まないようにしましょう」という提案です。

一般的なページは縦に長く、スクロールして全ての記事を読み終えることになりますが、画面に表示されていない部分の画像まで早く読み込んでしまうと、先頭部分の画面模写まで完了できない場合があります。画面外の画像を順次読み込むようにすれば、ページの読み込みスピードを改善することが可能です。

「オフスクリーン画像の遅延読み込み」の改善方法

非同期読み込みのJavaScriptを使う

JavaScriptを使ってスクリプトを非同期で読み込むと、画面表示を速くできます。非同期読み込みとは、プログラム実行の際に、あるタスクの実行に時間がかかっていても別のタスクも同時に実行できる処理のことです。これによって処理スピードが上がります。方法は「async」や「defer」などが挙げられますが、人気が高いのは「Lazy Load」です。

Lazyestload.js

JavaScriptライブラリの「Lazyestload.js」は、JavaScriptを使いこなしているカスタマイズ慣れしている人におすすめです。基本的な作業はの上に外部ファイルを記述して「.lazyestload」を遅延読み込みさせたい要素に加え、srcをdata-srcに変更するだけとなります。超軽量で高性能ですが、ブラウザが古い場合はpolyfillが必要です。polyfillは古いブラウザの機能の穴を埋めるためのコードです。

jquery.lazyload.js

jQueryのプラグインである「jquery.lazyload.js」も多くの人に利用されています。jQueryとプラグインを読み込んで、コードを入力します。

lazysizes.js

ライブラリやプラグインを初めて使うのであれば、「lazysizes.js」が使いやすいかもしれません。APIの機能が豊富で、必要な機能に応じたプラグインを使って拡張することが可能です。scriptやcssの遅延読み込みをするときは、プラグインで拡張してください。

WordPressの場合はプラグインをインストールするだけ

WordPressを使っている人であれば、「a3 Lazy Load」などのプラグインをインストールするといいでしょう。プログラミング知識は必要ありません。プラグインが勝手にタグで読み込まれる画像にLazy Loadを適用してくれます。

ファーストビューは遅延読み込みにしない

ページにある全ての画像を遅延読み込みにすれば、当然読み込みスピードが上がるでしょう。しかし、ページにアクセスしてすぐに表示される部分の画像は価値があると考え、通常の読み込みスピードにするべきではないでしょうか。

ただ、パソコンではファーストビューになる画像も、スマホやタブレットで見たときにはスクロールして初めて表示される可能性があります。そのため、どの状況においても確実な方法というものはありません。
そうは言っても、ユーザーの多くはウェブサイトをスマホで閲覧すると言われているので、スマホでの見え方を優先して遅延読み込みにするのがベストな方法かもしれません。

このテーマの関連記事はこちら