مستوى أداء أُطر العمل الحديثة على مقياس INP الجديد

التعرّف على تأثير مقياس INP الجديد في تجربة المواقع الإلكترونية التي تم إنشاؤها باستخدام إطارات عمل JavaScript والمكتبات

Leena Sohoni

Addy Osmani

Keen Yee Liau

قدَّم Chrome مؤخرًا مقياس استجابة تجريبية جديدًا في تقرير تقرير تجربة المستخدم على Chrome. يقيس هذا المقياس، الذي يُعرف الآن باسم مدى استجابة الصفحة لتفاعلات المستخدم (INP)، مدى استجابة الصفحات لتفاعلات المستخدمين على الصفحة بشكل عام. واليوم نرغب في مشاركة إحصاءات حول مواقع الويب التي تم إنشاؤها باستخدام أطر عمل JavaScript حديثة في ما يتعلّق بهذا المقياس. لهذا السبب، نريد أن نناقش مدى صلة مقياس INP بأُطر العمل، وكيف تعمل Aurora وأُطر العمل على تحسين سرعة الاستجابة.

الخلفية

يستخدم Chrome "مهلة الاستجابة الأولى" (FID) كجزء من مؤشرات Core Web Vitals (CWV) لقياس استجابة التحميل للمواقع الإلكترونية. يقيس FID وقت الانتظار من أول تفاعل للمستخدم إلى اللحظة التي يتمكن فيها المتصفِّح من معالجة معالِجات الأحداث المرتبطة بالتفاعل. ولا يتضمّن الوقت اللازم لمعالجة معالِجات الأحداث، أو معالجة التفاعلات اللاحقة في الصفحة نفسها، أو عرض الإطار التالي بعد تشغيل عمليات استدعاء الحدث. مع ذلك، من المهم الاستجابة بشكل بالغ الأهمية لتوفير تجربة جيدة للمستخدمين على مدار دورة حياة الصفحة، لأنّ المستخدمين يقضون حوالي 90% من الوقت على الصفحة بعد تحميلها.

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

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

دور أطر العمل

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

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

يعمل فريق Aurora في Chrome مع أُطر عمل ويب مفتوحة المصدر لمساعدة المطوّرين على تحسين الجوانب المختلفة لتجربة المستخدم، بما في ذلك مقاييس الأداء وCWV. مع إطلاق مقياس INP، نريد أن نكون مستعدين للتغيير في مقاييس CWV لمواقع الويب المستندة إلى إطار العمل. لقد جمعنا البيانات استنادًا إلى مقياس الاستجابة التجريبي في تقارير CrUX. وسنشارك الإحصاءات وبنود العمل لتسهيل عملية الانتقال إلى مقياس INP للمواقع الإلكترونية المستنِدة إلى إطار العمل.

بيانات مقياس الاستجابة التجريبية

يشير INP (أقل من 200 ملّي ثانية إلى) إلى سرعة الاستجابة الجيدة. تقدّم لنا بيانات تقرير CrUX وتقرير تكنولوجيا CWV لشهر حزيران (يونيو) 2023 المعلومات التالية حول استجابة أطر عمل JavaScript الشائعة.

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

كيف تؤثر لغة JavaScript في مدى INP؟

ترتبط قيم INP في الحقل بشكل جيد بإجمالي وقت الحظر (TBT) الذي تم رصده في التمرين المعملي. قد يشير ذلك إلى أنّ أي نص برمجي يحظر سلسلة التعليمات الرئيسية لمدة طويلة قد يؤثر سلبًا في مقياس INP. قد يؤدي تنفيذ JavaScript بشكل مكثف بعد أي تفاعل إلى حظر سلسلة التعليمات الرئيسية لفترة طويلة وتأخير الاستجابة لذلك التفاعل. في ما يلي بعض الأسباب الشائعة التي تؤدي إلى حظر النصوص البرمجية:

• لغة JavaScript غير محسَّنة: قد يؤدي استخدام رمز متكرر أو استراتيجيات تحميل وتقسيم الرموز بشكل غير صحيح إلى زيادة حجم JavaScript وحظر سلسلة التعليمات الرئيسية لفترات طويلة. يمكن أن يؤدي تقسيم الرموز والتحميل التدريجي وتقسيم المهام الطويلة إلى تحسين أوقات الاستجابة بشكل كبير.

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

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

• أعباء العمل على معالجة الأحداث: قد تتضمّن أُطر العمل ميزات أو بنية إضافية للتعامل مع الأحداث. على سبيل المثال، تستخدم منصة Vue استخدام دالة v-on لإرفاق أدوات معالجة الأحداث بالعناصر، بينما تعمل منصة Angular على إحاطة معالِجات أحداث المستخدِم. يتطلب تنفيذ هذه الميزات رمز إطار عمل إضافيًا أعلى vanilla JavaScript.

• إعادة ترتيب الصفحات: عند استخدام إطار عمل JavaScript، ليس من غير المألوف أن ينشئ الخادم رمز HTML الأولي لصفحة يجب بعد ذلك تعزيزها باستخدام معالِجات الأحداث وحالة التطبيق كي تكون تفاعلية في متصفّح الويب. نسمي هذه العملية ترطيب العملية. قد تكون هذه عملية صعبة أثناء التحميل، وتعتمد على المدة التي تستغرقها لغة JavaScript في التحميل وانتهاء عملية تحويل صفحة الويب الثابتة إلى صفحة أخرى. كما يمكن أن يؤدي إلى صفحات تبدو وكأنها تفاعلية في حين أنها ليست كذلك. غالبًا ما يحدث شرب السوائل تلقائيًا أثناء تحميل الصفحة أو بشكل كسول (على سبيل المثال، عند تفاعل المستخدم)، ويمكن أن يؤثر ذلك في مدى استجابة الصفحة لتفاعلات المستخدم (INP) أو وقت المعالجة بسبب جدولة المهام. في مكتبات مثل React، يمكنك الاستفادة من useTransition لعرض جزء من المكوِّن في الإطار التالي مع ترك أي آثار جانبية مكلفة على الإطارات المستقبلية. بناءً على ذلك، فإنّ التعديلات التي تتم في عملية الانتقال تؤدي إلى إجراء تعديلات أكثر إلحاحًا، مثل النقرات، يمكن أن تكون نمطًا مفيدًا لمقياس INP.

