التفاعل مع الطلاء التالي: ما هو وكيف نفعل ذلك؟

هل سبق لك أن واجهت موقعًا أو تطبيقًا بطيئًا وغير مستجيب؟

ربما قمت بالنقر فوق زر واستغرق ظهور شيء ما على الشاشة وقتًا طويلاً. هذه تجربة محبطة، أليس كذلك؟

هذا هو بالضبط ما يدور حوله "التفاعل مع الطلاء التالي" (INP).

يعد التفاعل مع Next Paint (INP) مقياسًا ناشئًا تستخدمه Google لتقييم مدى سرعة استجابة موقع الويب الخاص بك لمدخلات المستخدم. وفي 12 مارس 2024، أصبح أحد معايير مؤشرات الويب الأساسية التي تؤثر على تصنيفات Google.

لماذا يهم هذا؟

في العصر الرقمي اليوم، يتوقع الناس حدوث الأشياء على الفور. إذا لم يستجب موقع الويب أو التطبيق بسرعة لأفعالك، فمن المحتمل أن تصبح غير راضٍ وتستقيل. لا أحد لديه الوقت للتطبيقات البطيئة في الوقت الحاضر!

يعد تحسين INP أمرًا ضروريًا لتقديم تجربة مستخدم سلسة وممتعة تحافظ على تفاعل المستخدمين ورضاهم. كلما انخفض INP، زاد الأداء المتصور لموقعك على الويب أو تطبيقك.

دعونا نفحص INP بعمق ونستكشف كيفية قياسه لتحسين درجاتك الحالية.

ما هو التفاعل مع الطلاء التالي (INP)؟

التفاعل مع الطلاء التالي (INP) هو مقياس أداء الويب الذي يحسب الوقت بين تفاعل المستخدم (مثل النقر أو الضغط أو التمرير) والمرة التالية التي يتم فيها رسم وحدات البكسل على الشاشة نتيجة لهذا التفاعل.

بعبارات بسيطة، يقيس INP مدى سرعة استجابة صفحة الويب أو التطبيق بشكل واضح لتفاعل المستخدم. يشير رقم INP الأقل إلى تجربة أكثر استجابة، بينما تشير قيمة INP الأعلى إلى تأخير ملحوظ بين إجراء المستخدم والتحديث المرئي على الشاشة.

بالنسبة لمعظم تفاعلات المستخدم، تكون قيمة INP المقترحة أقل من 200 مللي ثانية (ملي ثانية). تعتبر قيمة INP التي تزيد عن 300 مللي ثانية ضعيفة وسينظر إليها المستخدمون على أنها بطيئة

التفاعل مع الرسم التالي كعنصر أساسي للويب

تم تقديم التفاعل مع Next Paint كأحد مقاييس Google Core Web Vitals الثلاثة في 12 مارس 2024. وقد حل محل مقياس تأخير الإدخال الأول السابق.

كمقياس لمؤشرات أداء الويب الأساسية، قد يؤثر التفاعل الضعيف مع Next Paint على تصنيفات بحث Google الخاصة بك.

كيف يختلف التفاعل مع الطلاء التالي عن تأخير الإدخال الأول؟

INP هو المقياس اللاحق لتأخير الإدخال الأول (FID). كلاهما مقاييس الاستجابة.

يختلف FID وINP بطريقتين:

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

يعمل تأخير الإدخال الأول على تقدير المدة التي يستغرقها المتصفح لبدء معالجة إدخال المستخدم. لا يتم تضمين الوقت الفعلي المستغرق في الاستجابة للأحداث أو تغيير واجهة المستخدم.

كما يوحي الاسم، يقوم FID فقط بتحليل التفاعل الأولي للمستخدم مع موقع الويب. قد لا تعكس جهة الاتصال الأولية هذه تجربة المستخدم الإجمالية بدقة، خاصة بالنسبة للمواقع التي تظل مفتوحة لفترة طويلة، مثل التطبيقات ذات الصفحة الواحدة.

يقوم التفاعل مع Next Paint عادةً بتقييم أسوأ زمن وصول للإدخال على الصفحة. ومع ذلك، إذا كان هناك الكثير من لقاءات المستخدم، فسيتم تجاهل القيم المتطرفة، وسيقوم Google بتقييم النسبة المئوية الـ 98 لتأخير التفاعل.

لذا، إذا كان INP للصفحة يبلغ 250 مللي ثانية، فإن 2% من تفاعلات المستخدم كان لها زمن استجابة أكبر من ذلك.

