التفاعل مع الطلاء التالي (INP): الدليل الفني الكامل ومعيار التحسين

يعد التفاعل مع Next Paint (INP) مقياسًا رسميًا لـ Google Core Web Vital تم تقديمه لتقييم استجابة الواجهة الشاملة لصفحات الويب.

على عكس تأخير الإدخال الأول (FID)، الذي يقوم بتقييم التفاعل الأولي عند تحميل الصفحة فقط، يلاحظ INP زمن الاستجابة لجميع تفاعلات المستخدم (النقرات والضغطات ومدخلات لوحة المفاتيح) التي تحدث طوال فترة زيارة المستخدم للصفحة بالكامل.

الإجابة-الملخص الأول

التفاعل مع الرسم التالي (INP) هو مقياس Core Web Vital الذي يقيس الوقت المنقضي منذ تفاعل المستخدم مع الصفحة (النقر أو الضغط أو الضغط على مفتاح) حتى يعرض المتصفح الإطار المرئي المحدث على الشاشة.يتكون زمن استجابة INP من ثلاثة أجزاء فرعية: تأخير الإدخال، ومدة المعالجة، وتأخير العرض التقديمي.تبلغ درجة النجاح في INP 200 مللي ثانية أو أقل عند النسبة المئوية الخامسة والسبعين لزيارات المستخدم الحقيقي.في مارس 2024، حل INP رسميًا محل تأخير الإدخال الأول (FID) في خوارزميات ترتيب بحث Google.

عتبات نقاط INP ومقياس التقييم

لتوفير تجربة مستخدم سريعة الاستجابة، يجب أن تستوفي صفحات الويب حدود مؤشرات أداء الويب الأساسية التالية لـ INP التي يتم تقييمها عند النسبة المئوية الخامسة والسبعين للزيارات الميدانية للمستخدم الحقيقي:

• جيد: $\le 200\text {ms} $ (أخضر) - استجابة سريعة وسلسة لواجهة المستخدم تبدو فورية للمستخدمين.
• يحتاج إلى تحسين: $> 200\text {ms} $ و$\le 500\text {ms} $ (كهرماني) - تأخير ملحوظ أثناء النقرات أو النقرات مما يؤثر على تفاعل المستخدم.
• ضعيف: $> 500\text {ms} $ (أحمر) - تجميد شديد للواجهة وحظر للخيط الرئيسي يؤدي إلى إحباط المستخدم وارتفاع معدلات الارتداد.

المكونات الثلاثة لزمن استجابة تفاعل INP

عندما يتفاعل مستخدم مع عنصر ما على صفحة ويب، يتكون زمن الاستجابة الإجمالي للتفاعل الذي يتم قياسه بواسطة INP من ثلاث مراحل متتالية:

1. تأخير الإدخال: الوقت المنقضي بين بدء المستخدم للتفاعل الفعلي (النقر أو الضغط أو الضغط على المفتاح) وبدء سلسلة المحادثات الرئيسية للمتصفح في تنفيذ معالجات الأحداث المرتبطة.يحدث تأخير الإدخال في المقام الأول بسبب ازدحام سلسلة المحادثات الرئيسية من مهام JavaScript ذات الخلفية الطويلة التي يتم تشغيلها أثناء تحميل الصفحة أو إعادة عرض المكونات.
2. مدة المعالجة: الوقت المستغرق في تنفيذ تعليمات JavaScript البرمجية داخل جميع مستمعي الأحداث المسجلين لهذا التفاعل (مثل onclick أو onkeydown أو معالجات تحديث الحالة التفاعلية لإطار العمل).
3. تأخير العرض التقديمي: الوقت المنقضي بعد اكتمال معالجات الأحداث حتى ينتهي المتصفح من حساب إعادة حساب النمط والتخطيط ورسم وحدات البكسل المحدثة وعرض الإطار المرئي التالي على جهاز العرض الخاص بالمستخدم.

رياضياً، يتم التعبير عن إجمالي زمن وصول INP لتفاعل واحد على النحو التالي:

$$\text{زمن استجابة INP} = \text{تأخير الإدخال} + \text{مدة المعالجة} + \text{تأخير العرض التقديمي}$$

لماذا استبدلت Google FID بـ INP في مارس 2024

يقيس تأخير الإدخال الأول (FID) فقط مكون تأخير الإدخال للتفاعل الأول على الصفحة.في حين أن FID ساعد في تحديد الصفحات التي منع فيها حظر الخيط الرئيسي التفاعل الأولي، إلا أنه عانى من اثنين من القيود الفنية الرئيسية:

• نطاق التفاعل الفردي: تجاهل FID جميع تفاعلات المستخدم اللاحقة بعد تحميل الصفحة، وفشل في التقاط التباطؤ أثناء التنقل المعقد من جانب العميل لتطبيق صفحة واحدة (SPA).
• قياس وقت الاستجابة غير المكتمل: قام FID بقياس تأخير الإدخال فقط، متجاهلاً وقت المعالجة وتأخير العرض التقديمي تمامًا.حصل معالج الحدث الذي استغرق تنفيذه 2000 مللي ثانية على درجة النجاح في FID إذا كان تأخير الإدخال الأولي أقل من 50 مللي ثانية.

في مارس 2024، استبدلت Google رسميًا FID بـ INP كعامل تصنيف رسمي لـ Core Web Vital.يقوم INP بتقييم النسبة المئوية الخامسة والسبعين لجميع التفاعلات خلال الجلسة، مما يوفر تقييمًا أكثر شمولاً وواقعية لتجربة المستخدم الحقيقي عبر تطبيقات الويب الحديثة.

تفاعلات المستخدم المؤهلة مقابل الأحداث غير المؤهلة

يقيس INP تفاعلات المستخدم المنفصلة حيث يتوقع المستخدم تعليقات مرئية فورية.يعد فهم التفاعلات التي يتم احتسابها ضمن INP أمرًا ضروريًا للتوصيف التشخيصي:

التفاعلات المقاسة

• النقرات بالماوس: النقر على الأزرار أو الروابط أو عناصر التحكم في النموذج أو المكونات التفاعلية المخصصة.
• النقرات على شاشة اللمس: النقر على العناصر الموجودة على الأجهزة المحمولة أو الأجهزة اللوحية.
• الضغط على لوحة المفاتيح: الضغط على مفاتيح لوحة المفاتيح الفعلية أو الافتراضية (مثل Enter أو Space أو المفاتيح الأبجدية الرقمية في إدخالات النص).

الأحداث غير المقاسة

• التمرير والتحريك: لا يؤدي تمرير الصفحة أو تحريك أحد مكونات الخريطة إلى قياس INP.
• التحويم: يتم استبعاد تحريك مؤشر الماوس فوق أحد العناصر دون النقر عليه من INP.
• الرسوم المتحركة لتحميل الصفحة: رسوم CSS المتحركة التي يتم تشغيلها تلقائيًا دون إدخال المستخدم لا يتم احتسابها ضمن INP.

استراتيجيات فنية مثبتة لتحسين نتائج INP العالية

لتقليل زمن وصول INP إلى أقل من 200 مللي ثانية، يجب على الفرق الهندسية تنفيذ التحسينات الفنية التالية:

1. تقسيم مهام الموضوع الرئيسي الطويلة: استخدم requestIdleCallback() أو setTimeout() أو scheduler.yield() لتقسيم مهام التنفيذ الأطول من 50 مللي ثانية إلى أجزاء أصغر، مما يسمح للمتصفح بمعالجة مدخلات المستخدم الواردة على الفور بين كتل تنفيذ المهام.
2. تحسين تحديثات حالة الإطار: في تطبيقات Vue 3 وNuxt 4، قم بتأجيل عمليات إعادة عرض واجهة المستخدم غير المهمة باستخدام حدود المكونات غير المتزامنة أو تحديثات المرجع التفاعلية المؤجلة.
3. تقليل تشويش التخطيط: تجنب قراءة خصائص هندسة DOM (مثل offsetHeight أو getBoundingClientRect() ) مباشرة بعد تغيير عناصر DOM، مما يفرض إعادة حساب التخطيط المتزامن.
4. تقليل عمق شجرة DOM: تزيد أشجار DOM كبيرة الحجم من حساب النمط وتكلفة التخطيط أثناء تأخير العرض التقديمي.اجعل إجمالي عدد عناصر DOM أقل من 1500 عقدة لكل صفحة.
5. تحسين البرامج النصية لجهات خارجية: تستحوذ البرامج النصية الثقيلة التابعة لجهات خارجية (التحليلات وشبكات الإعلانات وأدوات دردشة العملاء) بشكل متكرر على الموضوع الرئيسي.قم بتأجيل أو قيام عامل الويب بإلغاء تحميل البرامج النصية غير الضرورية لجهة خارجية.

مراقبة مستمرة لـ INP باستخدام SimpleOps

SimpleOps يتتبع أداء INP بشكل مستمر من خلال التقاط مقاييس مجموعة بيانات المستخدم الحقيقي لتقرير Chrome UX (CrUX) جنبًا إلى جنب مع عمليات تدقيق Lighthouse الاصطناعية.SimpleOps ينبه فريقك تلقائيًا عندما يتجاوز INP المئوي الخامس والسبعين لموقعك على الويب 200 مللي ثانية، مما يضمن بقاء تطبيقك سريعًا وسلسًا ومُحسّنًا لتصنيفات محرك البحث.