--- url: 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/advanced/performance' title: 'Performance | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T10:58:06+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Ce que coûte le chargement d’une page DXPR Builder dépend de trois choses que le module contrôle : d’où vient le JavaScript de l’éditeur, si le module charge Bootstrap lui-même, et quelles bibliothèques d’éléments le HTML enregistré demande. Cette page décrit chacun de ces points comme le code les met en œuvre, pour que vous décidiez quoi changer. Les conseils Drupal génériques (compression d’images, CDN, réglages de cache de page) ne sont pas répétés ici ; voir Cache pour le comportement de cache des champs builder.' tags: - 'Naar productie' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T10:58:06+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: Performance description: 'Ce que coûte le chargement d’une page DXPR Builder dépend de trois choses que le module contrôle : d’où vient le JavaScript de l’éditeur, si le module charge Bootstrap lui-même, et quelles bibliothèques d’éléments le HTML enregistré demande. Cette page décrit chacun de ces points comme le code les met en œuvre, pour que vous décidiez quoi changer. Les conseils Drupal génériques (compression d’images, CDN, réglages de cache de page) ne sont pas répétés ici ; voir Cache pour le comportement de cache des champs builder.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T10:58:06+0000' dateModified: '2026-10-24T10:58:06+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/fr/hc/documentation/learn-dxpr-builder/advanced/performance' articleSection: 'Naar productie' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/advanced/performance' description: 'Ce que coûte le chargement d’une page DXPR Builder dépend de trois choses que le module contrôle : d’où vient le JavaScript de l’éditeur, si le module charge Bootstrap lui-même, et quelles bibliothèques d’éléments le HTML enregistré demande. Cette page décrit chacun de ces points comme le code les met en œuvre, pour que vous décidiez quoi changer. Les conseils Drupal génériques (compression d’images, CDN, réglages de cache de page) ne sont pas répétés ici ; voir Cache pour le comportement de cache des champs builder.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Accueil item: 'https://dxpr.com/fr' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: fr --- [Help Center](/fr/hc)/[Documentation](/fr/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Naar productie](/hc/documentation/learn-dxpr-builder/manage/production) # Performance. Learn DXPR BuilderManage the siteNaar productie ## In this guide Related guides - [Cache](/fr/hc/documentation/learn-dxpr-builder/advanced/caching) - [Faire tourner l’éditeur depuis un build local](/fr/hc/documentation/learn-dxpr-builder/customization/editor-assets) - [Architecture](/fr/hc/documentation/learn-dxpr-builder/development/architecture) Ce que coûte le chargement d’une page DXPR Builder dépend de trois choses que le module contrôle : d’où vient le JavaScript de l’éditeur, si le module charge Bootstrap lui-même, et quelles bibliothèques d’éléments le HTML enregistré demande. Cette page décrit chacun de ces points comme le code les met en œuvre, pour que vous décidiez quoi changer. Les conseils Drupal génériques (compression d’images, CDN, réglages de cache de page) ne sont pas répétés ici ; voir [Cache](/hc/documentation/learn-dxpr-builder/advanced/caching) pour le comportement de cache des champs builder. ## Source des ressources de l’éditeur **Asset source**, dans la section **Editor Assets** de **DXPR Studio** > **DXPR Builder** > **General Settings**, définit `editor_assets_source` : | Valeur | Libellé | Ce qui se charge | |---|---|---| | `0` | Cloud | Les six scripts de l’éditeur et `css/dxpr_builder_backend.css` depuis `https://cdn2.dxpr.com//` avec votre clé de produit comme paramètre de requête `jwt`. | | `1` | Local (minified) | `dxpr_builder/*.min.js` depuis le répertoire du module. | | `2` | Local (unminified) | `dxpr_builder/*.js` depuis le répertoire du module, plus `dxpr_builder/editor.dev`. | Le réglage n’apparaît que quand un build local existe dans le répertoire du module. Le cas échéant, le module utilise les fichiers locaux même si Cloud est configuré, car les ressources cloud n’existent que pour les versions publiées. Vérifiez la source qu’utilise un site : ```bash drush config:get dxpr_builder.settings editor_assets_source ``` Les six scripts de l’éditeur ne sont jamais agrégés : les fichiers cloud sont externes, et les entrées locales sont déclarées avec `preprocess: FALSE` et `defer`. Les bibliothèques auxiliaires de l’éditeur, comme `dxpr_builder/editor.core` avec Sortable et Draggabilly, sont agrégées comme toute autre bibliothèque, ainsi que les fichiers côté visiteur ci-dessous. ## Chargement embarqué de Bootstrap **Sideload Bootstrap files** (`bootstrap` dans `dxpr_builder.settings`) a deux valeurs. Avec **Bootstrap 5**, le formateur attache `dxpr_builder/bootstrap_5` (`bootstrap.min.css` et `bootstrap.bundle.min.js`, tous deux de poids `-10`) à chaque page qui rend un champ builder. Avec **None (theme provides Bootstrap)**, rien n’est attaché. 1. Vérifiez si le thème charge déjà Bootstrap 5. 2. Si oui, réglez l’option sur **None** pour que les visiteurs ne téléchargent qu’une copie. 3. Sinon, choisissez **Bootstrap 5** ; le CSS propre du thème se charge quand même après, grâce au poids négatif. ## Ce que chargent les visiteurs Pour un utilisateur sans accès à l’éditeur, le formateur attache : - `dxpr_builder/core` sur chaque page à champ builder : `dxpr_builder/css/dxpr_builder.css` (avec `fetchpriority: high`), `js/css-register-properties.js` et les design tokens publics. - `dxpr_builder/frontend.smooth_scroll` (`dxpr_smooth_scroll.min.js`) sur chaque page à champ builder, pour les liens d’ancre. - `dxpr_builder/editor.frontend` (`dxpr_frontend.min.js`, ou le fichier non minifié avec la source `2`) uniquement en mode dynamique. Le module passe un champ en mode dynamique quand son HTML enregistré référence `dxpr_frontend.js`, que l’éditeur écrit pour les pages contenant des éléments à JavaScript, comme les compteurs, carrousels, parallaxe et fonds vidéo. Une page de texte, d’images et de boutons reste statique et n’embarque aucun JavaScript du builder au-delà de `core` et du script de défilement fluide. - Les bibliothèques nommées dans l’attribut `data-dxpr-builder-libraries` de chaque élément : | Élément | Bibliothèque jointe | Fichiers | |---|---|---| | Countdown | `elements.counteverest` | CSS et JS Counteverest, `js/counteverest-migrate.js` | | Counter | `elements.countto` | `dxb-count-to.min.js` | | Icon, Circle counter | `elements.icon_helpers` plus la bibliothèque du jeu d’icônes | CSS de police d’icônes et fichier de police | | Social links | `elements.social_icons`, `elements.font_awesome_6_free`, `elements.icon_helpers` | CSS et police Font Awesome | | Progress bar with grow animation | `elements.bootstrap_progress_extension` | CSS et JS de l’extension | | 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 et le CSS de compatibilité v4 | En mode dynamique, `dxpr_frontend.js` ajoute les feuilles de style Glyphicon, Font Awesome et Bootstrap Icons dès son exécution, et ne charge les autres ressources que quand un élément de la page en a besoin : `dxb-parallax.min.js` pour les sections à effet parallaxe (ignoré sous 481 pixels de large quand **Disable on mobile** est coché sous **Background effects**), `vendor/managed/plyr/dist/plyr.min.js` et son CSS pour les sections à fond vidéo YouTube, et `css/carousel.css` pour les carrousels. L’éditeur décide à l’enregistrement si une page a besoin du mode dynamique ; si oui, il écrit un petit chargeur de script pour `dxpr_frontend.js` dans le HTML enregistré. Les blocs et vues placés dans la page sont rendus sur le serveur quand le champ est rendu ; leurs propres bibliothèques sont copiées sur le champ. ## Ce que chargent les contributeurs Pour un utilisateur avec la permission `edit with dxpr builder`, la page reçoit aussi : - `dxpr_builder/editor.builder` : `dxpr_templates`, `dxpr_global`, `dxpr_events`, `dxpr_param_types`, `dxpr_elements` et `dxpr_builder`, tous différés. - `dxpr_builder/editor.core` : Sortable, Draggabilly, Floating UI, le curseur DXB, lz-string, streaming-markdown, base64-js, les polices ET Line, Pixeden et Glyphicon, et `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`, et le `media/view` du cœur quand le module Media est activé. - CKEditor 5 (`vendor/managed/dxpr-cke5-superbuild/dist/ckeditor.js` et son fichier de traduction), ajouté par `dxpr_global.js` quand la modification de texte démarre. Les champs builder sont rendus avec `max-age: 0` pour chaque utilisateur connecté, contributeur ou non, donc le Dynamic Page Cache ne les garde pas et chaque chargement de page rend le champ de nouveau. Les visiteurs anonymes reçoivent le champ mis en cache. ## Images Le paramètre **Image** de l’élément Image laisse le contributeur choisir un style d’image. La liste contient chaque style d’image du site, avec **Optimize for fast loading** en premier quand il existe et **Original image (No resizing)** en second. Le style `optimize` est livré dans `config/optional/image.style.optimize.yml` : mise à l’échelle à 1024 pixels de large sans agrandissement, puis conversion en WebP. Choisissez-le pour les images de contenu sauf si la mise en page exige un fichier plus large. Les fichiers SVG échappent aux styles d’image. L’élément Image écrit un simple `` avec `src`, `alt`, `title` et des largeur et hauteur en ligne. Il n’ajoute ni `loading="lazy"` ni `srcset`, donc une image stylée à 1024 pixels est ce que chaque taille d’écran télécharge. Les images d’arrière-plan de section se règlent via l’onglet Style et suivent la même règle. L’élément Video diffère son iframe jusqu’au clic du visiteur quand une image d’affiche est définie ; définissez une affiche sur les vidéos embarquées pour éviter de charger le lecteur au chargement de la page. ## Filtres de format de texte **Apply text format filters to frontend content** (`format_filters`) fait passer le format de texte du champ par `processed_text` à chaque rendu du champ pour un utilisateur qui n’est pas contributeur. C’est désactivé par défaut ; laissez désactivé sauf si un filtre doit tourner sur la sortie visiteur. ## Et ensuite ? - [Cache](/hc/documentation/learn-dxpr-builder/advanced/caching) pour les contextes de cache, tags et caches internes qu’utilise le module. - [Ressources de l’éditeur](/hc/documentation/learn-dxpr-builder/customization/editor-assets) pour le réglage de source des ressources. - [Architecture](/hc/documentation/learn-dxpr-builder/development/architecture) pour le code qui attache ces bibliothèques.