パフォーマンス向上のためのアセットの遅延読み込み
アセット(コンテンツ)の遅延読み込みとは、アセットが実際に必要になるまでアセットの読み込みを遅らせることです。ウェブの場合、これはHTMLドキュメントのアセットの位置に近い部分をユーザーが閲覧した時点でそのコンテンツがダウンロードされることを意味します。これは、ページパフォーマンスの最適化のために推奨されるさまざまな手法の1つです。
遅延読み込みオプションは、HubLタグ内で使用するカスタムモジュールの画像フィールドと、既定の画像モジュールで使用できます。
カスタムモジュールを作成する場合、画像フィールドに対しブラウザー組み込みの遅延読み込みを有効にするオプションがあります。有効にすると、コントロールを表示または非表示にするかを選択でき、制作担当者がページエディター内で読み込み動作を変更できるようになります。
loading
属性を使用した画像の遅延読み込みは、ほとんどのChromiumベースのブラウザー(Chrome、Edge、Opera)とFirefoxでサポートされています。サポートされるブラウザーの詳細については、caniuse.comをご覧ください。loading
属性をサポートしていないブラウザーではこの属性は単に無視されるだけで、他の影響はありません。
CMS CLIを使用した開発時に画像の遅延読み込みを有効にするには、fields.json
ファイルの画像フィールドにshow_loading
キーとloading
キーを追加します。モジュールとテーマのフィールドタイプをご覧ください。
パラメーター | 型 | 説明 | 既定 |
---|---|---|---|
show_loading
| Boolean | 制作担当者への遅延読み込みコントロールの表示/非表示を制御します。 |
False
|
loading
| String | 遅延読み込みを使用するかどうかを指定します。オプションは |
"disabled"
|
その後、以下の構文を使用してmodule.html
ファイル内でこれらの変数を参照できます。
遅延読み込みを有効にするには、カスタムモジュールに画像フィールドを追加し、インスペクターペインの[コンテンツオプション]セクションに進みます。このセクションには、[画像の読み込み]と[使用可能な読み込みオプション]の両方の選択メニューがあります。

[画像の読み込み]オプションは、ブラウザーのloading
属性の値を設定します。このオプションの1つに[既定](既定オプション)があります。これは、アセットの既定のブラウザー読み込み動作です。遅延読み込みを有効にすると、画像からビューポートまでの距離がdistance-from-viewportしきい値に設定された一定の距離になると、画像が読み込まれます。
[使用可能な読み込みオプション]は、コンテンツエディターのページ、グローバル、およびテーマの各ペイン内で、[画像の読み込み]オプションを表示および設定できるかどうかを制御します。このオプションには[コントロールを表示しない](既定のオプション)と[全てのコントロールを表示]があります。[全てのコントロールを表示]が選択されている場合のページエディターの外観を以下に示します。

その後、以下の構文を使用してmodule.html
ファイル内でこれらの変数を参照できます。
貴重なご意見をありがとうございました。