6 نصائح لتحسين موقع Elementor الخاص بك

ربما تكون سرعة تحميل موقع الويب ونوع التجربة التي يقدمها ، بغض النظر عن الجهاز المستخدم للوصول إليه ، أول شيئين يلاحظهما الزائر عند وصوله إليه لأول مرة.

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

إذا كنت على هذا الموقع ، فمن المحتمل أنك هنا للبحث عن بعض المعلومات حول WordPress. وإذا كنت قد سمعت عن WordPress ، فيجب أن تكون قد صادفت Elementor - منشئ مواقع السحب والإفلات الرائد في النظام البيئي.

نظرة شاملة لمنشئ موقع WordPress

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

يوضح لك Elementor نتيجة التصميم الخاص بك بينما تقوم بتجميع العناصر المختلفة لتصميم الويب ، مما يجعل العملية أسرع بالنسبة لك. تقترن الأداة بسهولة مع المكونات الإضافية الأخرى ، وتعمل بشكل ملائم على أي سمة WordPress.

يقدم Elementor قوائم ملاحة وقوائم سهلة الاستخدام يمكن استخدامها حتى بدون معرفة ترميز HTML أو CSS. يأتي أحدث إصدار ، أي Elementor 3.4 ، مع بعض الميزات والتحسينات المتمحورة حول UX.

يوفر للمستخدمين القدرة على التصميم بلا حدود مع خيارات التصميم الجديدة. يمكن للمرء استكشاف عنصر واجهة مستخدم Menu Cart ، و AJAX Load More ، وقوائم تشغيل الفيديو ، وعلامات WooCommerce الديناميكية. تساعد هذه الوظائف في التسويق والوظائف الأخرى على مواقع الويب.

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

1. حدد طريقة تحميل الخط لزيادة سرعة الصفحة

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

تتيح لك شاشة إعدادات Elementor اختيار التغييرات في طريقة تحميل خطوط Google. في الإصدار الأخير ، يمكنك الوصول إلى خمسة خيارات للاختيار من بينها ، وهي:

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

2. حل تعارضات تكوين الخادم على موقعك

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

انقر فوق عنصر> إعدادات> خيارات متقدمة لتمكين "تبديل طريقة محمل محرر الواجهة الأمامية" ضمن "محرر محمل" لحل تعارضات تكوين الخادم (انظر لقطة الشاشة أعلاه).

من خلال القيام بذلك ، يمكنك تمكين طريقة أداة تحميل محرر Elementor ، والتي تكون مفيدة لحل أنواع مختلفة من مشكلات خادم الاستضافة.

3. تحسين تخطيط الموقع الخاص بك

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

في الواقع ، يتيح لك التحديث الأخير لـ Theme Builder الحصول على نظرة عامة مرئية على الموقع بأكمله. يمكنك إدارة النموذج الذي ينطبق على مناطق الموقع بسهولة وتعديل المحتويات وترقيتها وتعديلها عند الحاجة.

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

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

بالإضافة إلى ذلك ، يمكّنك Elementor 3.4 (والإصدارات الأحدث) من ضبط تخطيط التصميم وفقًا لسبعة أجهزة ، بما في ذلك سطح المكتب الأصلي والجوال والكمبيوتر اللوحي.

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

4. ضغط صور الموقع دون المساس بالجودة

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

نظرًا لأن سمات WordPress واتجاهات التصميم تستمر في التطور نحو المزيد من العناصر المرئية ، فمن الضروري التأكد من أن مقاطع الفيديو والصور وملفات GIF التي تقوم بتضمينها على موقعك لا تبطئها.

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

تحميل Lazy هو ميزة WordPress Core منذ WordPress 5.5 ، لكنه لا يعمل مع Elementor لأن المكون الإضافي يجمع صورة الخلفية CSS في ورقة أنماط منفصلة. ولكن لا داعي للقلق ، فنحن نتحدث عن WordPress لذلك هناك مكون إضافي لكل شيء! فيما يلي بعض الخيارات الرائعة التي يجب مراعاتها.

أوبتيمول

حل تحسين الصور الكل في واحد لـ WordPress ، متوافق مع Elementor. سيتم تقديم صورك من CDN وليس من الخادم الرئيسي ، مما يقلل من أوقات التحميل واستخدام النطاق الترددي. يختار حجم الصورة المناسب لمتصفح الزائر ومنفذ العرض ، ويستخدم التحميل البطيء لعرض الصور.

سحق

مكوّن إضافي آخر لتحسين الصورة عالي التصنيف يعمل بشكل جيد مع Elementor ، يتيح لك Smush تغيير حجم الصور وتحسينها وتحميلها البطيء بسهولة لتحسين الأداء. يوفر ضغطًا بدون فقد ويعالج ملفات PNG و JPEG و GIF بكميات كبيرة. يمكنك أيضًا إعداد التحسين التلقائي بحيث تخضع المرفقات لضغط سريع للغاية عند التحميل.

5. تحسين الأداء مع وظائف تحميل الأصول والإخراج من DOM

يتضمن أحدث إصدار من Elementor عددًا من ميزات الأداء ، مثل تحسين تحميل الأصول وإمكانية الوصول إليها. يقلل الإصدار الجديد من أحجام ملفات أصول JS عن طريق سحب الدعم للمتصفحات القديمة (مثل Internet Explorer).

تعمل أحجام الملفات الأصغر للأصول على تحسين سرعة التحميل ، وتأتي الصناديق المبسطة المحملة بشروط مع خيار تحميلها عند الطلب.

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

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

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

6. اختيار وإدارة الإضافات الخاصة بك بكفاءة

يحتوي Elementor على ميزة الإنشاء الخاصة به ، ولكنه يدمج المكونات الإضافية ويديرها بسهولة لمتطلبات أكثر تخصيصًا. على سبيل المثال ، يتكامل Elementor جيدًا مع مكونات WordPress الإضافية الشهيرة مثل WooCommerce و Yoast و Rank Math و ACF و Toolset و Pods و LearnDash و Tutor LMS و MemberPress.

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

خذ الوقت الكافي لاختيار المكونات الإضافية المصممة للعمل مع Elementor. تأتي الوظائف الإضافية مثل Happy Addons و Essential Addons مع عناصر واجهة مستخدم Elementor التي تسمح لك بدمج نماذج موقعك في المحرر المرئي.

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

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

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

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