الفحص والجودة
فاحص الأداء — 7 فحوصات و8 مقاييس
سبعة فحوصات وثمانية مقاييس تعمل على ملفات مشروعك قبل النشر، بدرجة أداء من 100.
في هذه الصفحة
الفحوصات السبعة
| الفئة | الخطورة | متى تظهر | الخصم |
|---|---|---|---|
| الحجم | حرِج | المشروع أكبر من 500 كيلوبايت | 20− |
| الحجم | تحذير | المشروع بين 200 و500 كيلوبايت | 10− |
| الصور | تحذير | أكثر من 3 صور بلا loading | 2− لكل صورة، بحد أقصى 15− |
| الطلبات | تحذير | أكثر من 20 رابطاً خارجياً | 10− |
| البنية | معلومة | أكثر من 10 أنماط مضمّنة style="…" | 5− |
| السكربتات | معلومة | لا يوجد defer ولا async مع وجود ملفات JS | 5− |
| الخطوط | معلومة | خطوط Google بلا font-display | 3− |
فحصا الحجم متبادلان: يظهر أحدهما فقط بحسب الشريحة التي يقع فيها المشروع.
المقاييس الثمانية
إلى جانب المشاكل، يُرجع الفاحص القيم الخام. هذه مفيدة للمقارنة عبر الوقت: راقب اتجاه الأرقام بين نسختين من المشروع بدل النظر إلى الدرجة وحدها.
| المقياس | ما يقيسه |
|---|---|
totalSize | حجم كل ملفات المشروع |
htmlSize | حجم ملفات HTML وTSX |
cssSize | حجم ملفات CSS |
jsSize | حجم ملفات JS وTS |
imageCount | عدد وسوم <img> |
externalRequests | عدد الروابط الخارجية |
domDepth | تقدير عمق تشجير DOM |
inlineStyleCount | عدد الأنماط المضمّنة |
أسرع ثلاثة مكاسب
- اضغط الصور. الصور هي الغالبية العظمى من حجم أي مشروع؛ تحويلها إلى WebP وحده يخفض الحجم الكلي بما يكفي عادةً للخروج من الشريحة الحرجة.
- أضف
loading="lazy"لكل صورة تحت الطي. هذا يؤجّل تحميلها إلى ما بعد أول رسم للصفحة. - حوّل الأنماط المضمّنة إلى أصناف Tailwind. الأصناف المتكررة تُضغط أفضل بكثير من تكرار
style="…"في كل عنصر.
الفحوصات الأخرى
للتهيئة لمحركات البحث راجع فاحص SEO، وللثغرات البرمجية راجع الفاحص الأمني.
أسئلة شائعة
هل الفاحص يقيس Core Web Vitals؟
لا. هذا فاحص ثابت يقرأ ملفات المشروع، فيعطي نتيجة فورية قبل النشر لكنه لا يقيس LCP أو INP أو CLS التي تحتاج تحميلاً فعلياً في متصفح. استخدمه للوقاية، وقس القيم الحقيقية بعد النشر.
لماذا يهم حجم المشروع بهذا القدر؟
لأن الحجم هو أقرب مؤشر يمكن قياسه قبل النشر لزمن التحميل، خصوصاً على شبكات الجوال. تجاوز 500 كيلوبايت يُعد حرجاً لأنه يعني عادة صوراً غير مضغوطة.
ما هو FOUT الذي يذكره فحص الخطوط؟
ومضة نص بلا تنسيق: يظهر النص بخط احتياطي ثم يقفز إلى الخط النهائي بعد تحميله. إضافة display=swap تجعل الانتقال متوقعاً بدل إخفاء النص أثناء الانتظار.
كيف أخفض عدد الطلبات الخارجية؟
استضف الخطوط والصور محلياً بدل جلبها من نطاقات أخرى، وادمج ملفات CSS وJS المتفرقة. كل نطاق إضافي يكلّف اتصالاً جديداً قبل أن يبدأ التحميل.