تحسين موقع Drupal لأساسيات الويب الأساسية

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

لماذا من المهم تحسين أداء موقع الويب الخاص بك

أداء موقع الويب الخاص بك هو كل شيء في نموذج الإنترنت الحديث اليوم. سيكون لموقع الويب ضعيف الأداء معدلات تحويل منخفضة وتصنيفات SEO أسوأ. علاوة على ذلك ، يكاد يكون من المستحيل إجراء إعلانات مدفوعة على موقع الويب الخاص بك لأن معظم الأشخاص سيغادرون دون انتظار تحميل موقع الويب الخاص بك. أدركت أمازون ذات مرة أن تسريع 100 مللي ثانية كان مسؤولاً عن ملايين الدولارات في زيادة الإيرادات. في مُحسّنات محرّكات البحث ، يعد وقت تحميل موقعك على الويب أحد أكبر المقاييس. أصبح محرك بحث Google أول محرك بحث للجوال ، مما يجعله أكثر أهمية لأن معظم مستخدمي الويب يستخدمون اتصال بيانات بشاشة أصغر. لا يريدون الانتظار بضع ثوانٍ حتى يتم تحميل موقع الويب الخاص بك. يصبح الأمر أكثر صعوبة إذا كان لديك نظام إدارة محتوى لأنه يتعين عليك معرفة نظام إدارة المحتوى الخاص بك على مستوى عميق لتحسين أدائه. يجب أن تفهم أيضًا "أساسيات الويب الأساسية" التي أعلنتها Google في وثائقها. هذه المقاييس ضرورية لمنح موقع الويب الخاص بك إشارات الجودة التي يستخدمها Google والآخرون لتقييم مدى جودة أداء موقع الويب الخاص بك.

حيوية الويب الأساسية

تستخدم Google Core Web Vitals كطريقة موحدة لإثبات الجودة على الويب. إذا كنت تعمل بشكل جيد مع إشارات الجودة هذه ، فهذا يعني أن موقع الويب الخاص بك لديه تجربة مستخدم استثنائية ستريد Google ترقيتها إلى أعلى تصنيفات محرك البحث الخاص بها. هناك ثلاث عناصر حيوية أساسية تحتاج إلى النظر فيها لتحقيق النجاح. هذه المقاييس الأساسية للويب هي:

أكبر رسم مضمون

يقيس Largest Contentful Paint مدى السرعة التي يستغرقها مستعرض الويب لعرض الجزء الأكبر من صفحة الويب في الجزء المرئي من مستعرض الويب الخاص بك. سيحتوي الموقع الجيد على هذا المقياس أقل من 2.5 ثانية. ومع ذلك ، فمن الأهمية بمكان أن يكون لديك مستوى أقل لتكون ضمن أفضل 1٪ من مواقع الويب.

أول تأخير في الإدخال

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

التحول في التخطيط التراكمي

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

أداة منارة Google

الخبر السار هو أن Google تحتفظ بأداة Lighthouse لمساعدتك على فهم كيفية تنفيذ Core Web Vitals لموقعك على الويب. من الأخبار الجيدة الأخرى أن مساهمة Vardot في Lighthouse تعني أنك ستحصل على نصائح دروبال ممتازة لتحسين Core Web Vitals. تتطلب الأداة استيراد عنوان URL الخاص بك والبدء. سيقوم بفحص موقع الويب الخاص بك وتقديم توصيات بناءً على نوع موقع الويب الذي تديره.

فهم نتائج أداة المنارة الخاصة بك

عند تشغيل أداة Lighthouse ، فإنها تمنحك سلسلة من الدرجات عبر أربع فئات مختلفة. هذه الفئات هي:

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

حزمة مكدس منارة فاردوت لمواقع دروبال

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

1. تقليل CSS غير المستخدمة

ضع في اعتبارك إزالة قواعد CSS غير المستخدمة وإرفاق مكتبات دروبال المطلوبة فقط بالصفحة أو المكون ذي الصلة في الصفحة. راجع رابط توثيق دروبال للحصول على التفاصيل. لتحديد المكتبات المرفقة التي تضيف CSS دخيلة ، حاول تشغيل تغطية التعليمات البرمجية في Chrome DevTools. يمكنك تحديد السمة / الوحدة المسؤولة من عنوان URL الخاص بورقة الأنماط عندما يتم تعطيل تجميع CSS في موقع Drupal الخاص بك. ابحث عن السمات / الوحدات التي تحتوي على العديد من أوراق الأنماط في القائمة والتي تحتوي على الكثير من اللون الأحمر في تغطية التعليمات البرمجية. يجب أن تقوم السمة / الوحدة بإدراج ورقة أنماط في قائمة الانتظار فقط إذا تم استخدامها بالفعل على الصفحة.

