Frontend Academy · درس

عمليات تدقيق Lighthouse والتقييم

شغّل Lighthouse في DevTools أو CI، واقرأ تقييم الأداء والتشخيصات، ورتّب فرص التحسين ذات أكبر وفورات.

عمليات تدقيق Lighthouse والتقييم درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ما هو Lighthouse؟

Lighthouse هي أداة تدقيق مفتوحة المصدر من Google تحاكي تحميل الصفحة وتمنحها درجات في فئات الأداء، وإمكانية الوصول، وأفضل الممارسات، وSEO، وPWA. وهي مدمجة في Chrome DevTools ويمكن تشغيلها من CLI أو CI.

تشغيل Lighthouse في DevTools

افتح DevTools، وانقر على علامة تبويب Lighthouse، واختر الفئات والجهاز (الهاتف المحمول أو سطح المكتب)، ثم انقر على 'Analyze page load'. يستغرق الاختبار المحاكى نحو 30 ثانية.

تفصيل درجة الأداء

درجة الأداء (من 0 إلى 100) هي متوسط موزون لكل من: LCP (25%)، وTotal Blocking Time (30%)، وCLS (25%)، وFCP (10%)، وSpeed Index (10%). المعيار مرتفع؛ إذ تُعد الدرجة 90 أو أكثر «جيدة».

الرسم الأول للمحتوى (FCP)

يشير FCP إلى لحظة رسم أول جزء من المحتوى، سواء كان نصًا أو صورة. وهو يختلف عن LCP؛ إذ يهتم FCP بأي محتوى، بينما يهتم LCP بأكبر عنصر. الجيد: أقل من 1.8 ثانية.

إجمالي وقت الحظر (TBT)

يقيس TBT المدة التي يُحظر فيها الخيط الرئيسي بسبب مهام JavaScript التي تتجاوز مدتها 50ms. يشير ارتفاع TBT إلى أن الصفحة تبدو غير مستجيبة حتى إذا بدت جاهزة.

قراءة قسم فرص التحسين

يسرد Lighthouse «فرص التحسين» مع مقدار التوفير المقدّر، مثل: 'Eliminate render-blocking resources: 1.2s'. رتّبها حسب مقدار التوفير؛ وأصلح العناصر الأكبر أولًا لتحقيق أقصى تأثير.

فرص التحسين الشائعة

تشمل الإصلاحات الشائعة: تأجيل البرامج النصية غير المهمة أو تحميلها بشكل غير متزامن، وتضمين CSS الحرج، والتحميل المسبق للطلبات الأساسية، واستخدام CDN، وتمكين ضغط النصوص (Brotli أو gzip)، وتقديم صيغ الصور الحديثة.

واجهة Lighthouse لسطر الأوامر

شغّل Lighthouse من سطر الأوامر لإجراء عمليات تدقيق آلية.

npm install -g lighthouse

lighthouse https://example.com \
  --output html \
  --output-path ./report.html \
  --chrome-flags="--headless"

Lighthouse CI في GitHub Actions

أجرِ عمليات التدقيق مع كل طلب سحب، وأفشل عملية البناء إذا انخفضت الدرجات عن الحدود المحددة.

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [pull_request]
jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci && npm run build
      - uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: ./lighthouserc.json

إعداد Lighthouse: تأكيدات الدرجات

حدّد التأكيدات في lighthouserc.json لإفشال طلبات السحب التي تؤدي إلى تراجع الدرجات.

{
  "ci": {
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }]
      }
    }
  }
}

تقييد السرعة ومحاكاة الجهاز

يحاكي Lighthouse افتراضيًا شبكة 4G بطيئة ووحدة معالجة مركزية للهاتف المحمول من الفئة المتوسطة. وهذا مقصود؛ فالمستخدمون في بيئة الإنتاج على أجهزة فعلية أبطأ من جهاز التطوير الخاص بك.

تباين الدرجات — سبب التذبذب

تتذبذب درجات Lighthouse بين عمليات التشغيل بسبب اختلاف توقيت تنفيذ JavaScript. أجرِ عمليات التدقيق من 3 إلى 5 مرات، وخذ الوسيط. استخدم numberOfRuns في Lighthouse CI لحساب الوسيط تلقائيًا.

تحقق سريع

أي مقياس في Lighthouse يقيس المدة التي يُحظر فيها الخيط الرئيسي بسبب مهام JavaScript الطويلة؟

مراجعة: Lighthouse

يدقق Lighthouse في الأداء، وإمكانية الوصول، وأفضل الممارسات، وSEO، وPWA. درجة الأداء هي متوسط موزون لكل من LCP وTBT وCLS وFCP وSpeed Index. يرتّب قسم فرص التحسين الإصلاحات حسب مقدار التوفير المقدّر. شغّله باستخدام DevTools أو CLI أو CI مع treosh/lighthouse-ci-action. وبسبب تباين الدرجات، خذ وسيط عدة عمليات تشغيل.

الأسئلة الشائعة

هل درس «عمليات تدقيق Lighthouse والتقييم» مجاني؟

نعم — نص درس «عمليات تدقيق Lighthouse والتقييم» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «عمليات تدقيق Lighthouse والتقييم»؟

شغّل Lighthouse في DevTools أو CI، واقرأ تقييم الأداء والتشخيصات، ورتّب فرص التحسين ذات أكبر وفورات. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «عمليات تدقيق Lighthouse والتقييم»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

مؤشرات أداء الويب الأساسية: LCP وFID وCLS
عمليات تدقيق Lighthouse والتقييم
تحسين الصور: التحميل الكسول والصيغ وWebP
تقسيم الشيفرة والمسارات الكسولة

← العودة إلى Frontend Academy