--- url: 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/advanced/performance' title: 'Desempenho | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:45:06+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. 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:45:06+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: Desempenho description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:45:06+0000' dateModified: '2026-10-24T11:45:06+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/pt-pt/hc/documentation/learn-dxpr-builder/advanced/performance' articleSection: 'Naar productie' - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/advanced/performance' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Início item: 'https://dxpr.com/pt-pt' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pt-pt --- [Help Center](/pt-pt/node/75)/[Documentation](/pt-pt/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) # Desempenho. Learn DXPR BuilderManage the siteNaar productie ## In this guide Related guides - [Colocação em cache](/pt-pt/hc/documentation/learn-dxpr-builder/advanced/caching) - [Correr o editor a partir de uma compilação local](/pt-pt/hc/documentation/learn-dxpr-builder/customization/editor-assets) - [Arquitetura](/pt-pt/hc/documentation/learn-dxpr-builder/development/architecture) 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](/hc/documentation/learn-dxpr-builder/advanced/caching) 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//` 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: ```bash 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 `` 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? - [Colocação em cache](/hc/documentation/learn-dxpr-builder/advanced/caching) para os contextos de cache, etiquetas e caches internas que o módulo usa. - [Recursos do editor](/hc/documentation/learn-dxpr-builder/customization/editor-assets) para a definição de origem de recursos. - [Arquitetura](/hc/documentation/learn-dxpr-builder/development/architecture) para o código que anexa estas bibliotecas.