كيف يعمل التفاعل مع الطلاء التالي (INP)؟

INP هو مقياس الاستجابة الذي يركز على الوقت المنقضي بين تفاعلات المستخدم. فهو يقيس مدى سرعة استجابة عنصر صفحة الويب عند تنفيذ إجراء محدد عليه.

إليك كيفية عمل INP:

• يتفاعل المستخدم مع صفحة الويب من خلال النقر على زر.
• يطلب المتصفح محتوى جديدًا من خادم الويب.
• يقدم خادم الويب محتوى جديدًا إلى المتصفح.
• يعرض المتصفح المحتوى الجديد على الصفحة.
• يحسب المتصفح الوقت اللازم لإنشاء المحتوى الجديد ويبلغ عنه كنتيجة INP.

يشير تصنيف INP المنخفض إلى أن الصفحة تستجيب للغاية لإدخالات المستخدم. كجزء من مؤشرات أداء الويب الأساسية، يعد INP مهمًا للأسباب التالية:

• تحسين تجربة المستخدم:تشير درجة INP العالية إلى أنه يجب على الزائرين الانتظار لفترة طويلة حتى تستجيب صفحة الويب لأنشطتهم، الأمر الذي قد يكون مزعجًا.

• SEO (تحسين محركات البحث):يعد INP ومؤشرات الويب الأساسية الأخرى جزءًا من إشارات تجربة صفحة Google، والتي تؤثر على تصنيف موقع الويب في صفحات نتائج البحث. وهذا يؤكد أهمية INPمقياس تحسين محركات البحث.

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

كيف يتم قياس INP؟

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

أ. تأخير الإدخال

انتظار عمليات الخلفية على موقع الويب لمنع تشغيل معالج الأحداث.

ب. وقت المعالجة

تنفيذ معالجات الأحداث في JavaScript.

ج. تأخير العرض

التعامل مع العمليات المعلقة الأخرى، وإعادة حساب تخطيط الصفحة، ورسم محتوى الصفحة. يتم قياس INPs بالمللي ثانية (مللي ثانية). المعيار الجيد هو أقل من 200 مللي ثانية، وأي شيء بين ذلك و500 مللي ثانية يعتبر بحاجة إلى التحسين. يعتبر زمن الوصول الذي يبلغ 500 مللي ثانية أو أكثر ضعيفًا.

يمكن أن تؤثر عدة متغيرات على قيمة INP، بما في ذلك حجم صفحة الويب وتعقيدها، بالإضافة إلى عدد ملفات JavaScript وCSS التي تم تحميلها.

يمكنك استخدام العديد من الأدوات لتقييم التفاعل مع Next Paint، مثل:

• اختبار سرعة موقع DebugBear
• رؤى سرعة صفحة جوجل
• ملحق سرعة موقعنا لمتصفح Chrome
• مصحح أخطاء INP
• وحدة تحكم بحث جوجل
• مكتبة عناصر الويب الحيوية

يمكن أن تساعدك أدوات اختبار سرعة موقع الويب في تحديد قيمة INP لموقع الويب. يمكن أن يوفر هذا النوع من التطبيقات معلومات حول كيفية أداء مقاييس مؤشرات أداء الويب الأساسية لديك ويقدم إرشادات حول كيفية تحسينها.

تعد Google PageSpeed ​​Insights أداة شائعة لتحليل INP وأداء الموقع. سيقوم بتقييم الموقع وتقديم توصيات بشأن أفضل الممارسات لتطبيقها. يمكنك أيضًا فحص مدى سرعة تحميل موقع الويب الخاص بك على الأجهزة المحمولة وأجهزة سطح المكتب.

تقدم PageSpeed ​​Insights نوعين من النتائج. يعرض الجزء العلوي مقاييس أداء الويب الأساسية للموقع من تقرير Chrome UX، وهو عبارة عن مجموعة من مقاييس الأداء الواقعية من مستخدمي Chrome.

القيم الموضحة في التقرير أدناه مأخوذة من إعداد معملي يتم التحكم فيه يستخدم Google Lighthouse. يمكن استخدام هذه البيانات لاختبار الميزات الجديدة قبل نشرها.

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

في الأسفل، هناك أفكار حول كيفية تحسين مقاييس مؤشرات أداء الويب الأساسية، كما يلي:

كيفية تحسين التفاعل مع الطلاء التالي (INP)؟

