العلامات الحيوية: إتقان INP وCWV
تتغير مؤشرات أداء الويب الأساسية. تهتم Google بالتفاعل مع Next Paint. كيف نقوم بتعريف مهام حظر الخيط الرئيسي وتحسينها.
تُعد مؤشرات أداء الويب الأساسية (CWV) من Google المقياس النهائي لسلامة الويب. في عام 2025، تحول التركيز بالكامل إلى INP (التفاعل مع الطلاء التالي). FID (تأخير الإدخال الأول) ميت.
ما هو INP؟
يقيس INP مدى استجابة موقعك بعد تحميله. عندما ينقر المستخدم على “فتح القائمة”، كم عدد المللي ثانية التي تمر قبل أن تتحرك القائمة فعليًا؟ إذا كانت وحدة المعالجة المركزية مشغولة بتحليل برنامج نصي للتتبع بحجم 2 ميجابايت، فلن تتحرك القائمة. يشعر المستخدم “بالتأخر”.
استراتيجيات التحسين
1. الاستسلام للموضوع الرئيسي
نقوم بتقسيم المهام الطويلة باستخدام scheduler.yield() أو setTimeout.
بدلاً من معالجة 1000 منتج في حلقة واحدة (حظر واجهة المستخدم لمدة 500 مللي ثانية)، نقوم بمعالجتها في أجزاء مكونة من 50 منتجًا، مما يسمح للمتصفح برسم الإطارات بينهما.
2. الرفض والخنق
قم بتمرير المستمعين وتغيير حجم الأحداث مئات المرات في الثانية. نقوم بتضمينها في وظائف “debounce” لضمان تشغيلها فقط بعد توقف المستخدم عن الحركة.
3. CSS للرسوم المتحركة
نحن نطبق بشكل صارم خصائص المركب فقط للرسوم المتحركة (“التحويل” و”التعتيم”). يؤدي تحريك “الارتفاع” أو “اليسار” إلى إجبار المتصفح على إعادة حساب تخطيط الصفحة بأكملها (إعادة التدفق)، مما يؤدي إلى تدمير الأداء على الأجهزة المحمولة.
##الأدوات نحن نستخدم Lighthouse CI في خط أنابيب GitHub Actions الخاص بنا. لا يمكن للمطور دمج طلب السحب إذا أدى إلى خفض درجة المنارة إلى أقل من 90. الأداء يحكمه الكود وليس الوعود.