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

الهدف

لديك تطبيق 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 قبل تحميلها
• عرّف قاعدة @font-face ثانية للخط البديل (src: local(...)) تحمل size-adjust وascent-override وdescent-override مضبوطة على مقاييس BrandFont، وضعها في سلسلة font-family قبل الخط العام. لا تضع هذه الواصفات على قاعدة BrandFont نفسها — فذلك يغيّر طريقة عرض BrandFont بدل مطابقة البديل به
• حدد min-height ثابتًا لحاوية المساحة الإعلانية

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

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

كود البداية

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

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

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

---

ما يجب تقديمه

يجب أن يحتوي تقديمك على قسم ملف واحد في المحرر أدناه: كود تطبيق React المُصلح مع حل جميع مشاكل الأداء.