العنصر 3.0: كيف قمنا بتحسين الأداء
نشرت: 2020-09-25نحن نبحث دائمًا عن طرق جديدة لتحسين سرعة وأداء مواقع Elementor على الويب. في أحدث إصدار من Elementor - Elementor 3.0 ، ركزنا بشدة على تحسين أداء صفحاتك.
تؤثر العديد من العوامل على سرعة تحميل موقع الويب. عوامل مثل موفر الاستضافة والموضوع وعدد المكونات الإضافية والتخزين المؤقت ورمز HTML وغيرها.
بينما لا يمكننا التحكم في العوامل الخارجية ، يمكننا (ونفعل) العمل من أجل التأكد من تحسين منتجنا بأفضل شكل ممكن. ومع ذلك ، تتطلب بعض التغييرات الوقت المناسب ليتم تنفيذها.
بعض التحسينات - مثل عرض CSS ، لديها احتمالية منخفضة للتسبب في مشكلات بينما التغييرات الأخرى - مثل إزالة عناصر DOM ، لديها احتمالية عالية لكسر بعض مواقع الويب ، والتسبب في مشاكل.
يُعد إدخال التغييرات العاجلة أمرًا يتم إجراؤه تقليديًا فقط في الإصدارات الرئيسية ، لذلك انتهزنا هذه الفرصة لتقديم تلك التغييرات والتحسينات ومن خلال تقليل عناصر DOM وتحسين عرض CSS ، فإننا نقترب خطوة واحدة نحو أداء أفضل.
لتحسين السرعة بشكل أفضل ، جرب استخدام Elementor مع WP Rocket
تحسين أداء تقديم CSS في Elementor 3.0
لدى Elementor طريقتان لتقديم CSS لموقع الويب:
1. طباعته في علامة <style> في DOM.
2. كتابته في ملف CSS سيتم تحميله بالصفحة
CSS المكتوب على الملفات ، على سبيل المثال ، ثابت تمامًا. تتم طباعته مرة واحدة في ملف ، ويتم تحديث هذا الملف فقط عند إجراء تغيير على محتوى الصفحة. لكن ماذا عن المحتوى الديناميكي؟
تتضمن بعض المحتويات الديناميكية CSS الخاصة بها ، مثل الألوان والصور (عند استخدامها كقيم لصورة الخلفية). يتم فصل المحتوى الديناميكي ، مثل الحقول المخصصة ، عن محتوى الصفحة ويمكن تغييره خارج تحرير المنشور أو الصفحة في Elementor Editor.
إذن ماذا يحدث عندما تتضمن القيم الديناميكية CSS التي يجب طباعتها في كل مرة يتم فيها تحميل الصفحة؟
حتى Elementor 3.0 ، كلما تم تحميل صفحة ، قامت وحدة Elementor Dynamic Tags بمسح الصفحة بأكملها بحثًا عن أي عناصر تتضمن محتوى ديناميكيًا.
إذا تم العثور على محتوى ديناميكي ، فإن الوحدة تجلب القيم الديناميكية لهذا العنصر ، وكتبت CSS ذات الصلة في علامة <style> ، وحقنتها في DOM.
هذه ، كما هو موضح في هذا المنشور ، عملية مكلفة وتكلف وقت تحميل ثمين.
في Elementor 3.0 ، قمنا بتغيير الطريقة التي ندير بها عملية عرض CSS الديناميكية. في المرة الأولى التي يتم فيها تحميل الصفحة ، عندما يتم عرض CSS الثابت للصفحة ، نقوم بإنشاء ذاكرة تخزين مؤقت تتضمن قائمة بعناصر الصفحة التي تحتوي على قيم CSS ديناميكية.
بعد ذلك ، عندما تتم زيارة هذه الصفحة ، نحضر قائمة العناصر الديناميكية من ذاكرة التخزين المؤقت ونعرضها على الفور. بدلاً من الاضطرار إلى تكرار جميع عناصر الصفحة في كل مرة يتم فيها تحميل الصفحة - نحصل على هذه العناصر من قائمة العناصر الديناميكية المتوفرة بالفعل. هذا يوفر الكثير من وقت التشغيل ويجعل تحميل الصفحة أسرع بشكل ملحوظ.
فيما يلي بعض النتائج من الاختبارات التي أجريناها على Blackfire لفحص الفرق قبل التحسين وبعده:
صفحة لا تحتوي على محتوى ديناميكي على الإطلاق:
الصفحة ذات العناصر الديناميكية:
