إزاي تقيس ال performance لل UI في الFront end باستخدام Lighthouse

بعد متشغل ال Light House بتظهر result متقسمة لأربع اقسام (performance, seo, best practice, accessibility )

في قسم ال performance بتعرف قوة الأداء بتاعت ال UI من مجموعة مقاييس و المشاكل الي فيها وازاي تحسنها

1. المقاييس الأساسية

FCP (First Contentful Paint): أول لحظة يظهر فيها "أي حاجة" على الشاشة (نص أو صورة).

LCP (Largest Contentful Paint): ده وقت تحميل أكبر عنصر في الصفحة (غالباً صورة الهيرو أو عنوان كبير). لازم يكون أقل من 2.5 ثانية.

TBT (Total Blocking Time): الوقت اللي الصفحة بتكون فيه "مهنجة" ومش راضية تستجيب لضغطات المستخدم بسبب إن الـ JavaScript شغال تقيل في الـ Background.

CLS (Cumulative Layout Shift): هل العناصر بتتحرك من مكانها وأنت بتتصفح؟ (زي إعلان يظهر فجأة يشفت المحتوى لتحت). ده بيقيس استقرار التصميم، والمثالي إنه يكون صفر.

2. قسم الفرص (Opportunities Section)

ده الكنز اللي Lighthouse بيقدمه لك. بيقولك انا لقيت مشاكل، ودي الحلول:
مثلا :
Eliminate render-blocking resources: بيقولك عندك ملفات CSS أو JS محملة في الأول ومعطلة الصفحة. (الحل: استخدم defer أو async).

Properly size images: بيقولك إنت رافع صورة 2MB وعارضها في مربع صغير. (الحل: اعمل Resize للصور).

Efficiently encode images: حول صورك لصيغ حديثة زي WebP أو AVIF.

3. قسم التشخيص (Diagnostics)

هنا بنعرف مشاكل الـ Structure نفسها:
مثلا:
Reduce JavaScript execution time: الكود بتاعك تقيل وبياخد وقت طويل في المعالجة.

Avoid an excessive DOM size: الصفحة فيها Elements كتيرة جداً وده بيرهق المتصفح.

Minimize main-thread work: السيرفر أو الـ Browser مشغولين بحسابات كتير بتعطل عرض الصفحة.

إزاي توصل للscore 100؟

للصور: استخدم Lazy loading و Image CDNs.

للكود: اعمل Code Splitting (حمل بس الكود اللي الصفحة محتاجاه حالياً).

للخطوط: استخدم font-display: swap عشان النص يظهر فوراً بخط النظام لحد ما خطك يتحمل.

للـ Caching: فعل الـ Browser Cache عشان المتصفح ما يحملش نفس الملفات كل مرة.

نصيحة :

ما تعتمدش على جهازك القوي ونت الشركة السريع وأنت بتعمل Test. الـ Lighthouse بيعمل (تقليل وهمي للسرعة) عشان يحاكي مستخدم معاه موبايل قديم ونت ضعيف.

المجتمع الأكبر للعرب في مجال التك