パフォーマンス向上のためのアセットの遅延読み込み

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

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

CMS CLIを使用した開発時に画像の遅延読み込みを有効にするには、fields.jsonファイルの画像フィールドにshow_loadingキーとloadingキーを追加します。モジュールとテーマのフィールドタイプをご覧ください。

その後、以下の構文を使用してmodule.htmlファイル内でこれらの変数を参照できます。

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

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

［使用可能な読み込みオプション］は、コンテンツエディターのページ、グローバル、およびテーマの各ペイン内で、［画像の読み込み］オプションを表示および設定できるかどうかを制御します。このオプションには［コントロールを表示しない］（既定のオプション）と［全てのコントロールを表示］があります。［全てのコントロールを表示］が選択されている場合のページエディターの外観を以下に示します。

その後、以下の構文を使用してmodule.htmlファイル内でこれらの変数を参照できます。