Performance.

Learn DXPR BuilderBuild pagesVolg een tutorial

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.

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/<version>/ 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:

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 <img> 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 für die Cache-Kontexte, Tags und internen Caches, die das Modul nutzt.
  • Editor-Assets für die Asset-Quellen- Einstellung.
  • Architektur für den Code, der diese Libraries anhängt.