لذا، لتحسين INP، فأنت تريد تبسيط قائمة المهام وتحديد أولوياتها للسلسلة الرئيسية قدر الإمكان. فيما يلي بعض الاستراتيجيات والطرق الرئيسية لتحسين قيم التفاعل مع الرسام التالي (INP) المحسنة وزيادة الاستجابة:

أ. تحسين أداء جافا سكريبت

جافا سكريبتيعد مكونًا رئيسيًا للعديد من مواقع الويب. يقدم العديد من العناصر التفاعلية؛ ومع ذلك، يمكن أن يؤدي ذلك أيضًا إلى إبطاء سرعة الموقع.

عند تنفيذ JavaScript، يتم تشغيله على الموضوع الرئيسي، وهو المسؤول عن عرض صفحة الويب. إذا كان الكود غير فعال، فقد يتسبب ذلك في توقف سلسلة المحادثات ومنع موقع الويب من الاستجابة لإدخالات المستخدم.

لتحسين الاستجابة، قم بتحسين JavaScript لديك. يمكنك تحقيق ذلك عن طريق:

• تصغير ملفات جافا سكريبتيقلل من كمية جافا سكريبت، مما يسمح لها بتحميل المزيدبسرعة.

• تمكين ضغط GZip.طريقة أخرى شائعة لضغط ملفات وبيانات موقع الويب.

• باستخدام إطار جافا سكريبت.يمكن أن تساعدك هذه الأداة في تنظيم كود JavaScript الخاص بك وجعله أكثر كفاءة. AngularJS وjQuery من الأمثلة المعروفة.

• باستخدام CDN.ستقوم هذه التقنية، المعروفة باسم شبكة توصيل المحتوى، بتوزيع ملفات JavaScript الخاصة بك من الخوادم الموجودة بالقرب من جمهورك المستهدف، مما يؤدي إلى أوقات تحميل أسرع.

يمكن لجافا سكريبت غير الفعال حظر سلسلة المحادثات الرئيسية، مما يتسبب في تأخير العرض. يعد تقسيم التعليمات البرمجية، والتحميل البطيء، واستخدام عمال الويب، وتجنب العمليات طويلة الأمد على سلسلة المحادثات الرئيسية، كلها خيارات لتقليل تأخير JavaScript.

ب. استخدم عمال الويب

عمال الويب عبارة عن خدمة تسمح لجافا سكريبت بالعمل بشكل مستقل عن سلسلة المحادثات الرئيسية. إنها مفيدة لتشغيل المهام المعقدة في الخلفية.

لنفترض أن لديك موقع WordPress محملاً بالصور ومقاطع الفيديو والبيانات. قد يقوم عمال الويب بتحويل عمليات JavaScript المكلفة هذه إلى سلسلة محادثات في الخلفية، مما يمنع الواجهة من التوقف.

هناك طريقة أخرى لتجنب توقف سلسلة المحادثات الرئيسية وهي تقسيم مهام JavaScript الكبيرة إلى مهام أصغر.

ج. تقسيم المهام الطويلة

يتيح تقسيم المهام الكبيرة لمتصفح الويب التعامل معها في أجزاء أصغر في المرة الواحدة. ونتيجة لذلك، فإن الخيط الرئيسي حر في القيام بواجبات أكثر أهمية.

كما تعلم، تؤدي المهام الطويلة إلى حظر سلسلة المحادثات الرئيسية، مما يمنع المتصفح من تنفيذ أحداث التفاعل. إلىتحسين استجابة موقعك، وقلل الضغط على الخيط الرئيسي، وحاول تقسيم العمليات الكبيرة.

من خلال تقسيم الأنشطة الكبيرة إلى أجزاء أصغر، يمكن للخيط الرئيسي أداء وظائف أخرى والاستجابة لتفاعلات المستخدم بسرعة أكبر.

بالإضافة إلى ذلك، يساعد تقسيم المهام الطويلة في تقليل تأثير "غير المرغوب فيه"، حيث تصبح الرسوم المتحركة والانتقالات على موقع الويب متشنجة أو متقطعة بسببإلى موضوع رئيسي مثقل. من خلال التأكد من اكتمال كل نشاط في إطار زمني أقصر، يمكن لموقع الويب توفير تجربة بصرية أكثر سلاسة للمستخدم.

د. إعطاء الأولوية لجاهزية الإدخال

تشير جاهزية الإدخال إلى قدرة صفحة الويب على الاستجابة لتفاعل المستخدم. عندما لا يكون الأمر كذلك، فهذا يعني عادةً أن الموضوع الرئيسي للمتصفح مشغول بواجبات أخرى.

