--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/advanced/performance' title: 'パフォーマンス | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:25:28+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- DXPR Builderページの読み込みコストは、モジュールが制御する3つに依存します。エディターJavaScriptの取得元、モジュールがBootstrapをサイドロードするか、保存HTMLが要求するエレメントライブラリーです。このページではコードの実装通りに各項目を説明します。変更内容の判断材料にします。一般的なDrupalの助言(画像圧縮、CDN、ページキャッシュ設定)はここでは繰り返しません。Builderフィールドのキャッシュ動作はキャッシュを参照。 エディターアセットソース Asset sourceはEditor Assetsセクション(DXPR Studio > DXPR Builder > General Settings配下)にあり、editor_assets_sourceを設定します。 tags: - 'Naar productie' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:25:28+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: パフォーマンス description: |- DXPR Builderページの読み込みコストは、モジュールが制御する3つに依存します。エディターJavaScriptの取得元、モジュールがBootstrapをサイドロードするか、保存HTMLが要求するエレメントライブラリーです。このページではコードの実装通りに各項目を説明します。変更内容の判断材料にします。一般的なDrupalの助言(画像圧縮、CDN、ページキャッシュ設定)はここでは繰り返しません。Builderフィールドのキャッシュ動作はキャッシュを参照。 エディターアセットソース Asset sourceはEditor Assetsセクション(DXPR Studio > DXPR Builder > General Settings配下)にあり、editor_assets_sourceを設定します。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:25:28+0000' dateModified: '2026-10-24T11:25:28+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/advanced/performance' articleSection: 'Naar productie' - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/advanced/performance' description: |- DXPR Builderページの読み込みコストは、モジュールが制御する3つに依存します。エディターJavaScriptの取得元、モジュールがBootstrapをサイドロードするか、保存HTMLが要求するエレメントライブラリーです。このページではコードの実装通りに各項目を説明します。変更内容の判断材料にします。一般的なDrupalの助言(画像圧縮、CDN、ページキャッシュ設定)はここでは繰り返しません。Builderフィールドのキャッシュ動作はキャッシュを参照。 エディターアセットソース Asset sourceはEditor Assetsセクション(DXPR Studio > DXPR Builder > General Settings配下)にあり、editor_assets_sourceを設定します。 breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: ホーム item: 'https://dxpr.com/ja' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: ja --- [Help Center](/ja/node/75)/[Documentation](/ja/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Naar productie](/hc/documentation/learn-dxpr-builder/manage/production) # パフォーマンス. Learn DXPR BuilderManage the siteNaar productie ## In this guide Related guides - [キャッシュ](/ja/hc/documentation/learn-dxpr-builder/advanced/caching) - [ローカルビルドでエディターを実行する](/ja/hc/documentation/learn-dxpr-builder/customization/editor-assets) - [アーキテクチャ](/ja/hc/documentation/learn-dxpr-builder/development/architecture) DXPR Builderページの読み込みコストは、モジュールが制御する3つに依存します。エディターJavaScriptの取得元、モジュールがBootstrapをサイドロードするか、保存HTMLが要求するエレメントライブラリーです。このページではコードの実装通りに各項目を説明します。変更内容の判断材料にします。一般的なDrupalの助言(画像圧縮、CDN、ページキャッシュ設定)はここでは繰り返しません。Builderフィールドのキャッシュ動作は[キャッシュ](/hc/documentation/learn-dxpr-builder/advanced/caching)を参照。 ## エディターアセットソース **Asset source**は**Editor Assets**セクション(**DXPR Studio** > **DXPR Builder** > **General Settings**配下)にあり、`editor_assets_source`を設定します。 | 値 | ラベル | 読み込み内容 | |---|---|---| | `0` | Cloud | 6つのエディタースクリプトと`css/dxpr_builder_backend.css`を`https://cdn2.dxpr.com//`から読み込みます。プロダクトキーを`jwt`クエリーパラメーターとして付けます。 | | `1` | Local (minified) | `dxpr_builder/*.min.js`(モジュールディレクトリから)。 | | `2` | Local (unminified) | `dxpr_builder/*.js`(モジュールディレクトリから)と`dxpr_builder/editor.dev`。 | この設定はモジュールディレクトリにローカルビルドがある場合のみ表示されます。ある場合、Cloud設定でもローカルファイルを使うため、クラウドアセットはリリース用にのみ存在します。サイトのソース確認方法です。 ```bash drush config:get dxpr_builder.settings editor_assets_source ``` 6つのエディタースクリプトは集約されません。クラウドファイルは外部で、ローカルエントリーは`preprocess: FALSE`と`defer`で宣言されます。エディターのヘルパーライブラリー(SortableとDraggabilly付きの`dxpr_builder/editor.core`など)は他のライブラリー同様に集約され、以下の訪問者向けファイルも同様です。 ## Bootstrapサイドロード **Sideload Bootstrap files**(`dxpr_builder.settings`内の`bootstrap`)には2つの値があります。**Bootstrap 5**ではフォーマッターが`dxpr_builder/bootstrap_5`(`bootstrap.min.css`と`bootstrap.bundle.min.js`、重みはいずれも`-10`)をBuilderフィールドをレンダーする全ページに添付します。**None (theme provides Bootstrap)**では何も添付されません。 1. テーマがすでにBootstrap 5を読み込むか確認します。 2. 読み込む場合はオプションを**None**に設定し、訪問者のダウンロードを1つにします。 3. 読み込まない場合は**Bootstrap 5**を設定します。負の重みのためテーマ独自のCSSは後に読み込まれます。 ## 訪問者の読み込み内容 エディターアクセスのない利用者向けに、フォーマッターは以下を添付します。 - `dxpr_builder/core`はBuilderフィールドのある全ページに。`dxpr_builder/css/dxpr_builder.css`(`fetchpriority: high`付き)、`js/css-register-properties.js`、公開デザイントークンです。 - `dxpr_builder/frontend.smooth_scroll`(`dxpr_smooth_scroll.min.js`)はBuilderフィールドのある全ページに。アンカーリンク用です。 - `dxpr_builder/editor.frontend`(`dxpr_frontend.min.js`。ソース`2`では非minifyファイル)は動的モードでのみ。モジュールは保存HTMLが`dxpr_frontend.js`を参照する場合にフィールドを動的モードに切り替えます。エディターはJavaScriptを要するエレメント(カウンター、カルーセル、パララックス、動画背景)を含むページ向けに書き込みます。テキスト・画像・ボタンのみのページは静的のままで、`core`とスムーズスクロールスクリプト以外のBuilder JavaScriptは出荷しません。 - 各エレメントの`data-dxpr-builder-libraries`属性で指定されるライブラリー。 | エレメント | 添付ライブラリー | ファイル | |---|---|---| | カウントダウン | `elements.counteverest` | CounteverestのCSSとJS、`js/counteverest-migrate.js` | | カウンター | `elements.countto` | `dxb-count-to.min.js` | | アイコン、サークルカウンター | `elements.icon_helpers`とアイコンセットのライブラリー | アイコンフォントCSSとフォントファイル | | ソーシャルリンク | `elements.social_icons`、`elements.font_awesome_6_free`、`elements.icon_helpers` | Font AwesomeのCSSとフォント | | 拡大アニメーション付きプログレスバー | `elements.bootstrap_progress_extension` | 拡張のCSSとJS | | 入場アニメーション付きの任意エレメント | `elements.animate` | `dxpr_animations.min.js`、`native-animations.css` | | Font Awesome 4・5クラスで保存されたエレメント | `elements.font_awesome_6_free`、`elements.font_awesome_v4_shims` | Font Awesomeとv4 shimのCSS | 動的モードでは`dxpr_frontend.js`が実行直後にGlyphicon、Font Awesome、Bootstrap Iconsのスタイルシートを追加し、他のアセットはページ上のエレメントが必要な場合のみ読み込みます。パララックス効果のセクション用`dxb-parallax.min.js`(**Disable on mobile**に**Background effects**配下でチェック時は幅481ピクセル未満でスキップ)、YouTube動画背景のセクション用`vendor/managed/plyr/dist/plyr.min.js`とそのCSS、カルーセル用`css/carousel.css`です。エディターは保存時にページが動的モードを要するか判断し、要する場合は`dxpr_frontend.js`用の小さなスクリプトローダーを保存HTMLに書き込みます。 ページに配置されたブロックとビューはフィールドのレンダー時にサーバーでレンダーされます。独自のライブラリーはフィールドにコピーされます。 ## 編集者の読み込み内容 権限`edit with dxpr builder`を持つ利用者向けに、ページは以下も取得します。 - `dxpr_builder/editor.builder`：`dxpr_templates`、`dxpr_global`、`dxpr_events`、`dxpr_param_types`、`dxpr_elements`、`dxpr_builder`。いずれも遅延。 - `dxpr_builder/editor.core`：Sortable、Draggabilly、Floating UI、DXBスライダー、lz-string、streaming-markdown、base64-js、ET Line・Pixeden・Glyphiconフォント、`css/drupal-integration.css`。 - `dxpr_builder/editor.core.styles`(`css/dxpr_builder_backend.css`)、`dxpr_builder/editor.validation`、`dxpr_builder/twig.js`、`dxpr_builder/dxpr_saved_thumbs`、Mediaモジュール有効時はコアの`media/view`。 - CKEditor 5(`vendor/managed/dxpr-cke5-superbuild/dist/ckeditor.js`と翻訳ファイル)。テキスト編集の初期化時に`dxpr_global.js`が追加します。 Builderフィールドはログイン利用者全員(編集者の有無に関わらず)に`max-age: 0`でレンダーされるため、Dynamic Page Cacheは保持せず、ページ読み込みごとにフィールドを再レンダーします。匿名訪問者はキャッシュ済みフィールドを取得します。 ## 画像 Imageエレメントの**Image**パラメーターで編集者は画像スタイルを選べます。一覧はサイトの全画像スタイルを持ち、存在すれば**Optimize for fast loading**が先頭、**Original image (No resizing)**が次です。`optimize`スタイルは`config/optional/image.style.optimize.yml`に出荷されます。1024ピクセル幅に拡大なしで縮小し、WebPに変換します。レイアウトがより広いファイルを要しない限り、コンテンツ画像にはこれを選びます。SVGファイルは画像スタイルを回避します。 Imageエレメントは通常の``を書き出します。`src`、`alt`、`title`、インラインの幅・高さ付きです。`loading="lazy"`や`srcset`は付けないため、1024ピクセルにスタイルされた画像を全ビューポートがダウンロードします。セクション背景画像はStyleタブで設定し、同じ規則に従います。 Videoエレメントはポスター画像設定時に訪問者のクリックまでiframeを遅延します。ページ読み込み時のプレーヤー読み込みを避けるには埋め込み動画にポスターを設定します。 ## テキストフォーマットフィルター **Apply text format filters to frontend content**(`format_filters`)は、編集者でない利用者向けのフィールドレンダーごとに、フィールドのテキストフォーマットを`processed_text`で実行します。初期状態はオフです。訪問者出力でフィルター実行が必要な場合を除きオフのままにします。 ## 次のステップ - [キャッシュ](/hc/documentation/learn-dxpr-builder/advanced/caching)：モジュールが使うキャッシュコンテキスト・タグ・内部キャッシュに。 - [エディターアセット](/hc/documentation/learn-dxpr-builder/customization/editor-assets)：アセットソース設定に。 - [アーキテクチャー](/hc/documentation/learn-dxpr-builder/development/architecture)：これらのライブラリーを添付するコードに。