Desempenho.

Aprender DXPR BuilderGerir o siteOperar em produção

O custo de carregamento de uma página do DXPR Builder depende de três coisas que o módulo controla: de onde vem o JavaScript do editor, se o módulo carrega o Bootstrap por conta própria, e que bibliotecas de elementos o HTML guardado pede. Esta página descreve cada uma como o código as implementa, para decidir o que mudar. Conselho genérico de Drupal (compressão de imagens, CDN, definições de cache de página) não se repete aqui; consulte Colocação em cache para o comportamento de cache dos campos do construtor.

Origem dos recursos do editor

Asset source, na secção Editor Assets de DXPR Studio > DXPR Builder > General Settings, define editor_assets_source:

Value Label What loads
0 Cloud Os seis scripts do editor e css/dxpr_builder_backend.css de https://cdn2.dxpr.com/<version>/ com a chave de produto como parâmetro de consulta jwt.
1 Local (minified) dxpr_builder/*.min.js do diretório do módulo.
2 Local (unminified) dxpr_builder/*.js do diretório do módulo, mais dxpr_builder/editor.dev.

A definição só aparece quando existe uma compilação local no diretório do módulo. Quando existe, o módulo usa os ficheiros locais mesmo se Cloud estiver configurado, porque os recursos de nuvem existem apenas para lançamentos. Verifique que origem um site usa:

drush config:get dxpr_builder.settings editor_assets_source

Os seis scripts do editor nunca são agregados: os ficheiros de nuvem são externos, e as entradas locais declaram-se com preprocess: FALSE e defer. As bibliotecas auxiliares do editor, como dxpr_builder/editor.core com Sortable e Draggabilly, são agregadas como qualquer outra biblioteca, tal como os ficheiros para visitantes abaixo.

Carregamento do Bootstrap pelo módulo

Sideload Bootstrap files (bootstrap em dxpr_builder.settings) tem dois valores. Com Bootstrap 5, o formatador anexa dxpr_builder/bootstrap_5 (bootstrap.min.css e bootstrap.bundle.min.js, ambos com peso -10) a cada página que apresenta um campo do construtor. Com None (theme provides Bootstrap) nada é anexado.

  1. Verifique se o tema já carrega o Bootstrap 5.
  2. Se sim, defina a opção como None para os visitantes descarregarem uma cópia.
  3. Se não, defina Bootstrap 5; o CSS próprio do tema carrega depois na mesma por causa do peso negativo.

O que os visitantes carregam

Para um utilizador sem acesso de editor, o formatador anexa:

  • dxpr_builder/core em cada página com um campo do construtor: dxpr_builder/css/dxpr_builder.css (com fetchpriority: high), js/css-register-properties.js e os tokens públicos de design.
  • dxpr_builder/frontend.smooth_scroll (dxpr_smooth_scroll.min.js) em cada página com um campo do construtor, para ligações de âncora.
  • dxpr_builder/editor.frontend (dxpr_frontend.min.js, ou o ficheiro não minificado com origem 2) apenas no modo dinâmico. O módulo muda um campo para o modo dinâmico quando o HTML guardado refere dxpr_frontend.js, que o editor escreve para páginas com elementos que precisam de JavaScript, como contadores, carrosséis, paralaxe e fundos de vídeo. Uma página de texto, imagens e botões fica estática e não traz JavaScript do construtor além de core e do script de deslocamento suave.
  • As bibliotecas indicadas no atributo data-dxpr-builder-libraries de cada elemento:
Element Library attached Files
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 mais a biblioteca do conjunto de ícones CSS do tipo de letra de ícones e ficheiro do tipo
Social links elements.social_icons, elements.font_awesome_6_free, elements.icon_helpers CSS Font Awesome e tipo de letra
Progress bar with grow animation elements.bootstrap_progress_extension CSS e JS da extensão
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 e o CSS de compatibilidade v4

No modo dinâmico, dxpr_frontend.js adiciona as folhas de estilo Glyphicon, Font Awesome e Bootstrap Icons assim que corre, e carrega outros recursos apenas quando um elemento na página precisa deles: dxb-parallax.min.js para secções com efeito de paralaxe (omitido abaixo de 481 píxeis de largura quando Disable on mobile está marcado em Background effects), vendor/managed/plyr/dist/plyr.min.js e o CSS para secções com fundo de vídeo do YouTube, e css/carousel.css para carrosséis. O editor decide ao guardar se uma página precisa do modo dinâmico; nesse caso, escreve um pequeno carregador de script para dxpr_frontend.js no HTML guardado.

Blocos e vistas colocados na página apresentam-se no servidor quando o campo se apresenta; as bibliotecas próprias copiam-se para o campo.

O que os editores carregam

Para um utilizador com a permissão edit with dxpr builder, a página também recebe:

  • dxpr_builder/editor.builder: dxpr_templates, dxpr_global, dxpr_events, dxpr_param_types, dxpr_elements e dxpr_builder, todos diferidos.
  • dxpr_builder/editor.core: Sortable, Draggabilly, Floating UI, o slider DXB, lz-string, streaming-markdown, base64-js, os tipos 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 do núcleo quando o módulo Media está ativo.
  • CKEditor 5 (vendor/managed/dxpr-cke5-superbuild/dist/ckeditor.js e o ficheiro de tradução), adicionado por dxpr_global.js quando a edição de texto começa.

Os campos do construtor apresentam-se com max-age: 0 para cada utilizador com sessão iniciada, editor ou não, por isso a cache dinâmica de página não os guarda e cada carregamento de página apresenta o campo outra vez. Visitantes anónimos recebem o campo em cache.

Imagens

O parâmetro Image do elemento Image deixa o editor escolher um estilo de imagem. A lista tem cada estilo de imagem do site, com Optimize for fast loading primeiro quando existe e Original image (No resizing) em segundo. O estilo optimize vem em config/optional/image.style.optimize.yml: reduz para 1024 píxeis de largura sem ampliar, depois converte para WebP. Escolha-o para imagens de conteúdo salvo se o esquema precisa de um ficheiro mais largo. Ficheiros SVG passam ao lado dos estilos de imagem.

O elemento Image escreve um <img> simples com src, alt, title e largura e altura em linha. Não adiciona loading="lazy" nem srcset, por isso uma imagem com estilo de 1024 píxeis é o que cada viewport descarrega. Imagens de fundo de secção definem-se no separador Style e seguem a mesma regra.

O elemento Video difere o iframe até o visitante clicar quando uma imagem de cartaz está definida; defina um cartaz em vídeos incorporados para evitar carregar o leitor no carregamento da página.

Filtros de formato de texto

Apply text format filters to frontend content (format_filters) executa o formato de texto do campo através de processed_text sempre que o campo se apresenta para um utilizador que não é editor. Vem desligado por predefinição; deixe-o desligado salvo se precisa de um filtro a correr na saída para visitantes.

O que se segue?