遅延読み込み
画像・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="">
| class属性 | 例：js-lazy-load | |
|---|---|---|
| data-src属性 | 表示する画像のパス（例：/media/{hoge@path}） | |
| src属性 | ローディング時に表示する画像を指定（例：/images/placeholder/image.svg） |
※/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="クリックで地図が動かせるようになります。">
