Performance

What a DXPR Builder page costs to load depends on three things the module controls: where the editor JavaScript comes from, whether the module sideloads Bootstrap, and which element libraries the saved HTML asks for. This page describes each of them as the code implements them, so you can decide what to change. Generic Drupal advice (image compression, CDNs, page cache settings) is not repeated here; see Caching for the cache behaviour of builder fields.

Editor asset source

Asset source, in the Editor Assets section of DXPR Studio > DXPR Builder > General Settings, sets editor_assets_source:

Value	Label	What loads
`0`	Cloud	The six editor scripts and `css/dxpr_builder_backend.css` from `https://cdn2.dxpr.com/<version>/` with your product key as a `jwt` query parameter.
`1`	Local (minified)	`dxpr_builder/*.min.js` from the module directory.
`2`	Local (unminified)	`dxpr_builder/*.js` from the module directory, plus `dxpr_builder/editor.dev`.

The setting only appears when a local build exists in the module directory. When it does, the module uses the local files even if Cloud is configured, because cloud assets exist for releases only. Check which source a site uses:

drush config:get dxpr_builder.settings editor_assets_source

The six editor scripts are never aggregated: cloud files are external, and the local entries are declared with preprocess: FALSE and defer. The editor's helper libraries, such as dxpr_builder/editor.core with Sortable and Draggabilly, are aggregated like any other library, as are the visitor-facing files below.

Bootstrap sideloading

Sideload Bootstrap files (bootstrap in dxpr_builder.settings) has two values. With Bootstrap 5 the formatter attaches dxpr_builder/bootstrap_5 (bootstrap.min.css and bootstrap.bundle.min.js, both at weight -10) to every page that renders a builder field. With None (theme provides Bootstrap) nothing is attached.

Check whether the theme already loads Bootstrap 5.
If it does, set the option to None so visitors download one copy.
If it does not, set Bootstrap 5; the theme's own CSS still loads after it because of the negative weight.

What visitors load

For a user without editor access, the formatter attaches:

dxpr_builder/core on every page with a builder field: dxpr_builder/css/dxpr_builder.css (with fetchpriority: high), js/css-register-properties.js and the public design tokens.
dxpr_builder/frontend.smooth_scroll (dxpr_smooth_scroll.min.js) on every page with a builder field, for anchor links.
dxpr_builder/editor.frontend (dxpr_frontend.min.js, or the unminified file with source 2) only in dynamic mode. The module switches a field to dynamic mode when its saved HTML references dxpr_frontend.js, which the editor writes for pages that contain elements that need JavaScript, such as counters, carousels, parallax and video backgrounds. A page of text, images and buttons stays static and ships no builder JavaScript beyond core and the smooth-scroll script.
The libraries named in each element's data-dxpr-builder-libraries attribute:

Element	Library attached	Files
Countdown	`elements.counteverest`	Counteverest CSS and JS, `js/counteverest-migrate.js`
Counter	`elements.countto`	`dxb-count-to.min.js`
Icon, Circle counter	`elements.icon_helpers` plus the icon set's library	Icon font CSS and font file
Social links	`elements.social_icons`, `elements.font_awesome_6_free`, `elements.icon_helpers`	Font Awesome CSS and font
Progress bar with grow animation	`elements.bootstrap_progress_extension`	Extension CSS and JS
Any element with an entrance animation	`elements.animate`	`dxpr_animations.min.js`, `native-animations.css`
Elements saved with Font Awesome 4 or 5 classes	`elements.font_awesome_6_free`, `elements.font_awesome_v4_shims`	Font Awesome and the v4 shim CSS

In dynamic mode dxpr_frontend.js adds the Glyphicon, Font Awesome and Bootstrap Icons stylesheets as soon as it runs, and loads other assets only when an element on the page needs them: dxb-parallax.min.js for sections with the parallax effect (skipped below 481 pixels wide when Disable on mobile is ticked under Background effects), vendor/managed/plyr/dist/plyr.min.js and its CSS for sections with a YouTube video background, and css/carousel.css for carousels. The editor decides at save time whether a page needs dynamic mode; if so, it writes a small script loader for dxpr_frontend.js into the saved HTML.

Blocks and Views placed in the page render on the server when the field renders; their own libraries are copied onto the field.

What editors load

For a user with the edit with dxpr builder permission the page also gets:

dxpr_builder/editor.builder: dxpr_templates, dxpr_global, dxpr_events, dxpr_param_types, dxpr_elements and dxpr_builder, all deferred.
dxpr_builder/editor.core: Sortable, Draggabilly, Floating UI, the DXB slider, lz-string, streaming-markdown, base64-js, the ET Line, Pixeden and Glyphicon fonts, and 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, and core media/view when the Media module is enabled.
CKEditor 5 (vendor/managed/dxpr-cke5-superbuild/dist/ckeditor.js and its translation file), added by dxpr_global.js when text editing initialises.

Builder fields are rendered with max-age: 0 for every logged-in user, editor or not, so Dynamic Page Cache does not keep them and each page load renders the field again. Anonymous visitors get the cached field.

Images

The Image element's Image parameter lets the editor pick an image style. The list holds every image style on the site, with Optimize for fast loading first when it exists and Original image (No resizing) second. The optimize style ships in config/optional/image.style.optimize.yml: scale to 1024 pixels wide without upscaling, then convert to WebP. Choose it for content images unless the layout needs a wider file. SVG files bypass image styles.

The Image element writes a plain <img> with src, alt, title and inline width and height. It does not add loading="lazy" or srcset, so an image styled at 1024 pixels is what every viewport downloads. Section background images are set through the Style tab and follow the same rule.

The Video element defers its iframe until the visitor clicks when a poster image is set; set a poster on embedded videos to avoid loading the player on page load.

Text format filters

Apply text format filters to frontend content (format_filters) runs the field's text format through processed_text each time the field renders for a user who is not an editor. It is off by default; leave it off unless you need a filter to run on visitor output.

What's next?

Caching for the cache contexts, tags and internal caches the module uses.
Editor assets for the asset source setting.
Architecture for the code that attaches these libraries.

Something wrong or missing on this page? Report it or edit the page.