• الجلب المُسبَق: يمكن أن يؤدي الجلب المسبق المكثف للموارد اللازمة لعمليات التنقّل اللاحقة إلى تحقيق أفضل أداء في حال تنفيذه بشكل صحيح. إذا اخترت جلب مسارات SPA مسبقًا وعرضها بشكل متزامن، قد يؤثر ذلك سلبًا على INP، حيث تكتمل كل محاولات العرض المكلفة هذه في إطار واحد. قارِن ذلك بعدم الجلب المسبق للمسار، وبدلاً من ذلك بدء العمل المطلوب (مثلاً fetch()) وإزالة حظر الطلاء. ننصحك بإعادة التحقّق ممّا إذا كان أسلوب إطار العمل الخاص بالجلب المُسبق هو تقديم أفضل تجربة مستخدم، وكيف يمكن أن يؤثّر ذلك (إن وُجد) في INP.

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

كيف تعالج Aurora وأُطر العمل مشاكل INP؟

تستخدم منصة Aurora أطر عمل من خلال دمج أفضل الممارسات لتوفير حلول مضمّنة للمشاكل الشائعة. لقد تعاونّا مع Next.js وNuxt.js وGatsby وAngular لتقديم حلول توفِّر خيارات تلقائية قوية ضمن إطار العمل لتحسين الأداء. في ما يلي أبرز جهودنا في هذا السياق:

• React وNext.js: يساعد مكوِّن النص البرمجي Next.js في معالجة المشاكل الناتجة عن التحميل غير الفعّال للنصوص البرمجية التابعة لجهات خارجية. تم تقديم التقسيم الدقيق في Next.js للسماح بالأجزاء الأصغر حجمًا للتعليمات البرمجية المشتركة. ويساعد ذلك في تقليل مقدار الرموز الشائعة غير المستخدَمة التي يتم تنزيلها على جميع الصفحات. ونتعاون أيضًا مع شركة Next.js لتوفير بيانات INP كجزء من خدمة إحصاءات Google التي تقدّمها الشركة.

• Angular: تتعاون Aurora مع فريق Angular في البحث عن محتوى من جهة الخادم حول إدخال تحسينات على العرض واستهلاك الماء. ونخطّط أيضًا للاطّلاع على تحسينات في التعامل مع الأحداث ورصد التغييرات بهدف تحسين INP.

• Vue وNuxt.js: نسعى إلى استكشاف سبل للتعاون، لا سيما في ما يتعلق بتحميل النصوص البرمجية وعرضها.

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

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

نفَّذ Next.js إطار عمل جديدًا للتوجيه يستخدم startTransition تلقائيًا لعمليات نقل المسارات. يسمح ذلك لمالكي المواقع الإلكترونية في Next.js باعتماد عملية تقسيم الوقت في React وتحسين سرعة الاستجابة لعمليات انتقال المسارات.

Angular

يستكشف فريق Angular العديد من الأفكار التي يمكن أن تساعدك أيضًا في ما يتعلّق بمقياس INP:

• Zoneless: يقلل حجم الحِزمة الأولي والرمز المطلوب الذي يجب تحميله قبل أن يتمكّن التطبيق من عرض أي محتوى.
• زيادة استهلاك الطاقة: وهي مقدار استهلاك المياه على نحو يشبه الجزيرة لتحديد مقدار ما يجب تنشيطه من التطبيق عند التفاعل مع التطبيق.
• تقليل النفقات العامة للقرص المضغوط: على سبيل المثال، يمكنك تقليل تكلفة رصد التغييرات، والعثور على طرق أقل لفحص التطبيق، والاستفادة من الإشارات التفاعلية بشأن التغييرات التي تم إجراؤها.
• تقسيم أكثر دقة للرموز: اجعل الحزمة الأولية أصغر.
• دعم أفضل لمؤشرات التحميل:: على سبيل المثال، أثناء إعادة عرض SSR وأثناء التنقل في المسار وفي عمليات التحميل الكسول.
• أدوات إنشاء المواصفات: أدوات أفضل للمطوّرين تساعد في فهم تكلفة التفاعل، لا سيما في ما يتعلّق بتكلفة رصد التغيير لتفاعلات معيّنة

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

الخاتمة

نتوقّع أن توفّر نتيجة INP بوصلة أفضل للمواقع الإلكترونية لتحسين سرعة الاستجابة والأداء في المستقبل. وسنعتمد على دليل مدى استجابة الصفحة لتفاعلات المستخدم (INP) الحالي من أجل تقديم المزيد من النصائح القابلة للتنفيذ لمطوّري أُطر العمل في عام 2023. ونأمل تحقيق ذلك من خلال:

• إنشاء قنوات للوصول بسهولة إلى البيانات الميدانية على INP لأُطر العمل ومطوّري البرامج على الويب
• يمكنك الاستعانة بأُطر العمل لإنشاء ميزات من شأنها تحسين INP تلقائيًا.

نحن نرحّب بالملاحظات من مستخدمي إطار العمل عند بدء رحلتهم لتحسين INP.