Frontend Lighthouse CI: المراقبة المستمرة لأداء تطبيقات الويب

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

ما هو Lighthouse CI؟

Lighthouse CI هي أداة اختبار أداء آلية مفتوحة المصدر تتكامل بسلاسة مع مسار التكامل المستمر والتسليم المستمر (CI/CD) الخاص بك. تستفيد من أداة التدقيق Lighthouse من Google لتقديم رؤى قابلة للتنفيذ حول أداء موقع الويب الخاص بك، وإمكانية الوصول، وتحسين محركات البحث، وأفضل الممارسات. من خلال دمج Lighthouse CI في سير عملك، يمكنك مراقبة أداء موقعك باستمرار، وتتبع التراجعات، والتأكد من أن كل تغيير في الكود يساهم في تحسين تجربة المستخدم. Lighthouse CI غير مرتبط بمزود سحابي معين ويمكن استخدامه مع إعدادات مختلفة. على سبيل المثال، يمكن تشغيله داخل حاوية Docker على خدمات مثل Github Actions و Jenkins و CircleCI وغيرها الكثير.

لماذا نستخدم Lighthouse CI؟

يوفر تطبيق Lighthouse CI العديد من الفوائد:

• الاكتشاف المبكر لتراجعات الأداء: تحديد مشكلات الأداء التي تسببها تغييرات الكود الجديدة قبل وصولها إلى بيئة الإنتاج.
• تحسين أداء الموقع: الحصول على رؤى قابلة للتنفيذ حول كيفية تحسين موقعك من حيث السرعة وإمكانية الوصول وتحسين محركات البحث.
• تجربة مستخدم محسنة: تقديم موقع ويب أسرع وأكثر سهولة في الاستخدام يحافظ على تفاعل الزوار.
• تقليل معدل الارتداد: تحسين أوقات التحميل لتقليل إحباط المستخدم ومنعهم من مغادرة موقعك.
• زيادة معدلات التحويل: يؤدي موقع الويب الأسرع عادةً إلى معدلات تحويل أعلى ونتائج أعمال أفضل.
• اختبار الأداء الآلي: دمج اختبار الأداء في مسار CI/CD الخاص بك للمراقبة المستمرة.
• اتخاذ القرارات المستندة إلى البيانات: بناء جهود التحسين الخاصة بك على مقاييس ورؤى أداء ملموسة.
• تتبع الأداء على المدى الطويل: مراقبة أداء موقعك بمرور الوقت لتحديد الاتجاهات وقياس تأثير تحسيناتك.

الميزات الرئيسية لـ Lighthouse CI

• عمليات تدقيق آلية: يقوم بتشغيل عمليات تدقيق Lighthouse تلقائيًا كجزء من عملية CI/CD الخاصة بك.
• ميزانيات الأداء: تعيين ميزانيات للأداء لضمان بقاء موقعك ضمن عتبات الأداء المقبولة.
• تتبع التراجعات: يتتبع تراجعات الأداء بمرور الوقت، مما يتيح لك تحديد تغييرات الكود التي تسببت فيها.
• رؤى قابلة للتنفيذ: يقدم تقارير مفصلة مع توصيات قابلة للتنفيذ حول كيفية تحسين أداء موقعك.
• تكوين قابل للتخصيص: تكوين Lighthouse CI لتلبية احتياجاتك ومتطلباتك المحددة.
• التكامل مع أدوات CI/CD: يتكامل بسلاسة مع أدوات CI/CD الشائعة مثل Jenkins و CircleCI و GitHub Actions و GitLab CI.
• مفتوح المصدر: Lighthouse CI هو مشروع مفتوح المصدر، مما يعني أنه مجاني للاستخدام والتعديل.

إعداد Lighthouse CI: دليل خطوة بخطوة

إليك دليل شامل لإعداد Lighthouse CI لمشروعك:

1. تثبيت واجهة سطر الأوامر لـ Lighthouse CI

