--- url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/geavanceerd/prestaties' title: 'Prestaties | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T02:32:06+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Run it in production' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: Prestaties description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T02:32:06+0000' dateModified: '2026-10-24T17:19:22+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/nl/hc/documentatie/dxpr-builder-leren/geavanceerd/prestaties' articleSection: 'Naar productie' - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/geavanceerd/prestaties' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/nl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: nl --- [Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Builder leren](/nl/hc/documentation/learn-dxpr-builder) /[De site beheren](/nl/hc/documentation/learn-dxpr-builder/manage) /[Naar productie](/nl/hc/documentation/learn-dxpr-builder/manage/production) # Prestaties. DXPR Builder lerenDe site beherenNaar productie ## In deze gids Gerelateerde gidsen - [Caching](/nl/hc/documentatie/dxpr-builder-leren/geavanceerd/caching) - [Draai de editor vanuit een lokale build](/nl/hc/documentatie/dxpr-builder-leren/aanpassing/editor-assets) - [DXPR Builder themen](/nl/hc/documentatie/dxpr-builder-leren/ontwikkeling/architectuur) 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](/nl/hc/documentatie/dxpr-builder-leren/geavanceerd/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//` 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: ```bash 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 `` 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](/nl/hc/documentatie/dxpr-builder-leren/geavanceerd/caching) voor de cachecontexten, -tags en interne caches die de module gebruikt. - [Editorassets](/nl/hc/documentatie/dxpr-builder-leren/aanpassing/editor-assets) voor de instelling van de assetbron. - [Architectuur](/nl/hc/documentatie/dxpr-builder-leren/ontwikkeling/architectuur) voor de code die deze libraries koppelt.