Performance.

Apprendre DXPR BuilderGérer le sitePasser en production

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.

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

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 <img> 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 ?