2. تقليل JavaScript غير المستخدمة

ضع في اعتبارك إزالة أصول JavaScript غير المستخدمة وإرفاق مكتبات Drupal المطلوبة فقط بالصفحة أو المكون ذي الصلة في الصفحة. راجع رابط توثيق دروبال للحصول على التفاصيل. لتحديد المكتبات المرفقة التي تضيف JavaScript دخيلة ، حاول تشغيل تغطية التعليمات البرمجية في Chrome DevTools. يمكنك تحديد السمة / الوحدة المسؤولة من عنوان URL للنص البرمجي عند تعطيل تجميع JavaScript في موقع Drupal الخاص بك. ابحث عن السمات / الوحدات التي تحتوي على العديد من البرامج النصية في القائمة والتي تحتوي على الكثير من اللون الأحمر في تغطية التعليمات البرمجية. يجب أن يقوم القالب / الوحدة بإدراج نص برمجي في قائمة الانتظار فقط إذا تم استخدامه بالفعل على الصفحة.

3. خدمة الصور بتنسيقات الجيل التالي

ضع في اعتبارك تكوين تنسيقات صور WebP باستخدام تحويل نمط الصورة على موقعك.

4. تأجيل الصور خارج الشاشة

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

5. الصور ذات الحجم المناسب

تأكد من أنك تستخدم أنماط الصور المستجيبة الأصلية المقدمة من دروبال (متوفرة في دروبال 8 وما فوق). استخدم أنماط الصور المتجاوبة عند عرض حقول الصورة من خلال أوضاع العرض أو طرق العرض أو الصور التي تم تحميلها من خلال محرر WYSIWYG.

6. القضاء على موارد حظر العرض

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

7. تصغير CSS

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

8. تصغير JavaScript

تأكد من تمكين "تجميع ملفات JavaScript" في صفحة "الإدارة» التهيئة »التطوير". يمكنك أيضًا تكوين خيارات تجميع أكثر تقدمًا من خلال وحدات نمطية إضافية لتسريع موقعك عن طريق ربط أصول JavaScript وتصغيرها وضغطها.

9. استخدم تنسيقات الفيديو لمحتوى الرسوم المتحركة

ضع في اعتبارك تحميل ملف GIF الخاص بك إلى خدمة تجعله متاحًا للتضمين كفيديو بتنسيق HTML5.

10. خدمة الأصول الثابتة من خلال سياسة ذاكرة التخزين المؤقت الفعالة

عيّن "الحد الأقصى لعمر ذاكرة التخزين المؤقت للمتصفح والوكيل" في صفحة "الإدارة» التكوين »التطوير". اقرأ عن ذاكرة التخزين المؤقت دروبال وتحسين الأداء .

11. يتجنب حمولات الشبكة الهائلة

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

12. ترميز الصور بكفاءة

ضع في اعتبارك استخدام وحدة تعمل تلقائيًا على تحسين وتقليل حجم الصور التي يتم تحميلها عبر الموقع مع الاحتفاظ بالجودة. تأكد أيضًا من أنك تستخدم أنماط الصور المستجيبة الأصلية المتوفرة من دروبال (المتوفرة في دروبال 8 وما فوق) لجميع الصور المعروضة على الموقع.

13. تقليل وقت استجابة الخادم الأولي

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

14. الاتصال المسبق بالأصول المطلوبة

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

15. تأكد من بقاء النص مرئيًا أثناء تحميل خط الويب

حدد "@ font-display" عند تحديد الخطوط المخصصة في نسقك.

كل هذه الوظائف مضمنة في أداة Drupal Audit من فاردوت. إنه جزء من حزمة Drupal Stack لـ Lighthouse ويتضمن نصائح Drupal لتحسين Core Web Vitals. إنه مجاني تمامًا للاستخدام ، ويمكنك البدء في تحسين مواقع Drupal الخاصة بك اليوم .