【SEO】ページスピード(表示速度)改善！IntersectionObserverで画像を遅延読み込み

Webサイト（ブログ）のページスピード（表示速度）を改善することは、SEO対策として重要な要素です。画像イメージを遅れて読み込ませることにより、サイトアクセス時のダウンロード容量を抑え、ページスピードを向上させることができます。

それには、IntersectionObserverというJavaScript機能を使います。今回は、IntersectionObserverの導入方法についての投稿です。

 
前回の投稿で、ページスピード（表示速度）を改善する施策のひとつとして、画像の遅延読み込みについて書かせていただきました。

画像の遅延読み込み - ハテブカスタム 

これには、IntersectionObserverという機能を用います。 

IntersectionObserverを導入することにより、ページトップに表示されない画像はページにアクセスした時点では読み込みをせず、下にスクロールしていって画像に近づくと初めて読み込みを開始します。
こうして画像の読み込みを遅延させることにより、最初にアクセスした時点でのページダウンロード（読み込み）時間は短縮され、ページスピード（表示速度）がアップするという仕組みです。

ページスピード（表示速度）の向上は、SEO対策として大事な要素です。今回は、このIntersectionObserverをかんたんにはてなブログに適用する方法を、ご紹介したいとおもいます。

IntersectionObserverの導入方法

IntersectionObserverを導入するには、

1. JavaScriptコードをフッタに貼り付ける。
2. 画像のHTMLを書き換える。

これだけです。順番に、見ていきます。

JavaScriptコードをフッタに貼り付け

下記がIntersectionObserverを利用するためのJavaScriptコードです。

コードの19行目、「rootMargin: "0px 0px 256px 0px"」の「256px」を変更することにより、事前に読み込む位置を指定することができます。ちなみにこの設定ですと256px手前で画像の読み込みを開始します。

仮に「0px」だとスクロール位置が画像の直前で読み込みを開始するので、通信環境や画像のファイルサイズによっては画像の表示が遅れることがあります。
余裕をもって少し手前で画像を読み込むことで、スムースな表示が可能になります。

くわしくは、こちらに解説があります。

developers.google.com

コードをそのまま貼り付けるまえに、よぶんな空白や改行、コメントなどを削除してコード自体を軽量化します。これをminify（ミニファイ）化といいます。
これも前回の投稿でご紹介したページスピード（表示速度）を改善する施策のひとつです。

コードのminify（ミニファイ）化 - ハテブカスタム

minify化したコードがこちらです。

↓クリックで全選択↓
<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></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.intersectionRatio>0){let lazyImage=entry.target;lazyImage.src=lazyImage.dataset.src;lazyImage.classList.remove("lazy");lazyImageObserver.unobserve(lazyImage)}},{root:null,rootMargin:"0px 0px 256px 0px",threshold:[0.0]})});lazyImages.forEach(function(lazyImage){lazyImageObserver.observe(lazyImage)})}else{}});</script>

こちらのminify化したコードをbodyタグの一番下（</body>の直前）に、はてなブログでしたら[デザイン > カスタマイズ > フッタ] の一番下に貼り付けてください。

これで、画像を遅延読み込みする準備ができました。

画像のHTMLを書き換え

IntersectionObserverの画像リンクへの適用に関しては、以前Create LinkというGoogleクロームのプラグイン（拡張機能）を利用する方法をご紹介しました。

Create Link - ハテブカスタム

こちらの方法でもHTMLを直接書き換えるよりはすこしラクなのですが、画像ひとつひとつに対しての作業になるので、画像が多いと工数が多くなり、たいへんです。
また、alt属性の内容がすべて同じになってしまうため、SEO的にあまりよろしくありません。

画像のaltにタイトルタグの内容を設定するのは良いのか？ | Web担当者のためのSEO情報ブログ

そこで、一括で変換するやり方を考えました。ただし条件として、

• HTMLを直接書き換えるので、[編集 見たまま] モードを使用していること
• 画像を貼り付けるときに[  画像にalt属性を指定する（上級者向け）] にチェックをしてalt属性を指定していること

が前提となります。

はてなブログだと、alt属性（alt="ハテブカスタム"の部分）の記入は[写真を投稿] から画像を貼り付けるときに[  画像にalt属性を指定する（上級者向け）] にチェックをした場合での任意となりますが、SEO的にもalt属性は画像の内容に則したものを記載して指定しておくことをオススメします。これについては、後述いたします。

HTMLを一括で書き換える手順

