Wydajność.

Poznaj DXPR BuilderZarządzaj witrynąWdrożenie produkcyjne

To, ile kosztuje wczytanie strony kreatora DXPR, zależy od trzech rzeczy kontrolowanych przez moduł: skąd pochodzi JavaScript edytora, czy moduł doładowuje Bootstrapa i o które biblioteki elementów prosi zapisany HTML. Ta strona opisuje każde z nich tak, jak implementuje je kod, abyś mógł zdecydować, co zmienić. Ogólne porady drupalowe (kompresja obrazów, CDN, ustawienia pamięci podręcznej stron) nie są tu powtarzane; zobacz buforowanie, aby poznać zachowanie pamięci podręcznej pól kreatora.

Źródło plików edytora

Asset source w sekcji Editor Assets w DXPR Studio > DXPR Builder > General Settings ustawia editor_assets_source:

Wartość Etykieta Co się ładuje
0 Cloud Sześć skryptów edytora i css/dxpr_builder_backend.css z https://cdn2.dxpr.com/<version>/ z twoim kluczem produktu jako parametrem zapytania jwt.
1 Local (minified) dxpr_builder/*.min.js z katalogu modułu.
2 Local (unminified) dxpr_builder/*.js z katalogu modułu oraz dxpr_builder/editor.dev.

To ustawienie pojawia się tylko, gdy w katalogu modułu istnieje lokalna kompilacja. Gdy istnieje, moduł używa plików lokalnych, nawet jeśli skonfigurowano Cloud, ponieważ pliki w chmurze istnieją tylko dla wydań. Sprawdź, którego źródła używa witryna:

drush config:get dxpr_builder.settings editor_assets_source

Sześć skryptów edytora nigdy nie jest agregowanych: pliki w chmurze są zewnętrzne, a wpisy lokalne zadeklarowano z preprocess: FALSE i defer. Biblioteki pomocnicze edytora, takie jak dxpr_builder/editor.core z Sortable i Draggabilly, agregowane są jak każda inna biblioteka, podobnie jak pliki dla odwiedzających poniżej.

Doładowywanie Bootstrapa

Sideload Bootstrap files (bootstrap w dxpr_builder.settings) ma dwie wartości. Przy Bootstrap 5 formater dołącza dxpr_builder/bootstrap_5 (bootstrap.min.css i bootstrap.bundle.min.js, oba o wadze -10) do każdej strony renderującej pole kreatora. Przy None (theme provides Bootstrap) nic nie jest dołączane.

  1. Sprawdź, czy motyw już ładuje Bootstrap 5.
  2. Jeśli tak, ustaw opcję na None, aby odwiedzający pobierali jedną kopię.
  3. Jeśli nie, ustaw Bootstrap 5; własny CSS motywu nadal ładuje się później dzięki ujemnej wadze.

Co ładują odwiedzający

Dla użytkownika bez dostępu do edytora formater dołącza:

  • dxpr_builder/core na każdej stronie z polem kreatora: dxpr_builder/css/dxpr_builder.css (z fetchpriority: high), js/css-register-properties.js i publiczne tokeny projektu.
  • dxpr_builder/frontend.smooth_scroll (dxpr_smooth_scroll.min.js) na każdej stronie z polem kreatora, do linków kotwicznych.
  • dxpr_builder/editor.frontend (dxpr_frontend.min.js albo plik niezminifikowany przy źródle 2) tylko w trybie dynamicznym. Moduł przełącza pole w tryb dynamiczny, gdy jego zapisany HTML odwołuje się do dxpr_frontend.js, który edytor zapisuje dla stron zawierających elementy potrzebujące JavaScript, takie jak liczniki, karuzele, parallax i tła wideo. Strona z tekstem, obrazami i przyciskami pozostaje statyczna i nie wysyła żadnego JavaScript kreatora poza core i skryptem płynnego przewijania.
  • Biblioteki nazwane w atrybucie data-dxpr-builder-libraries każdego elementu:
Element Dołączona biblioteka Pliki
Countdown elements.counteverest CSS i JS Counteverest, js/counteverest-migrate.js
Counter elements.countto dxb-count-to.min.js
Icon, Circle counter elements.icon_helpers oraz biblioteka zestawu ikon CSS fontu ikon i plik fontu
Social links elements.social_icons, elements.font_awesome_6_free, elements.icon_helpers CSS Font Awesome i font
Progress bar with grow animation elements.bootstrap_progress_extension CSS i JS rozszerzenia
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 i CSS podkładki v4

W trybie dynamicznym dxpr_frontend.js dodaje arkusze stylów Glyphicon, Font Awesome i Bootstrap Icons, gdy tylko się uruchomi, a pozostałe pliki ładuje tylko, gdy element na stronie ich potrzebuje: dxb-parallax.min.js dla sekcji z efektem parallax (pomijany poniżej 481 pikseli szerokości, gdy Disable on mobile jest zaznaczone w Background effects), vendor/managed/plyr/dist/plyr.min.js i jego CSS dla sekcji z tłem wideo YouTube oraz css/carousel.css dla karuzel. Edytor decyduje przy zapisie, czy strona potrzebuje trybu dynamicznego; jeśli tak, zapisuje do zapisanego HTML mały ładowacz skryptów dla dxpr_frontend.js.

Bloki i widoki umieszczone na stronie renderują się na serwerze, gdy pole się renderuje; ich własne biblioteki kopiowane są na pole.

Co ładują redaktorzy

Dla użytkownika z uprawnieniem edit with dxpr builder strona dostaje też:

  • dxpr_builder/editor.builder: dxpr_templates, dxpr_global, dxpr_events, dxpr_param_types, dxpr_elements i dxpr_builder, wszystkie odroczone.
  • dxpr_builder/editor.core: Sortable, Draggabilly, Floating UI, suwak DXB, lz-string, streaming-markdown, base64-js, fonty ET Line, Pixeden i Glyphicon oraz 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 oraz podstawowe media/view, gdy włączony jest moduł Media.
  • CKEditor 5 (vendor/managed/dxpr-cke5-superbuild/dist/ckeditor.js i jego plik tłumaczenia), dodawany przez dxpr_global.js, gdy inicjuje się edycja tekstu.

Pola kreatora renderowane są z max-age: 0 dla każdego zalogowanego użytkownika, redaktora czy nie, więc Dynamic Page Cache ich nie trzyma i każde wczytanie strony renderuje pole od nowa. Anonimowi odwiedzający dostają zbuforowane pole.

Obrazy

Parametr Image elementu Image pozwala redaktorowi wybrać styl obrazu. Lista zawiera każdy styl obrazu w witrynie, z Optimize for fast loading na początku, gdy istnieje, i Original image (No resizing) jako drugim. Styl optimize dostarczany jest w config/optional/image.style.optimize.yml: skaluje do 1024 pikseli szerokości bez powiększania, potem konwertuje do WebP. Wybieraj go do obrazów treści, chyba że układ wymaga szerszego pliku. Pliki SVG omijają style obrazów.

Element Image zapisuje zwykły <img> z src, alt, title i osadzonymi szerokością i wysokością. Nie dodaje loading="lazy" ani srcset, więc obraz wystylizowany na 1024 piksele pobiera każdy widok. Obrazy tła sekcji ustawiane są przez kartę Style i podlegają tej samej zasadzie.

Element Video odkłada swój iframe do kliknięcia przez odwiedzającego, gdy ustawiony jest obraz zapowiedzi; ustawiaj zapowiedź we wbudowanych filmach, aby nie ładować odtwarzacza przy wczytaniu strony.

Filtry formatu tekstu

Apply text format filters to frontend content (format_filters) przepuszcza format tekstu pola przez processed_text przy każdym renderowaniu pola dla użytkownika niebędącego redaktorem. Domyślnie jest wyłączone; zostaw wyłączone, chyba że potrzebujesz, aby filtr działał na wynik dla odwiedzających.

Co dalej?

  • Buforowanie: konteksty pamięci podręcznej, tagi i wewnętrzne pamięci podręczne używane przez moduł.
  • Pliki edytora: ustawienie źródła plików.
  • Architektura: kod dołączający te biblioteki.