نظرة عامة

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

شعار Lighthouse

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

ويمكنك أيضًا استخدام Lighthouse CI لمنع التراجع على مواقعك الإلكترونية.

شاهِد الفيديو أدناه من مؤتمر Google I/O لمعرفة المزيد من المعلومات حول كيفية استخدام Lighthouse والمساهمة فيه.

البدء

اختر سير عمل Lighthouse الذي يناسبك:

تشغيل Lighthouse في "أدوات مطوري البرامج في Chrome"

لدى Lighthouse لوحته الخاصة في "أدوات مطوري البرامج في Chrome". لعرض تقرير:

  1. نزِّل Google Chrome للكمبيوتر المكتبي.
  2. في متصفّح Google Chrome، انتقِل إلى عنوان URL الذي تريد تدقيقه. يمكنك تدقيق أي عنوان URL على الويب.
  3. افتح "أدوات مطوري البرامج في Chrome".
  4. انقر على علامة التبويب Lighthouse.

    لوحة Lighthouse في "أدوات مطوري البرامج في Chrome"
    على يمين الشاشة، يتوفّر إطار العرض للصفحة التي تريد التدقيق فيها. على يسار الشاشة، تظهر لوحة Lighthouse ضمن "أدوات مطوري البرامج في Chrome"، المستنِدة إلى Lighthouse.

  5. انقر على تحليل تحميل الصفحة. تعرض لك "أدوات مطوري البرامج" قائمة بفئات التدقيق. واترك جميع هذه الإعدادات مُفعَّلة.

  6. انقر على إجراء تدقيق. وبعد مرور 30 إلى 60 ثانية، تقدِّم لك أداة Lighthouse تقريرًا عن الصفحة.

    تقرير Lighthouse في "أدوات مطوري البرامج في Chrome"
    تقرير Lighthouse في "أدوات مطوري البرامج في Chrome"

تثبيت أداة سطر أوامر العقدة وتشغيلها

لتثبيت وحدة العقدة:

  1. نزِّل Google Chrome للكمبيوتر المكتبي.
  2. ثبِّت إصدار الدعم الطويل الأمد الحالي من Node.
  3. ثبِّت تطبيق Lighthouse. يتم تثبيت هذه العلامة من خلال علامة -g كوحدة عامة.
npm install -g lighthouse

لإجراء تدقيق:

lighthouse <url>

للاطّلاع على جميع الخيارات، يُرجى اتّباع الخطوات التالية:

lighthouse --help

تشغيل وحدة العُقد آليًا

راجِع قسم الاستخدام الآلي للاطِّلاع على مثال على تشغيل Lighthouse آليًا، كوحدة للعقدة.

تشغيل إحصاءات PageSpeed

لتشغيل Lighthouse في "إحصاءات PageSpeed":

  1. انتقِل إلى إحصاءات PageSpeed.
  2. أدخِل عنوان URL لصفحة ويب.
  3. انقر على تحليل.

    واجهة مستخدم &quot;إحصاءات PageSpeed&quot;
    واجهة مستخدم "إحصاءات PageSpeed"

تشغيل Lighthouse كإضافة في Chrome

لتثبيت الإضافة:

  1. نزِّل Google Chrome للكمبيوتر المكتبي.
  2. ثبِّت إضافة Lighthouse في Chrome من "سوق Chrome الإلكتروني".

لإجراء تدقيق:

  1. في متصفِّح Chrome، انتقِل إلى الصفحة التي تريد تدقيقها.
  2. انقر على رمز المنارة "آيسل إضافة Lighthouse". من المفترض أن يكون هذا الرمز بجانب شريط العناوين في Chrome. إذا لم يكن الأمر كذلك، فافتح قائمة إضافات Chrome وانتقل إليها من هناك. بعد النقر، يتم توسيع قائمة Lighthouse.

    إضافة Lighthouse
    لوحة الإضافات في Lighthouse

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

    تقرير إضافات Lighthouse
    تقرير Lighthouse من الإضافة

مشاركة التقارير وعرضها على الإنترنت

يمكنك استخدام عارض Lighthouse لعرض التقارير ومشاركتها على الإنترنت.

مُشاهد Lighthouse
مُشاهد Lighthouse

