الأداء.

Learn DXPR BuilderManage the siteNaar productie

تعتمد تكلفة تحميل صفحة DXPR Builder على ثلاثة أشياء تتحكم فيها الوحدة: مصدر JavaScript الخاصة بالمحرّر، وما إذا كانت الوحدة تحمّل Bootstrap جانبيًا، ومكتبات العناصر التي يطلبها HTML المحفوظ. تصف هذه الصفحة كلًا منها كما تنفّذه الشيفرة، لتقرّروا ما تغيّرونه. ولا تُكرَّر هنا نصائح Drupal العامة (ضغط الصور وشبكات CDN وإعدادات التخزين المؤقت للصفحات)؛ انظر التخزين المؤقت لسلوك التخزين المؤقت في حقول المنشئ.

مصدر أصول المحرّر

مصدر الأصول، في قسم أصول المحرّر ضمن DXPR Studio > DXPR Builder > الإعدادات العامة، يضبط القيمة editor_assets_source:

القيمة التسمية ما يُحمَّل
0 السحابة نصوص المحرّر الستة وcss/dxpr_builder_backend.css من https://cdn2.dxpr.com/<version>/ مع مفتاح منتجكم كمعامل استعلام jwt.
1 محلي (مصغّر) dxpr_builder/*.min.js من دليل الوحدة.
2 محلي (غير مصغّر) dxpr_builder/*.js من دليل الوحدة، إضافة إلى dxpr_builder/editor.dev.

لا يظهر الإعداد إلا عند وجود بناء محلي في دليل الوحدة. وعند وجوده، تستخدم الوحدة الملفات المحلية حتى لو كانت السحابة مضبوطة، لأن أصول السحابة موجودة للإصدارات فقط. تحققوا من المصدر الذي يستخدمه الموقع:

drush config:get dxpr_builder.settings editor_assets_source

لا تُجمَّع نصوص المحرّر الستة أبدًا: فملفات السحابة خارجية، والمدخلات المحلية مُعلنة مع preprocess: FALSE وdefer. وتُجمَّع مكتبات المساعدة الخاصة بالمحرّر، مثل dxpr_builder/editor.core مع Sortable وDraggabilly، كأي مكتبة أخرى، وكذلك الملفات الموجهة للزوار أدناه.

تحميل Bootstrap جانبيًا

تحميل ملفات Bootstrap جانبيًا (bootstrap في dxpr_builder.settings) يحمل قيمتين. فمع Bootstrap 5 يرفق المُنسِّق dxpr_builder/bootstrap_5 (bootstrap.min.css و bootstrap.bundle.min.js، كلاهما بالوزن -10) بكل صفحة تعرض حقل منشئ. ومع لا شيء (القالب يوفّر Bootstrap) لا يُرفَق شيء.

  1. تحققوا مما إذا كان القالب يحمّل Bootstrap 5 أصلًا.
  2. إذا كان يفعل، اضبطوا الخيار على لا شيء لينزّل الزوار نسخة واحدة.
  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 الخاصة بكل عنصر:
العنصر المكتبة المرفقة الملفات
العد التنازلي elements.counteverest CSS وJS الخاصة بـ Counteverest، وjs/counteverest-migrate.js
العداد elements.countto dxb-count-to.min.js
الأيقونة، عداد الدائرة elements.icon_helpers إضافة إلى مكتبة مجموعة الأيقونات CSS خط الأيقونات وملف الخط
روابط التواصل elements.social_icons وelements.font_awesome_6_free وelements.icon_helpers CSS الخاص بـ Font Awesome والخط
شريط التقدم مع حركة النمو 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 بكسل عندما يكون تعطيل على الجوال محددًا ضمن مؤثرات الخلفية)، و 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 ويعيد كل تحميل صفحة عرض الحقل مجددًا. ويحصل الزوار المجهولون على الحقل المخزَّن مؤقتًا.

الصور

تتيح معلمة الصورة في عنصر الصورة للمحرّر اختيار نمط صورة. تحمل القائمة كل نمط صورة على الموقع، مع تحسين للتحميل السريع أولًا عند وجوده والصورة الأصلية (دون تغيير حجم) ثانيًا. يُشحَن النمط optimize في config/optional/image.style.optimize.yml: تحجيم إلى عرض 1024 بكسل دون تكبير، ثم تحويل إلى WebP. اختاروه لصور المحتوى ما لم يتطلب التخطيط ملفًا أعرض. تتجاوز ملفات SVG أنماط الصور.

يكتب عنصر الصورة <img> عاديًا مع src وalt وtitle وأبعاد العرض والارتفاع المضمّنة. ولا يضيف loading="lazy" أو srcset، فالصورة المنمّطة بعرض 1024 بكسل هي ما ينزّله كل إطار عرض. وتُضبط صور خلفية المقاطع عبر تبويب النمط وتتبع القاعدة نفسها.

يؤجل عنصر الفيديو iframe الخاص به حتى ينقر الزائر عندما تُضبط صورة ملصق؛ فاضبطوا ملصقًا على مقاطع الفيديو المضمّنة لتجنب تحميل المشغّل عند تحميل الصفحة.

مرشّحات صيغة النص

تطبيق مرشّحات صيغة النص على محتوى الواجهة (format_filters) يشغّل صيغة نص الحقل عبر processed_text في كل مرة يُعرض فيها الحقل لمستخدم ليس محرّرًا. وهو مغلق افتراضيًا؛ اتركوه مغلقًا ما لم تحتاجوا إلى تشغيل مرشّح على مخرجات الزوار.

ما الخطوة التالية؟