رصد الأداء باستخدام Lighthouse CI

كيفية إضافة Lighthouse إلى نظام تكامل مستمر، مثل "إجراءات GitHub"

كاتي هيمبينيوس
"كاتي هيمبينيوس"
X

Lighthouse CI هي حزمة من الأدوات المستخدَمة في استخدام Lighthouse أثناء الدمج المستمر. يمكن دمج Lighthouse CI في سير عمل المطوّرين بعدة طرق مختلفة. يتناول هذا الدليل الموضوعات التالية:

  • استخدام واجهة سطر الأوامر لـ Lighthouse CI
  • جارٍ ضبط موفِّر CI لتشغيل Lighthouse CI.
  • إعداد GitHub Action والتحقق من حالة Lighthouse CI. سيؤدي ذلك إلى عرض نتائج Lighthouse تلقائيًا على طلبات سحب GitHub.
  • إنشاء لوحة بيانات للأداء ومخزن بيانات لتقارير Lighthouse.

نظرة عامة

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

توفّر واجهة سطر أوامر Lighthouse CI الوظيفة الأساسية لـ Lighthouse CI. (ملاحظة: هذه أداة منفصلة عن واجهة سطر الأوامر في Lighthouse). يوفّر Lighthouse CI CLI مجموعة من أوامر استخدام Lighthouse CI. على سبيل المثال، ينفّذ الأمر autorun عدة عمليات تشغيل في Lighthouse، ويحدد متوسط تقرير Lighthouse، ويحمّل التقرير لتخزينه. يمكن تخصيص هذا السلوك بشكل كبير من خلال تمرير علامات إضافية أو تخصيص ملف الإعداد lighthouserc.js لـ Lighthouse CI.

على الرغم من أنّ الوظيفة الأساسية لـ Lighthouse CI يتم تضمينها بشكل أساسي في واجهة سطر الأوامر لـ Lighthouse CI، يتم استخدام أداة Lighthouse CI عادةً من خلال أحد الأساليب التالية:

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

تستند كل هذه الأساليب إلى واجهة Lighthouse CI CLI.

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

استخدام Lighthouse CI محليًا

يوضّح هذا القسم كيفية تشغيل وتثبيت Lighthouse CI CLI على الجهاز وكيفية ضبط lighthouserc.js. إنّ تشغيل واجهة CLI في Lighthouse CI على الجهاز هو أسهل طريقة للتأكّد من ضبط lighthouserc.js بشكل صحيح.

  1. ثبِّت واجهة سطر أوامر Lighthouse CI CLI.

    npm install -g @lhci/cli

    يتم ضبط أداة Lighthouse CI من خلال وضع ملف lighthouserc.js في جذر مستودع مشروعك. هذا الملف إلزامي وسيحتوي على معلومات الإعداد المتعلقة بـ Lighthouse CI. على الرغم من أنّه يمكن ضبط Lighthouse CI للاستخدام بدون git repo، تفترض التعليمات الواردة في هذه المقالة أنّه تم ضبط repo لمشروعك لاستخدام git.

  2. في جذر المستودع، أنشِئ ملف إعداد lighthouserc.js.

    touch lighthouserc.js

  3. أضِف الرمز التالي إلى lighthouserc.js. هذا الرمز عبارة عن إعداد Lighthouse CI فارغ. ستضيفها إلى هذه التكوين في خطوات لاحقة.

    module.exports = {
  ci: {
    collect: {
      /* Add configuration here */
    },
    upload: {
      /* Add configuration here */
    },
  },
};

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

    إذا كان موقعك الإلكتروني ثابتًا، أضِف السمة staticDistDir إلى الكائن ci.collect للإشارة إلى مكان ملفاتك الثابتة. ستستخدم أداة Lighthouse CI خادمها الخاص لعرض هذه الملفات أثناء اختبار موقعك. إذا لم يكن موقعك الإلكتروني ثابتًا، أضِف السمة startServerCommand إلى الكائن ci.collect للإشارة إلى الأمر الذي يؤدي إلى تشغيل الخادم. ستبدأ أداة Lighthouse CI عملية جديدة للخادم أثناء الاختبار وسيتم إيقافها بعد ذلك.

    // Static site example
