--- url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/advanced/performance' title: 'Performance | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:03:51+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Was das Laden einer DXPR-Builder-Seite kostet, hängt von drei Dingen ab, die das Modul steuert: woher das Editor-JavaScript kommt, ob das Modul Bootstrap mitlädt und welche Elementbibliotheken das gespeicherte HTML anfordert. Diese Seite beschreibt jedes davon so, wie der Code es umsetzt, damit Sie entscheiden können, was Sie ändern. Generelle Drupal-Ratschläge (Bildkomprimierung, CDNs, Seiten-Cache-Einstellungen) werden hier nicht wiederholt; siehe Caching für das Cache-Verhalten von Builder-Feldern. 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-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: Performance description: |- Was das Laden einer DXPR-Builder-Seite kostet, hängt von drei Dingen ab, die das Modul steuert: woher das Editor-JavaScript kommt, ob das Modul Bootstrap mitlädt und welche Elementbibliotheken das gespeicherte HTML anfordert. Diese Seite beschreibt jedes davon so, wie der Code es umsetzt, damit Sie entscheiden können, was Sie ändern. Generelle Drupal-Ratschläge (Bildkomprimierung, CDNs, Seiten-Cache-Einstellungen) werden hier nicht wiederholt; siehe Caching für das Cache-Verhalten von Builder-Feldern. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T04:03:51+0000' dateModified: '2026-10-24T09:09:48+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/de/hc/documentation/learn-dxpr-builder/advanced/performance' articleSection: 'Naar productie' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/advanced/performance' description: |- Was das Laden einer DXPR-Builder-Seite kostet, hängt von drei Dingen ab, die das Modul steuert: woher das Editor-JavaScript kommt, ob das Modul Bootstrap mitlädt und welche Elementbibliotheken das gespeicherte HTML anfordert. Diese Seite beschreibt jedes davon so, wie der Code es umsetzt, damit Sie entscheiden können, was Sie ändern. Generelle Drupal-Ratschläge (Bildkomprimierung, CDNs, Seiten-Cache-Einstellungen) werden hier nicht wiederholt; siehe Caching für das Cache-Verhalten von Builder-Feldern. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Help Center](/de/hc)/[Documentation](/de/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) # Performance. Learn DXPR BuilderManage the siteNaar productie ## In this guide Related guides - [Caching](/de/hc/documentation/learn-dxpr-builder/advanced/caching) - [Editor aus lokalem Build ausführen](/de/hc/documentation/learn-dxpr-builder/customization/editor-assets) - [Architektur](/de/hc/documentation/learn-dxpr-builder/development/architecture) Was das Laden einer DXPR-Builder-Seite kostet, hängt von drei Dingen ab, die das Modul steuert: woher das Editor-JavaScript kommt, ob das Modul Bootstrap mitlädt und welche Elementbibliotheken das gespeicherte HTML anfordert. Diese Seite beschreibt jedes davon so, wie der Code es umsetzt, damit Sie entscheiden können, was Sie ändern. Generelle Drupal-Ratschläge (Bildkomprimierung, CDNs, Seiten-Cache-Einstellungen) werden hier nicht wiederholt; siehe [Caching](/de/hc/documentation/learn-dxpr-builder/advanced/caching) für das Cache-Verhalten von Builder-Feldern. ## Editor-Asset-Quelle **Asset source**, im Abschnitt **Editor Assets** von **DXPR Studio** > **DXPR Builder** > **General Settings**, setzt `editor_assets_source`: | Wert | Bezeichnung | Was lädt | |---|---|---| | `0` | Cloud | Die sechs Editor-Skripte und `css/dxpr_builder_backend.css` von `https://cdn2.dxpr.com//` mit Ihrem Produktschlüssel als `jwt`-Abfrageparameter. | | `1` | Local (minified) | `dxpr_builder/*.min.js` aus dem Modulverzeichnis. | | `2` | Local (unminified) | `dxpr_builder/*.js` aus dem Modulverzeichnis, plus `dxpr_builder/editor.dev`. | Die Einstellung erscheint nur, wenn ein lokaler Build im Modulverzeichnis existiert. Wenn ja, nutzt das Modul die lokalen Dateien, selbst wenn Cloud konfiguriert ist, weil Cloud-Assets nur für Releases existieren. Prüfen Sie, welche Quelle eine Website nutzt: ```bash drush config:get dxpr_builder.settings editor_assets_source ``` Die sechs Editor-Skripte werden nie aggregiert: Cloud-Dateien sind extern, und die lokalen Einträge sind mit `preprocess: FALSE` und `defer` deklariert. Die Helfer-Bibliotheken des Editors, etwa `dxpr_builder/editor.core` mit Sortable und Draggabilly, werden aggregiert wie jede andere Bibliothek, ebenso die besucherseitigen Dateien unten. ## Bootstrap-Mitladen **Sideload Bootstrap files** (`bootstrap` in `dxpr_builder.settings`) hat zwei Werte. Mit **Bootstrap 5** hängt der Formatierer `dxpr_builder/bootstrap_5` (`bootstrap.min.css` und `bootstrap.bundle.min.js`, beide mit Gewicht `-10`) an jede Seite, die ein Builder-Feld rendert. Mit **None (theme provides Bootstrap)**wird nichts angehängt. 1. Prüfen Sie, ob das Theme bereits Bootstrap 5 lädt. 2. Falls ja, setzen Sie die Option auf **None**, damit Besucher eine Kopie laden. 3. Falls nein, setzen Sie **Bootstrap 5**; das eigene CSS des Themes lädt wegen des negativen Gewichts weiterhin danach. ## Was Besucher laden Für alle ohne Bearbeitungszugang hängt der Formatierer an: - `dxpr_builder/core` auf jeder Seite mit Builder-Feld: `dxpr_builder/css/dxpr_builder.css` (mit `fetchpriority: high`), `js/css-register-properties.js` und die öffentlichen Design-Token. - `dxpr_builder/frontend.smooth_scroll`(`dxpr_smooth_scroll.min.js`) auf jeder Seite mit Builder-Feld, für Ankerlinks. - `dxpr_builder/editor.frontend` (`dxpr_frontend.min.js`, oder die unminifizierte Datei bei Quelle `2`) nur im dynamischen Modus. Das Modul schaltet ein Feld in den dynamischen Modus, wenn sein gespeichertes HTML `dxpr_frontend.js`referenziert, das der Editor für Seiten schreibt, die Elemente enthalten, die JavaScript brauchen, etwa Zähler, Karussells, Parallax und Videohintergründe. Eine Seite aus Text, Bildern und Schaltflächen bleibt statisch und liefert außer `core` und dem Smooth-Scroll-Skript kein Builder-JavaScript aus. - Die Bibliotheken, die im Attribut `data-dxpr-builder-libraries`jedes Elements genannt sind: | Element | Angehängte Bibliothek | Dateien | |---|---|---| | Countdown | `elements.counteverest` | Counteverest-CSS und -JS, `js/counteverest-migrate.js` | | Counter | `elements.countto` | `dxb-count-to.min.js` | | Icon, Circle counter | `elements.icon_helpers` plus die Bibliothek des Icon-Sets | Icon-Font-CSS und Font-Datei | | Social links | `elements.social_icons`, `elements.font_awesome_6_free`, `elements.icon_helpers` | Font-Awesome-CSS und -Font | | Progress bar with grow animation | `elements.bootstrap_progress_extension` | Erweiterungs-CSS und -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 und das v4-Shim-CSS | Im dynamischen Modus fügt `dxpr_frontend.js` die Stylesheets für Glyphicon, Font Awesome und Bootstrap Icons hinzu, sobald es läuft, und lädt übrige Assets nur, wenn ein Element auf der Seite sie braucht: `dxb-parallax.min.js` für Abschnitte mit Parallax-Effekt (unter 481 Pixeln Breite übersprungen, wenn **Disable on mobile** unter **Background effects** aktiviert ist), `vendor/managed/plyr/dist/plyr.min.js` und sein CSS für Abschnitte mit YouTube-Videohintergrund, sowie `css/carousel.css` für Karussells. Der Editor entscheidet beim Speichern, ob eine Seite den dynamischen Modus braucht; falls ja, schreibt er einen kleinen Skriptlader für `dxpr_frontend.js` in das gespeicherte HTML. Blöcke und Ansichten, die in der Seite platziert sind, rendern auf dem Server, wenn das Feld rendert; ihre eigenen Bibliotheken werden auf das Feld kopiert. ## Was Bearbeitende laden Für Konten mit der Berechtigung `edit with dxpr builder` erhält die Seite außerdem: - `dxpr_builder/editor.builder`: `dxpr_templates`, `dxpr_global`, `dxpr_events`, `dxpr_param_types`, `dxpr_elements` und `dxpr_builder`, alle verzögert. - `dxpr_builder/editor.core`: Sortable, Draggabilly, Floating UI, der DXB-Slider, lz-string, streaming-markdown, base64-js, die ET-Line-, Pixeden- und Glyphicon-Fonts sowie `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` und Core-`media/view`, wenn das Media-Modul aktiviert ist. - CKEditor 5 (`vendor/managed/dxpr-cke5-superbuild/dist/ckeditor.js`und seine Übersetzungsdatei), hinzugefügt von `dxpr_global.js`, wenn die Textbearbeitung startet. Builder-Felder werden mit `max-age: 0` für alle Angemeldeten gerendert, ob mit oder ohne Bearbeitungszugang, daher hält Dynamic Page Cache sie nicht vor und jeder Seitenaufruf rendert das Feld erneut. Anonyme Besucher erhalten das zwischengespeicherte Feld. ## Bilder Der **Image**-Parameter des Bildelements lässt die bearbeitende Person einen Bildstil wählen. Die Liste enthält jeden Bildstil der Website, mit **Optimize for fast loading** zuerst, falls vorhanden, und **Original image (No resizing)**als Zweites. Der Stil `optimize` liegt in `config/optional/image.style.optimize.yml`: auf 1024 Pixel Breite skalieren ohne Hochskalieren, dann nach WebP wandeln. Wählen Sie ihn für Inhaltsbilder, außer das Layout braucht eine breitere Datei. SVG-Dateien umgehen Bildstile. Das Bildelement schreibt ein schlichtes `` mit `src`, `alt`, `title`und Inline-Breite und -Höhe. Es fügt kein `loading="lazy"` und kein `srcset` hinzu, daher lädt jeder Viewport ein auf 1024 Pixel gestyltes Bild. Abschnitts-Hintergrundbilder werden über den Tab Style gesetzt und folgen derselben Regel. Das Videoelement lädt sein iframe erst nach einem Klick, wenn ein Vorschaubild gesetzt ist; setzen Sie ein Vorschaubild auf eingebettete Videos, um den Player beim Seitenaufruf nicht zu laden. ## Textformat-Filter **Apply text format filters to frontend content**(`format_filters`) lässt das Textformat des Felds bei jedem Rendern durch `processed_text` laufen, für alle ohne Bearbeitungszugang. Standardmäßig ist es aus; lassen Sie es aus, außer Sie brauchen einen Filter in der Besucherausgabe. ## Wie geht es weiter? - [Caching](/de/hc/documentation/learn-dxpr-builder/advanced/caching): die Cache-Kontexte, -Tags und internen Caches, die das Modul nutzt. - [Editor-Assets](/de/hc/documentation/learn-dxpr-builder/customization/editor-assets): die Asset-Quellen-Einstellung. - [Architektur](/de/hc/documentation/learn-dxpr-builder/development/architecture): der Code, der diese Bibliotheken anhängt.