Googleの推奨するSEO向け画像遅延読み込みでページ速度UP

画像の遅延読み込み（ページの表示速度対策）

画像の遅延読み込みとは

画像遅延読込とは、WEBサイト上を表示させる際、画像ファイル容量が多く読込に時間が掛かる事を防ぐため、画像を少しずつ読み込みをしていく制御技術です。

画像をページの表示時に一気に読み込ませるのではなく、画面枠内に入った時に読み込みさせる事で、表示速度UPとユーザーのストレス軽減を狙ったものですね。

Googleによりページ表示速度を上げる事はSEO上有効とされており、逆に表示速度が遅いページは検索順位に影響があるとされているので、運営者にとってサイトの表示速度UPを図る事は重要な課題ですね。

初期表示の時点ではダミー画像を表示

流れとしては、表示範囲の外の段階でファイルサイズの小さいダミー画像（下記のような画像）などを読込させます。

ダミー画像

そうすれば読込時点ではダミーファイルが軽いため、必然とページの表示速度が速くなりますよね。

しかしこのままではダミー画像だけのサイトになるので、ユーザーがスクロールして該当の画像を見た瞬間に、JavaScriptを用いて本当の画像を表示させる訳です。

Googleはなぜページ表示速度を重視するのか？

今GoogleはPC版もそうですが、特にスマホページでの表示速度を重要視しています。

それはなぜかというと、回線環境がまだ悪い地域（全世界）のユーザーへGoogleが配慮をしているためです。

回線環境が悪い場所でスマホページの大きな画像をダウンロードしたりすると、ページが表示されるまで非常に時間が掛かったり、或いは表示されないままだったりで、ストレスが溜まりますよね。

ですのでGoogleとしてはモバイル向けの表示速度を常に重視しているのです。

PageSpeed Insightsでの推奨

ページ表示速度を向上させる手段はいろいろありますが、GoogleはPageSpeed Insightsの中で画像の遅延読み込みによるページ速度UPを推奨しています。

SEO上有効とされているため、運営者はこぞってWEBサイトのページ表示速度UPの施策を実施しています。

画像の遅延読み込み処理を実現する方法

画像の遅延読み込み機能を実装するには、以下の3つの作業が必要です。

1に関しては、サイズが小さければどんな画像でもよいです。
3に関しては、JavaScriptプログラムを用意する事になります。

JavaScriptプログラムの実装手段

このいずれかになります。

上以外に「JSライブラリを利用する方法」が一番一般的なのにと思われるでしょう、しかし今回は使用を控えた方が良いと思います。その理由を説明しましょう。

ライブラリを使わない方がよい理由

JSプログラムを組む人であれば、自分で1から書くよりも出来上がっているライブラリを探す人が当然多いですよね。

しかしGoogleとの相性を考えるとライブラリはお勧めできる選択肢ではないと言えるのです。

Googleが推奨する画像遅延の手法

Googleが推奨する方法はちゃんと公式ページに以下の様に紹介されています。
イメージと動画の遅延読み込み -Developers Google

上記の説明の中でGoogleはモダンブラウザでサポート中の「Intersection Observer」を使うことを推奨しています。

つまりそれまでのライブラリ系はIntersection Observerが使われていないため、Googleから推奨されていないのです。

※そしてGoogleクローラーもIntersection Observerが読込可能になったともアナウンスしています。

Intersection Observerとは

Intersection Observerは「要素が表示された」状態をコントロールするためのブラウザAPIであり、画像の遅延読み込みにまさに適したモダンブラウザの機能です。

「画像が表示されたら」と「スクロールされたら」は違う

となるとWEBサイトでよく見かける「ユーザーがスクロールしたら」でOKかと思うでしょうが、厳密には違います。

「画像が表示された時」のイベントと「スクロールされた時」のイベントは違うものです。

Googleはこの「スクロールイベント」ではなく「画像が表示されたら」がイベントトリガーになるIntersection Observerの方を推奨しているのです。

何故スクロールをトリガーにしないのか

本来Googleは検索クローラーでWEBサイトを診断しています。「人」ではないのでスクロールして画像を取得する事自体に意味が無い事が理由の一つでしょう。

それにGoogleの検索クローラーは人間ユーザーのようにスクリーンに映っているエリアだけをスクロールしながら部分的に見ている訳ではありません。

縦に長いページでも一気に把握しています。つまり見える範囲が非常に長いのです。

その感知範囲に画像が入っていればそれを検出します。極端な事を言うと、Googleクローラーは遅延読み込み事態をしてない事になりますね。

現在の画像遅延JSライブラリはスクロールイベントが中心

Googleの推奨する手法であればSEO上重要ですので無視できませんよね。

これを踏まえて先述のJSライブラリ系を見てみると、そのほとんどがスクロールイベントを管理しているライブラリばかりなのです。

