كيف يقوم Elementor بتحديد الأولويات وتحسين أداء مواقع الويب

نشرت: 2021-04-26

دعنا نتحدث عن خارطة طريق منتج Elementor لعام 2021 ، وتحديداً تحسين الأداء. بينما نواصل تخطيط وتطوير ميزات جديدة رائعة يطلبها مجتمعنا ، فقد جعلنا مهمتنا هذا العام هي تحسين أداء مواقع مستخدمينا. في هذا المنشور ، أود أن أشارككم بعض الإجراءات التي اتخذناها بالفعل لتحقيق هذا الهدف ، والتحدث قليلاً عما سيحدث في العام المقبل.

كان أداء موقع الويب مشكلة لمنشئي الويب منذ فجر الإنترنت. لكوني منشئ ويب ، سأطرح دائمًا أسئلة مثل:

  • "هل موقعي بطيء جدًا؟ هل يتسبب ذلك في مغادرة المستخدمين أو الإضرار بتصنيفاتي في Google؟ "
  • "هل يجب أن أتخلى عن وظيفة معينة من أجل تحسين سرعة الموقع؟"
  • وبالطبع: "ما الذي لا يزال يسبب مشكلات في الأداء لدي؟ اعتقدت أنني غطيت جميع القواعد هنا! "

لذا ، نعم ، لطالما كان الحصول على أداء ممتاز من موقع ويب يمثل تحديًا لمنشئي الويب ، بغض النظر عن النظام الأساسي أو الأدوات التي استخدمناها. مع وجود العديد من العوامل ذات الصلة التي تؤثر على الأداء ، ليس من السهل دائمًا عزل المشكلة الحقيقية ، ناهيك عن إيجاد حل لها. هذا هو بالضبط سبب إنشاء دورة الفيديو هذه المكونة من خمسة أجزاء حول الأداء . في هذه السلسلة ، نتعمق في كل عامل مهم قد يؤثر على أداء موقعك ، سواء كان مرتبطًا بـ Elementor أم لا ، ونوجهك خلال كيفية تحسينه.

لجعل الأمور مثيرة للاهتمام حقًا ، أعلنت Google مؤخرًا أن أداء موقع الويب سيلعب الآن رسميًا دورًا في خوارزمية التصنيف الخاصة بها. هذا يضع قضية الأداء تحت دائرة الضوء ، مما يثير مخاوف مالكي مواقع الويب في جميع أنحاء العالم. لهذا السبب على مدار الأشهر الستة الماضية ، عملت فرق البحث والتطوير وتحسين محركات البحث لدينا بلا كلل للتأكد من أن مواقع Elementor تمر عبر هذا التحديث وتمريرها بألوان متطايرة.

عندما يتعلق الأمر بخوارزمية Google الغامضة ، فإننا نعلم أن الأمر سيستغرق أكثر بكثير من كلمتنا لتجعلك تشعر بالأمان. لذلك ، كخدمة لمستخدمينا ومجتمع منشئي الويب ، سنستضيف ندوة مجانية على الويب لأداء الويب مع كبار خبراء تحسين محركات البحث لمناقشة التغيير القادم. لن يغطي هذا التحديث نفسه فحسب ، بل سيوضح أيضًا كيفية تأثير هذا التغيير على موقع الويب الخاص بك وما يمكنك القيام به للاستعداد. تنعقد الندوة عبر الويب في 28 أبريل ، لذا تأكد من حفظ مقعدك .

ومع ذلك ، وبغض النظر عن جميع الدورات التدريبية والندوات عبر الإنترنت ، فإن هدفنا الأساسي هو التأكد من أن منتجنا لا يؤثر سلبًا على أداء موقعك. لقد كان هذا وسيظل أولوية قصوى بالنسبة لنا. لذلك دون مزيد من اللغط ، دعنا نتعمق في جهود تحسين أداء Elementor ، كما هو محدد في خارطة طريق منتج 2021.

قم بإجراء اختبار سرعة موقع الويب للتأكد من أن موقع الويب الخاص بك يعمل بشكل جيد

