SEO

「Lazy Load」でページの読み込み速度を向上させる

こんにちは。FASTCODINGデザイナーの七転び八重子です。
大量の画像を表示するWebページは、表示速度が遅くなりがちです。ページ速度が遅くなると、ブラウザが重くなるので、画面操作に支障が出て、UIが低下してしまいます。対処方法として、CSSスプライトやExpiresヘッダーを利用する方法がありますが、今回は「Lazy Load(レイジーロード)」を利用して、画像を遅延ロードさせる事で、ページスピードを改善する方法をご紹介します。


画像を遅延ロードさせる理由

ページにアクセスした瞬間からブラウザは、HTMLに含まれる全ての画像ファイルを読み込みます。全て読み込むということは、ビューポート内に存在しない画像(ユーザーがほとんど閲覧しない下部の画像)でも、読み込んでしまうので、当然ブラウザは重くなります。
そこで、ブラウザのビューポート内にある画像のみを読み込みし、それ以外にある画像はスクロール位置に合わせてロードさせる事で、ページスピードを高速化することができます。

遅延ロードの方法は2つ

遅延ロードさせる方法は、ブラウザのネイティブLazyload設定と、JavaScriptライブラリの使用の2つがあります。
2021年2月現在、72%のブラウザがネイティブで遅延ロード(loading属性)をサポートしています。
loading属性のサポート状況

現在のサポート状況を踏まえて、以下のポイントで実装してみます。

  1. ネイティブの遅延読み込みを設定。
  2. Lazyload未対応ブラウザでは、JavaScriptライブラリを設定。
  3. Lazyload対応ブラウザの場合、JavaScriptを読み込ませない。

※基本的に上記で良いのですが、レスポンシブコーディングで、このブラウザのネイティブlazyload機能を使用する場合、画像周りのスタイル設定(CSS設定)を追加する必要があります。(デザインに寄ります)


  

① ネイティブの遅延読み込みを設定。

loading=”lazy”を書いておくと、ブラウザによって適切なタイミングでロードされます。

<img 
    src="/path/sample.jpg"
    alt="description(推奨)"
    width="300"
    height="300"
    loading="lazy"
/>

loading属性を利用する事で、ブラウザはビューポート外の画像やiframeをスクロール位置に合わせて読み込みするようになります。

loading属性は3つの値をサポートします。

lazy:遅延ロードに適した値です。
eager:遅延ロードには適してません、すぐにロードする値です。
auto:遅延ロードするかどうかをブラウザに委ねます。
※loading属性を定義しない場合は、loading=autoを定義した場合と同じ。


  

② Lazyload未対応ブラウザでは、JavaScriptライブラリを設定。

合わせて、Lazyload未対応ブラウザの場合には、JavaScriptライブラリ「lazysizes」を適応させるように設定していきます。jQueryやVue.jsなどは必要ありません。ビューで検知した要素にClassを設定することで、背景画像や::befor,::afterにもLazyLoadを行う事が可能です。

scriptタグの配置

ダウンロード:aFarkas/lazysizes

<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes-umd.min.js" async></script>

imgタグに”lazyload”を追加

  • class=”lazyload”を追加
  • src属性ではなく、data-src属性で画像パスを指定する
  • srcを空にしてはいけないので、1x1pxの透明な画像のプレースホルダーを使用

基本の設定

<img 
    src="/path/placeholder/1px.png"
    data-src="/path/sample.jpg"
    alt="description(推奨)"
    width="300"
    height="300"
    class="lazyload"
    loading="lazy"
/>

レスポンシブでpictureタグを使う場合

・「srcset」を「data-srcset」に変更します。

<picture>
    <source media="(max-width: 575px)" data-srcset="/path/apple@575w.jpg">
    <source media="(max-width: 768px)" data-srcset="/path/apple@768w.jpg">
    <source media="(max-width: 1200px)" data-srcset="/path/apple@1200w.jpg">
    <img 
       src="/path/placeholder/1px.png"
       data-src="/path/sample.jpg"
       alt="description(推奨)"
       width="300"
       height="300"
       class="lazyload"
       loading="lazy"
     />
</picture>

③ Lazyload対応ブラウザの場合、JavaScriptを読み込ませない。

JavaScriptで、ユーザーが使用しているブラウザがネイティブLazyloadをサポートしているかどうかを検出します。

 if ("loading" in HTMLImageElement.prototype) {
      /* ネイティブの遅延読み込みをサポートしている場合 */
 } else {
      /*  ネイティブの遅延読み込みをサポートしていない場合 */
 }

JavaScriptの最終コード

<script>

    if ("loading" in HTMLImageElement.prototype) {
        var images = document.querySelectorAll('img[loading="lazy"]');
        var sources = document.querySelectorAll("source[data-srcset]");
        sources.forEach(function (source) {
            source.srcset = source.dataset.srcset;
        });
        images.forEach(function (img) {
            img.src = img.dataset.src;
        });
    } else {
        var script = document.createElement("script");
        script.src = "/link/to/lazyload.js";
        document.body.appendChild(script);
    }

</script>


  

lazyloadのサンプル


  

まとめ

画像の遅延ロードをまとめてみました。スマホなどのサイトは、縦に長くなるのでこの方法はページスピード対策におすすめしますが、レスポンシブデザインの場合に、ネイティブlazyload機能を使用する場合は、画像周りのスタイル設定(CSS設定)を追加する必要があります。(デザインに寄ります)
どちらにしても、Webサイトを制作する場合は、運用レベルまでしっかりと意識して、取り入れると良いと思います。

ページスピード対策でお困りですか?

ファストコーディングではSEOに強いHTMLコーディングを設立当初から実施しており、PageSpeed Insights対策の経験豊富なディレクターが多数在籍しております。新規サイトはもちろん、既存サイトのSEO対策にも必須の「 PageSpeed Insights対策 」は是非弊社にご相談ください。