遅延読み込み

画像・iframe要素などの遅延読み込みを行い、パフォーマンス改善する機能についてご紹介します。
一般的には Lazy Load と呼ばれています。

Lazy Load とは

簡単に Lazy Load 機能を説明すると「必要な時にコンテンツをロードする機能」となります。よく見られる使用例としては、表示領域にない画像は最初読み込まず、スクロールして表示領域に入ったときに初めて画像をロードするなどがあります。

メリットとして表示領域以外のコンテンツはロードしないようになるため、最初のロード時にダウンロードするコンテンツ量が少なく済み、ページの表示速度のパフォーマンスが向上します。

デフォルトの設定

この機能の設定は、/js/config.jsの以下の箇所にあります。

lazyLoadMark: '.js-lazy-load',
lazyLoadConfig: {
    rootMargin: '10px 0px', // syntax similar to that of CSS Margin
    threshold: 0.1, // ratio of element convergence
   loaded: function(el) {
      el.addEventListener('load', function () {
        if (el.tagName === 'IMG') {
          var img = new Image();
          img.onload = function () {
            el.classList.add('loaded');
          }
          img.src = el.getAttribute('src');
        } else {
          el.classList.add('loaded');
        }
      });
      setTimeout(function () {
        el.classList.add('loading');
      }, 100);
    ACMS.dispatchEvent('acmsLazyLoaded', el);
  }
},

設定のカスタマイズ

config.jsのデフォルトの設定から設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成し以下のように記述してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

ACMS.Ready(function(){
  lazyLoadMark = '.js-lazy-load',
  lazyLoadConfig =  {
    rootMargin: '10px 0px', // syntax similar to that of CSS Margin
    threshold: 0.1, // ratio of element convergence
    loaded: function(el) {
      el.addEventListener('load', function () {
        if (el.tagName === 'IMG') {
          var img = new Image();
          img.onload = function () {
            el.classList.add('loaded');
          }
          img.src = el.getAttribute('src');
        } else {
          el.classList.add('loaded');
        }
      });
      setTimeout(function () {
        el.classList.add('loading');
      }, 100);
      ACMS.dispatchEvent('acmsLazyLoaded', el);
    }
  }
});

使い方

Ver. 2.11 の標準ユニットは、Lazy Load に対応されていますので、特にユニットは追加でカスタマイズする必要はありません。静的なソースコードやカスタムフィールド で Lazy Load する場合を確認していきましょう。

画像の場合

画像に Lazy Load を設定する場合の基本は、以下のように実装します。

<img class="js-lazy-load" src="/images/placeholder/image.svg" data-src="/media/{hoge@path}" alt="">

---

---

※/images/placeholder/image.svg は systemテーマの中に入っています

画像の場合は srcset 属性（スクリーン幅によって読み込む画像を変える）を使いたい場合もあると思います。以下のように、 data-srcset属性と data-sizes属性 を使うことで可能になります。

<img class="js-lazy-load" src="/images/placeholder/image.svg" data-srcset="/media/{hoge@path}[resizeImg(640)] 640w, /media/{hoge@path}[resizeImg(1200)] 1200w" data-sizes="100vw" alt="">

iframeの場合

YouTubeなどコンテンツの埋め込みで iframe要素を使うことは多いと思います。 iframe要素の場合も簡単に Lazy Load に対応することができます。 画像と同じく data-src属性に読み込みたいコンテンツを指定するだけです。

<iframe class="js-lazy-load" width="640" height="360" data-src="https://www.youtube.com/embed/MwlwcmF0hwo?wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>

Open Street Map、Google Mapの場合

a-blog cms 標準で入っている各種地図の組み込みJSも簡単に Lazy Load 対応できます。特に Google Map などは、有料化されアクセス数が気になりますが、Lazy Load 対応することでアクセス数を節約でき、Google Map を導入しやすくなります。

全て、data-lazy="true" を適用するだけで対応できます。

Open Street Map の場合

<div class="js-open-street-map" data-lazy="true" data-lat="35.185574" data-lng="136.899066" data-zoom="10" data-msg="test" style="width: 640px; height: 360px;"></div>

Google Map の場合

<img class="js-s2d-ready" data-lazy="true" src="//maps.googleapis.com/maps/api/staticmap?center=35.185574,136.899066&zoom=10&size=640x360&maptype=roadmap&markers=35.185574,136.899066&key=AIzaSyDtJZq2qv89P-tRxMoBzmnrV_17vlw5Zl8" alt="test" width="640" height="360" title="クリックで地図が動かせるようになります。">

---