最終更新日: 2025年9月12日
‘アセット（コンテンツ）の遅延読み込みとは、アセットが実際に必要になるまでアセットの読み込みを遅らせることです。 ’; アセット（コンテンツ）の遅延読み込みとは、アセットが実際に必要になるまでアセットの読み込みを遅らせることです。ウェブの場合、これはHTMLドキュメントのアセットの位置に近い部分をユーザーが閲覧した時点でそのコンテンツがダウンロードされることを意味します。これは、ページパフォーマンスの最適化のために推奨されるさまざまな手法の1つです。

​
遅延読み込みの画像

カスタムモジュールを作成する場合、画像フィールドに対しブラウザー組み込みの遅延読み込みを有効にするオプションがあります。有効にすると、コントロールを表示または非表示にするかを選択でき、制作担当者がページエディター内で読み込み動作を変更できるようになります。

​
ブラウザーの互換性

loading属性を使用した画像の遅延読み込みは、ほとんどのChromiumベースのブラウザー（Chrome、Edge、Opera）とFirefoxでサポートされています。サポートされるブラウザーの詳細については、caniuse.comをご覧ください。loading属性をサポートしていないブラウザーではこの属性は単に無視されるだけで、他の影響はありません。

​
CLIを使用して画像フィールドに遅延読み込みを追加する

CMS CLIを使用した開発時に画像の遅延読み込みを有効にするには、fields.jsonファイルの画像フィールドにshow_loadingキーとloadingキーを追加します。モジュールとテーマのフィールドタイプをご覧ください。 
// fields.json file
{
  "id": "357bacfa-2bb8-e996-4589-f55e10d4f1d4",
  "name": "image_field",
  "label": "Image",
  "required": false,
  "locked": false,
  "responsive": true,
  "resizable": true,
  "show_loading": false,
  "type": "image",
  "default": {
    "size_type": "auto",
    "src": "",
    "alt": null,
    "loading": "disabled"
  }
}
パラメーター型説明既定
show_loadingBoolean制作担当者への遅延読み込みコントロールの表示／非表示を制御します。False
loadingString遅延読み込みを使用するかどうかを指定します。オプションは"disabled"または"lazy"です。"disabled"
その後、以下の構文を使用してmodule.htmlファイル内でこれらの変数を参照できます。 
{% set loadingAttr = module.image_field.loading != 'disabled' ? 'loading="{{ module.image_field.loading }}"' : '' %}
<img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" {{ loadingAttr }}>

​
デザインマネージャーを使用して画像フィールドに遅延読み込みを追加する

遅延読み込みを有効にするには、カスタムモジュールに画像フィールドを追加し、インスペクターペインの［コンテンツオプション］セクションに進みます。このセクションには、［画像の読み込み］と［使用可能な読み込みオプション］の両方の選択メニューがあります。 デザインマネージャーの遅延読み込みコントロール

​
画像の読み込み

［画像の読み込み］オプションは、ブラウザーのloading属性の値を設定します。このオプションの1つに［既定］（既定オプション）があります。これは、アセットの既定のブラウザー読み込み動作です。遅延読み込みを有効にすると、画像からビューポートまでの距離がdistance-from-viewportしきい値に設定された一定の距離になると、画像が読み込まれます。

​
使用可能な読み込みオプション

［使用可能な読み込みオプション］は、コンテンツエディターのページ、グローバル、およびテーマの各ペイン内で、［画像の読み込み］オプションを表示および設定できるかどうかを制御します。このオプションには［コントロールを表示しない］（既定のオプション）と［全てのコントロールを表示］があります。［全てのコントロールを表示］が選択されている場合のページエディターの外観を以下に示します。 ページエディターの遅延読み込みコントロール その後、以下の構文を使用してmodule.htmlファイル内でこれらの変数を参照できます。 
{% set loadingAttr = module.image_field.loading != 'disabled' ? 'loading="{{ module.image_field.loading }}"' : '' %}
<img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" {{ loadingAttr }}>