Performance.

Learn DXPR BuilderManage the siteNaar productie

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.

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

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