تدقيق الأداء وإصلاحه

الهدف

لديك تطبيق React يعاني من مشاكل أداء حادة. مهمتك هي تحديد وإصلاح المشاكل التي تؤثر على جميع مقاييس Core Web Vitals الثلاثة: LCP و CLS و INP.

التطبيق المشكل

التطبيق هو صفحة قائمة منتجات تحتوي على مشاكل أداء متعمدة:

مشاكل LCP

• صورة البطل بحجم 2 ميغابايت بتنسيق PNG غير محسّن بدون سمات عرض/ارتفاع
• ثلاثة خطوط Google تحجب العرض مُحمّلة عبر <link> في الرأس
• جميع CSS في حزمة واحدة كبيرة (بدون استخراج CSS حرج)
• لا يوجد تحميل مسبق لصورة البطل

مشاكل CLS

• صور المنتجات بدون عرض/ارتفاع أو نسبة عرض إلى ارتفاع محددة
• لافتة ترويجية تُدرج ديناميكيًا بعد ثانيتين
• تبديل خط الويب يسبب إزاحة تخطيط مرئية (بدون size-adjust)
• مساحة إعلانية بدون ارتفاع محجوز

مشاكل INP

• تصفية المنتجات تُشغّل حلقة متزامنة على 10,000 عنصر عند كل ضغطة مفتاح
• دالة الترتيب تحجب الخيط الرئيسي لأكثر من 300 مللي ثانية
• معالجات النقر تُطلق إعادة حسابات تخطيط متزامنة (إعادة تدفق قسرية)

مهامك

المهمة 1: إصلاح LCP (35 نقطة)

• حوّل صورة البطل لاستخدام <picture> مع مصادر AVIF/WebP وبديل JPG
• أضف width و height و fetchpriority="high" لصورة البطل
• أضف <link rel="preload"> لصورة البطل
• استخدم font-display: swap للخطوط المخصصة وحمّل ملف الخط الأساسي مسبقًا
• استخرج CSS الحرج فوق الطي في كتلة <style> مضمنة

المهمة 2: إصلاح CLS (30 نقاط)

• أضف سمات width و height (أو CSS aspect-ratio) لجميع صور المنتجات
• احجز مساحة للافتة الترويجية باستخدام min-height قبل تحميلها
• أضف size-adjust و ascent-override و descent-override لقاعدة @font-face لتقليل إزاحة تبديل الخط
• حدد min-height ثابتًا لحاوية المساحة الإعلانية

المهمة 3: إصلاح INP (35 نقطة)

• أجّل إدخال البحث/التصفية بتأخير 300 مللي ثانية
• قسّم تصفية المنتجات لدفعات باستخدام setTimeout(fn, 0) أو scheduler.yield() للتنازل للخيط الرئيسي
• انقل مقارنة الترتيب لـ Web Worker أو قسّمها لدفعات متنازلة
• استبدل أنماط إعادة التدفق القسرية (قراءة offsetHeight بعد كتابة الأنماط) بتجميع requestAnimationFrame

كود البداية

يمثل كود البداية أدناه التطبيق المعطل. أصلح المشاكل في مكانها.

معايير التقييم

سيتم تقييم تقديمك بناءً على ما إذا كانت الإصلاحات تعالج بشكل صحيح كل مشكلة Core Web Vital. لا تحتاج لتشغيل Lighthouse — معايير التقييم تتحقق من كودك لأنماط التحسين المحددة.