أولاً، تحتاج إلى تثبيت واجهة سطر الأوامر (CLI) الخاصة بـ Lighthouse CI بشكل عام باستخدام npm أو yarn:

            npm install -g @lhci/cli
yarn global add @lhci/cli
            

              
                Copy
              
            
          

2. تكوين Lighthouse CI

أنشئ ملف lighthouserc.js في جذر مشروعك لتكوين Lighthouse CI. يحدد هذا الملف عناوين URL التي سيتم تدقيقها، وقواعد التأكيد، وخيارات التكوين الأخرى.

إليك مثال أساسي لملف lighthouserc.js:

            module.exports = {
  ci:
   {
    collect: {
      url: ['http://localhost:3000', 'http://localhost:3000/about']
    },
    assert: {
      preset: 'lighthouse:recommended'
    },
    upload: {
      target: 'temporary-public-storage'
    },
  },
};

            

              
                Copy
              
            
          

الشرح:

• collect.url: يحدد عناوين URL التي سيتم تدقيقها بواسطة Lighthouse. في هذا المثال، نقوم بتدقيق الصفحة الرئيسية وصفحة "about" لموقع ويب يعمل على localhost:3000. تذكر استبدال هذا بعناوين URL ذات الصلة بمشروعك، والتي قد تشمل بيئات الاختبار.
• assert.preset: يستخدم الإعداد المسبق lighthouse:recommended، والذي يطبق مجموعة من التأكيدات المحددة مسبقًا بناءً على توصيات Lighthouse. هذه نقطة انطلاق جيدة، ولكن يمكنك تخصيص هذه التأكيدات حسب الحاجة.
• upload.target: يحدد مكان تحميل نتائج Lighthouse CI. يعد temporary-public-storage مفيدًا للاختبار والتطوير، ولكن بالنسبة لبيئات الإنتاج، ستحتاج عادةً إلى استخدام حل تخزين أكثر استدامة (سيتم مناقشته لاحقًا).

3. دمج Lighthouse CI في مسار CI/CD الخاص بك

الخطوة التالية هي دمج Lighthouse CI في مسار CI/CD الخاص بك. ستختلف الخطوات الدقيقة اعتمادًا على مزود CI/CD الخاص بك، ولكن العملية العامة تتضمن إضافة برنامج نصي إلى تكوين CI/CD الخاص بك يقوم بتشغيل أوامر Lighthouse CI.

مثال باستخدام GitHub Actions:

أنشئ ملفًا باسم .github/workflows/lighthouse-ci.yml في مستودعك بالمحتوى التالي:

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16.x'
      - name: Install dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.11.x
          lhci autorun

            

              
                Copy
              
            
          

الشرح:

• on.push.branches: يقوم بتشغيل سير العمل عند الدفع (push) إلى الفرع main.
• on.pull_request: يقوم بتشغيل سير العمل عند طلبات السحب (pull requests).
• jobs.lighthouse.runs-on: يحدد نظام التشغيل الذي سيتم استخدامه للمهمة (Ubuntu في هذه الحالة).
• steps: يحدد الخطوات التي سيتم تنفيذها في المهمة:
• actions/checkout@v3: يقوم بسحب المستودع.
• actions/setup-node@v3: يقوم بإعداد Node.js.
• npm ci: يقوم بتثبيت التبعيات.
• Run Lighthouse CI: يقوم بتشغيل أوامر Lighthouse CI:
• npm install -g @lhci/cli@0.11.x: يقوم بتثبيت واجهة سطر الأوامر لـ Lighthouse CI بشكل عام. *مهم*: يوصى دائمًا بتثبيت إصدار معين.
• lhci autorun: يقوم بتشغيل Lighthouse CI في وضع "autorun"، والذي يجمع عمليات التدقيق تلقائيًا، ويؤكد ميزانيات الأداء، ويرفع النتائج.

