مستوى المقال: متوسط
Lighthouse CI للمتوسط: امنع تدهور Performance قبل ما يوصل الإنتاج
لو فريقك دفع deploy يوم تلات و LCP قفز من 1.2 ثانية لـ 4.8 ثانية، ومحدّش لاحظ لحد ما العملاء ابتدوا يشتكوا يوم سبت، انت بتدفع تكلفة غياب performance budget في الـ CI. Lighthouse CI بـ workflow صغير بيمنع الـ regression قبل ما يلمس الإنتاج، ويرفض الـ Pull Request لو حد كسر Core Web Vitals.
المشكلة باختصار
الفريق بيركّز على Performance وقت إطلاق المنتج بس. بعد كده كل deploy جديد بيضيف Bundle أكبر شوية، أو dependency تقيلة، أو صورة غير مضغوطة. التدهور بيتراكم على مدى أسابيع. الكود زي ما هو، الـ CDN زي ما هو، بس المستخدم بيشوف صفحة بطيئة. الـ monitoring في الإنتاج بيكتشف المشكلة بعد ما تأثر فعلاً، مش قبلها. والـ rollback في النقطة دي بقى مكلّف لأن الفريق دفع 14 PR فوق بعض في 3 أسابيع.
المثال للمبتدئ: ميزان المخبز
تخيّل مخبز بيخبز كرواسون. كل صباح الخبّاز بيوزن العجين قبل ما يدخل الفرن. لو الوزن زاد عن 250 جرام، الكرواسون بيكبر زيادة، الزبدة بتطلع منه، وميتباعش. الميزان مش بيحسّن الجودة لوحده، لكنه بيمنع الإنتاج الغلط من يخرج من المخبز للزباين أصلاً.
Lighthouse CI هو الميزان ده للكود. بيقيس الـ Bundle Size و LCP و TBT قبل ما الـ Pull Request يندمج في main. لو الأرقام عدّت الحد المسموح، PR بيتغلق تلقائياً وبيرجّع للمطوّر يشوف هو ضيف إيه ضرّ الـ Performance.
الشرح العلمي: Core Web Vitals و Performance Budgets
Lighthouse هو أداة Google Chrome مفتوحة المصدر بتحاكي تحميل صفحة على شبكة 4G بطيئة و CPU بضعف موبايل متوسط (4x slowdown). بترجع مجموعة مقاييس، أهمهم الـ Core Web Vitals الرسمية من Google:
- LCP (Largest Contentful Paint): الوقت لظهور أكبر عنصر مرئي. الحد الجيد: ≤ 2.5 ثانية.
- INP (Interaction to Next Paint): زمن استجابة الكليك. الحد الجيد: ≤ 200ms.
- CLS (Cumulative Layout Shift): مقدار قفز العناصر بعد التحميل. الحد الجيد: ≤ 0.1.
- TBT (Total Blocking Time): الوقت اللي main thread فيه مقفول. الحد الجيد: ≤ 200ms (proxy للـ INP في الـ lab).
Lighthouse CI بيشغّل Lighthouse في environment ثابت داخل GitHub Actions أو GitLab CI أو Jenkins، بيقارن النتائج مع budgets معرّفة في ملف JSON. لو أي metric عدّى الحد، الـ workflow بيرجّع exit code != 0، والـ branch protection rule بيمنع الـ merge.
الإعداد التنفيذي في 4 خطوات
- ثبّت
@lhci/cliكـ devDependency في المشروع. - أنشئ ملف
lighthouserc.jsonفيه الـ budgets. - ضيف GitHub Actions workflow بيشغّل LHCI على كل PR.
- اربطه بالـ branch protection rules بحيث ميقدرش حد يـ merge بدون نجاح الـ check.
