إن بنية Pagespeed من Google، والتي اعتدنا عليها منذ سنوات، مبنية على ضمان تحميل مواقع الويب وتقديمها بسرعة. من خلال إنتاج معلمات قابلة للقياس والاستفادة من البيانات المجهولة التي تم جمعها من حصة سوق Chrome، تستخدم Google هذه المقاييس كمؤشرات لتحسين محركات البحث. مع تقديم التفاعل مع Next Paint (INP) في عام 2022، تحول التركيز من مجرد سرعة تحميل الصفحة إلى منظور أوسع لأداء الويب. لا يقيس INP مدى سرعة تحميل الصفحة فحسب، بل يقيس أيضًا مدى سرعة معالجة تفاعلات المستخدم على الصفحة. بشكل أساسي، فهو يحول تجربة التنقل في الموقع إلى مقياس لسرعة الصفحة.
على مدونة كيرم، تم اقتراح مصطلح "تأخير التفاعل العام" باعتباره مناسبًا لهذا المفهوم، والذي تشرحه Google أيضًا بشكل جيد في الفيديو الخاص بها. ومع ذلك، لفهم هذا المقياس بشكل كامل، سنتعمق في الموضوع في الأقسام التالية.
ما هو شرح مدة INP؟
تشمل مدة INP ما يلي:
- الوقت بين تفاعل المستخدم مع الصفحة وتنفيذ معالج الحدث.
- وقت تنفيذ البرنامج النصي.
- الوقت من تنفيذ التعليمات البرمجية إلى عرض الإخراج للمستخدم.
تحدث هذه العمليات عادةً خلال أجزاء من الثانية، ولكن على الأجهزة المحمولة، وخاصة هواتف Android القديمة ذات طاقة وحدة المعالجة المركزية المنخفضة، غالبًا ما يكون مثل هذا التأخير (زمن الوصول) ملحوظًا. تجدر الإشارة إلى أن بيانات INP، مثل بيانات Lighthouse الأخرى، يتم جمعها بشكل مجهول ويتم تقييمها بناءً على في المئة 75. ولذلك، فإن الهدف هو إنشاء تطبيقات ذات أداء جيد على الأجهزة المتوسطة وليس فقط على الأجهزة المتطورة.
أمثلة واقعية على مدة INP
فيما يلي بعض الأمثلة الواقعية من صفحات الإنترنت التي نزورها يوميًا لشرح هذا المفهوم:
إدخال العنوان على موقع التجارة الإلكترونية
عند قيامك بالتسوق على أحد مواقع التجارة الإلكترونية وإدخال عنوان الشحن، عليك أولاً تحديد المحافظة. بعد ذلك، عند النقر فوق مربع التحديد لاختيار المنطقة، تنتظر لفترة من الوقت حتى يتم تحميل نتيجة Ajax، وبعد وقت معين، يتم تحميل معلومات المنطقة. وهذا مثال جيد على INP. قد يتضمن تحسين تجربة المستخدم في هذا المثال إضافة "مؤشر تحميل" لإعلام المستخدم بعملية Ajax.
فرز الاختيار
عند استخدام عوامل التصفية في صفحات قائمة المنتجات، إذا لم تتم إدارة المنتجات التي تمت تصفيتها بشكل صحيح بعد النقر فوق مربع الاختيار، فسيؤدي ذلك إلى زيادة INP. يمكن أن يساعد استخدام JS الأقل تعقيدًا والأخذ في الاعتبار تجربة المستخدم أثناء عمليات التصفية في الحفاظ على قيمة INP عند أعلى مستوى ممكن.
معارض صور المنتجات
من المحتمل أن يؤثر الوقت الذي ينتظره المستخدمون حتى يتم تحميل معرض الصور بعد النقر على صورة المنتج في صفحات تفاصيل المنتج على INP.
زر الحجز
يعتبر تأخير التفاعل بين النقر على زر "إجراء حجز" والصفحة التالية مثالاً على INP.
إضافة إلى زر عربة التسوق
ميلي ثانية من التأخير عند النقر فوق الزر "إضافة إلى سلة التسوق" والتساؤل عما إذا كان العنصر قد تمت إضافته إلى سلة التسوق أم لا يحدد INP بشكل مثالي.
كما هو موضح في هذه الأمثلة، توجد مصائد INP في السيناريوهات التي تؤثر على كل من تحسين محركات البحث ومعدلات التحويل المباشر.
كيفية تحسين INP؟
- استخدم مكتبات JS Frontend الحديثة: يعد تحسين الأداء باستخدام مكتبات الواجهة الأمامية لـ JS الحديثة مثل Vue وReact وAngular مفيدًا لأنها توفر مزايا الأداء وقابلية إعادة الاستخدام.
- تقليل تعقيد مكتبات JS: يُنصح باستخدام مكتبات JS الأقل تعقيدًا. أنا شخصياً أوصي بتجنب jQuery قدر الإمكان.
مستويات مترية INP مقبولة
القيم العتبية ل تبلغ مستويات INP الجيدة والمتوسطة والضعيفة 200 مللي ثانية و500 مللي ثانية. يعد إبقاء INP ضمن هذه الحدود أمرًا ضروريًا للحفاظ على تجربة مستخدم جيدة وأداء الويب بشكل عام.