مشاركة التقارير بتنسيق JSON

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

  • تقرير Lighthouse: افتح قائمة رمز القائمة في أعلى يسار الشاشة وانقر على زر الحفظ بتنسيق JSON حفظ بتنسيق JSON.
  • سطر الأوامر: قم بتشغيل: shell lighthouse --output json --output-path <path/for/output.json>

للاطّلاع على بيانات التقرير، يُرجى اتّباع الخطوات التالية:

  1. افتح عارض Lighthouse.
  2. اسحب ملف JSON إلى العارض، أو انقر في أي مكان في العارض لفتح متصفح الملفات وتحديد الملف.

مشاركة التقارير كـ GitHub Gists

إذا كنت لا تريد تمرير ملفات JSON يدويًا، يمكنك أيضًا مشاركة تقاريرك كعناصر سرية إلى GitHub. تتمثل إحدى مزايا Gists في التحكم في الإصدار المجاني.

لتصدير تقرير كموضوع رئيسي من التقرير:

  1. (إذا كان المحتوى معروضًا على المُشاهد حاليًا، يمكنك تخطّي هذه الخطوة) افتح قائمة رمز القائمة في أعلى يسار الشاشة، ثم انقر على زر الفتح في العارض فتح في العارض. يتم فتح التقرير في "عارِض"، الموجود في https://googlechrome.github.io/lighthouse/viewer/.
  2. في العارض، افتح قائمة رمز القائمة في أعلى يسار الصفحة، ثم انقر على زر الفتح في العارض حفظ باسم Gist. في المرة الأولى التي تقوم فيها بذلك، تطلب نافذة منبثقة إذنًا بالوصول إلى بيانات GitHub الأساسية، وقراءة عناصرك والكتابة فيها.

لتصدير تقرير كعنصر أساسي من إصدار واجهة سطر الأوامر (CLI) ضمن Lighthouse، يمكنك إنشاء عنصر أساسي يدويًا ونسخ مخرجات JSON للتقرير ولصقها في الخلاصة. يجب أن ينتهي اسم ملف gist الذي يحتوي على مخرجات JSON بـ .lighthouse.report.json. اطّلِع على مقالة مشاركة التقارير بتنسيق JSON للحصول على مثال حول كيفية إنشاء ناتج JSON من أداة سطر الأوامر.

لعرض تقرير تم حفظه كأهم:

  • أضِف ?gist=<ID> إلى عنوان URL الخاص بالمُشاهد، حيث يكون <ID> هو رقم تعريف العنصر. text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
  • افتح العارض والصِق عنوان URL لأحد الأحداث فيه.

إمكانية توسيع المنارة

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

حُزم التكدس

يستخدم المطورون العديد من التقنيات المختلفة (الخلفية/إطار عمل نظام إدارة المحتوى/JavaScript) لإنشاء صفحات الويب الخاصة بهم. وبدلاً من عرض الاقتراحات العامة فقط، أصبح بإمكان Lighthouse الآن تقديم نصائح أكثر صلة وقابلية للتنفيذ استنادًا إلى الأدوات المستخدَمة.

تتيح "حزم التكدس" لـ Lighthouse إمكانية اكتشاف النظام الأساسي الذي تم إنشاء موقعك عليه وعرض اقتراحات محددة مستندة إلى حِزم البيانات. يتم تحديد هذه الاقتراحات وتنظيمها من قِبل خبراء من المنتدى.

للمساهمة في حزمة Stack، راجع إرشادات المساهمة.

مكوّنات Lighthouse الإضافية

تسمح مكوّنات Lighthouse الإضافية لخبراء النطاقات بتوسيع نطاق وظائف Lighthouse لتلبية الاحتياجات الخاصة بمجتمعهم. يمكنك الآن الاستفادة من البيانات التي تجمعها أداة Lighthouse لإنشاء عمليات تدقيق جديدة. المكوّن الإضافي في Lighthouse هو في الأساس وحدة عُقد تنفّذ مجموعة من عمليات التحقّق التي ستديرها أداة Lighthouse وتضاف إلى التقرير كفئة جديدة.

لمزيد من المعلومات حول كيفية إنشاء مكوّن إضافي خاص بك، يمكنك الاطّلاع على دليل المكوّنات الإضافية في مستودع Lighthouse GitHub.

دمج ميزة Lighthouse

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

المساهمة في Lighthouse

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