ひまわりとお菓子

Lazy Load(遅延読み込み)について

この記事ではLazy Load(遅延読み込み)の仕様や使い方についてご説明いたします。

Lazy Loadとは

Lazy Loadとは、画像やiframe等の容量の重いファイルを表示領域に入ってから読み込むことで、初回のページの読み込み速度を高速化する手法です。

Lazy Loadの使い方

Godios.ではLazy Loadを利用できます。
管理画面の「外観」→「カスタマイズ」→「Lazy Load(遅延読み込み)」に進み、「有効にする」にチェックをして保存してください。

デフォルトで記事一覧、スライダー、関連記事に対応しています。

記事内でLazy Loadを使う方法

記事内でLazy Loadを使う場合は専用のクイックタグをお使いください。
[Godios lazy-img]と[Godios lazy-iframe]の2つになります。

Lazy Load

上記クイックタグをクリックすると以下の例にあるコードが貼付けられます。
data-src属性に表示したい画像をURLを、title・alt属性にお好みで文字を入力してお使いください。

・Lazy Loadするimgタグの例

<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="ここに画像URLを入力してください。" class="lazyload" title="" alt="" />

・Lazy Loadするiframeタグの例

<div class="iframe-wrap">
  <iframe class="lazyload" data-src="ここに埋め込み用の動画URLを入力してください。" title="" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  <div class="loading-indicator"></div>
</div>