ページの読み込み速度を改善するlazy-loadをWPのプラグインで簡単実装！

高品質なウェブページを作成するために、複数の画像や外部コンテンツを利用していると、ページの読み込みに時間がかかります。しかしlazy-loadを利用することで、画像やページ内に埋め込まれた外部コンテンツの遅延読み込みを行い、ページの読み込み速度を上げUX（ユーザーエクスペリエンス）を改善することが可能です。

このページではlazy-loadとは何かという基本的な説明と、自サイトに簡単にlazy-loadを実装する方法を紹介しています。読んでいただければ、lazy-loadを自サイトに実装してUXを改善する方法が簡単にわかると思います。

lazy-loadでUXを改善する

UXの改善は、SEOにおいて非常に重要です。UXを改善する方法には様々な方法がありますが、画像の遅延読み込みを実現してページの表示速度を上げることで、UX改善を図るのが、lazy-loadです。

これまでもlazy-loadの重要性は明らかでしたが、実装にJavaScriptの知識が必要になるため、実装していないウェブサイトが多く存在しました。しかし2019年9月にGoogleがlazy-loadを簡単に実装するプラグインを公開。JavaScript のライブラリを使用しなくても、HTMLタグを設定するだけで、画像の遅延読み込みが可能になりました。

▼関連記事

lazy-loadとは？

設定方法の紹介に入る前に、lazy-loadについて詳しく説明していきます。

lazy-loadは表示される部分の画像だけ先に読み込む技術

lazy-loadは表示される部分の画像だけを読み込む技術です。

通常Webページの読み込み時、ページ内の全ての画像を読み込んだうえでページを表示します。読み込む画像の数が多くなり、転送量も増えるため、ページの読み込みに時間がかかります。特にモバイル環境においてページの読み込みの負担が大きいです。

一方でlazy-loadであれば、ページをスクロールして画像がビューポート内（表示されている画面領域のこと）に入った時に画像を随時読み込んでいきます。表示領域には不必要な画像の読み込みがないため、ページの表示速度が速く、UX改善効果が大きいです。

lazy-loadではiframeの読み込みタイミングの操作も可能

iframeは昨今重要性が高まってきているタグの１つで、以下のような外部サイトのコンテンツを自サイトに表示するために利用します。

• twitterのタイムライン
• facebookのタイムライン
• instagramのタイムライン
• youtubeの動画
• GoogleMap

通常iframeタグにより表示されるコンテンツも、ウェブページの読み込み時に予め読み込まれるため、画像の読み込みと同様に、読み込みに時間がかかることが多いです。しかしlazy-loadを利用すれば、画像だけでなくiframeの重要性も判断し読み込みの有無やタイミングを操作することができます。

なおLazyLoadはLazyImagesとLazyFramesという2種の異なるメカニズムで構成されています。それぞれ、画像の遅延読み込みはLazyImages、iframeタグにより表示されるコンテンツの遅延読み込みはLazyFramesというメカニズムが制御する仕組みです。

画像(iframe)の取得時に空のプレースホルダーと置換する

lazy-loadを利用しても、ページの読み込み時には、プレースホルダーとなる画像(iframe)の軽量ファイルが読み込まれ、画像サイズを決定します。そしてビューポートに入ると即座に、プレースホルダとして読み込まれていた軽量の画像ファイルが、オリジナルの最終的な画像ファイル(iframe)に置換されるという仕組みです。lazy-loadを利用することで、ページ読み込み時に画像が一切読み込まれないというわけではありません。

画像が読み込まれるピクセル数決定の３要因

イメージしやすいように上では画像(iframe)がビューポートに入ると即座に、プレースホルダーと最終的な画像ファイル(iframe)が置換されると説明しました。しかし正確には指定したピクセル数内に近づくと、置換されるという仕組みです。なおピクセル数は以下の３つの要因に基づいて変化します。

• 画像かiframeか
• Data Saver*が有効か無効か
• 接続種別

＊Data SaverとはAndroid 7.0から利用可能になった、ネットワークデータ通信料を制限する機能です。Data Saverがオンになっているとスマートフォンは従量データ回線ではアプリがバックグラウンドで通信しないように作動します。

