Performance.

Impara DXPR BuilderGestisci il sitoUsalo in produzione

Quanto costa caricare una pagina di DXPR Builder dipende da tre cose controllate dal modulo: da dove viene il JavaScript dell’editor, se il modulo carica Bootstrap in modo indipendente e quali librerie di elementi richiede l’HTML salvato. Questa pagina descrive ciascuna come il codice le implementa, così puoi decidere cosa cambiare. I consigli generici su Drupal (compressione immagini, CDN, impostazioni della page cache) non sono ripetuti qui; vedi Caching per il comportamento di cache dei campi builder.

Sorgente degli asset dell’editor

Asset source, nella sezione Editor Assets di DXPR Studio > DXPR Builder > General Settings, imposta editor_assets_source:

Valore Etichetta Cosa carica
0 Cloud I sei script dell’editor e css/dxpr_builder_backend.css da https://cdn2.dxpr.com/<version>/ con la tua chiave prodotto come parametro di query jwt.
1 Local (minified) dxpr_builder/*.min.js dalla directory del modulo.
2 Local (unminified) dxpr_builder/*.js dalla directory del modulo, più dxpr_builder/editor.dev.

L’impostazione compare solo quando esiste una build locale nella directory del modulo. In tal caso il modulo usa i file locali anche se Cloud è configurato, perché gli asset cloud esistono solo per le release. Verifica quale sorgente usa un sito:

drush config:get dxpr_builder.settings editor_assets_source

I sei script dell’editor non sono mai aggregati: i file cloud sono esterni, e le voci locali sono dichiarate con preprocess: FALSE e defer. Le librerie ausiliarie dell’editor, come dxpr_builder/editor.core con Sortable e Draggabilly, sono aggregate come qualsiasi altra libreria, così come i file per i visitatori sotto.

Caricamento indipendente di Bootstrap

Sideload Bootstrap files (bootstrap in dxpr_builder.settings) ha due valori. Con Bootstrap 5 il formatter collega dxpr_builder/bootstrap_5 (bootstrap.min.css e bootstrap.bundle.min.js, entrambi con peso -10) a ogni pagina che renderizza un campo builder. Con None (theme provides Bootstrap) non è collegato niente.

  1. Verifica se il tema carica già Bootstrap 5.
  2. Se sì, imposta l’opzione a None così i visitatori scaricano una copia.
  3. Se no, imposta Bootstrap 5; il CSS proprio del tema si carica comunque dopo per via del peso negativo.

Cosa caricano i visitatori

Per un utente senza accesso editor, il formatter collega:

  • dxpr_builder/core su ogni pagina con un campo builder: dxpr_builder/css/dxpr_builder.css (con fetchpriority: high), js/css-register-properties.js e i design token pubblici.
  • dxpr_builder/frontend.smooth_scroll (dxpr_smooth_scroll.min.js) su ogni pagina con un campo builder, per i link di ancoraggio.
  • dxpr_builder/editor.frontend (dxpr_frontend.min.js, o il file non minificato con sorgente 2) solo in modalità dinamica. Il modulo passa un campo in modalità dinamica quando il suo HTML salvato fa riferimento a dxpr_frontend.js, che l’editor scrive per le pagine con elementi che richiedono JavaScript, come contatori, caroselli, parallasse e sfondi video. Una pagina di testo, immagini e pulsanti resta statica e non include JavaScript del builder oltre core e lo script smooth-scroll.
  • Le librerie indicate nell’attributo data-dxpr-builder-libraries di ogni elemento:
Elemento Libreria collegata File
Countdown elements.counteverest CSS e JS Counteverest, js/counteverest-migrate.js
Counter elements.countto dxb-count-to.min.js
Icon, Circle counter elements.icon_helpers più la libreria del set di icone CSS del font di icone e file del font
Social links elements.social_icons, elements.font_awesome_6_free, elements.icon_helpers CSS e font Font Awesome
Progress bar con animazione di crescita elements.bootstrap_progress_extension CSS e JS dell’estensione
Qualsiasi elemento con animazione di entrata elements.animate dxpr_animations.min.js, native-animations.css
Elementi salvati con classi Font Awesome 4 o 5 elements.font_awesome_6_free, elements.font_awesome_v4_shims Font Awesome e CSS shim v4

In modalità dinamica dxpr_frontend.js aggiunge i fogli di stile Glyphicon, Font Awesome e Bootstrap Icons appena gira, e carica altri asset solo quando un elemento nella pagina ne ha bisogno: dxb-parallax.min.js per le sezioni con effetto parallasse (saltato sotto i 481 pixel di larghezza quando Disable on mobile è spuntato in Background effects), vendor/managed/plyr/dist/plyr.min.js e il suo CSS per le sezioni con uno sfondo video YouTube, e css/carousel.css per i caroselli. L’editor decide al salvataggio se una pagina richiede la modalità dinamica; in tal caso scrive un piccolo caricatore di script per dxpr_frontend.js nell’HTML salvato.

Blocchi e viste messi nella pagina sono renderizzati sul server quando il campo è renderizzato; le loro librerie sono copiate sul campo.

Cosa caricano gli editor

Per un utente con il permesso edit with dxpr builder la pagina riceve anche:

  • dxpr_builder/editor.builder: dxpr_templates, dxpr_global, dxpr_events, dxpr_param_types, dxpr_elements e dxpr_builder, tutti differiti.
  • dxpr_builder/editor.core: Sortable, Draggabilly, Floating UI, lo slider DXB, lz-string, streaming-markdown, base64-js, i font ET Line, Pixeden e Glyphicon, e 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, e media/view del core quando il modulo Media è attivo.
  • CKEditor 5 (vendor/managed/dxpr-cke5-superbuild/dist/ckeditor.js e il suo file di traduzione), aggiunto da dxpr_global.js quando l’editing del testo si avvia.

I campi builder sono renderizzati con max-age: 0 per ogni utente collegato, editor o no, quindi Dynamic Page Cache non li conserva e ogni caricamento di pagina renderizza di nuovo il campo. I visitatori anonimi ricevono il campo in cache.

Immagini

Il parametro Image dell’elemento Image lascia scegliere all’editor uno stile di immagine. L’elenco contiene ogni stile di immagine del sito, con Optimize for fast loading primo quando esiste e Original image (No resizing) secondo. Lo stile optimize è fornito in config/optional/image.style.optimize.yml: scala a 1024 pixel di larghezza senza ingrandire, poi converte in WebP. Sceglilo per le immagini di contenuto a meno che il layout richieda un file più largo. I file SVG aggirano gli stili di immagine.

L’elemento Image scrive un semplice <img> con src, alt, title e larghezza e altezza inline. Non aggiunge loading="lazy" o srcset, quindi un’immagine stilizzata a 1024 pixel è ciò che ogni viewport scarica. Le immagini di sfondo delle sezioni sono impostate dalla scheda Style e seguono la stessa regola.

L’elemento Video rimanda il suo iframe finché il visitatore non fa clic quando è impostata un’immagine poster; imposta un poster sui video incorporati per evitare di caricare il player al caricamento della pagina.

Filtri del formato di testo

Apply text format filters to frontend content (format_filters) applica il formato di testo del campo tramite processed_text ogni volta che il campo è renderizzato per un utente non editor. È disattivato per impostazione predefinita; lascialo disattivato a meno che serva un filtro sull’output per i visitatori.

Prossimi passi

  • Caching per contesti di cache, tag e cache interne usati dal modulo.
  • Asset dell’editor per l’impostazione della sorgente degli asset.
  • Architettura per il codice che collega queste librerie.