collect: {
  staticDistDir: './public',
}

    // Dynamic site example
collect: {
  startServerCommand: 'npm run start',
}

  5. أضِف السمة url إلى العنصر ci.collect للإشارة إلى عناوين URL التي يجب أن يتم تشغيل Lighthouse CI عليها. يجب تقديم قيمة السمة url كمصفوفة من عناوين URL، ويمكن أن تحتوي هذه الصفيفة على عنوان URL واحد أو أكثر. وسيتم تلقائيًا تشغيل Lighthouse CI ثلاث مرات على كل عنوان URL.

    collect: {
  // ...
  url: ['http://localhost:8080']
}

  6. أضِف السمة target إلى العنصر ci.upload واضبط القيمة على 'temporary-public-storage'. سيتم تحميل تقارير Lighthouse التي جمعتها Lighthouse CI إلى مساحة التخزين العامة المؤقتة. سيبقى التقرير هناك لمدة سبعة أيام ثم سيتم حذفه تلقائيًا. يستخدم دليل الإعداد هذا خيار التحميل "مساحة التخزين العامة المؤقتة" لأنّه سريع الإعداد. لمزيد من المعلومات حول طرق أخرى لتخزين تقارير Lighthouse، يمكنك الاطّلاع على المستندات.

    upload: {
  target: 'temporary-public-storage',
}

    سيكون موقع التخزين في التقرير مشابهًا لما يلي:

    https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html

    (لن يعمل عنوان URL هذا لأنّه قد سبق حذف التقرير).

  7. شغِّل واجهة سطر الأوامر في Lighthouse CI من الوحدة الطرفية باستخدام الأمر autorun. سيؤدي هذا الإجراء إلى تشغيل Lighthouse ثلاث مرات وتحميل تقرير Lighthouse.

    lhci autorun

    في حال ضبط Lighthouse CI بشكل صحيح، من المفترض أن يؤدي تشغيل هذا الأمر إلى إنشاء مخرجات مشابهة لما يلي:

    ✅  .lighthouseci/ directory writable
✅  Configuration file found
✅  Chrome installation found
⚠️   GitHub token not set
Healthcheck passed!

Started a web server on port 65324...
Running Lighthouse 3 time(s) on http://localhost:65324/index.html
Run #1...done.
Run #2...done.
Run #3...done.
Done running Lighthouse!

Uploading median LHR of http://localhost:65324/index.html...success!
Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591720514021-82403.report.html
No GitHub token set, skipping GitHub status check.

Done running autorun.

    يمكنك تجاهل رسالة GitHub token not set في نتائج وحدة التحكّم. يلزم استخدام رمز GitHub المميز فقط إذا كنت تريد استخدام Lighthouse CI مع إجراء GitHub. يتم توضيح كيفية إعداد إجراء GitHub لاحقًا في هذه المقالة.

    سيؤدي النقر على الرابط في النتيجة التي تبدأ بـ https://storage.googleapis.com... إلى نقلك إلى تقرير Lighthouse المتوافق مع متوسط تشغيل Lighthouse.

    يمكن إلغاء الإعدادات التلقائية التي يستخدمها autorun من خلال سطر الأوامر أو lighthouserc.js. على سبيل المثال، يشير إعدادات lighthouserc.js أدناه إلى أنّه يجب جمع خمس عمليات تشغيل Lighthouse في كل مرة يتم فيها تنفيذ autorun.

  8. عدِّل lighthouserc.js لاستخدام السمة numberOfRuns:

    module.exports = {
    // ...
    collect: {
      numberOfRuns: 5
    },
  // ...
  },
};

  9. إعادة تنفيذ الأمر autorun:

    lhci autorun

    يُفترَض أن تُظهر الإخراج الطرفية أنّه تم تشغيل Lighthouse خمس مرات بدلاً من الخيارات التلقائية الثلاث:

    ✅  .lighthouseci/ directory writable
✅  Configuration file found
✅  Chrome installation found
⚠️   GitHub token not set
Healthcheck passed!