ほかのサイトやブログでHTMLを編集できるものなら、下記のやり方の応用で対応可能かと思います。 

①まず、投稿のHTML（はてなブログですとHTML編集）をすべて選択（Ctrl + A）してコピー（Ctrl + C）します。

②つづいて、アプリの「メモ帳」を開き、コピーしたHTMLを貼り付けます。

③貼り付けたHTMLを一括で置換して書き換えます。メモ帳のメニューの[編集] から[置換] を選択（もしくはCtrl + H）します。

検索する文字列のテキストボックスに

<img class="hatena-fotolife" src="

置換後の文字列のテキストボックスに

<img src="" class="lazy hatena-fotolife" data-src="

と入力して[すべて置換] を実行します。 そのままコピペでだいじょうぶです。

補足します。はてなブログで画像の貼り付けをすると、HTMLは下記のような構造になっているかとおもいます。

<img class="hatena-fotolife" src="画像のアドレス（URL）" alt="画像の代替テキスト" />

title属性が付与されている場合

画像を貼り付けるときに[  画像にalt属性を指定する（上級者向け）] にチェックをしていない場合、HTMLは下記のような構造となっているかとおもいます。

<img class="hatena-fotolife" title="f:id:はてなID:日時:plain" src="画像のアドレス（URL）" alt="f:id:はてなID:日時:plain" />

title属性が付与され、alt属性とおなじ値が入っています。

この場合、一括で書き換えるにはメモ帳ではなく正規表現の使えるテキストエディタを使用する必要があり、なおかつtitle属性は消えることになります。※title属性を消したくない場合は、こちらの方法は使えません。
正規表現とは - ハテブカスタム

正規表現の使えるエディタには、秀丸・Atom・Notepad++などがあります。

eng-entrance.com

やりかたですが、メモ帳のかわりに正規表現の使えるテキストエディタを開くのみで、あとはほぼ変わりません。変わるのは、③の置換する際の検索文字列だけです。

検索文字列のテキストボックスに

<img class="hatena-fotolife" title=".*?" src="

置換後の文字列のテキストボックスに

<img src="" class="lazy hatena-fotolife" data-src="

と入力し、Notepad++の場合だと[検索モード > 正規表現] にチェックをして[すべて置換] を実行します。 

あとは、メモ帳の手順に沿って進めてください。

置換後は、

<img class="lazy hatena-fotolife" data-src="画像のアドレス（URL）" alt="画像の代替テキスト" />

となります。下記は、置換された変更部分の解説です。

• 「src="画像のアドレス（URL）"」の部分を「data-src="画像のアドレス（URL）"」と書き換えることにより、画像を非表示にして待機させます。
• クラス（class="hatena-fotolife"の部分）に「lazy」を追加することにより、さきほどminify化して貼り付けたJavaScriptコードのトリガーとなって非表示になっている画像の読み込みを発動させます。
• alt属性の部分は置換の影響はないのでそのまま残ります。

④置換後、メモ帳のHTMLコードをすべて選択（Ctrl + A）してコピー（Ctrl + C）します。

⑤投稿のHTML（はてなブログですとHTML編集）にもどり、置換前のHTMLコードをすべて選択（Ctrl + A）します。

⑥さいごにコピーしたHTMLを貼り付けて完了です。

title属性とalt属性

titleは不要？

画像につく属性「title」と「alt」について。

検索した結果、SEO的な観点からだとtitle属性はあまり必要がないという意見がおおむねでした。

title属性とalt属性について | クロスウォーク

また、title属性を指定すると下記のようにマウスオーバーしたときテキストで表示されます。 これをわずらわしいと感じるかたもいらっしゃるようです。

altは指定したほうが良い

逆に、alt属性は指定する必要がある、というのが大半でした。

alt属性は、何らかの理由で表示されなかった画像の代替テキスト、というだけでなく、SEO的な観点からですと、検索エンジンのクローラーに画像の内容を教えるという意味があります。

検索ランキングへの関わりは薄いが、画像検索からの流入が見込めること、また、アクセシビリティ（Webサイトの情報やサービスへのアクセスのしやすさ）の面でも重要な要素だということです。

目の不自由なかたに音声ブラウザが画像の代わりにalt属性を読み上げるなどの役割も担っていることもあり、画像の内容に合わせた文言の記載が大切だと感じました。

また、こんな記事もありました。

y-com.info

将来的には画像を検索エンジンが自動で認識し、alt属性自体、不要になる時代がくるのかもしれませんね。