Rendimiento.

Aprende DXPR BuilderGestionar el sitioPuesta en producción

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.

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

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 <img> 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é: los contextos de caché, etiquetas y cachés internas que usa el módulo.
  • Recursos del editor: el ajuste de origen de recursos.
  • Arquitectura: el código que adjunta estas bibliotecas.