従来のSEOに不利というデメリットがなくなった

UXの改善に役立つlazy-loadですが、実はこれまではSEOに不利になると言われることがありました。ウェブページに関する情報はGooglebotというインターネットを巡回するプログラムによって収集されています。その際にlazy-loadを利用すると、Googlebotが適切に画像を認識できなくなってしまう可能性があるということです。

しかし今回Googleが発表したプラグインを利用すれば、SEOに不利になることなく、lazy-loadを利用し、UXを向上させることが可能です。

Lazy-loadに対応させる方法

ここでは自サイトをLazy-loadに対応させる方法を紹介していきます。

Native Lazyloadを利用する

Native LazyloadはGoogleが2019年8月にリリースしたChrome76ユーザー向けに公開したプラグインです。これまでlazy-loadを利用するには、JavaScriptのライブラリを利用する必要がありました。しかしNative Lazyloadを利用すれば、インストールして有効化すればプラグインが自動でサイト内のimgタグとiframeタグにloading=”lazy”属性を追加します。

現状ではNative Lazyloadがサポートしているのは、Chrome76のブラウザのみ。しかしChrome76以外のブラウザ向けには短縮運用として、lazy-loadの実装方法としてGoogleが推奨している、JavaScript の IntersectionObserver API(詳細は後述)を利用したlazy-loadを提供します。

そのためChrome76利用者も、そうでない方も、Native Lazyloadを利用すれば簡単にlazy-loadを利用することができます。

なおLazy-loadを有効にすると、画像やiframeは遅延読み込みされることになりますが、HTMLを少し修正することで、特定要素の遅延読み込みを行うかどうかを個別に設定することが可能です。遅延読み込みを行いたくない画像やiframeには「class=”lazy”」となっている部分を「class=”skip-lazy”」とします。

IntersectionObserver APIとは？

lazy loadを利用するとビューポートに入った画像のみが読み込まれるため、Googlebotはページ上のlazy loadを設定された画像を認識することができませんでした。その解決策となったのがIntersectionObserverです。

Googlebotはページを塊として認識するため、lazy-loadが設定されている画像もGooglebotのビューポート内に存在します。しかしlazy-loadのために、Googlebotは画像が検出できなくなってしまうわけです。しかしIntersectionObserverを実装することで、lazy-loadを設定されている画像を検出できるようになります。そのためSEOに不利にならずに、lazy-loadを利用することが可能です。IntersectionObserver はGoogleが利用を推奨しています。

以前は「Blink LazyLoad」というChrome機能も

2019年9月に公開されたNative Lazyload以前にも「Blink LazyLoad」というChromeの機能がありました。Blink LazyLoad でLazy-loadを有効にすると、画像やiframeは遅延読み込みされることになりますが、特定要素の遅延読み込みを行うかどうかを個別に設定することも可能です。その際には、以下の３つのlazy-load属性値を設定します。

・”on” ：読み込みを遅延させる

・”off” ：すぐに読み込みを行う

・”auto” ：ブラウザの設定に従う（未指定と同じ）

Native Lazyloadと混同する可能性があるため、以前にも似たようなChromeの機能があったことを理解しておきましょう。

プラグインと他のlazy-load実装方法の併用に注意

Native Lazyloadが公開されるまでも様々なlazy-loadの実装方法が利用されてきました。現在Native Lazyload以外の方法でlazy-loadを実装しているサイトでは、Native Lazyloadを併用することはおすすめしません。画像がロードされないという不具合が発生しているようです。

まとめ

UX改善に役立つlazy-load。これまではSEOに不利になってしまう可能性があったり、実装が難しかったりというデメリットがあり、手をつけて来なかったという方もいらっしゃるかもしれません。

しかしこの度Googleが公開したNative Lazyloadのおかげで簡単にlazy-loadを実装することが可能になりました。これまでLazy-loadを利用していなかったプレーンな環境であれば、プラグインをインストールして、有効化するだけです。ぜひ試していただくことをおすすめします。