لا يُعدّ انخفاض مؤشر INP إلى اللون الأحمر مشكلة أداء إلا بعد تحديد المرحلة التي تستغرق وقتًا طويلاً من بين المراحل الثلاث. تتجاهل معظم الفرق هذه الخطوة، وتلجأ إلى شراء إضافة تخزين مؤقت أو تأجيل تنفيذ البرنامج النصي، لتجد أن النسبة المئوية الخامسة والسبعين لا تتحسن. هذا الدليل هو بمثابة شجرة قرارات نعتمدها: سبعة مسارات تنقلك من رقم تقرير تجربة المستخدم غير الناجح في Chrome إلى المعالج أو البرنامج النصي أو علامة الطرف الثالث المسؤولة، مع تحديد عتبة معينة عند كل مسار. كُتب هذا الدليل لقادة فرق تطوير الواجهة الأمامية وفرق النمو الذين يمتلكون بيانات عن معدل التحويل بالإضافة إلى مؤشر Lighthouse.
الفجوة حقيقية. في كتاب "دليل الويب لعام 2025"، 77% من أصول الهواتف المحمولة لديها نظام تعريف وطني جيد مقابل 97% على أجهزة الكمبيوتر المكتبية، وفقط اجتازت 48% من المواقع التي مصدرها الأجهزة المحمولة جميع معايير الأداء الأساسية الثلاثة للويب (أرشيف HTTP). ما زال هناك خلل في تطبيقات الهاتف المحمول يتمثل في الغالب في زمن استجابة التفاعل، ويمكن تشخيصه في الغالب.
ما الذي يقيسه مؤشر INP، وما الذي يتجاهله بهدوء
يُشير تقرير "التفاعل مع الرسم التالي" إلى زمن استجابة تفاعل واحد لكل زيارة صفحة، عند في المئة 75 عبر أصلك. الخير هو 200 مللي ثانية أو أقليحتاج إلى تحسين إذا تجاوز 200 مللي ثانية ووصل إلى 500 مللي ثانية، وضعيف إذا تجاوز 500 مللي ثانية.web.devثلاثة أمور تتعلق بهذا التعريف تُغير طريقة تصحيح الأخطاء:
- لا تُحتسب إلا النقرات واللمسات وضغطات المفاتيح. أما التحليق والتكبير والتصغير و لا يتم قياس التمريرلذلك، قد يؤدي التمرير غير المنتظم إلى جعل الصفحة تبدو معطلة بينما يظل مؤشر INP أخضر.
- في الصفحات التي تحتوي على العديد من التفاعلات، INP يتجاهل أعلى تفاعل واحد لكل 50لذلك، يمكن أن يختبئ تفاعل كارثي نادر في صفحة ذات تفاعل عالٍ ويظهر في صفحة ذات تفاعل منخفض.
- كل تفاعل ينقسم إلى تأخير الإدخال (قبل تشغيل معالجاتك)، مدة المعالجة (يقوم فريقك بتشغيل) و تأخير العرض (بعد معالجيك، وقبل طلاء الإطار). لا يوجد أي قاسم مشترك تقريبًا بين هذه المشاكل الهندسية الثلاثة (web.dev).
تُشكّل هذه النقطة الأخيرة جوهر المنهجية. أنت لا تُصحّح أخطاء "INP" بحد ذاتها، بل تُصحّح أخطاء إحدى المراحل الثلاث، ولكل مرحلة حلٌّ مختلف.
الفرع 0: تأكد من أن الرقم حقيقي قبل تعديل الكود
افتح أداة PageSpeed Insights واقرأ قسم الحقول، وليس نتيجة الاختبار. لا تستطيع أدوات الاختبار قياس عدد النقرات على زر معين، لأن ذلك يتطلب ضغط مستخدم حقيقي على زر. إذا لم يكن لدى المصدر بيانات حقول، فلديك مشكلة في حركة المرور، وليست مشكلة في الأداء، ولا ينطبق عليك أي مما يلي حاليًا. ثم اسحب بيانات الجوال وسطح المكتب بشكل منفصل - فقد اختلفا عالميًا بنسبة 20 نقطة مئوية في عام 2025. إذا كان لون الجوال أحمر ولون سطح المكتب أخضر، فتوقف عن الاختبار على حاسوبك المحمول.
الفرع 1: هل يحدث التفاعل البطيء أثناء التحميل أم بعده؟
قم بتجهيز الحقل بـ web-vitals بناء بيانات الإسناد. أربعة أسطر فقط تُعطيك البيانات:
import {onINP} from 'web-vitals/attribution';
onINP(({value, rating, attribution}) => {
navigator.sendBeacon('/rum', JSON.stringify({value, rating, attribution}));
});
عرض attribution.loadState أولاً. إذا كانت معظم التفاعلات السيئة تحمل حالة تحميل من جار التحميل or تفاعلي domيحدث خطأ أثناء قيام المستخدمين بالنقر بينما لا تزال البرامج النصية قيد التنفيذ: هذه مشكلة في عملية التسليم، ويتم حلها في حزمة التطبيق ومدير العلامات، وليس في معالج الأخطاء. إذا كانت التفاعلات السيئة منتشرة عبر صفحات محملة بالكامل، فانتقل إلى الفرع 2.
الفرع الثاني: أي جزء فرعي يملك الوقت؟
سجل inputDelay, processingDuration و presentationDelay لكل عينة. قاعدة عملنا: الجزء الفرعي مسؤول عن التفاعل عندما يكون مسؤولاً عن أكثر من 50% من إجمالي الناتج المحلي الإجماليإذا لم ينجح أي منها في تجاوز 50%، فتعامل معها كحالة تأخير إدخال أولاً - عادة ما يكون ازدحام الخيط الرئيسي المنتشر هو ما يجعل الحالتين الأخريين أسوأ.
| الجزء الفرعي المهيمن | ابدأ بالتحقيق | السبب النموذجي | الإصلاح الأول |
|---|---|---|---|
| تأخير الإدخال > 50% | longAnimationFrameEntries نوع المستدعي | تقييم البرنامج النصي أثناء التحميل؛ المؤقتات؛ تفاعل سابق لا يزال قيد التشغيل | تأجيل أو إزالة البرامج النصية الخارجية؛ تقسيم الحزم؛ نقل العمل الدوري خارج سلسلة العمليات |
| مدة المعالجة > 50% | longestScript و totalScriptDuration | معالج أحداث واحد مكلف؛ تحديث حالة يؤدي إلى إعادة عرض كاملة | أفسِح المجال داخل وحدة المعالجة؛ انقل العمل غير المرئي بعد الطلاء التالي |
| تأخير العرض التقديمي > 50% | totalStyleAndLayoutDuration | DOM كبير؛ اضطراب في التخطيط؛ ثقيل requestAnimationFrame العمل | تقليل حجم DOM؛ تطبيق content-visibilityقراءة وكتابة البيانات على دفعات |
| لا يوجد جزء فرعي يزيد عن 50% | كل ما سبق | ازدحام عام في الخيوط الرئيسية | تعامل مع تأخير الإدخال، ثم أعد القياس، ثم أعد التفرع. |
الفرع 3: تسمية البرنامج النصي
تتضمن عملية الإسناد إدخالات إطار الرسوم المتحركة الطويلة جنبًا إلى جنب مع كل عينة INP. attribution.longestScript يمنحك البرنامج المُستدعي، والدالة، وملف المصدر لأسوأ نص برمجي في التفاعل؛ totalScriptDuration يجمع كل شيء يستغرق أكثر من 5 مللي ثانية. هنا يتحول مصطلح "React بطيء" المبهم إلى مسار ملف. تحقق من نوع المُستدعي: classic-script or module-script تشير النقاط إلى تقييم وقت التحميل، بينما user-callback or event-listener يشير إلى شيء ما يعمل بعد التحميل - مراقب، مؤقت، مستمع تحليلات (web.dev).
الفرع 4: هل هو ملكك أم ملك لطرف ثالث؟
رتب مصادر البرامج النصية حسب المصدر. تقوم أدوات إدارة العلامات، ومنصات الموافقة، وأدوات تسجيل الجلسات، وواجهات الدردشة بتثبيت مستمعين عالميين يعملون قبل مستمعك عند كل نقرة. إذا ظهر مصدر طرف ثالث في أكثر من ربع أسوأ عيناتك، فالحل تجاري أكثر منه تقني: قلل نطاق العلامة، أو حمّلها عند التفاعل، أو انقلها إلى جانب الخادم. لا تُعدّل معالجك لاستعادة 40 مللي ثانية التي تستغرقها واجهة الدردشة.
الفرع 5: قم بإعادة إنتاجه في المختبر، ثم قم بإصلاح الإطار
خذ المحدد من attribution.interactionTargetافتح أدوات مطوري Chrome مع ضبط معدل استهلاك وحدة المعالجة المركزية بما يتناسب مع مجموعة أجهزة الحقل لديك، وسجل التفاعل. ابحث عن مهمة تتجاوز مللي 50، عتبة المهام الطويلة (web.dev)، ثم قسمها عن طريق الاستسلام.
شحن scheduler.yield() مع وجود خيار احتياطي. يدعم كل من متصفح كروم وإيدج هذه الميزة بدءًا من الإصدار 129، بينما يدعمها متصفح فايرفوكس بدءًا من الإصدار 142، ولكن لا يدعم متصفح سفاري ذلك، سواء على سطح المكتب أو نظام التشغيل iOSوتشير MDN إلى توفرها المحدود بدلاً من كونها أساسية (DND, هل بإمكاني استخدمبالنسبة للجمهور التركي أو الخليجي الذي يتمتع بحصة كبيرة من مستخدمي نظام iOS، فإن setTimeout الخيار الاحتياطي ليس اختيارياً.
الفرع 6: قياس السوق الذي تبيع له فعلياً
تُخفي المتوسطات العالمية لـ CrUX السوق الذي يدفع لك. تنشر مجموعة بيانات CrUX BigQuery جداول الدول — chrome-ux-report.country_tr.YYYYMM بالنسبة لتركيا، ينطبق النمط نفسه على أي رمز دولة مكون من حرفين - يتم تحديثه شهريًا، مع مراعاة شكل الجهاز ونوع الاتصال الفعال كأبعاد (كروم للمطورين). لا تعرض واجهة برمجة تطبيقات CrUX العامة البلد، لذا فإن هذه الشريحة مخصصة لـ BigQuery فقط.
قارن بياناتك الأصلية بجدول بيانات الدول لكل سوق تبيع فيه. فبائع التجزئة الذي يخدم تركيا وألمانيا والخليج العربي يجد عادةً ثلاثة توزيعات مختلفة لبروتوكول الإنترنت الدولي (INP) من قاعدة بيانات واحدة، وذلك لاختلاف أنواع الأجهزة وظروف الشبكة. ركّز على السوق الذي يحقق لك الإيرادات، وليس السوق الذي يقع فيه مكتبك.
الفرع 7: إثبات أنه حرك شيئًا ما
تعامل مع الإصلاح كتجربة، وليس كعملية نشر. Trendyolقام أحد المتاجر التركية بتتبع خطأ في تطبيق الهاتف المحمول استغرق 963 مللي ثانية، والذي نتج عن مهمة واحدة استغرقت من 700 إلى 900 مللي ثانية بسبب استدعاء IntersectionObserver داخل مكون React، وتم تأجيل تحديث الحالة باستخدام scheduler.yield()وخفضت قيمة INP عند النسبة المئوية الخامسة والسبعين من حوالي 1,400 مللي ثانية إلى حوالي 650 مللي ثانية على مدى ستة أشهر. وأظهر اختبار A/B الخاص بها زيادة بنسبة 1% في نسبة النقر من قوائم المنتجات إلى تفاصيل المنتج لكل جلسة (web.dev). باص احمر اللون تم تقليل زمن استجابة التحميل الكسول من 870-900 مللي ثانية إلى 350-370 مللي ثانية، وتم تحسين تفاعل إدخال النص بنسبة 72%، وتم الإبلاغ عن زيادة بنسبة 7% في إجمالي المبيعات (web.dev).
لاحظ المقياس الصادق: 1% وليس 40%. وهذا يقودنا إلى رقم يستحق التصحيح.
نسبة 8.4% تستدعي التنويه.
الرقم الأكثر تداولاً في هذا المجال هو أن تحسين سرعة الهاتف المحمول بمقدار 0.1 ثانية يرفع معدل التحويل في قطاع التجزئة بنسبة 8.4% وفي قطاع السفر بنسبة 10.1%. ويستند هذا الرقم إلى دراسة حقيقية أجرتها شركة ديلويت بتكليف من جوجل، وشملت 37 علامة تجارية، وأكثر من 30 مليون جلسة.web.devلكنها كانت تقيس مقاييس التحميل مثل وقت تحميل الصفحة وزمن استجابة الخادم. ليس INPتغطي البيانات 30 يومًا في نهاية عام 2019؛ ولم تكن هناك مجموعة ضابطة، لذا فهي مجرد ارتباط مُلاحَظ، وليست علاقة سببية. استخدمها لفتح نقاش حول الميزانية، وليس للتنبؤ بالعائد من إصلاح زمن استجابة التفاعل.
[البيانات الداخلية المطلوبة: بيانات Switas قبل/بعد الصفحة 75 INP وفرق التحويل من مشاركة عميل، لاستبدال دراسات الحالة العامة بأدلة الطرف الأول.]
أين ينهار هذا المخطط القراري؟
- مناطق ذات حركة مرور منخفضة. مع بيانات المجال المحدودة، تُعتبر النسبة المئوية الخامسة والسبعون مجرد ضوضاء. عند أقل من 1,000 تفاعل تقريبًا لكل قالب أسبوعيًا، قم بإجراء التحليل في المختبر وتقبّل حقيقة أنه لا يمكنك التحقق من الفوز في CrUX.
- مستخدمو متصفحي سفاري وفايرفوكس غير مرئيين. CrUX متاح فقط على متصفح Chrome. إذا كانت نسبة كبيرة من إيراداتك تصل عبر متصفح Safari على نظام iOS، فإن بيانات عدد المستخدمين المحتملين لديك تصف شريحة من المستخدمين لا تقوم بقياسها بشكل كامل.
- مشكلة تعطل التمرير خارج نطاق هذا الموضوع. يتجاهل INP التمرير، لذلك لن يجد هذا الشجر المشكلة أبدًا في قائمة التمرير اللانهائي التي تبدو سيئة ولكنها تجتاز الاختبارات بنجاح.
- إنها تحدد زمن الاستجابة، وليس عيوب التصميم. إن التفاعل الذي يستغرق 180 مللي ثانية على لوحة تصفية مربكة يمثل مشكلة في تجربة المستخدم لا يمكن لهذه الشجرة رؤيتها.
الأسئلة الشائعة
هل INP هو نفسه تأخير الإدخال الأول؟
لا، لم يقيس FID سوى التأخير قبل تشغيل معالجات التفاعل الأول. أما INP فيغطي زمن الاستجابة الكامل لتفاعل نموذجي خلال الزيارة، بما في ذلك تنفيذ المعالج والرسم الذي يليه.
لماذا تبدو نتيجة Lighthouse جيدة بينما INP حمراء؟
Lighthouse أداة تجريبية ولا يمكنها قياس INP: لا يوجد مستخدم حقيقي يضغط على أي شيء. ترتبط مؤشرات مثل وقت الحظر الإجمالي ارتباطًا ضعيفًا. لذا، يُنصح بالاطلاع على قسم الحقول في PageSpeed Insights.
كم من الوقت سيستغرق ظهور حل لهذه المشكلة في نظام CrUX؟
تُصدر CrUX تقاريرها على أساس نافذة متحركة مدتها 28 يومًا، بينما تُنشر جداول BigQuery شهريًا. توقع ظهور إشارة جزئية بعد حوالي أربعة أسابيع، وقراءة كاملة بعد إصدارين شهريين.
هل يمكنني إصلاح INP دون المساس بالإطار البرمجي؟
في كثير من الأحيان، نعم. كان حل Trendyol هو استخدام yield داخل دالة رد نداء واحدة في React 16.9، دون الحاجة إلى ترقية. كما أن تأجيل استخدام علامات الطرف الثالث لا يعتمد على إطار العمل.
هل يؤثر إعلان الموافقة على برنامج INP؟
يمكن أن يحدث ذلك بطريقتين: أولاً، يتنافس نص البرنامج النصي الخاص بالإعلان على الخيط الرئيسي أثناء التحميل، وثانياً، غالباً ما يؤدي قرار الموافقة إلى تحميل سريع للعلامات مباشرةً بعد ذلك. قِس التفاعل الأول بعد الموافقة بشكل منفصل.
هل أحتاج إلى مورد لبرنامج مراقبة تجربة المستخدم الحقيقية (RUM)، أم أن مكتبة مؤشرات الأداء الرئيسية على الويب كافية؟
يكفي بناء نظام الإسناد بالإضافة إلى نقطة نهاية الإشارة لتشغيل هذه الشجرة. يشتري البائع بيانات الاحتفاظ بالموظفين، وتجزئة السوق، ولوحات المعلومات، وليس بيانات إسناد أفضل.
هل ينبغي عليّ تحسين INP لتحسين محركات البحث أم لزيادة التحويل؟
قرر من أجل التحويل. تعتبر مؤشرات الأداء الرئيسية للويب إشارة تصنيف، لكن حالات العمل الموثقة - 1% في Trendyol، و7% في redBus - هي تأثيرات جودة التفاعل التي تبرر العمل في حد ذاتها.
قم بتشغيل هذا على صفحة عرضك الخاصة
استخدم قالبك الأكثر استخدامًا، وقم بتجهيزه بخاصية بناء الإسناد، ثم قم بتطبيقه على الفروع من 0 إلى 7 بالترتيب. إذا كنت تفضل تشغيل الشجرة على بياناتك الميدانية الخاصة، مع تضمين شريحة البلد وتصميم التجربة، فإن لدينا فريق أداء الويب هذا بالضبط ما يفعله هذا الالتزام.
مصادر
- التفاعل مع الرسم التالي (INP) — web.dev
- تحسين التفاعل مع الرسم التالي — web.dev
- ابحث عن التفاعلات البطيئة في الميدان — web.dev
- تحسين المهام الطويلة — web.dev
- الأداء — دليل الويب لعام 2025، أرشيف HTTP
- كيف خفضت Trendyol عدد نقاط INP بنسبة 50% — web.dev
- كيف حسّنت شركة redBus خدمة INP وزادت مبيعاتها بنسبة 7%؟ — web.dev
- أجزاء من الثانية تُحدث فرقًا هائلًا — web.dev / 55 / Deloitte
- CrUX على BigQuery — متصفح Chrome للمطورين
- المُجدوِل: yield() — MDN
- واجهة برمجة تطبيقات المجدول: العائد - caniuse
- مكتبة جافا سكريبت web-vitals — GoogleChrome/web-vitals
