كيفية إجراء اختبارات الأداء المحلية باستخدام Lighthouse (تحديث 2022)

نشرت: 2022-12-10

التحديث ، كانون الأول (ديسمبر) 2022: نظرًا لأحدث التحسينات في PageSpeed ​​Insights (PSI) ، تم توسيع المقالة لتشمل معلومات حول كيفية تشغيل عمليات تدقيق Lighthouse باستخدام PSI وامتداد Chrome.

تحب Google مواقع الويب التي يتم تحميلها بسرعة وتوفر تجربة مستخدم استثنائية.

وما هي أفضل طريقة لاختبار موقعك وفقًا لمتطلبات أداء Google من الأداة الخاصة به؟

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

هيا نبدأ!

القفز مباشرة إلى "بعد" سرعة موقعك مع NitroPack →

ما هو Google Lighthouse؟

Lighthouse هي أداة مجانية ومفتوحة المصدر ومؤتمتة بالكامل ستساعدك على تحسين سرعة موقعك وأدائه وتجربة المستخدم الإجمالية.

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

إلى جانب إعادة تقرير بالدرجات المحسوبة لكل مقياس ، تقدم Google Lighthouse قائمة باقتراحات التحسين المحددة لتحسين نتائجك.

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

لماذا يجب عليك استخدام Google Lighthouse

لسببين:

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

ثانيًا ، Lighthouse هي أداة تم تطويرها بواسطة Google. ومن ثم ، إذا كنت تريد التأكد من أن موقعك يلبي أحدث أداء للويب ، وإمكانية الوصول ، ومعايير تحسين محركات البحث من Google ، فإن Lighthouse هي الحل الأمثل للاختبار.

دعونا نرى كيف يمكنك إجراء عمليات تدقيق باستخدام Lighthouse.

كيفية استخدام منارة جوجل

يمكنك الاختيار من بين أربع طرق مختلفة لإجراء تدقيقات Lighthouse:

  • Chrome DevTools
  • PageSpeed ​​Insights
  • تمديد كروم

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

الآن ، دعنا ننتقل إلى الخيارات السهلة:

قم بتشغيل عمليات تدقيق Lighthouse Audits المحلية من خلال Chrome DevTools

قم بتنزيل Google Chrome لسطح المكتب (إذا لم يكن لديك بالفعل).

1. في Google Chrome ، افتح عنوان URL للصفحة التي تريد تدقيقها.

2. من قائمة Chrome الرئيسية ، حدد المزيد من الأدوات ، ثم أدوات المطور (أو انقر بزر الماوس الأيمن على الصفحة وحدد فحص):

أو

3. انقر فوق >> ، ثم علامة التبويب Lighthouse.

4. حدد الوضع والجهاز والفئات. (تقترح Google ترك جميع الفئات ممكّنة).

5. انقر فوق تحليل تحميل الصفحة .

6. بعد 10 ثوانٍ ، تقدم لك Lighthouse تقريرًا على الصفحة.

كما ترى ، فإن العملية واضحة ومباشرة.

قد يكون السؤال الوحيد الذي قد يظهر أثناء إجراء التدقيق من خلال Chrome DevTools هو:

ما الفرق بين الأوضاع الثلاثة في تدقيق Lighthouse؟

هذا ما يقوله Google:

  • يحلل وضع التنقل تحميل صفحة واحدة.
  • يحلل وضع Timespan فترة زمنية عشوائية تحتوي عادةً على تفاعلات المستخدم.
  • يحلل وضع اللقطة الصفحة في حالة معينة.

المصدر: github.com

قم بتشغيل اختبار سرعة Lighthouse عبر PageSpeed ​​Insights (PSI)

  1. افتح PageSpeed ​​Insights.
  2. إدخال عنوان الموقع.
  3. انقر فوق تحليل .

تبدو تقارير كل من Chrome DevTools و PageSpeed ​​Insights متطابقة.

مع اختلاف واحد كبير .

يوفر PSI كلاً من بيانات المختبر والميدان.

ستلاحظ أن تقرير PSI الخاص بك يبدأ بتقييم Core Web Vitals الخاص بصفحتك.

أساسيات الويب الأساسية عبارة عن مجموعة من ثلاثة مقاييس تقيس وقت تحميل صفحتك ، والاستقرار المرئي ، وتفاعل الصفحة. تعتمد درجاتك على بيانات تجربة المستخدم الحقيقي (بيانات الحقل) التي توفرها مجموعة بيانات تقرير تجربة مستخدم Chrome (CrUX).

قم بتمرير "أساسيات الويب الأساسية" الخاصة بك على الطيار الآلي. انظر موقع الويب الخاص بك مع NitroPack →

يكرر الجزء المتبقي من التقرير صفحة نتائج Chrome DevTools.

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

بمعنى آخر ، لا يعني تحقيق درجة 100/100 بالضرورة أنك تقدم تجربة مستخدم رائعة للزائرين.

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

موارد إضافية: إذا كنت جديدًا على PageSpeed ​​Insights ، فراجع دليل PSI للمبتدئين .

قم بتشغيل Google Lighthouse كملحق Chrome

قم بتنزيل Google Chrome لسطح المكتب (إذا لم يكن لديك بالفعل).

1. قم بتثبيت ملحق Lighthouse Chrome.

2. انتقل إلى الصفحة التي تريد اختبارها.

3. انقر فوق رمز المنارة.

4. انقر فوق إنشاء تقرير.

ومع ذلك ، يجب أن تضع في اعتبارك توصية Google التالية:

"ما لم يكن لديك سبب محدد ، يجب عليك استخدام سير عمل Chrome DevTools بدلاً من سير عمل ملحق Chrome هذا. يسمح سير عمل DevTools باختبار المواقع المحلية والصفحات المصادق عليها ، في حين أن الامتداد لا يفعل ذلك ".

وأوضح نتيجة المنارة

معظم الأشخاص ، بعد إجراء أول عمليتي تدقيق على Lighthouse والتعود على الواجهة ، يتوصلون حتماً إلى الأسئلة الثلاثة التالية:

  • كيف يتم حساب نقاط الأداء الخاصة بي (ويعرف أيضًا باسم درجة Lighthouse ، ويعرف أيضًا باسم درجة PageSpeed)؟
  • لماذا تختلف نقاط Lighthouse الخاصة بي عن PageSpeed ​​Insights؟
  • لماذا تختلف درجتي في كل مرة أقوم فيها بالاختبار؟

فيما يلي شرح موجز لكل سؤال:

كيف يتم حساب درجة الأداء الخاصة بي؟

درجة الأداء هي متوسط ​​مرجح للمقاييس الستة التالية:

  • أول رسم مضمون (FCP)
  • وقت التفاعل (TTI)
  • مؤشر السرعة
  • إجمالي وقت الحظر (TBT)
  • أكبر طلاء محتوى (LCP)
  • التحول في التخطيط التراكمي (CLS)

لكل مقياس وزن مختلف في النتيجة الإجمالية:

المصدر: web.dev

ومن ثم ، فإن بذل المزيد من الجهد في تحسين LCP وإجمالي وقت الحظر أولاً سيكون له التأثير الأكبر على درجة أدائك.

من المفيد أن تعرف: قيم الوزن ليست ثابتة. تميل Google إلى مراجعة النسب المئوية في كل مرة تقوم فيها بترقية إصدار Lighthouse. تأكد من التحقق من التحديثات القادمة بانتظام.

حقق أكثر من 90 درجة في الطيار الآلي. انظر موقع الويب الخاص بك مع NitroPack →

لماذا تختلف نقاط Lighthouse الخاصة بي عن PageSpeed ​​Insights؟

يأتي الاختلاف الرئيسي من موقع الاختبار.

يختار PageSpeed ​​Insights الخادم لتشغيل الاختبار بناءً على موقعك الحالي. لديها خوادم في:

  • نحن
  • أوروبا
  • آسيا

قد تختلف نقاط PSI الخاصة بك اعتمادًا على المسافة الفعلية بين الخادم وموقعك. كلما اقتربت من خادم الاختبار ، كانت نتائجك أفضل.

على العكس من ذلك ، باستخدام Chrome DevTools ، فأنت تقوم بإجراء اختبار محلي. لا يتم نقل أي بيانات بين الخوادم ، لذلك لن يكون هناك زمن انتقال للشبكة.

لذلك ، ستظهر النتائج النهائية دائمًا كيف سيتعامل المستخدم في موقعك مع موقع الويب.

لماذا تختلف درجتي في كل مرة أقوم فيها بالاختبار؟

من الشذوذ الذي قد تلاحظه إعادة إجراء عدة اختبارات متتالية هو الاختلاف في النتائج.

هناك العديد من الشروط والمتغيرات الأساسية التي تؤثر على درجة أدائك ، بما في ذلك:

  • اختبارات A / B أو التغييرات في الإعلانات التي يتم عرضها
  • تغييرات توجيه حركة المرور على الإنترنت
  • الاختبار على أجهزة مختلفة (كمبيوتر مكتبي عالي الأداء مقابل كمبيوتر محمول منخفض الأداء)
  • امتدادات المتصفح التي تضخ JavaScript وتضيف / تعدل طلبات الشبكة
  • برامج مكافحة الفيروسات

للتعمق في الجوانب الفنية ، تفضل بزيارة وثائق Lighthouse المتعمقة حول التباين.

كل ما يجب أن تعرفه عن إجراء عمليات تدقيق Lighthouse Audits (ملخص)

لقد تناولنا الكثير من التفاصيل في هذه المقالة ، لذا إليك ملخص للنقاط الأساسية:

  • Lighthouse هي أداة مفتوحة المصدر ومؤتمتة بالكامل لاختبار أداء الويب.
  • باستخدامه ، يمكنك مراقبة أداء موقعك والتعامل مع مشكلات الأداء المحتملة في الوقت المناسب.
  • إنها أداة طورتها Google مما يجعلها الحل الأمثل لاختبار أداء الويب.
  • هناك أربع طرق مختلفة لتشغيل عمليات تدقيق Lighthouse Chrome DevTools و PageSpeed ​​Insights و Chrome Extension وتشغيل أداة سطر أوامر Node.
  • تستند درجات Lighthouse الخاصة بك إلى بيانات المختبر.
  • يوفر PSI بيانات تجربة المستخدم الحقيقي في عنصر واجهة مستخدم Core Web Vitals.
  • إذا كان عليك الاختيار بين عمليات التدقيق الجارية عبر امتداد Chrome و Chrome DevTools ، فإن Google تقترح استخدام الأخير.
  • درجة أدائك هي متوسط ​​مرجح لستة مقاييس: FCP و TTI ومؤشر السرعة و TBT و LCP و CLS.
  • قد تختلف قيم الوزن اعتمادًا على إصدار Lighthouse.
  • يأتي الاختلاف بين نقاط PSI و Chrome DevTools من موقع الاختبار.
  • قد تؤدي إعادة إجراء عمليات التدقيق إلى إعطاء درجات مختلفة بسبب عوامل التباين المختلفة.