--- url: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%BE%D0%B4%D0%B0%D1%82%D0%BA%D0%BE%D0%B2%D0%BE/%D0%BF%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%96%D1%81%D1%82%D1%8C' title: 'Продуктивність | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T19:59:54+00:00' updated: '2026-10-24T20:15:47+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Скільки коштує завантаження сторінки DXPR Builder, залежить від трьох речей, якими керує модуль: звідки береться JavaScript редактора, чи модуль підвантажує Bootstrap, і які бібліотеки елементів просить збережений HTML. Ця сторінка описує кожну з них так, як їх реалізує код, щоб ви могли вирішити, що змінити. Загальні поради Drupal (стиснення зображень, CDN, налаштування кешу сторінок) тут не повторюються; поведінку кешу полів конструктора див. 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-24T20:15:47+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: Продуктивність description: |- Скільки коштує завантаження сторінки DXPR Builder, залежить від трьох речей, якими керує модуль: звідки береться JavaScript редактора, чи модуль підвантажує Bootstrap, і які бібліотеки елементів просить збережений HTML. Ця сторінка описує кожну з них так, як їх реалізує код, щоб ви могли вирішити, що змінити. Загальні поради Drupal (стиснення зображень, CDN, налаштування кешу сторінок) тут не повторюються; поведінку кешу полів конструктора див. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T19:59:54+0000' dateModified: '2026-10-24T20:15:47+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/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%BE%D0%B4%D0%B0%D1%82%D0%BA%D0%BE%D0%B2%D0%BE/%D0%BF%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%96%D1%81%D1%82%D1%8C' articleSection: 'Запуск у продакшні' - '@type': WebPage '@id': 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%BE%D0%B4%D0%B0%D1%82%D0%BA%D0%BE%D0%B2%D0%BE/%D0%BF%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%96%D1%81%D1%82%D1%8C' description: |- Скільки коштує завантаження сторінки DXPR Builder, залежить від трьох речей, якими керує модуль: звідки береться JavaScript редактора, чи модуль підвантажує Bootstrap, і які бібліотеки елементів просить збережений HTML. Ця сторінка описує кожну з них так, як їх реалізує код, щоб ви могли вирішити, що змінити. Загальні поради Drupal (стиснення зображень, CDN, налаштування кешу сторінок) тут не повторюються; поведінку кешу полів конструктора див. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/uk' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: uk --- [Help Center](/uk/hc)/[Documentation](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F) /[Вивчення DXPR Builder](/uk/hc/documentation/learn-dxpr-builder) /[Керування сайтом](/uk/hc/documentation/learn-dxpr-builder/manage) /[Запуск у продакшні](/uk/hc/documentation/learn-dxpr-builder/manage/production) # Продуктивність. Вивчення DXPR BuilderКерування сайтомЗапуск у продакшні ## In this guide Related guides - [Кешування](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%BE%D0%B4%D0%B0%D1%82%D0%BA%D0%BE%D0%B2%D0%BE/%D0%BA%D0%B5%D1%88%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F) - [Запускайте редактор з локальної збірки](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D1%80%D0%B5%D1%81%D1%83%D1%80%D1%81%D0%B8-%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80%D0%B0) - [Архітектура](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D1%80%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B0/%D0%B0%D1%80%D1%85%D1%96%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B0) Скільки коштує завантаження сторінки DXPR Builder, залежить від трьох речей, якими керує модуль: звідки береться JavaScript редактора, чи модуль підвантажує Bootstrap, і які бібліотеки елементів просить збережений HTML. Ця сторінка описує кожну з них так, як їх реалізує код, щоб ви могли вирішити, що змінити. Загальні поради Drupal (стиснення зображень, CDN, налаштування кешу сторінок) тут не повторюються; поведінку кешу полів конструктора див. у [Кешуванні](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%BE%D0%B4%D0%B0%D1%82%D0%BA%D0%BE%D0%B2%D0%BE/%D0%BA%D0%B5%D1%88%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F). ## Джерело ресурсів редактора **Asset source** у розділі **Editor Assets** **DXPR Studio** > **DXPR Builder** > **General Settings** встановлює `editor_assets_source`: | Значення | Мітка | Що завантажується | |---|---|---| | `0` | Cloud | Шість скриптів редактора та `css/dxpr_builder_backend.css` з `https://cdn2.dxpr.com//` з вашим ключем продукту як параметром запиту `jwt`. | | `1` | Local (minified) | `dxpr_builder/*.min.js` з теки модуля. | | `2` | Local (unminified) | `dxpr_builder/*.js` з теки модуля, плюс `dxpr_builder/editor.dev`. | Налаштування з’являється лише коли в теці модуля існує локальна збірка. Коли так, модуль використовує локальні файли, навіть якщо налаштовано Cloud, бо хмарні ресурси існують лише для релізів. Перевірте, яке джерело використовує сайт: ```bash drush config:get dxpr_builder.settings editor_assets_source ``` Шість скриптів редактора ніколи не агрегуються: хмарні файли зовнішні, а локальні записи заявлено з `preprocess: FALSE` і `defer`. Допоміжні бібліотеки редактора, як-от `dxpr_builder/editor.core` з Sortable і Draggabilly, агрегуються як будь-яка інша бібліотека, як і файли для відвідувачів нижче. ## Підвантаження Bootstrap **Sideload Bootstrap files** (`bootstrap` у `dxpr_builder.settings`) має два значення. З **Bootstrap 5** форматувальник приєднує `dxpr_builder/bootstrap_5` (`bootstrap.min.css` і `bootstrap.bundle.min.js`, обидва з вагою `-10`) до кожної сторінки, яка рендерить поле конструктора. З **None (theme provides Bootstrap)**нічого не приєднується. 1. Перевірте, чи тема вже завантажує Bootstrap 5. 2. Якщо так, установіть параметр у **None**, щоб відвідувачі завантажували одну копію. 3. Якщо ні, установіть **Bootstrap 5**; власний CSS теми досі завантажується після нього через негативну вагу. ## Що завантажують відвідувачі Для користувача без доступу редактора форматувальник приєднує: - `dxpr_builder/core` на кожній сторінці з полем конструктора: `dxpr_builder/css/dxpr_builder.css` (з `fetchpriority: high`), `js/css-register-properties.js` і публічні дизайн-токени. - `dxpr_builder/frontend.smooth_scroll`(`dxpr_smooth_scroll.min.js`) на кожній сторінці з полем конструктора, для посилань-якорів. - `dxpr_builder/editor.frontend` (`dxpr_frontend.min.js` або немініфікований файл із джерелом `2`) лише в динамічному режимі. Модуль перемикає поле в динамічний режим, коли його збережений HTML посилається на `dxpr_frontend.js`, який редактор пише для сторінок, що містять елементи, які потребують JavaScript, як-от лічильники, каруселі, паралакс і відеофони. Сторінка з тексту, зображень і кнопок лишається статичною й не постачає JavaScript конструктора понад `core` і скрипт плавного прокручування. - Бібліотеки, названі в атрибуті `data-dxpr-builder-libraries` кожного елемента: | Елемент | Приєднана бібліотека | Файли | |---|---|---| | Countdown | `elements.counteverest` | CSS і JS Counteverest, `js/counteverest-migrate.js` | | Counter | `elements.countto` | `dxb-count-to.min.js` | | Icon, Circle counter | `elements.icon_helpers` плюс бібліотека набору піктограм | CSS шрифту піктограм і файл шрифту | | Social links | `elements.social_icons`, `elements.font_awesome_6_free`, `elements.icon_helpers` | CSS і шрифт Font Awesome | | Progress bar з анімацією зростання | `elements.bootstrap_progress_extension` | CSS і JS розширення | | Будь-який елемент з анімацією появи | `elements.animate` | `dxpr_animations.min.js`, `native-animations.css` | | Елементи, збережені з класами Font Awesome 4 або 5 | `elements.font_awesome_6_free`, `elements.font_awesome_v4_shims` | Font Awesome і CSS шима v4 | У динамічному режимі `dxpr_frontend.js` додає таблиці стилів Glyphicon, Font Awesome і Bootstrap Icons одразу після запуску, а інші ресурси завантажує лише коли елемент на сторінці їх потребує: `dxb-parallax.min.js` для розділів з ефектом паралакса (пропускається нижче 481 пікселя завширшки, коли **Disable on mobile** позначено в **Background effects**), `vendor/managed/plyr/dist/plyr.min.js` і його CSS для розділів із фоном відео YouTube, і `css/carousel.css` для каруселей. Редактор вирішує під час збереження, чи сторінка потребує динамічного режиму; якщо так, він пише малий завантажувач скриптів для `dxpr_frontend.js` у збережений HTML. Блоки та подання, розміщені на сторінці, рендеряться на сервері, коли рендериться поле; їхні власні бібліотеки копіюються на поле. ## Що завантажують редактори Для користувача з дозволом `edit with dxpr builder` сторінка також отримує: - `dxpr_builder/editor.builder`: `dxpr_templates`, `dxpr_global`, `dxpr_events`, `dxpr_param_types`, `dxpr_elements` і `dxpr_builder`, усі відкладені. - `dxpr_builder/editor.core`: Sortable, Draggabilly, Floating UI, повзунок DXB, lz-string, streaming-markdown, base64-js, шрифти ET Line, Pixeden і Glyphicon, і `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`, і ядра `media/view`, коли модуль Media ввімкнено. - CKEditor 5 (`vendor/managed/dxpr-cke5-superbuild/dist/ckeditor.js`і його файл перекладу), доданий `dxpr_global.js`, коли ініціалізується редагування тексту. Поля конструктора рендеряться з `max-age: 0` для кожного залогіненого користувача, редактора чи ні, тож Dynamic Page Cache їх не тримає, і кожне завантаження сторінки знову рендерить поле. Анонімні відвідувачі отримують кешоване поле. ## Зображення Параметр **Image** елемента Image дозволяє редактору вибрати стиль зображення. Список містить кожен стиль зображення на сайті, з **Optimize for fast loading** першим, коли він існує, і **Original image (No resizing)**другим. Стиль `optimize` постачається в `config/optional/image.style.optimize.yml`: масштабування до 1024 пікселів завширшки без збільшення, потім конвертація у WebP. Вибирайте його для зображень вмісту, якщо макет не потребує ширшого файла. Файли SVG обходять стилі зображень. Елемент Image пише звичайний `` з `src`, `alt`, `title`і вбудованими шириною та висотою. Він не додає `loading="lazy"` або `srcset`, тож зображення, стилізоване на 1024 пікселі, це те, що завантажує кожен в’юпорт. Фонові зображення розділів встановлюються через вкладку Style й дотримуються того самого правила. Елемент Video відкладає свій iframe, доки відвідувач не натисне, коли встановлено зображення-заставку; встановлюйте заставку на вбудовані відео, щоб уникнути завантаження плеєра під час завантаження сторінки. ## Фільтри текстового формату **Apply text format filters to frontend content**(`format_filters`) запускає текстовий формат поля через `processed_text` щоразу, коли поле рендериться для користувача, який не є редактором. Типово він вимкнений; лишайте його вимкненим, якщо вам не потрібно, щоб фільтр запускався на виводі для відвідувачів. ## Що далі? - [Кешування](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%BE%D0%B4%D0%B0%D1%82%D0%BA%D0%BE%D0%B2%D0%BE/%D0%BA%D0%B5%D1%88%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F) для контекстів кешу, тегів і внутрішніх кешів, які використовує модуль. - [Ресурси редактора](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D1%80%D0%B5%D1%81%D1%83%D1%80%D1%81%D0%B8-%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80%D0%B0) для налаштування джерела ресурсів. - [Архітектура](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D1%80%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B0/%D0%B0%D1%80%D1%85%D1%96%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B0) для коду, який приєднує ці бібліотеки.