Automatically determined ./dist as `staticDistDir`.
Set it explicitly in lighthouserc.json if incorrect.

Started a web server on port 64444...
Running Lighthouse 5 time(s) on http://localhost:64444/index.html
Run #1...done.
Run #2...done.
Run #3...done.
Run #4...done.
Run #5...done.
Done running Lighthouse!

Uploading median LHR of http://localhost:64444/index.html...success!
Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591716944028-6048.report.html
No GitHub token set, skipping GitHub status check.

Done running autorun.

    للتعرّف على خيارات الإعداد الأخرى، يُرجى الاطّلاع على مستندات إعداد Lighthouse CI.

عليك إعداد عملية CI لتشغيل Lighthouse CI

يمكن استخدام Lighthouse CI مع أداة CI المفضّلة لديك. يحتوي القسم Configure Your CIProvider على عيّنات رموز برمجية توضّح كيفية دمج Lighthouse CI في ملفات إعداد أدوات CI الشائعة. على وجه التحديد، تُظهر عيّنات التعليمات البرمجية هذه كيفية تشغيل Lighthouse CI لجمع قياسات الأداء أثناء عملية CI.

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

تدعم أداة Lighthouse CI ثلاثة مستويات من التأكيدات:

  • off: تجاهل التأكيدات
  • warn: تعذُّر الطباعة إلى النسخة القياسية
  • error: تعذُّر طباعة الإدخال العادي والخروج من Lighthouse CI باستخدام رمز خروج غير صفري

وفي ما يلي مثال على إعداد lighthouserc.js يتضمن تأكيدات. إنها تضع تأكيدات لدرجات الأداء وفئات إمكانية الوصول في Lighthouse. لتجربة ذلك، أضِف التأكيدات الموضّحة أدناه إلى ملف lighthouserc.js، ثم أعِد تشغيل Lighthouse CI.

module.exports = {
  ci: {
    collect: {
      // ...
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', {minScore: 1}],
        'categories:accessibility': ['error', {minScore: 1}]
      }
    },
    upload: {
      // ...
    },
  },
};

تظهر مخرجات وحدة التحكّم التي تنشئها على النحو التالي:

لقطة شاشة لرسالة تحذير تم إنشاؤها بواسطة Lighthouse CI

لمزيد من المعلومات عن تأكيدات CI في Lighthouse، يمكنك مراجعة الوثائق.

إعداد مهمة GitHub لتشغيل Lighthouse CI

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

لقطة شاشة للتحقّق من حالة GitHub

  1. أنشئ دليلاً باسم .github/workflows في جذر المستودع. سيتم وضع تدفقات العمل لمشروعك في هذا الدليل. سير العمل هو عملية تتم في وقت محدّد مسبقًا (على سبيل المثال، عند إرسال رمز) وتتألف من إجراء واحد أو أكثر.

    mkdir .github
mkdir .github/workflows

  2. في .github/workflows، أنشِئ ملفًا باسم lighthouse-ci.yaml. سيحتفظ هذا الملف بإعدادات سير العمل الجديد.

    touch lighthouse-ci.yaml

  3. أضِف النص التالي إلى lighthouse-ci.yaml.

    name: Build project and run Lighthouse CI
on: [push]
jobs:
  lhci:
    name: Lighthouse CI
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 10.x
        uses: actions/setup-node@v1
        with:
          node-version: 10.x
      - name: npm install
        run: |
          npm install
      - name: run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.3.x
          lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"

    تعمل هذه الإعدادات على إعداد سير عمل يتكون من مهمة واحدة سيتم تشغيلها كلما تم إرسال رمز جديد إلى المستودع. تتكون هذه الوظيفة من أربع خطوات:

    • الاطّلاع على المستودع الذي سيتم تشغيل Lighthouse CI عليه
    • تثبيت العقدة وإعدادها
    • تثبيت حزم npm المطلوبة
    • شغِّل Lighthouse CI وحمِّل النتائج على مساحة التخزين العامة المؤقتة.

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

  5. للتأكّد من تشغيل Lighthouse CI والاطّلاع على التقرير الذي أنشأه، انتقِل إلى علامة التبويب الإجراءات في مشروعك. من المفترض أن ترى سير عمل مشروع الإنشاء وتشغيل Lighthouse CI ضمن الاشتراكات الجديدة.

    لقطة شاشة لعلامة التبويب "الإعدادات" في GitHub

    يمكنك الانتقال إلى تقرير Lighthouse الخاص بالتزام معيّن من علامة التبويب الإجراءات. انقر على الالتزام، ثم انقر على خطوة سير العمل Lighthouse CI، ثم وسِّع نتائج خطوة تشغيل Lighthouse CI.

    لقطة شاشة لعلامة التبويب "الإعدادات" في GitHub

    لقد أعددت للتوّ إجراء GitHub لتنفيذ Lighthouse CI. سيكون هذا مفيدًا للغاية عند استخدامه بالتزامن مع فحص الحالة من GitHub.