اعتبارات هامة لتكامل CI/CD:

• بدء تشغيل الخادم: قبل تشغيل lhci autorun، تأكد من أن خادم الويب الخاص بك قيد التشغيل (على سبيل المثال، npm start). قد تحتاج إلى إضافة خطوة إلى تكوين CI/CD الخاص بك لبدء تشغيل الخادم في الخلفية.
• ترحيل قاعدة البيانات: إذا كان تطبيقك يعتمد على قاعدة بيانات، فتأكد من تشغيل عمليات ترحيل قاعدة البيانات كجزء من عملية CI/CD *قبل* تشغيل Lighthouse CI.
• متغيرات البيئة: إذا كان تطبيقك يتطلب متغيرات بيئة، فتأكد من تكوينها بشكل صحيح في بيئة CI/CD الخاصة بك.

4. تشغيل Lighthouse CI

الآن، كلما قمت بدفع تغييرات إلى الفرع main أو إنشاء طلب سحب، سيتم تشغيل سير عمل Lighthouse CI تلقائيًا. ستكون النتائج متاحة في واجهة GitHub Actions.

5. عرض نتائج Lighthouse CI

سيتم تحميل نتائج Lighthouse CI إلى الموقع المحدد في ملف lighthouserc.js الخاص بك (على سبيل المثال، temporary-public-storage). يمكنك الوصول إلى هذه النتائج باتباع الرابط المقدم في مخرجات CI/CD. توفر هذه النتائج معلومات مفصلة حول أداء موقعك وإمكانية الوصول وتحسين محركات البحث وأفضل الممارسات.

تكوين التأكيدات وميزانيات الأداء

يسمح لك Lighthouse CI بتكوين التأكيدات وميزانيات الأداء لضمان أن موقع الويب الخاص بك يلبي أهداف الأداء الخاصة بك. التأكيدات هي قواعد تتحقق من مقاييس أداء محددة (مثل First Contentful Paint, Largest Contentful Paint) مقابل عتبات محددة مسبقًا. تحدد ميزانيات الأداء حدودًا مقبولة لمقاييس الأداء المختلفة.

إليك مثال على كيفية تكوين التأكيدات في ملف lighthouserc.js الخاص بك:

            module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000']
    },
    assert: {
      assertions: {
        'first-contentful-paint': ['warn', { maxNumericValue: 2000 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
        'total-blocking-time': ['warn', { maxNumericValue: 500 }],
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 0.8 }],
      }
    },
   upload: {
      target: 'temporary-public-storage'
    },
  }
};

            

              
                Copy
              
            
          

الشرح:

• first-contentful-paint: يحدد عتبة تحذير لسرعة عرض أول محتوى (FCP) عند 2000 مللي ثانية.
• largest-contentful-paint: يحدد عتبة تحذير لسرعة عرض أكبر محتوى (LCP) عند 2500 مللي ثانية.
• cumulative-layout-shift: يحدد عتبة تحذير لمتغير التصميم التراكمي (CLS) عند 0.1.
• total-blocking-time: يحدد عتبة تحذير لوقت الحظر الإجمالي (TBT) عند 500 مللي ثانية.
• categories:performance: يحدد عتبة تحذير لدرجة فئة الأداء الإجمالية عند 0.9.
• categories:accessibility: يحدد عتبة خطأ لدرجة فئة إمكانية الوصول الإجمالية عند 0.8.

مستويات التأكيد:

• off: يعطل التأكيد.
• warn: يعرض تحذيرًا إذا فشل التأكيد.
• error: يفشل تشغيل Lighthouse CI إذا فشل التأكيد.

تخصيص التأكيدات:

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

اختيار وجهة تحميل لـ Lighthouse CI

يحدد خيار upload.target في ملف lighthouserc.js الخاص بك مكان تحميل نتائج Lighthouse CI. يعد الهدف temporary-public-storage مناسبًا للاختبار والتطوير، ولكنه غير مناسب لبيئات الإنتاج لأن البيانات ليست دائمة.

