画像・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="クリックで地図が動かせるようになります。">

a-blog cmsでは、JavaScriptなどのコンテンツが表示領域に入った瞬間に読み込み、遅延ロードするための機能が用意されています。（Ver. 2.11.0より）

HTML要素に本来指定すべき属性をdata属性として指定しておき、表示領域に入ったら data- の接頭辞をはずして本来の属性として遅延ロードさせる組み込みJSです。 利用することによって、外部の埋め込みコードによるページの表示速度の問題を改善することができます。

例えば、以下のようなコードがあったとします。

<div class="js-lazy-contents" data-type="script" data-src="http://example.com/example.js" data-charset="utf-8"></div>

これが、表示領域に入ると、以下に変更されます。

<div class="js-lazy-contents" data-type="script" data-src="http://example.com/example.js" data-charset="utf-8" data-executed="1">
  <script src="http://example.com/example.js" charset="utf-8"></script>
</div>

このように、data-type 属性がタグ名として、残りのdata属性はdata-を除いた属性として新たに挿入されます。

例えばTwitterウィジェットなどのコンテンツはパフォーマンスに大きく影響するので、以下のようなHTMLで遅延ロードします。

<a class="twitter-timeline" href="https://twitter.com/TwitterDev/timelines/539487832448843776?ref_src=twsrc%5Etfw">National Park Tweets - Curated tweets by TwitterDev</a>
<div data-type="script" data-src="https://platform.twitter.com/widgets.js" data-charset="utf-8" class="js-lazy-contents">

使い方

js-lazy-contents というclass属性を適用し、data-type 属性に追加したいHTML要素、 data-* 属性に、dataを取り除いた属性を指定（ data-src 属性の場合は src 属性）します。

<div class="js-lazy-contents" data-type="script" data-src="http://example.com/example.js" data-charset="utf-8"></div>

デフォルトの設定

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

lazyContentsMark: '.js-lazy-contents',

設定のカスタマイズ

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

ACMS.Ready(function(){
  lazyLoadMark = '.js-lazy-contents',
});