Prestaties.

DXPR Builder lerenDe site beherenNaar productie

Wat een DXPR Builder-pagina kost om te laden hangt af van drie dingen die de module beheert: waar de editor-JavaScript vandaan komt, of de module Bootstrap meelaadt en welke elementlibraries de opgeslagen HTML vraagt. Deze pagina beschrijft elk ervan zoals de code ze implementeert, zodat je kunt beslissen wat je wijzigt. Algemeen Drupal-advies (afbeeldingscompressie, CDN's, paginacache-instellingen) wordt hier niet herhaald; zie Caching voor het cachegedrag van buildervelden.

Bron van editorassets

Asset source, in de sectie Editor Assets van DXPR Studio > DXPR Builder > General Settings, stelt editor_assets_source in:

Waarde Label Wat wordt geladen
0 Cloud De zes editorscripts en css/dxpr_builder_backend.css van https://cdn2.dxpr.com/<version>/ met je productsleutel als jwt-queryparameter.
1 Local (minified) dxpr_builder/*.min.js uit de moduleremap.
2 Local (unminified) dxpr_builder/*.js uit de moduleremap, plus dxpr_builder/editor.dev.

De instelling verschijnt alleen wanneer er een lokale build in de moduleremap bestaat. Wanneer die er is, gebruikt de module de lokale bestanden, ook als Cloud is geconfigureerd, omdat cloudassets alleen voor releases bestaan. Controleer welke bron een site gebruikt:

drush config:get dxpr_builder.settings editor_assets_source

De zes editorscripts worden nooit geaggregeerd: cloudbestanden zijn extern en de lokale vermeldingen zijn gedeclareerd met preprocess: FALSE en defer. De helperlibraries van de editor, zoals dxpr_builder/editor.core met Sortable en Draggabilly, worden geaggregeerd zoals elke andere library, net als de bestanden voor bezoekers hieronder.

Bootstrap meeladen

Sideload Bootstrap files (bootstrap in dxpr_builder.settings) heeft twee waarden. Met Bootstrap 5 koppelt de formatter dxpr_builder/bootstrap_5 (bootstrap.min.css en bootstrap.bundle.min.js, beide met gewicht -10) aan elke pagina die een builderveld rendert. Met None (theme provides Bootstrap) wordt niets gekoppeld.

  1. Controleer of het thema al Bootstrap 5 laadt.
  2. Als dat zo is, zet je de optie op None zodat bezoekers één kopie downloaden.
  3. Als dat niet zo is, stel je Bootstrap 5 in; de eigen CSS van het thema laadt er nog steeds na vanwege het negatieve gewicht.

Wat bezoekers laden

Voor een gebruiker zonder bewerkingstoegang koppelt de formatter:

  • dxpr_builder/core op elke pagina met een builderveld: dxpr_builder/css/dxpr_builder.css (met fetchpriority: high), js/css-register-properties.js en de publieke designtokens.
  • dxpr_builder/frontend.smooth_scroll (dxpr_smooth_scroll.min.js) op elke pagina met een builderveld, voor ankerlinks.
  • dxpr_builder/editor.frontend (dxpr_frontend.min.js, of het unminified bestand met bron 2) alleen in dynamische modus. De module zet een veld in dynamische modus wanneer zijn opgeslagen HTML verwijst naar dxpr_frontend.js, wat de editor schrijft voor pagina's die elementen bevatten die JavaScript nodig hebben, zoals tellers, carrousels, parallax en videoachtergronden. Een pagina met tekst, afbeeldingen en knoppen blijft statisch en verstuurt geen builder-JavaScript behalve core en het smooth-scrollscript.
  • De libraries genoemd in het attribuut data-dxpr-builder-libraries van elk element:
Element Gekoppelde library Bestanden
Countdown elements.counteverest Counteverest-CSS en -JS, js/counteverest-migrate.js
Counter elements.countto dxb-count-to.min.js
Icon, Circle counter elements.icon_helpers plus de library van de pictogrammenset CSS van pictogramlettertype en lettertypebestand
Social links elements.social_icons, elements.font_awesome_6_free, elements.icon_helpers Font Awesome-CSS en -lettertype
Progress bar with grow animation elements.bootstrap_progress_extension Extensie-CSS en -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 en de v4-shim-CSS

In dynamische modus voegt dxpr_frontend.js de stylesheets voor Glyphicon, Font Awesome en Bootstrap Icons toe zodra het draait, en laadt andere assets alleen wanneer een element op de pagina ze nodig heeft: dxb-parallax.min.js voor secties met het parallaxeffect (overgeslagen smaller dan 481 pixels breed wanneer Disable on mobile is aangevinkt onder Background effects), vendor/managed/plyr/dist/plyr.min.js en zijn CSS voor secties met een YouTube-videoachtergrond, en css/carousel.css voor carrousels. De editor beslist bij het opslaan of een pagina dynamische modus nodig heeft; zo ja, dan schrijft hij een kleine scriptloader voor dxpr_frontend.js in de opgeslagen HTML.

Blokken en views die in de pagina zijn geplaatst renderen op de server wanneer het veld rendert; hun eigen libraries worden naar het veld gekopieerd.

Wat redacteurs laden

Voor een gebruiker met de rechten edit with dxpr builder krijgt de pagina ook:

  • dxpr_builder/editor.builder: dxpr_templates, dxpr_global, dxpr_events, dxpr_param_types, dxpr_elements en dxpr_builder, allemaal deferred.
  • dxpr_builder/editor.core: Sortable, Draggabilly, Floating UI, de DXB-slider, lz-string, streaming-markdown, base64-js, de ET Line-, Pixeden- en Glyphicon-lettertypen, en 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, en core media/view wanneer de Media-module is ingeschakeld.
  • CKEditor 5 (vendor/managed/dxpr-cke5-superbuild/dist/ckeditor.js en zijn vertaalbestand), toegevoegd door dxpr_global.js wanneer tekstbewerking initialiseert.

Buildervelden worden gerenderd met max-age: 0 voor elke ingelogde gebruiker, redacteur of niet, zodat Dynamic Page Cache ze niet bewaart en elke paginalading het veld opnieuw rendert. Anonieme bezoekers krijgen het gecachete veld.

Afbeeldingen

Met de parameter Image van het Afbeelding-element kiest de redacteur een afbeeldingsstijl. De lijst bevat elke afbeeldingsstijl op de site, met Optimize for fast loading eerst wanneer die bestaat en Original image (No resizing) als tweede. De stijl optimize wordt meegeleverd in config/optional/image.style.optimize.yml: schalen naar 1024 pixels breed zonder op te schalen, daarna converteren naar WebP. Kies die voor inhoudsafbeeldingen tenzij de lay-out een breder bestand nodig heeft. SVG-bestanden omzeilen afbeeldingsstijlen.

Het Afbeelding-element schrijft een gewone <img> met src, alt, title en inline breedte en hoogte. Het voegt geen loading="lazy" of srcset toe, dus een afbeelding in 1024-pixelsstijl is wat elk viewport downloadt. Sectieachtergrondafbeeldingen worden via het tabblad Style ingesteld en volgen dezelfde regel.

Het Video-element stelt zijn iframe uit totdat de bezoeker klikt wanneer een posterafbeelding is ingesteld; stel een poster in op ingesloten video's om te voorkomen dat de speler bij het laden van de pagina laadt.

Tekstformaatfilters

Apply text format filters to frontend content (format_filters) draait het tekstformaat van het veld via processed_text telkens wanneer het veld rendert voor een gebruiker die geen redacteur is. Het staat standaard uit; laat het uit tenzij je nodig hebt dat een filter op bezoekersoutput draait.

Wat nu?

  • Caching voor de cachecontexten, -tags en interne caches die de module gebruikt.
  • Editorassets voor de instelling van de assetbron.
  • Architectuur voor de code die deze libraries koppelt.