> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.jp/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# パフォーマンス向上のためのアセットの遅延読み込み
> アセット（コンテンツ）の遅延読み込みとは、アセットが実際に必要になるまでアセットの読み込みを遅らせることです。
'アセット（コンテンツ）の遅延読み込みとは、アセットが実際に必要になるまでアセットの読み込みを遅らせることです。 ';
アセット（コンテンツ）の遅延読み込みとは、アセットが実際に必要になるまでアセットの読み込みを遅らせることです。ウェブの場合、これはHTMLドキュメントのアセットの位置に近い部分をユーザーが閲覧した時点でそのコンテンツがダウンロードされることを意味します。これは、[ページパフォーマンスの最適化](/cms/best-practices/testing-staging-performance/speed)のために推奨されるさまざまな手法の1つです。
## 遅延読み込みの画像
遅延読み込みオプションは、HubLタグ内で使用するカスタムモジュールの[画像フィールド](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#image)と、[既定の画像モジュール](https://knowledge.hubspot.com/ja/design-manager/use-default-modules-in-the-layout-editor#image)で使用できます。
カスタムモジュールを作成する場合、画像フィールドに対し[ブラウザー組み込みの遅延読み込み](https://web.dev/articles/browser-level-image-lazy-loading)を有効にするオプションがあります。有効にすると、コントロールを表示または非表示にするかを選択でき、制作担当者がページエディター内で読み込み動作を変更できるようになります。
### ブラウザーの互換性
`loading`属性を使用した画像の遅延読み込みは、ほとんどのChromiumベースのブラウザー（Chrome、Edge、Opera）とFirefoxでサポートされています。サポートされるブラウザーの詳細については、[caniuse.com](https://caniuse.com/#feat=loading-lazy-attr)をご覧ください。`loading`属性をサポートしていないブラウザーではこの属性は単に無視されるだけで、他の影響はありません。
### CLIを使用して画像フィールドに遅延読み込みを追加する
CMS CLIを使用した開発時に画像の遅延読み込みを有効にするには、`fields.json`ファイルの画像フィールドに`show_loading`キーと`loading`キーを追加します。[モジュールとテーマのフィールドタイプ](https://developers.hubspot.jp/docs/cms/reference/fields/module-theme-fields#image)をご覧ください。
```json theme={null}
// 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_loading` | Boolean | 制作担当者への遅延読み込みコントロールの表示／非表示を制御します。 | `False` |
| `loading` | String | 遅延読み込みを使用するかどうかを指定します。オプションは`"disabled"`または`"lazy"`です。 | `"disabled"` |
その後、以下の構文を使用して`module.html`ファイル内でこれらの変数を参照できます。
```hubl theme={null}
{% set loadingAttr = module.image_field.loading != 'disabled' ? 'loading="{{ module.image_field.loading }}"' : '' %}
```
### デザインマネージャーを使用して画像フィールドに遅延読み込みを追加する
遅延読み込みを有効にするには、カスタムモジュールに画像フィールドを追加し、[インスペクターペイン](https://knowledge.hubspot.com/ja/design-manager/a-quick-tour-of-the-design-manager#inspector)の［コンテンツオプション］セクションに進みます。このセクションには、［画像の読み込み］と［使用可能な読み込みオプション］の両方の選択メニューがあります。
#### 画像の読み込み
［画像の読み込み］オプションは、ブラウザーの`loading`属性の値を設定します。このオプションの1つに［既定］（既定オプション）があります。これは、アセットの既定のブラウザー読み込み動作です。遅延読み込みを有効にすると、画像からビューポートまでの距離が[distance-from-viewportしきい値](https://web.dev/articles/browser-level-image-lazy-loading#distance-from-viewport-thresholds)に設定された一定の距離になると、画像が読み込まれます。
#### 使用可能な読み込みオプション
［使用可能な読み込みオプション］は、コンテンツエディターのページ、グローバル、およびテーマの各ペイン内で、［画像の読み込み］オプションを表示および設定できるかどうかを制御します。このオプションには［コントロールを表示しない］（既定のオプション）と［全てのコントロールを表示］があります。［全てのコントロールを表示］が選択されている場合のページエディターの外観を以下に示します。
その後、以下の構文を使用して`module.html`ファイル内でこれらの変数を参照できます。
```hubl theme={null}
{% set loadingAttr = module.image_field.loading != 'disabled' ? 'loading="{{ module.image_field.loading }}"' : '' %}
```