اختبار أداء الواجهة الأمامية: دمج Lighthouse CI للتحسين المستمر

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

لماذا يعد اختبار أداء الواجهة الأمامية مهمًا؟

قبل الغوص في Lighthouse CI، دعنا نفهم لماذا يعد اختبار أداء الواجهة الأمامية أمرًا بالغ الأهمية:

• تجربة المستخدم: يوفر الموقع السريع والمتجاوب تجربة مستخدم أفضل، مما يؤدي إلى زيادة التفاعل وتقليل معدلات الارتداد. تخيل عميلاً محتملاً في طوكيو، اليابان، يحاول شراء منتج من موقع تجارة إلكترونية بطيء التحميل. من المرجح أن يتخلى عن الموقع ويبحث عن بدائل.
• ترتيب SEO: تعتبر محركات البحث مثل جوجل سرعة وأداء الموقع من عوامل الترتيب. تميل المواقع الأسرع إلى الحصول على ترتيب أعلى في نتائج البحث، مما يجلب المزيد من الزيارات العضوية. تؤكد مبادرة مؤشرات أداء الويب الأساسية (Core Web Vitals) من جوجل على أهمية عوامل مثل Largest Contentful Paint (LCP) و First Input Delay (FID) و Cumulative Layout Shift (CLS) لتحسين محركات البحث.
• إمكانية الوصول: غالبًا ما تؤدي تحسينات الأداء إلى إمكانية وصول أفضل للمستخدمين ذوي الإعاقة. يمكن للكود والصور المحسّنة تحسين التجربة للمستخدمين الذين يعتمدون على قارئات الشاشة أو أولئك الذين لديهم نطاق ترددي محدود.
• معدلات التحويل: يمكن أن يؤثر الموقع الأسرع بشكل مباشر على معدلات التحويل. أظهرت الدراسات أن تأخيرًا لمدة ثانية واحدة في وقت تحميل الصفحة يمكن أن يؤدي إلى انخفاض كبير في التحويلات. فكر في مستخدم في مومباي، الهند، يحاول حجز رحلة طيران. قد تؤدي عملية الحجز البطيئة إلى التخلي عن الشراء واختيار منافس.
• تحسين الموارد: يساعد اختبار الأداء في تحديد المجالات التي يمكن فيها تحسين الموارد، مما يؤدي إلى توفير التكاليف من حيث البنية التحتية للخادم واستخدام النطاق الترددي.

تقديم Lighthouse CI

Lighthouse CI هي أداة آلية مفتوحة المصدر مصممة للتكامل بسلاسة مع خط أنابيب CI/CD الخاص بك. تقوم بتشغيل Lighthouse، وهي أداة تدقيق شائعة طورتها جوجل، وتوفر رؤى حول أداء موقع الويب الخاص بك، وإمكانية الوصول، وتحسين محركات البحث، وأفضل الممارسات، وتوافق تطبيقات الويب التقدمية (PWA). يساعدك Lighthouse CI على:

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

إعداد Lighthouse CI

إليك دليل خطوة بخطوة لإعداد Lighthouse CI في مشروعك:

1. تثبيت Lighthouse CI

ثبّت واجهة سطر أوامر Lighthouse CI (CLI) عالميًا باستخدام npm أو yarn:

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

              
                Copy
              
            
          

2. تكوين Lighthouse CI

أنشئ ملف lighthouserc.js في الدليل الجذر لمشروعك لتكوين Lighthouse CI. إليك مثال على التكوين:

            module.exports = {
  ci:
{
    collect:
{
      url: ['http://localhost:3000', 'http://localhost:3000/about'],
      startServerCommand: 'npm start',
      numberOfRuns: 3,
    },
    assert:
{
      assertions:
{
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 1 }],
        'categories:best-practices': ['warn', { minScore: 0.9 }],
        'categories:seo': ['warn', { minScore: 0.9 }],
        'categories:pwa': ['off'],
        'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 4000 }],
        'total-blocking-time': ['warn', { maxNumericValue: 200 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
      },
    },
    upload:
{
      target: 'temporary-redirect',
    },
  },
};

            

              
                Copy
              
            
          

دعنا نحلل هذا التكوين:

