Продуктивність.

Вивчення DXPR BuilderКерування сайтомЗапуск у продакшні

Скільки коштує завантаження сторінки DXPR Builder, залежить від трьох речей, якими керує модуль: звідки береться JavaScript редактора, чи модуль підвантажує Bootstrap, і які бібліотеки елементів просить збережений HTML. Ця сторінка описує кожну з них так, як їх реалізує код, щоб ви могли вирішити, що змінити. Загальні поради Drupal (стиснення зображень, CDN, налаштування кешу сторінок) тут не повторюються; поведінку кешу полів конструктора див. у Кешуванні.

Джерело ресурсів редактора

Asset source у розділі Editor Assets DXPR Studio > DXPR Builder > General Settings встановлює editor_assets_source:

Значення Мітка Що завантажується
0 Cloud Шість скриптів редактора та css/dxpr_builder_backend.css з https://cdn2.dxpr.com/<version>/ з вашим ключем продукту як параметром запиту jwt.
1 Local (minified) dxpr_builder/*.min.js з теки модуля.
2 Local (unminified) dxpr_builder/*.js з теки модуля, плюс dxpr_builder/editor.dev.

Налаштування з’являється лише коли в теці модуля існує локальна збірка. Коли так, модуль використовує локальні файли, навіть якщо налаштовано Cloud, бо хмарні ресурси існують лише для релізів. Перевірте, яке джерело використовує сайт:

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 пише звичайний <img> з src, alt, title і вбудованими шириною та висотою. Він не додає loading="lazy" або srcset, тож зображення, стилізоване на 1024 пікселі, це те, що завантажує кожен в’юпорт. Фонові зображення розділів встановлюються через вкладку Style й дотримуються того самого правила.

Елемент Video відкладає свій iframe, доки відвідувач не натисне, коли встановлено зображення-заставку; встановлюйте заставку на вбудовані відео, щоб уникнути завантаження плеєра під час завантаження сторінки.

Фільтри текстового формату

Apply text format filters to frontend content (format_filters) запускає текстовий формат поля через processed_text щоразу, коли поле рендериться для користувача, який не є редактором. Типово він вимкнений; лишайте його вимкненим, якщо вам не потрібно, щоб фільтр запускався на виводі для відвідувачів.

Що далі?