かの有名なライブラリ「LazyLoad」もそうであり、Googleが認識できないことがあると指摘されているようです。

GoogleがLazy Loadライブラリの画像を認識しない

Lazy LoadはSEOに不向き？ Lazy Loadで表示する画像をGooglebotは認識できないことがある -海外SEO情報ブログ

仮にそのライブラリが定期的にメンテナンスが入る様なライブラリであれば、その際にIntersection Observerを採用する可能性はあります。

しかし今の時点で推奨されていないスクロール系イベントは使えませんよね。

ですので「Intersection Observer」による画像表示時の遅延機能を採用して、自分でJavaScriptコードを書くのがページ表示速度UPに一番有効という事になります。

とても簡単：自分で画像遅延を実装する方法

画像の遅延表示は簡単です。下記の順番でコードを書くだけですね。

その１：imgタグ

imgタグのsrcにダミー画像を指定し、data-src属性などに本当の画像を指定します。そして処理のためclass名をつけます。これを全てのimgに対しておこないます。

<img src="images/dummy.jpg" data-src="images/example_img.jpg" class="lazy">

dummy.jpgがダミー画像でexample_img.jpgが本当に表示したい画像です。

その２：JavaScriptコード

imgをチェックするためのJavaScriptコードをheadタグ内に記述します。

コードは下の方に改良版を記載していますので、下部をご覧ください。

これで、2.の効果により画面上に画像が表示されたら、data-src属性をsrc属性と入れ替えて本当の画像を表示されるようになるのです。

問題点とその対処

このように画像の遅延処理自体は簡単なのですが、2つの問題点があります。それはモダンでない古いブラウザへの対応とWordPressの問題です。

IntersectionObserverサポート外のブラウザについて

IntersectionObserverは比較的新しいブラウザでしかサポートされていないAPIです。従って古いブラウザでは動きません。

日本でまだ古いブラウザを使っている端末が一体どれくらいあるのかどうかは不明ですが、通信環境が悪い諸外国ではまだまだ現役という事もあります。対応しない訳にはいきませんよね。

polyfill（ポリフィル）は古いブラウザ専用のライブラリ

ここでpolyfill（ポリフィル）というライブラリがあります。

polyfillは「サポート対象外のブラウザでもIntersectionObserverが使える専用ライブラリ」の事です。便利なものがありますよね。

polyfillライブラリは下記からダウンロードできます。

github.com/w3c/IntersectionObserver/
tree/master/polyfill

そのライブラリを読み込めば、サポート対象外のブラウザであってもIntersectionObserverが使えるようになります。

ポリフィルを最初に読み込むコードを追記した状態が下記になります。

japascriptコードはこちら

ここではウェブ担当者通信様サイトのコードを転載させて頂きました。この場をお借りして御礼申し上げます。

<script src="/js/intersection-observer.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
if (typeof lazyImage.dataset.srcset === "undefined") {
}else{
lazyImage.srcset = lazyImage.dataset.srcset;
}
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});

lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Possibly fall back to a more compatible method here
}
});
</script>

あわせて読みたい関連記事

WordPressでの画像読込遅延について

WordPressでこの画像遅延読み込みを実装しようとすると一つ問題が生じます。

それは画像を挿入する際にimgタグが自動で出力されてしまうので、そのimg出力命令を遅延表示用に変更する必要があるのです。

ですのでこういったプログラムを書くのが難しい場合は、画像遅延系のプラグインを利用した方が良いでしょう。

GoogleがWordPressプラグインNative Lazyloadをリリース

GoogleはChromeブラウザによる画像遅延読込機能であるLazyloadをWordpressプラグインとして導入を開始しました。

こうしたLazyload系のプラグインは今までもたくさんありましたが、Googleがリリースしたこの「Native Lazyload」プラグインは、ブラウザ機能のIntersectionObserverとを併用したものです。

全てのブラウザに対応

「Native Lazyload」プラグインは、Chromeブラウザに対しては標準搭載しているloading属性で対処します。

そしてChrome以外の、loading属性に対応していないブラウザに対しては、JavaScriptのIntersectionObserver APIを利用した読込遅延を代わりに提供するようになります。

Googleが推奨している手法を使ったプラグインなので安心ですし、導入も簡単です。

いかがだったでしょうか。

画像の遅延読み込みについて、Googleはいま「画像表示時をイベントにした遅延読込」を推奨しているため、スクロールイベントが主流のライブラリは今のところ使わない方が良いという事になりますね。

ページの表示スピードを向上させる画像遅延読込は、ライブラリを使わなくても自分で簡単に実装できます。せっかくですからGoogleから評価もされやすくなる方法を選びましょう。

一押し人気コーナー紹介