فيما يلي كيفية تحديد أولويات جاهزية الإدخال وتعزيز INP:

1. سيتم تأجيل جافا سكريبت غير الهامة

بعض JavaScript غير مطلوب للتحميل الأولي للصفحة ويمكن تنفيذه بعدالرئيسي المحتوى. يتيح ذلك للسلسلة الرئيسية تحديد أولويات تفاعلات المستخدم وزيادة الاستجابة الإجمالية للصفحة.

2. الاختناق

تحدد هذه الإستراتيجية معدل تكرار تنفيذ الوظيفة. على سبيل المثال، عندما يقوم المستخدم بالتمرير لأسفل، قد يتم تنفيذ نفس التعليمات البرمجية مئات المرات في الثانية. يسمح الاختناق بتشغيله مرة واحدة فقط في كل مللي ثانية أو نحو ذلك، بغض النظر عن عدد مرات تشغيل الحدث.

3. فضح

وهذا يمنع الوظيفة من التنفيذ مرة أخرى حتى مرور فترة معينة. على سبيل المثال، عندما يقوم المستخدمون بتغيير حجم نافذة المتصفح الخاصة بهم، قد يبدأ هذا الحدث نفس الإجراء عدة مرات. يمكن استخدام الإلغاء لتأجيل التنفيذ حتى يتوقف المستخدم عن تغيير الحجم لفترة محددة مسبقًا.

4. مستمعو الحدث الذين لا يشاركون بشكل نشط

مستمعي الأحداث عبارة عن بنيات حاسوبية تكتشف أحداثًا معينة، مثل التمرير والنقر. يؤدي جعلها سلبية إلى توجيه المتصفح إلى تخطي انتظار اكتمال وظيفة معينة ومتابعة الأنشطة الأخرى بدلاً من ذلك.

ه. تقديم تعليقات فورية

قد تؤدي بعض الأنشطة، مثل إكمال نموذج يحتوي على العديد من مدخلات البيانات، إلى تأخيرات كبيرة في الاستجابة.

وهنا يأتي دور التعليقات الفورية. توفر هذه الإستراتيجية للعملاء إشارة واضحة إلى أن موقع الويب قد تلقى طلبهم ويقوم بمعالجته.

لن يترك المستخدمون يتساءلون عما إذا كان موقع الويب قد سجل مدخلاتهم إذا تلقوا تعليقات سريعة. يمكن أن يعطي انطباعًا بأداء أسرع، حتى لو لم يقلل وقت المعالجة فعليًا.

تحقق من هذه الأمثلة لإشارات التعليقات السريعة:

1. مؤشرات التحميل

عرض القرص الدوار أو شريط التقدم عند تشغيل العملية، خاصة عند تقديم البيانات أو التبديل إلى صفحة جديدة.

2. رسائل الإقرار المنبثقة

إنها فكرة جيدة أن يتم عرض رسالة تؤكد أن عملية ما، مثل إضافة عنصر إلى سلة التسوق، قد اكتملت بنجاح.

3. التحقق من صحة حقل النموذج

على سبيل المثال، إذا قام المستخدم بإدخال عنوان بريد إلكتروني تم إنشاؤه بشكل غير صحيح، فاعرض إشعار خطأ على الفور بدلاً من الانتظار حتى يتم إرسال النموذج.

الخلاصة

وفي نهاية اليوم تقديمتجربة مستخدم رائعةعلى شبكة الإنترنت يعود إلى شيء واحد: الاستجابة. يمكن للسرعة التي يستجيب بها موقع الويب أو التطبيق الخاص بك لأحداث المستخدم، مثل النقرات والضغطات والتصفح، أن تحدد ما إذا كانت تجربة ممتعة أم بطيئة بشكل محبط.

ولهذا السبب يعد تحسين وقت التفاعل السريع مع الطلاء التالي (INP) أمرًا في غاية الأهمية. يراقب INP الدقائق المهمة بين وقت تفاعل شخص ما مع موقع الويب الخاص بك ووقت تلقي التأكيد المرئي على شاشته. كلما انخفض INP، بدا كل شيء أسرع وأكثر استجابة.

لذا، تابع واطلق العنان لقوة INP المُحسّنة!

اكتشف الاستجابة السريعة التي تميز مواقع الويب المتوسطة عن تلك التي تبدو سريعة وسلسة بشكل فاخر. يعتمد رضا المستخدمين ونجاح تجاربك الرقمية على ذلك.

الأسئلة الشائعة