SEO measures④ Lazy loading -サイト表示速度と遅延読み込みについて-

前回の記事で、「pagespeed insights」を使ったサイトのパフォーマンスチェックを行いました。

その中に、「オフスクリーン画像の遅延読み込み」という項目があり、「適切なサイズの画像」程ではないですが、大きな改善項目として挙がっていました。

そこで、「オフスクリーン画像の遅延読み込み」とは何なのか、その対策について、説明していきたいと思います。

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

「オフスクリーン画像」とは、簡単に言うと、画面外に表示されている画像のことです。

殆どの Webサイトのページは、縦にスクロールする、画面よりも長いページです。

画面からはみ出た画像のことをオフスクリーン画像と言います。

補足：off=外、screen=画面

オフスクリーン画像の「遅延読み込み」とは、画面外の画像は表示されないのだから、画像が画面の中に入った時に読み込めば良いのではないか、というものです。

つまり、見える部分の画像だけを読み込み、早くページを表示する、ということです。

「遅延読み込み」を実施した場合、画面内の画像のみ読み込めば良いので、読み込む画像は少なくなり、これによってサイトを早く表示することができます。

対策方法① lazyload

Githubに公開されているlazyload.js をダウンロード。

lazyload.jsを自分のサイトのスクリプト置き場に設置し、head内にlazyload.jsのリンクを追加します。jqueryは不要です。

<script src=“lazyload.js”></script>

classを「lazyload」、画像のリンクは「data-src」として指定します。

プレースホルダーを指定したい場合は、「src」で指定します。

<img class=“lazyload” src="/images/demo/loading.gif" data-src="/ images/demo/demo1.jpeg">

最後にスクリプトでlazyloadを指定します。

<script>lazyload();</script>

対策方法② echo.js

echo.jsの特徴は、jQueryにも依存せず、超軽量な為、スマートフォン向けのサイト等でも安心して使うことが出来る点です。

まずは、こちらからライブラリをダウンロードします。

必要なファイルは「dist/echo.min.js」だけです。

ファイルを設置したら、</body>の直前に、echo.jsを読み込みます。

特に難しい記述は必要なく、「src」でローディングの画像・空の画像を読み込み、「data-echo」で表示する画像を設定するだけです。

<img src=“ローディングの際の代替画像"alt=““data-echo=“読み込み後に表示する画像” />

最後にecho.jsを起動します。<head>～</head>内か</body>の直前に以下を追記します。echo.min.jsを読み込んだ後に記述するようにしてください。

<script>echo.init();</script>

オプションも指定する場合は、下記のように記述します。

<script>
echo.init({
offset: 0, //オフセット値(画像にどれくらい近付いたら読み込むか)
offsetVertical: 0, //上下方向のオフセット値
offsetHorizontal: 0, //左右方向のオフセット値
offsetTop: 0, //上方向のオフセット値
offsetBottom: 0, //下方向のオフセット値
offsetLeft: 0, //左方向のオフセット値
offsetRight: 0, //右方向のオフセット値
throttle: 250, //処理の間隔(スクロールが止まってから画像が読み込まれるまでの時間)
debounce: true, //throttleを有効にするかどうか
unload: false, //画像が表示範囲から外れた時に読み込み前に戻すかどうか
callback: function (element, op) { //コールバック
console.log(element, ‘has been’, op + ‘ed’)
}
});
</script>

対策方法③ AMP JS

「AMP(Accelerated Mobile Pages) 」とは、名前の通りモバイルでのウェブページの読み込みを高速化させる技術です。

AMPでは表示速度を高速化するためにAMP JSというJavaScriptのライブラリーを読み込み、表示速度の改善を行っています。

AMP JSはPCページ・モバイルページ（非AMPページ）でも利用でき、その高速化の恩恵を受けることができます。

AMP JSでは、カスタムタグの「amp-img」タグを利用し、次のように記述します。

<head>
　　　　・
　　　　・
<script async src="https://cdn.ampproject.org/v0.js”></script>
</head>
<body>
　　　　・
　　　　・
<amp-img src=“original.jpg” width=“100” height=“100” layout=“responsive” alt=""></amp-img>

「amp-img」タグを有効にする為に非同期でAMP JSライブラリを読み込む必要があります。

「amp-img」タグは「img」タグで指定できる属性は基本的にはそのまま利用できますが、width属性とheight属性は必須で指定する必要があります。

また、「amp-img」タグには、追加でlayout属性が指定できます。

これは、CSSで指定する画像表示に関するスタイルをCSSの定義なしで実現できるものです。

上記の例では、layout属性にresponsiveと指定している為、要素の幅はコンテナー要素の幅に等しくなり（100%表示）、高さについては、幅と高さの属性によって決まるアスペクト比になるよう自動的に調整がされます。

AMP JSのデメリット

layout属性の値により、width属性、height属性の指定が必須のものと不要なものがある。
画像サイズが小さい画像に対してlayout属性にresponsiveを指定した場合、親のコンテナー要素の幅にあわせて表示される為、元画像よりも大きく表示されてしまう。
AMP JSのライブラリー「v0.js」の容量が、GZIPで80KBほどあり、JSファイルの解析時間がわずかにかかってしまう。
Internet Explorer 8・Internet Explorer 11（互換モード）では、AMP JSライブラリーの読み込み自体でエラーが発生してしまう。

※補足：サポートブラウザ
Chrome、Firefox、Edge、Safari、Operaといった主要ブラウザーの最新バージョンとその1つ前のバージョンをサポートしています。