--- url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/tutorials/faq-page' title: 'Performance | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:46:07+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Was eine DXPR Builder-Seite beim Laden kostet, hängt von drei Dingen ab, die das Modul steuert: woher das Editor-JavaScript kommt, ob das Modul Bootstrap per Sideload lädt und welche Element-Libraries das gespeicherte HTML anfordert. Diese Seite beschreibt jedes davon so, wie der Code es umsetzt, damit Sie entscheiden können, was Sie ändern. Allgemeine Drupal- Ratschläge (Bildkomprimierung, CDNs, Seiten-Cache-Einstellungen) werden hier nicht wiederholt; siehe Caching für das Cache-Verhalten von Builder-Feldern. tags: - 'Volg een tutorial' 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 eine DXPR Builder-Seite beim Laden kostet, hängt von drei Dingen ab, die das Modul steuert: woher das Editor-JavaScript kommt, ob das Modul Bootstrap per Sideload lädt und welche Element-Libraries das gespeicherte HTML anfordert. Diese Seite beschreibt jedes davon so, wie der Code es umsetzt, damit Sie entscheiden können, was Sie ändern. Allgemeine 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-24T08:46:07+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/tutorials/faq-page' articleSection: 'Volg een tutorial' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/tutorials/faq-page' description: |- Was eine DXPR Builder-Seite beim Laden kostet, hängt von drei Dingen ab, die das Modul steuert: woher das Editor-JavaScript kommt, ob das Modul Bootstrap per Sideload lädt und welche Element-Libraries das gespeicherte HTML anfordert. Diese Seite beschreibt jedes davon so, wie der Code es umsetzt, damit Sie entscheiden können, was Sie ändern. Allgemeine 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) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Performance. Learn DXPR BuilderBuild pagesVolg een tutorial ## In this guide Related guides - [Ein aufklappbares Panel hinzufügen](/de/hc/documentation/learn-dxpr-builder/layout/collapsibles-element) - [Ein Tabs-Panel hinzufügen](/de/hc/documentation/learn-dxpr-builder/layout/tabs-element) - [Ihre Seiten barrierefrei machen](/de/hc/documentation/learn-dxpr-builder/tutorials/contact-page) - [Inhaltstypen](/de/hc/documentation/learn-dxpr-builder/tutorials/knowledge-base) Was eine DXPR Builder-Seite beim Laden kostet, hängt von drei Dingen ab, die das Modul steuert: woher das Editor-JavaScript kommt, ob das Modul Bootstrap per Sideload lädt und welche Element-Libraries das gespeicherte HTML anfordert. Diese Seite beschreibt jedes davon so, wie der Code es umsetzt, damit Sie entscheiden können, was Sie ändern. Allgemeine 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`-Query-Parameter. | | `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 er das tut, nutzt das Modul die lokalen Dateien, selbst wenn Cloud konfiguriert ist, weil Cloud-Assets nur für Versionen 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 Hilfs-Libraries des Editors, etwa `dxpr_builder/editor.core` mit Sortable und Draggabilly, werden aggregiert wie jede andere Library, ebenso die untenstehenden Besucherdateien. ## Bootstrap-Sideloading **Sideload Bootstrap files** (`bootstrap` in `dxpr_builder.settings`) hat zwei Werte. Mit **Bootstrap 5** hängt der Formatter `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**, sodass Besucher eine Kopie laden. 3. Falls nein, setzen Sie **Bootstrap 5**; das eigene CSS des Themes lädt wegen des negativen Gewichts weiter danach. ## Was Besucher laden Für alle ohne Editorzugriff hängt der Formatter 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-Tokens. - `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 mit 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 Buttons bleibt statisch und liefert kein Builder-JavaScript außer `core` und dem Smooth-Scroll- Skript. - Die Libraries, die im Attribut `data-dxpr-builder-libraries` jedes Elements stehen: | Element | Angehängte Library | 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 Library des Icon-Sets | Icon-Font-CSS und Fontdatei | | Social links | `elements.social_icons`, `elements.font_awesome_6_free`, `elements.icon_helpers` | Font-Awesome-CSS und -Font | | Progress bar mit Grow-Animation | `elements.bootstrap_progress_extension` | Erweiterungs-CSS und -JS | | Jedes Element mit Entrance-Animation | `elements.animate` | `dxpr_animations.min.js`, `native-animations.css` | | Elemente, die mit Font-Awesome-4- oder -5-Klassen gespeichert wurden | `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 weitere Assets nur, wenn ein Element auf der Seite sie braucht: `dxb-parallax.min.js` für Sections mit Parallax-Effekt (unter 481 Pixeln Breite übersprungen, wenn **Disable on mobile** unter **Background effects** angewählt ist), `vendor/managed/plyr/dist/plyr.min.js` und sein CSS für Sections mit YouTube-Videohintergrund sowie `css/carousel.css` für Karussells. Der Editor entscheidet beim Speichern, ob eine Seite den dynamischen Modus braucht; wenn ja, schreibt er einen kleinen Skript-Loader für `dxpr_frontend.js` in das gespeicherte HTML. Blöcke und Ansichten auf der Seite rendern auf dem Server, wenn das Feld rendert; ihre eigenen Libraries werden auf das Feld kopiert. ## Was die Redaktion lädt Für alle 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 deferred. - `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 das Text- Editieren startet. Builder-Felder werden mit `max-age: 0` für jedes eingeloggte Konto gerendert, unabhängig von dessen Rolle, sodass der Dynamic Page Cache sie nicht behält und jedes Laden der Seite das Feld erneut rendert. Anonyme Besucher erhalten das gecachte Feld. ## Bilder Der **Image**-Parameter des Image-Elements lässt die Redaktion 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 zweitem. Der Stil `optimize` liegt in `config/optional/image.style.optimize.yml`: auf 1024 Pixel Breite skalieren ohne Hochskalieren, dann nach WebP konvertieren. Wählen Sie ihn für Inhaltsbilder, außer das Layout braucht eine breitere Datei. SVG-Dateien umgehen Bildstile. Das Image-Element schreibt ein einfaches `` mit `src`, `alt`, `title`und inline Breite und Höhe. Es fügt kein `loading="lazy"` oder `srcset` hinzu, sodass ein auf 1024 Pixel gestyltes Bild das ist, was jeder Viewport lädt. Abschnitts-Hintergrundbilder werden über den Style-Tab gesetzt und folgen derselben Regel. Das Video-Element stellt sein iframe erst zurück, wenn Besucher klicken, wenn ein Posterbild gesetzt ist; setzen Sie ein Poster auf eingebettete Videos, um den Player beim Laden der Seite nicht zu laden. ## Textformat-Filter **Apply text format filters to frontend content**(`format_filters`) wendet das Textformat des Feldes über `processed_text` an, jedes Mal, wenn das Feld für Personen rendert, die nicht redaktionell arbeiten. Es ist standardmäßig aus; lassen Sie es aus, außer Sie brauchen einen Filter, der auf der Besucherausgabe läuft. ## Wie geht es weiter? - [Caching](/de/hc/documentation/learn-dxpr-builder/advanced/caching) für die Cache-Kontexte, Tags und internen Caches, die das Modul nutzt. - [Editor-Assets](/de/hc/documentation/learn-dxpr-builder/customization/editor-assets) für die Asset-Quellen- Einstellung. - [Architektur](/de/hc/documentation/learn-dxpr-builder/development/architecture) für den Code, der diese Libraries anhängt.