--- url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/advanced/performance' title: 'Rendimiento | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:15:39+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Lo que cuesta cargar una página de DXPR Builder depende de tres cosas que controla el módulo: de dónde viene el JavaScript del editor, si el módulo carga Bootstrap por su cuenta y qué bibliotecas de elementos pide el HTML guardado. Esta página describe cada una tal como el código las implementa, para que decidas qué cambiar. Los consejos genéricos de Drupal (compresión de imágenes, CDN, ajustes de caché de página) no se repiten aquí; consulta Caché para el comportamiento de caché de los campos del constructor. 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-24T11:15:39+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: Rendimiento description: |- Lo que cuesta cargar una página de DXPR Builder depende de tres cosas que controla el módulo: de dónde viene el JavaScript del editor, si el módulo carga Bootstrap por su cuenta y qué bibliotecas de elementos pide el HTML guardado. Esta página describe cada una tal como el código las implementa, para que decidas qué cambiar. Los consejos genéricos de Drupal (compresión de imágenes, CDN, ajustes de caché de página) no se repiten aquí; consulta Caché para el comportamiento de caché de los campos del constructor. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:15:39+0000' dateModified: '2026-10-24T11:15:39+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/es/hc/documentation/learn-dxpr-builder/advanced/performance' articleSection: 'Naar productie' - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/advanced/performance' description: |- Lo que cuesta cargar una página de DXPR Builder depende de tres cosas que controla el módulo: de dónde viene el JavaScript del editor, si el módulo carga Bootstrap por su cuenta y qué bibliotecas de elementos pide el HTML guardado. Esta página describe cada una tal como el código las implementa, para que decidas qué cambiar. Los consejos genéricos de Drupal (compresión de imágenes, CDN, ajustes de caché de página) no se repiten aquí; consulta Caché para el comportamiento de caché de los campos del constructor. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Inicio item: 'https://dxpr.com/es' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: es --- [Help Center](/es/hc)/[Documentation](/es/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) # Rendimiento. Learn DXPR BuilderManage the siteNaar productie ## In this guide Related guides - [Caché](/es/hc/documentation/learn-dxpr-builder/advanced/caching) - [Ejecuta el editor desde una compilación local](/es/hc/documentation/learn-dxpr-builder/customization/editor-assets) - [Arquitectura](/es/hc/documentation/learn-dxpr-builder/development/architecture) Lo que cuesta cargar una página de DXPR Builder depende de tres cosas que controla el módulo: de dónde viene el JavaScript del editor, si el módulo carga Bootstrap por su cuenta y qué bibliotecas de elementos pide el HTML guardado. Esta página describe cada una tal como el código las implementa, para que decidas qué cambiar. Los consejos genéricos de Drupal (compresión de imágenes, CDN, ajustes de caché de página) no se repiten aquí; consulta [Caché](/hc/documentation/learn-dxpr-builder/advanced/caching) para el comportamiento de caché de los campos del constructor. ## Origen de recursos del editor **Asset source**, en la sección **Editor Assets** de **DXPR Studio** > **DXPR Builder** > **General Settings**, fija `editor_assets_source`: | Valor | Etiqueta | Qué se carga | |---|---|---| | `0` | Cloud | Los seis scripts del editor y `css/dxpr_builder_backend.css` desde `https://cdn2.dxpr.com//` con tu clave de producto como parámetro de consulta `jwt`. | | `1` | Local (minified) | `dxpr_builder/*.min.js` desde el directorio del módulo. | | `2` | Local (unminified) | `dxpr_builder/*.js` desde el directorio del módulo, más `dxpr_builder/editor.dev`. | El ajuste solo aparece cuando existe una compilación local en el directorio del módulo. Cuando existe, el módulo usa los archivos locales aunque Cloud esté configurado, porque los recursos en la nube solo existen para versiones publicadas. Comprueba qué origen usa un sitio: ```bash drush config:get dxpr_builder.settings editor_assets_source ``` Los seis scripts del editor nunca se agregan: los archivos en la nube son externos, y las entradas locales están declaradas con `preprocess: FALSE` y `defer`. Las bibliotecas de ayuda del editor, como `dxpr_builder/editor.core` con Sortable y Draggabilly, se agregan como cualquier otra biblioteca, igual que los archivos para visitas de abajo. ## Carga propia de Bootstrap **Sideload Bootstrap files** (`bootstrap` en `dxpr_builder.settings`) tiene dos valores. Con **Bootstrap 5** el formato adjunta `dxpr_builder/bootstrap_5` (`bootstrap.min.css` y `bootstrap.bundle.min.js`, ambos con peso `-10`) a cada página que renderiza un campo del constructor. Con **None (theme provides Bootstrap)**no se adjunta nada. 1. Comprueba si el tema ya carga Bootstrap 5. 2. Si lo hace, fija la opción en **None** para que las visitas descarguen una sola copia. 3. Si no lo hace, fija **Bootstrap 5**; el CSS propio del tema aún se carga después por el peso negativo. ## Lo que cargan las visitas Para una persona usuaria sin acceso de edición, el formato adjunta: - `dxpr_builder/core` en cada página con un campo del constructor: `dxpr_builder/css/dxpr_builder.css` (con `fetchpriority: high`), `js/css-register-properties.js` y los tokens públicos de diseño. - `dxpr_builder/frontend.smooth_scroll`(`dxpr_smooth_scroll.min.js`) en cada página con un campo del constructor, para enlaces de ancla. - `dxpr_builder/editor.frontend` (`dxpr_frontend.min.js`, o el archivo sin minificar con origen `2`) solo en modo dinámico. El módulo pasa un campo a modo dinámico cuando su HTML guardado referencia `dxpr_frontend.js`, que el editor escribe para páginas con elementos que necesitan JavaScript, como contadores, carruseles, paralaje y fondos de vídeo. Una página de texto, imágenes y botones queda estática y no envía más JavaScript del constructor que `core` y el script de desplazamiento suave. - Las bibliotecas nombradas en el atributo `data-dxpr-builder-libraries` de cada elemento: | Elemento | Biblioteca adjunta | Archivos | |---|---|---| | Countdown | `elements.counteverest` | CSS y JS de Counteverest, `js/counteverest-migrate.js` | | Counter | `elements.countto` | `dxb-count-to.min.js` | | Icon, Circle counter | `elements.icon_helpers` más la biblioteca del conjunto de iconos | CSS de fuente de iconos y archivo de fuente | | Social links | `elements.social_icons`, `elements.font_awesome_6_free`, `elements.icon_helpers` | CSS y fuente de Font Awesome | | Progress bar with grow animation | `elements.bootstrap_progress_extension` | CSS y JS de la extensión | | 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 y el CSS de compatibilidad v4 | En modo dinámico `dxpr_frontend.js` añade las hojas de estilo Glyphicon, Font Awesome y Bootstrap Icons en cuanto se ejecuta, y carga los demás recursos solo cuando un elemento de la página los necesita: `dxb-parallax.min.js` para secciones con efecto de paralaje (omitido por debajo de 481 píxeles de ancho cuando **Disable on mobile** está marcado en **Background effects**), `vendor/managed/plyr/dist/plyr.min.js` y su CSS para secciones con fondo de vídeo de YouTube, y `css/carousel.css` para carruseles. El editor decide al guardar si una página necesita el modo dinámico; si es así, escribe un pequeño cargador de scripts para `dxpr_frontend.js` en el HTML guardado. Los bloques y vistas puestos en la página se renderizan en el servidor cuando el campo se renderiza; sus propias bibliotecas se copian al campo. ## Lo que cargan las personas que editan Para una persona usuaria con el permiso `edit with dxpr builder` la página también recibe: - `dxpr_builder/editor.builder`: `dxpr_templates`, `dxpr_global`, `dxpr_events`, `dxpr_param_types`, `dxpr_elements` y `dxpr_builder`, todos diferidos. - `dxpr_builder/editor.core`: Sortable, Draggabilly, Floating UI, el deslizador DXB, lz-string, streaming-markdown, base64-js, las fuentes ET Line, Pixeden y Glyphicon, y `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` y `media/view` del núcleo cuando el módulo Media está habilitado. - CKEditor 5 (`vendor/managed/dxpr-cke5-superbuild/dist/ckeditor.js`y su archivo de traducción), añadido por `dxpr_global.js` cuando se inicia la edición de texto. Los campos del constructor se renderizan con `max-age: 0` para cada persona con sesión iniciada, edite o no, así que la caché dinámica de página no los guarda y cada carga de página renderiza el campo de nuevo. Las visitas anónimas reciben el campo en caché. ## Imágenes El parámetro **Image** del elemento Image deja que la persona que edita escoja un estilo de imagen. La lista contiene cada estilo de imagen del sitio, con **Optimize for fast loading** primero cuando existe y **Original image (No resizing)**segundo. El estilo `optimize` se incluye en `config/optional/image.style.optimize.yml`: escala a 1024 píxeles de ancho sin ampliar, y luego convierte a WebP. Escógelo para imágenes de contenido salvo que el diseño necesite un archivo más ancho. Los archivos SVG evitan los estilos de imagen. El elemento Image escribe un `` simple con `src`, `alt`, `title`y ancho y alto en línea. No añade `loading="lazy"` ni `srcset`, así que una imagen con estilo a 1024 píxeles es lo que descarga cada viewport. Las imágenes de fondo de sección se fijan en la pestaña Style y siguen la misma regla. El elemento Video difiere su iframe hasta que la visita hace clic cuando hay una imagen de póster fijada; fija un póster en vídeos incrustados para no cargar el reproductor al cargar la página. ## Filtros de formato de texto **Apply text format filters to frontend content**(`format_filters`) pasa el formato de texto del campo por `processed_text` cada vez que el campo se renderiza para una persona que no edita. Está desactivado por defecto; déjalo desactivado salvo que necesites que un filtro actúe en la salida para visitas. ## ¿Qué sigue? - [Caché](/hc/documentation/learn-dxpr-builder/advanced/caching): los contextos de caché, etiquetas y cachés internas que usa el módulo. - [Recursos del editor](/hc/documentation/learn-dxpr-builder/customization/editor-assets): el ajuste de origen de recursos. - [Arquitectura](/hc/documentation/learn-dxpr-builder/development/architecture): el código que adjunta estas bibliotecas.