إليك بعض وجهات التحميل البديلة:

• خادم Lighthouse CI: النهج الموصى به لبيئات الإنتاج هو استخدام خادم Lighthouse CI. يوفر خادم Lighthouse CI حلاً للتخزين الدائم لنتائج Lighthouse CI الخاصة بك، بالإضافة إلى واجهة مستخدم لعرض بياناتك وتحليلها. يمكن نشره على مختلف مزودي الخدمات السحابية أو استضافته على بنيتك التحتية الخاصة.
• Google Cloud Storage: يمكنك تحميل نتائج Lighthouse CI الخاصة بك إلى حاوية Google Cloud Storage. هذا حل فعال من حيث التكلفة وقابل للتطوير لتخزين بياناتك.
• Amazon S3: على غرار Google Cloud Storage، يمكنك تحميل نتائج Lighthouse CI الخاصة بك إلى حاوية Amazon S3.

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

يتضمن إعداد خادم Lighthouse CI الخطوات التالية:

1. تثبيت خادم Lighthouse CI: يمكنك تثبيت خادم Lighthouse CI باستخدام npm أو yarn:

            npm install -g @lhci/server
yarn global add @lhci/server
            

              
                Copy
              
            
          

2. تكوين قاعدة البيانات: يتطلب خادم Lighthouse CI قاعدة بيانات لتخزين بياناته. يمكنك استخدام مجموعة متنوعة من قواعد البيانات، بما في ذلك PostgreSQL و MySQL و SQLite. قم بتكوين إعدادات اتصال قاعدة البيانات في ملف .env.
3. بدء تشغيل خادم Lighthouse CI: ابدأ تشغيل خادم Lighthouse CI باستخدام الأمر lhci server.
4. تكوين واجهة سطر الأوامر لـ Lighthouse CI لاستخدام الخادم: قم بتحديث ملف lighthouserc.js الخاص بك لاستخدام خادم Lighthouse CI كوجهة تحميل:

            module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000']
    },
    assert: {
      preset: 'lighthouse:recommended'
    },
    upload: {
      target: 'lhci',
      serverBaseUrl: 'http://your-lhci-server.com',
      token: 'YOUR_LHCI_TOKEN'
    },
  }
};

            

              
                Copy
              
            
          

استبدل http://your-lhci-server.com بعنوان URL لخادم Lighthouse CI الخاص بك و YOUR_LHCI_TOKEN برمز الوصول لمشروعك.

أفضل الممارسات لاستخدام Lighthouse CI

لتحقيق أقصى استفادة من Lighthouse CI، اتبع أفضل الممارسات التالية:

• تشغيل Lighthouse CI عند كل تغيير في الكود: ادمج Lighthouse CI في مسار CI/CD الخاص بك لتشغيل عمليات التدقيق على كل تغيير في الكود. سيساعدك هذا على اكتشاف تراجعات الأداء مبكرًا.
• تعيين ميزانيات الأداء: حدد ميزانيات الأداء لضمان بقاء موقعك ضمن عتبات الأداء المقبولة.
• مراقبة اتجاهات الأداء: تتبع أداء موقعك بمرور الوقت لتحديد الاتجاهات وقياس تأثير تحسيناتك.
• تحديد أولويات جهود التحسين: ركز على تحسين مقاييس الأداء الأكثر أهمية أولاً.
• استخدام بيانات العالم الحقيقي: استخدم بيانات العالم الحقيقي لإرشاد جهود التحسين الخاصة بك. على سبيل المثال، يمكنك استخدام Google Analytics لتحديد الصفحات الأكثر زيارة من قبل المستخدمين.
• الاختبار على أجهزة حقيقية: اختبر موقعك على أجهزة حقيقية لضمان أدائه الجيد في ظروف العالم الحقيقي.
• مراجعة نتائج Lighthouse CI بانتظام: تأكد من مراجعة نتائج Lighthouse CI بانتظام واتخاذ إجراءات لمعالجة أي مشكلات أداء يتم تحديدها.
• تحسين الصور: قم بتحسين صورك لتقليل حجم ملفاتها دون التضحية بالجودة. أدوات مثل ImageOptim (macOS) و TinyPNG و ImageKit مفيدة لهذا الغرض.
• تصغير CSS و JavaScript: قم بتصغير ملفات CSS و JavaScript لتقليل حجمها. يمكن أن تساعد أدوات مثل UglifyJS و CSSNano في ذلك.
• الاستفادة من التخزين المؤقت للمتصفح: استفد من التخزين المؤقت للمتصفح لتقليل عدد الطلبات التي يرسلها موقعك إلى الخادم.
• استخدام شبكة توصيل المحتوى (CDN): استخدم CDN لتوزيع محتوى موقعك على خوادم حول العالم. يمكن أن يؤدي ذلك إلى تحسين أوقات التحميل للمستخدمين في مواقع جغرافية مختلفة. خدمات مثل Cloudflare و Amazon CloudFront هي شبكات CDN شائعة.
• تأجيل تحميل الصور خارج الشاشة: طبق التحميل الكسول (lazy loading) للصور غير المرئية على الشاشة فورًا. يمكن أن يحسن هذا بشكل كبير وقت تحميل الصفحة الأولي. يمكن استخدام السمة loading="lazy" للتحميل الكسول البسيط.
• إزالة الموارد التي تعيق العرض: حدد وأزل الموارد التي تعيق عرض صفحتك. يتضمن هذا غالبًا تضمين CSS الحرج وتأجيل CSS و JavaScript غير الحرجين.
• تقليل وقت تنفيذ JavaScript: قم بتحليل كود JavaScript الخاص بك لتحديد وتحسين الوظائف بطيئة التشغيل. يمكن أن تساعد تقنيات مثل تقسيم الكود (code splitting) و tree shaking في تقليل كمية JavaScript التي تحتاج إلى تنزيلها وتنفيذها.

تقنيات متقدمة في Lighthouse CI

بمجرد أن تشعر بالراحة مع أساسيات Lighthouse CI، يمكنك استكشاف بعض التقنيات المتقدمة لتعزيز مراقبة الأداء بشكل أكبر:

• عمليات تدقيق Lighthouse مخصصة: يمكنك إنشاء عمليات تدقيق Lighthouse مخصصة لاختبار مشكلات أداء محددة ذات صلة بتطبيقك.
• تكوين Headless Chrome: قم بتكوين Headless Chrome لاستخدام محاكاة أجهزة معينة أو إعدادات اختناق الشبكة.
• التكامل مع أدوات المراقبة: ادمج Lighthouse CI مع أدوات المراقبة الحالية لديك (مثل New Relic, Datadog) للحصول على رؤية أكثر شمولاً لأداء موقعك.
• اختبار التراجع البصري: ادمج Lighthouse CI مع أدوات اختبار التراجع البصري لاكتشاف التغييرات البصرية التي قد تؤثر على الأداء.

Lighthouse CI للجماهير العالمية: اعتبارات للمواقع الدولية

عند استخدام Lighthouse CI لمواقع الويب التي تستهدف جماهير عالمية، ضع في اعتبارك ما يلي:

• الاختبار من مواقع متعددة: يمكن أن تختلف أوقات استجابة الخادم بشكل كبير بناءً على موقع المستخدم. استخدم شبكة توصيل المحتوى (CDN) وفكر في إجراء عمليات تدقيق Lighthouse CI من مناطق جغرافية مختلفة للحصول على صورة أكثر دقة لأداء المستخدمين الدوليين. يقدم بعض مزودي CI/CD خيارات لتحديد الموقع الجغرافي للمشغل (runner).
• مراعاة ظروف الشبكة: تختلف سرعات الشبكة وزمن الوصول على نطاق واسع في جميع أنحاء العالم. قم بمحاكاة ظروف شبكة مختلفة أثناء عمليات تدقيق Lighthouse CI لفهم كيفية أداء موقعك تحت قيود مختلفة. يسمح لك Lighthouse بخنق اتصال الشبكة، ومحاكاة الاتصالات البطيئة مثل 3G.
• توطين المحتوى: تأكد من أن المحتوى المترجم الخاص بك محسّن بشكل صحيح. وهذا يشمل تحسين الصور للغات ومجموعات الأحرف المختلفة، والترميز الصحيح لتجنب مشاكل العرض.
• تحميل الخطوط: قم بتحسين تحميل الخطوط للغات المختلفة. فكر في استخدام `font-display: swap` لمنع النص من أن يكون غير مرئي أثناء تحميل الخط.
• البرامج النصية للجهات الخارجية: كن حذرًا من البرامج النصية للجهات الخارجية، حيث يمكن أن تؤثر بشكل كبير على الأداء، خاصة للمستخدمين في المناطق ذات الاتصالات الشبكية البطيئة. قم بتدقيق أداء البرامج النصية للجهات الخارجية بانتظام وفكر في استخدام التحميل غير المتزامن أو استضافة البرامج النصية الحرجة بنفسك.
• تحسين الأجهزة المحمولة: ينتشر استخدام الأجهزة المحمولة في أجزاء كثيرة من العالم. تأكد من أن موقعك محسّن للأجهزة المحمولة وأن عمليات تدقيق Lighthouse CI تتضمن اختبارات خاصة بالهاتف المحمول.

استكشاف الأخطاء الشائعة في Lighthouse CI وإصلاحها

فيما يلي بعض المشكلات الشائعة التي قد تواجهها عند استخدام Lighthouse CI وكيفية استكشافها وإصلاحها:

• فشل Lighthouse CI مع خطأ "Timeout": يمكن أن يحدث هذا إذا استغرق موقعك وقتًا طويلاً للتحميل أو إذا لم يتمكن Lighthouse CI من الاتصال بموقعك. حاول زيادة قيمة المهلة في ملف lighthouserc.js الخاص بك أو تحقق من سجلات خادم موقعك بحثًا عن أخطاء.
• تقارير Lighthouse CI بنتائج غير متسقة: يمكن أن تختلف نتائج Lighthouse قليلاً بين عمليات التشغيل بسبب ظروف الشبكة أو عوامل أخرى. قم بإجراء عمليات تدقيق متعددة للحصول على متوسط أكثر استقرارًا.
• فشل Lighthouse CI في تحميل النتائج: تحقق من تكوين upload.target وتأكد من أن خادم Lighthouse CI الخاص بك قيد التشغيل ويمكن الوصول إليه. تحقق أيضًا من أن لديك رمز الوصول الصحيح المكوّن.
• تقارير Lighthouse CI بتراجعات أداء غير متوقعة: تحقق من تغييرات الكود التي تم إجراؤها قبل اكتشاف التراجع. استخدم تقارير Lighthouse CI لتحديد مقاييس الأداء المحددة التي تراجعت وركز جهود التحسين على تلك المناطق.

الخلاصة

Frontend Lighthouse CI هي أداة قوية للمراقبة المستمرة لأداء تطبيقات الويب. من خلال دمج Lighthouse CI في مسار CI/CD الخاص بك، يمكنك تحديد ومعالجة مشكلات الأداء بشكل استباقي، مما يضمن أن موقع الويب الخاص بك يقدم تجربة مستخدم مثالية. تذكر تكييف إعداداتك وقواعد التأكيد ومواقع الاختبار للجماهير العالمية لإنشاء أفضل تجربة ممكنة للمستخدمين في جميع أنحاء العالم.

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