جدول المحتويات

  • خطتنا المكونة من خمسة مسارات لتحسين الأداء بشكل أكبر
  • المقطع الصوتي 1: "قم بتحميل ما تحتاجه فقط"
  • المسار 2: تقليل استخدام مكتبات JavaScript / CSS والاستفادة من دعم المتصفح الأصلي
  • المسار 3: تحسين وتحسين JavaScript و CSS الداخليين الحاليين
  • المسار 4: تحسين عمليات الخلفية والعرض
  • المسار 5: إخراج كود محسن وأقل حجما وأفضل
  • موارد العنصر المجانية على الأداء

خطتنا المكونة من خمسة مسارات لتحسين الأداء بشكل أكبر

elementor-performance-1

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

نحن فخورون أيضًا بالقول إن الأداء أصبح جزءًا لا يتجزأ من خط أنابيب التطوير والإفراج لدينا. يتم الآن التحقق من صحة كل إصدار من Elementor مقابل مجموعة متنوعة من مقاييس الأداء لضمان عدم وجود أي ميزة جديدة أو تعديل أو إصلاح له أي تأثير سلبي على مواقع الويب الحالية التي تم إنشاؤها باستخدام Elementor.

لنراجع الآن مساراتنا واحدًا تلو الآخر:

المقطع الصوتي 1: "قم بتحميل ما تحتاجه فقط"

نعمل على تحسين طريقة تحميل Elementor للأصول للتأكد من أنه لا يقوم إلا بتحميل ما يحتاج إليه في كل صفحة. في أحدث إصدارات كل من Elementor و Elementor Pro ، قدمنا ​​تجربة تحميل الأصول المحسّنة لتحسين أداء الواجهة الأمامية لموقع الويب ، وتسريع كل صفحة عن طريق تحميل الوظائف المطلوبة فقط. يمكنك معرفة المزيد عن ذلك هنا.

لقد أضفنا أيضًا خيارات تحميل كسول إلى عناصر واجهة مستخدم معينة وسنواصل القيام بذلك في المستقبل. على سبيل المثال ، تتضمن أداة الفيديو خيار التحميل البطيء ، مما يمنحك القدرة على استبدال مشغل الفيديو الكامل المضمن بصورة مصغرة ثابتة. ستعود الصورة بعد ذلك إلى الفيديو الكامل بمجرد تفاعل الزائر معها.

من خلال استخدام تقنيات التحميل البطيء هذه ، يمكنك تقليل حجم الصفحة وعدد طلبات HTTP بشكل كبير أثناء التحميل الأولي للصفحة ، مما يؤدي إلى تجربة أسرع بكثير للزائرين.

المسار 2: تقليل استخدام مكتبات JavaScript / CSS والاستفادة من دعم المتصفح الأصلي

منذ أن أطلقنا Elementor منذ ما يقرب من خمس سنوات ، تطورت متصفحات الويب كثيرًا. الآن ، يمكن تنفيذ بعض الميزات التي كانت تتطلب مكتبات خارجية قبل خمس سنوات باستخدام دعم المستعرض الأصلي. هذا يجعل التنفيذ أكثر كفاءة ويمكن ، في بعض الحالات ، تقليل وقت تنفيذ JavaScript بشكل كبير.

أحد الأمثلة على ذلك هو مكتبة Waypoints التي ، في بعض الحالات ، تم استبدالها بواجهة برمجة تطبيقات Intersection Observer الأصلية.

نهدف إلى تقليل استخدام هذه الأنواع من مكتبات CSS و JavaScript واستبدالها بدعم المستعرض الأصلي حيثما أمكن ذلك.

المسار 3: تحسين وتحسين JavaScript و CSS الداخليين الحاليين

نحن نخطط لمواصلة تحسين وتحسين JavaScript و CSS الداخليين الحاليين لـ Elementor.

تتضمن الأمثلة على ذلك القدرة على تكوين طريقة تحميل خطوط Google وخاصية عرض الخط المضافة إلى مكتبة Font Awesome. يجب أن تقلل هذه التحسينات من عمليات حظر العرض لهذه الملفات وتوفر تحسينًا إضافيًا لملفات CSS و JS الحالية.