• collect.url: مصفوفة من عناوين URL للتدقيق. هذا المثال يدقق الصفحة الرئيسية وصفحة "حول". يجب أن تدرج جميع الصفحات الهامة في موقع الويب الخاص بك، مع مراعاة حالات الاستخدام المختلفة. على سبيل المثال، قد يتضمن موقع للتجارة الإلكترونية الصفحة الرئيسية، وصفحات قائمة المنتجات، وصفحات تفاصيل المنتج، وعملية الدفع.
• collect.startServerCommand: الأمر لبدء خادم التطوير الخاص بك. هذا ضروري إذا كان Lighthouse CI بحاجة إلى التشغيل مقابل بيئة تطوير محلية.
• collect.numberOfRuns: عدد المرات التي يتم فيها تشغيل تدقيقات Lighthouse لكل عنوان URL. يساعد تشغيل تدقيقات متعددة في التخفيف من الاختلافات في ظروف الشبكة والعوامل الأخرى.
• assert.assertions: مجموعة من التأكيدات للتحقق من صحة نتائج تدقيق Lighthouse. يحدد كل تأكيد مقياسًا أو فئة وعتبة. إذا لم يتم استيفاء العتبة، فسيفشل البناء. يحدد هذا المثال عتبات لفئات الأداء وإمكانية الوصول وأفضل الممارسات و SEO. كما يحدد عتبات لمقاييس محددة مثل First Contentful Paint (FCP) و Largest Contentful Paint (LCP) و Total Blocking Time (TBT) و Cumulative Layout Shift (CLS).
• upload.target: يحدد مكان تحميل تقارير Lighthouse. يقوم temporary-redirect بتحميل التقارير إلى موقع تخزين مؤقت ويوفر عنوان URL للوصول إليها. تشمل الخيارات الأخرى استخدام خادم Lighthouse CI أو حلول التخزين السحابي مثل Google Cloud Storage أو Amazon S3.

3. التكامل مع نظام CI/CD الخاص بك

الخطوة التالية هي دمج Lighthouse CI في خط أنابيب CI/CD الخاص بك. إليك مثال على كيفية دمجه مع GitHub Actions:

أنشئ ملف .github/workflows/lighthouse.yml في مستودعك:

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install Dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |          npm run build
          lhci autorun

            

              
                Copy
              
            
          

يقوم سير العمل هذا بالخطوات التالية:

• يسحب الكود (checks out the code).
• يُعد Node.js.
• يثبت الاعتماديات.
• يشغل Lighthouse CI. تقوم هذه الخطوة أولاً ببناء التطبيق (npm run build)، ثم تشغل lhci autorun، الذي ينفذ تدقيقات Lighthouse ويؤكد النتائج مقابل العتبات المكونة.

قم بتكييف سير العمل هذا مع نظام CI/CD ومتطلبات مشروعك المحددة. على سبيل المثال، إذا كنت تستخدم GitLab CI، فستقوم بتكوين ملف .gitlab-ci.yml بخطوات مماثلة.

4. تشغيل Lighthouse CI

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

التكوين المتقدم والتخصيص

يقدم Lighthouse CI مجموعة واسعة من خيارات التكوين وإمكانيات التخصيص. إليك بعض الميزات المتقدمة:

1. استخدام خادم Lighthouse CI

يوفر خادم Lighthouse CI لوحة تحكم مركزية لتتبع مقاييس الأداء بمرور الوقت، وإدارة المشاريع، والتعاون في حل مشكلات الأداء. لاستخدام خادم Lighthouse CI، تحتاج إلى إعداد مثيل وتكوين ملف lighthouserc.js الخاص بك لتحميل التقارير إلى الخادم.

أولاً، قم بنشر الخادم. هناك العديد من خيارات النشر المتاحة، بما في ذلك Docker و Heroku وموفرو الخدمات السحابية مثل AWS و Google Cloud. ارجع إلى وثائق Lighthouse CI للحصول على إرشادات مفصلة حول نشر الخادم.

بمجرد تشغيل الخادم، قم بتحديث ملف lighthouserc.js الخاص بك للإشارة إلى الخادم:

            module.exports = {
  ci:
{
    collect: {
      url: ['http://localhost:3000'],
      startServerCommand: 'npm start',
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }],
      },
    },
    upload:
{
      target: 'lhci',
      serverBaseUrl: 'YOUR_LHCI_SERVER_URL',
      token: 'YOUR_LHCI_SERVER_TOKEN',
    },
  },
};

            

              
                Copy
              
            
          

استبدل YOUR_LHCI_SERVER_URL بعنوان URL لخادم Lighthouse CI الخاص بك و YOUR_LHCI_SERVER_TOKEN برمز مميز تم إنشاؤه بواسطة الخادم. يقوم الرمز المميز بمصادقة خط أنابيب CI الخاص بك مع الخادم.

2. تحديد ميزانيات الأداء

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

يمكنك تحديد ميزانيات الأداء في ملف lighthouserc.js الخاص بك باستخدام خاصية assert.assertions. على سبيل المثال، لتعيين ميزانية أداء لـ First Contentful Paint (FCP)، يمكنك إضافة التأكيد التالي:

            'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
            

              
                Copy
              
            
          

سيؤدي هذا التأكيد إلى فشل البناء إذا كان FCP أكبر من 2500 مللي ثانية.

3. تخصيص تكوين Lighthouse

يتيح لك Lighthouse CI تخصيص تكوين Lighthouse ليناسب احتياجاتك الخاصة. يمكنك تكوين إعدادات Lighthouse المختلفة، مثل:

• onlyAudits: تحديد قائمة بالتدقيقات التي سيتم تشغيلها.
• skipAudits: تحديد قائمة بالتدقيقات التي سيتم تخطيها.
• throttling: تكوين إعدادات تقييد الشبكة لمحاكاة ظروف الشبكة المختلفة.
• formFactor: تحديد عامل الشكل (سطح المكتب أو الجوال) للمحاكاة.
• screenEmulation: تكوين إعدادات محاكاة الشاشة.

لتخصيص تكوين Lighthouse، يمكنك تمرير علامة --config-path إلى أمر lhci autorun، مشيرًا إلى ملف تكوين Lighthouse مخصص. ارجع إلى وثائق Lighthouse للحصول على قائمة كاملة بخيارات التكوين.

4. تدقيق الصفحات التي تتطلب مصادقة

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

أحد الأساليب الشائعة هو استخدام علامة --extra-headers لتمرير ملفات تعريف ارتباط المصادقة إلى Lighthouse CI. يمكنك الحصول على ملفات تعريف الارتباط من أدوات المطور في متصفحك بعد تسجيل الدخول إلى موقع الويب.

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

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

• تشغيل Lighthouse CI بانتظام: ادمج Lighthouse CI في خط أنابيب CI/CD الخاص بك لتشغيل التدقيقات تلقائيًا مع كل commit أو طلب سحب. يضمن هذا اكتشاف تراجعات الأداء مبكرًا ومعالجتها على الفور.
• تحديد ميزانيات أداء واقعية: حدد ميزانيات أداء صعبة ولكن قابلة للتحقيق. ابدأ بميزانيات متحفظة وشددها تدريجيًا مع تحسن أداء موقع الويب الخاص بك. ضع في اعتبارك تحديد ميزانيات مختلفة لأنواع مختلفة من الصفحات، اعتمادًا على تعقيدها وأهميتها.
• التركيز على المقاييس الرئيسية: أعطِ الأولوية لمقاييس الأداء الرئيسية التي لها أكبر تأثير على تجربة المستخدم ونتائج الأعمال. تعد مؤشرات أداء الويب الأساسية من جوجل (LCP و FID و CLS) نقطة انطلاق جيدة.
• التحقيق في مشكلات الأداء ومعالجتها: عندما يحدد Lighthouse CI مشكلات الأداء، قم بالتحقيق فيها بدقة وتنفيذ الحلول المناسبة. استخدم تقارير Lighthouse لتحديد الأسباب الجذرية للمشكلات وتحديد أولويات الإصلاحات الأكثر تأثيرًا.
• مراقبة الأداء بمرور الوقت: تتبع مقاييس الأداء بمرور الوقت لتحديد الاتجاهات والأنماط. استخدم خادم Lighthouse CI أو أدوات المراقبة الأخرى لتصور بيانات الأداء وتحديد مجالات التحسين.
• تثقيف فريقك: تأكد من أن فريقك يفهم أهمية أداء الواجهة الأمامية وكيفية استخدام Lighthouse CI بفعالية. قدم التدريب والموارد لمساعدتهم على تحسين مهاراتهم ومعرفتهم.
• مراعاة ظروف الشبكة العالمية: عند تحديد ميزانيات الأداء، ضع في اعتبارك ظروف الشبكة في أجزاء مختلفة من العالم. قد يكون لدى المستخدمين في المناطق ذات سرعات الإنترنت الأبطأ تجربة مختلفة عن المستخدمين في المناطق ذات السرعات الأعلى. استخدم أدوات لمحاكاة ظروف الشبكة المختلفة أثناء الاختبار.
• تحسين الصور: يعد تحسين الصور جانبًا مهمًا من أداء الواجهة الأمامية. استخدم أدوات مثل ImageOptim أو TinyPNG أو المحولات عبر الإنترنت لضغط الصور وتحسينها دون فقدان الجودة. استخدم تنسيقات الصور الحديثة مثل WebP، التي توفر ضغطًا وجودة أفضل من التنسيقات التقليدية مثل JPEG و PNG. قم بتنفيذ التحميل الكسول (lazy loading) للصور غير المرئية على الفور في منفذ العرض.
• تصغير وضغط الكود: قم بتصغير كود HTML و CSS و JavaScript لتقليل أحجام الملفات. استخدم أدوات مثل UglifyJS أو Terser أو مصغرات عبر الإنترنت. قم بتمكين ضغط Gzip أو Brotli على الخادم الخاص بك لتقليل حجم الملفات المنقولة بشكل أكبر.
• الاستفادة من التخزين المؤقت للمتصفح: قم بتكوين الخادم الخاص بك لتعيين رؤوس ذاكرة التخزين المؤقت المناسبة للأصول الثابتة مثل الصور وملفات CSS و JavaScript. يتيح ذلك للمتصفحات تخزين هذه الأصول مؤقتًا وتجنب تنزيلها بشكل متكرر.

الخلاصة

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