パフォーマンス.

Learn DXPR BuilderManage the siteNaar productie

DXPR Builderページの読み込みコストは、モジュールが制御する3つに依存します。エディターJavaScriptの取得元、モジュールがBootstrapをサイドロードするか、保存HTMLが要求するエレメントライブラリーです。このページではコードの実装通りに各項目を説明します。変更内容の判断材料にします。一般的なDrupalの助言(画像圧縮、CDN、ページキャッシュ設定)はここでは繰り返しません。Builderフィールドのキャッシュ動作はキャッシュを参照。

エディターアセットソース

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/<version>/から読み込みます。プロダクトキーをjwtクエリーパラメーターとして付けます。
1 Local (minified) dxpr_builder/*.min.js(モジュールディレクトリから)。
2 Local (unminified) dxpr_builder/*.js(モジュールディレクトリから)とdxpr_builder/editor.dev。

この設定はモジュールディレクトリにローカルビルドがある場合のみ表示されます。ある場合、Cloud設定でもローカルファイルを使うため、クラウドアセットはリリース用にのみ存在します。サイトのソース確認方法です。

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エレメントは通常の<img>を書き出します。src、alt、title、インラインの幅・高さ付きです。loading="lazy"やsrcsetは付けないため、1024ピクセルにスタイルされた画像を全ビューポートがダウンロードします。セクション背景画像はStyleタブで設定し、同じ規則に従います。

Videoエレメントはポスター画像設定時に訪問者のクリックまでiframeを遅延します。ページ読み込み時のプレーヤー読み込みを避けるには埋め込み動画にポスターを設定します。

テキストフォーマットフィルター

Apply text format filters to frontend content(format_filters)は、編集者でない利用者向けのフィールドレンダーごとに、フィールドのテキストフォーマットをprocessed_textで実行します。初期状態はオフです。訪問者出力でフィルター実行が必要な場合を除きオフのままにします。

次のステップ