المسار 4: تحسين عمليات الخلفية والعرض

في Elementor 3.0 ، قمنا بتحسين آلية التحميل والعرض الديناميكي لـ CSS. يُستخدم العنصر لفحص الصفحات بحثًا عن عناصر ذات قيم ديناميكية في كل تحميل صفحة. بدءًا من Elementor 3.0 ، عند إنشاء صفحة وزيارتها لأول مرة ، يقوم Elementor بإنشاء ذاكرة تخزين مؤقت لجميع العناصر ذات القيم الديناميكية. بعد ذلك ، بدلاً من فحص الصفحة بحثًا عن العناصر الديناميكية في كل مرة تتم فيها زيارة الصفحة ، يتم جلب القائمة من ذاكرة التخزين المؤقت وعرضها على الفور. يعمل هذا على تحسين أوقات العرض من جانب الخادم بشكل كبير ويؤدي إلى تحسينات ملحوظة. نحن نخطط لتنفيذ تحسينات تحليل إضافية على Elementor في المستقبل. يمكنك معرفة المزيد عنها في منشور المدونة هذا.

المسار 5: إخراج كود محسن وأقل حجما وأفضل

أخيرًا ، نخطط لمواصلة تحسين وتقليل إخراج الكود الذي يولده Elementor لتقليل حجم DOM.

لقد بدأنا بالفعل في إجراء هذه التحسينات في Elementor 3.0 ، حيث أزلنا ثلاثة عناصر مجمعة لإنشاء DOM أصغر وتبسيط إخراج الكود.

في Elementor 3.2 ، أزلنا عنصرين آخرين لتحقيق تخفيضات أكبر في حجم DOM. يتم التخطيط لمزيد من التخفيضات في المستقبل القريب.

كما ترى ، يمكن توقع ميزات وتحسينات وإصلاحات جديدة في عام 2021 وما بعده. يتم كل هذا في محاولة لمساعدتك على الاستمرار في إنشاء مواقع ويب مذهلة بأداء أفضل. إذا لم تكن قد قمت بالترقية إلى أحدث إصدار حتى الآن ، فتأكد من أنك تفعل ذلك للاستمتاع بهذه التحسينات وغيرها.

موارد العنصر المجانية على الأداء

elementor-performance-2

كما تعلم ، هناك العديد من العوامل غير المرتبطة بالعنصر والتي تؤثر على أداء موقع WordPress الخاص بك. يتضمن ذلك تحسين الصور واستضافة الويب وموفري الخوادم و CDN والمزيد. نظرًا لأننا نهدف إلى تمكين مستخدمينا من تنفيذ تحسين WordPress الكامل ، فقد أنشأنا بنك موارد ضخمًا من البرامج التعليمية المجانية والندوات عبر الإنترنت والمقالات لمساعدتك في معرفة المزيد عن الأداء.

  • لقد أنشأنا دورة فيديو حول الأداء - في هذه السلسلة المكونة من خمسة أجزاء ، نتناول كل العوامل المهمة التي قد تؤثر على أدائك وكيف يمكنك تحسينه.
  • في 28 أبريل ، سنستضيف ندوة عبر الإنترنت حول Core Web Vitals مع كبار خبراء تحسين محركات البحث (SEO) لمناقشة تغيير خوارزمية Google القادم وتأثيره على مواقع الويب الخاصة بك. احفظ مقعدك هنا.
  • لقد نشرنا أيضًا منشور مدونة تفصيليًا حول كيفية تسريع مواقع WordPress على الويب ، إلى جانب مقالات أخرى تركز على الأداء حول موضوعات مثل اختيار استضافة الويب ، والتخزين المؤقت للمكونات الإضافية ، وإجراء اختبارات السرعة ، واستخدام WP Rocket ، والمزيد.

سنستمر في إنشاء ندوات مجانية عبر الإنترنت ومنشورات مدونة ومقاطع فيديو لمعالجة الجوانب الأخرى لأداء WordPress من أجل الاستمرار في دعم مجتمع منشئي الويب.