إعداد فحص حالة GitHub

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

لقطة شاشة لعلامة التبويب "الإعدادات" في GitHub

توضّح الخطوات التالية كيفية إعداد فحص حالة Lighthouse CI.

  1. انتقِل إلى صفحة تطبيق Lighthouse CI GitHub وانقر على ضبط.

  2. (اختياري) إذا كنت جزءًا من مؤسسات متعددة على GitHub، اختَر المؤسسة التي تمتلك المستودع الذي تريد استخدام Lighthouse CI لها.

  3. اختَر كل المستودعات إذا كنت تريد تفعيل أداة Lighthouse CI في كل المستودعات، أو اختَر اختيار المستودعات فقط إذا كنت تريد استخدامها فقط في مستودعات محددة، ثم اختَر المستودعات. بعد ذلك، انقر على تثبيت وتفويض.

  4. انسخ الرمز المميّز المعروض. وستستخدمه في الخطوة التالية.

  5. لإضافة الرمز المميّز، انتقِل إلى صفحة الإعدادات في مستودع GitHub، وانقر على الأسرار، ثم انقر على إضافة سر جديد.

    لقطة شاشة لعلامة التبويب "الإعدادات" في GitHub

  6. اضبط حقل الاسم على LHCI_GITHUB_APP_TOKEN واضبط الحقل القيمة على الرمز المميّز الذي نسخته في الخطوة الأخيرة، ثم انقر على الزر إضافة مفتاح سرّي.

  7. انتقِل إلى ملف lighthouse-ci.yaml وأضِف سر البيئة الجديد إلى الأمر run Lighthouse CI.

-           name: run Lighthouse CI
            run: |
              npm install -g @lhci/cli@0.3.x
              lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"
+            env:
+              LHCI_GITHUB_APP_TOKEN: $
  1. عملية التحقّق من الحالة جاهزة للاستخدام. لاختباره، يمكنك إنشاء طلب سحب جديد أو دفع التزام بطلب سحب حالي.

إعداد خادم Lighthouse CI Server

يوفّر خادم Lighthouse CI لوحة بيانات لاستكشاف تقارير Lighthouse السابقة. ويمكن أن يكون أيضًا بمثابة مخزن بيانات خاص وطويل المدى لتقارير Lighthouse.

لقطة شاشة للوحة بيانات Lighthouse CI Server
لقطة شاشة للمقارنة بين تقريرَي Lighthouse في خادم Lighthouse CI
  1. اختَر الالتزامات التي تريد مقارنتها.
  2. مقدار تغيُّر نتيجة Lighthouse بين عمليتَي التنفيذ.
  3. لا يعرض هذا القسم سوى المقاييس التي تغيّرت بين عمليتَي الالتزام.
  4. يتم تمييز الانحدارات باللون الوردي.
  5. يتم تمييز التحسينات باللون الأزرق.

يُعد Lighthouse CI Server الأنسب للمستخدمين الذين يشعرون بالراحة في نشر البنية الأساسية الخاصة بهم وإدارتها.

للحصول على معلومات عن كيفية إعداد خادم Lighthouse CI، بما في ذلك وصفات استخدام Heroku و Docker للنشر، يُرجى الاطّلاع على هذه instructions.

التعرف على المزيد