في مارس 2024، استبدلت جوجل رسمياً مؤشر FID (First Input Delay) بمقياس جديد أكثر دقة وصرامة يُدعى تفاعل الصفحة مع النقرات (Interaction to Next Paint – INP) ليصبح أحد أركان مؤشرات أداء الويب الأساسية (Core Web Vitals) التي تؤثر مباشرة على تصنيف المواقع وسرعة تصدرها في نتائج البحث. بينما كان المقياس القديم يفحص فقط أول تفاعل للمستخدم، يراقب INP جميع التفاعلات (النقرات، الضغط على الأزرار، فتح القوائم، وتعبئة الحقول) طوال فترة بقاء الزائر في الصفحة. في هذا الدليل التقني، نتعمق في كيفية قياس وتحسين INP برمجياً لضمان اجتياز تقييمات جوجل بنجاح.
1. ما هو مؤشر INP وما هي القيم المقبولة؟
يقيس INP أطول فترة زمنية تفصل بين إجراء المستخدم لتفاعل ما على الصفحة (مثل النقر على زر إرسال أو فتح قائمة منسدلة) ولحظة قيام المتصفح برسم الإطار المرئي التالي (Next Paint) استجابةً لذلك التفاعل. وتنقسم درجات التقييم إلى:
- أداء ممتاز (Good): 200 مللي ثانية أو أقل (يضمن تجربة سلسة بدون أي بطء ملحوظ).
- يحتاج إلى تحسين (Needs Improvement): بين 200 و 500 مللي ثانية.
- أداء سيئ (Poor): أكثر من 500 مللي ثانية (يشعر المستخدم بتجمد الصفحة أو ثقل الاستجابة).
2. الأسباب الهندسية لارتفاع زمن INP
ينتج تأخر رسم الإطار المرئي عن ثلاثة عوامل رئيسية تحدث على الخيط الرئيسي للمتصفح (Main Thread):
- تأخير الإدخال (Input Delay): الوقت الذي ينتظره التفاعل لأن الخيط الرئيسي مشغول بتنفيذ أكواد جافاسكريبت أخرى في الخلفية.
- مدة تنفيذ المعالج (Processing Duration): الوقت الذي تستغرقه الدوال البرمجية المرتبطة بحدث النقر لتنفيذ منطق الكود.
- تأخير العرض والرسم (Presentation Delay): الوقت الذي يحتاجه المتصفح لحساب التخطيط (Recalculate Style & Layout) ورسم البكسلات على الشاشة.
3. الحلول البرمجية لتقليل زمن INP
لتحسين استجابة موقعك واجتياز فحوصات PageSpeed Insights و Search Console، طبق الحلول الهندسية التالية:
أ. تجزئة المهام الطويلة باستخدام yieldToMain أو scheduler.yield()
إذا كانت لديك عمليات جافاسكريبت تستغرق أكثر من 50 مللي ثانية (Long Tasks)، فقم بتجزئتها للسماح للمتصفح بالاستجابة لتفاعلات المستخدم بين المهام:
async function handleComplexClick(event) {
// تحديث فوري لواجهة المستخدم (Feedback فوري)
showLoadingSpinner();
// إفساح المجال للمتصفح لرسم التغيير
await scheduler.yield ? scheduler.yield() : new Promise(r => setTimeout(r, 0));
// إكمال العمليات الحسابية أو إرسال البيانات
processHeavyData();
}
ب. تقليل كود الجافاسكريبت غير الضروري ومراجعة مكتبات الطرف الثالث
تُعد أكواد التتبع الخارجية وإضافات المحادثة الحية من أكبر مسببات تعطيل الخيط الرئيسي. احرص على تأخير تحميلها (Defer) أو تشغيلها فقط بعد اكتمال تحميل العناصر الأساسية للصفحة وتفاعل الزائر.
ج. تبسيط بنية شجرة عناصر DOM
التعقيد المفرط في تفرعات HTML (أكثر من 1500 عنصر في الصفحة الواحدة) يزيد بشكل هائل من زمن إعادة حساب التخطيط (Style Recalculation) عند كل تفاعل.
هندسة المواقع عالية الأداء والسرعة
في شركة الخواطر الجزيرة للحلول الرقمية، نصمم المنصات البرمجية دون الاعتماد على مكتبات ثقيلة أو إضافات معقدة. نعتمد معايير هندسية متقدمة في تطوير المواقع الخفيفة السريعة والاستضافة السحابية عالية الكفاءة لضمان تحقيق أعلى مؤشرات الأداء وتصدر محركات البحث.






