--- url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/advanced/performance' title: 'Performance | DXPR' author: name: docs-sync url: 'https://dxpr.com/users/docs-sync' date: '2026-10-23T14:31:17+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Which assets load for visitors, dynamic mode and what to measure' tags: - 'Run it in production' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-23T14:31:17+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: Performance description: 'Which assets load for visitors, dynamic mode and what to measure' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T14:31:17+0000' dateModified: '2026-10-23T14:31:17+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/hc/documentation/learn-dxpr-builder/advanced/performance' articleSection: 'Run it in production' - '@type': WebPage '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/advanced/performance' description: 'Which assets load for visitors, dynamic mode and what to measure' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: en --- [Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Run it in production](/hc/documentation/learn-dxpr-builder/manage/production) # Performance. Which assets load for visitors, dynamic mode and what to measure Learn DXPR BuilderManage the siteRun it in production ## In this guide Related guides - [Caching](/hc/documentation/learn-dxpr-builder/advanced/caching) - [Editor assets](/hc/documentation/learn-dxpr-builder/customization/editor-assets) - [Architecture](/hc/documentation/learn-dxpr-builder/development/architecture) 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](/hc/documentation/learn-dxpr-builder/advanced/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//` 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: ```bash 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. 1. Check whether the theme already loads Bootstrap 5. 2. If it does, set the option to **None** so visitors download one copy. 3. 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 `` 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](/hc/documentation/learn-dxpr-builder/advanced/caching) for the cache contexts, tags and internal caches the module uses. - [Editor assets](/hc/documentation/learn-dxpr-builder/customization/editor-assets) for the asset source setting. - [Architecture](/hc/documentation/learn-dxpr-builder/development/architecture) for the code that attaches these libraries.