--- url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/avanzato/performance' title: 'Performance | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T03:03:11+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. 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: Performance description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T03:03:11+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/it/hc/documentazione/impara-dxpr-builder/avanzato/performance' articleSection: 'Usalo in produzione' - '@type': WebPage '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/avanzato/performance' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/it' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: it --- [Centro assistenza](/it/hc)/[Documentazione](/it/hc/documentazione) /[Impara DXPR Builder](/it/hc/documentation/learn-dxpr-builder) /[Gestisci il sito](/it/hc/documentation/learn-dxpr-builder/manage) /[Usalo in produzione](/it/hc/documentation/learn-dxpr-builder/manage/production) # Performance. Impara DXPR BuilderGestisci il sitoUsalo in produzione ## In questa guida Guide correlate - [Caching](/it/hc/documentazione/impara-dxpr-builder/avanzato/caching) - [Esegui l’editor da una build locale](/it/hc/documentazione/impara-dxpr-builder/personalizzazione/asset-editor) - [Architettura](/it/hc/documentazione/impara-dxpr-builder/sviluppo/architettura) 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](/it/hc/documentazione/impara-dxpr-builder/avanzato/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//` 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: ```bash 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 `` 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](/it/hc/documentazione/impara-dxpr-builder/avanzato/caching) per contesti di cache, tag e cache interne usati dal modulo. - [Asset dell’editor](/it/hc/documentation/learn-dxpr-builder/customization/editor-assets) per l’impostazione della sorgente degli asset. - [Architettura](/it/hc/documentazione/impara-dxpr-builder/sviluppo/architettura) per il codice che collega queste librerie.