فهم كيفية تأثير مقياس INP الجديد على تجربة المواقع الإلكترونية التي تم إنشاؤها باستخدام إطارات عمل ومكتبات JavaScript.
قدّم Chrome مؤخرًا مقياسًا جديدًا للاستجابة التجريبية في تقرير تقرير تجربة المستخدم في Chrome. يقيس هذا المقياس، الذي يُعرف الآن باسم مدى استجابة الصفحة لتفاعلات المستخدم (INP)، مدى الاستجابة بشكل عام لتفاعلات المستخدم على الصفحة. واليوم، نريد مشاركة إحصاءات حول الأماكن التي ترتبط بها المواقع الإلكترونية التي تم إنشاؤها باستخدام إطارات عمل JavaScript الحديثة بهذا المقياس. نريد مناقشة سبب صلة مقياس INP بأُطر العمل وكيفية عمل Aurora وأُطر العمل لتحسين سرعة الاستجابة.
الخلفية
يستخدم Chrome "مهلة الاستجابة الأولى" (FID) كجزء من "مؤشرات أداء الويب الأساسية" (CWV) لقياس سرعة استجابة التحميل على المواقع الإلكترونية. وتقيس FID وقت الانتظار بدءًا من تفاعل المستخدم الأول وحتى اللحظة التي يتمكّن فيها المتصفِّح من معالجة معالِجات الأحداث المرتبطة بالتفاعل. ولا يشمل ذلك الوقت اللازم لمعالجة معالِجات الأحداث أو معالجة التفاعلات اللاحقة على الصفحة نفسها أو عرض الإطار التالي بعد تشغيل عمليات استدعاء الحدث. ومع ذلك، فإنّ سرعة الاستجابة هي أمر بالغ الأهمية لتجربة المستخدم طوال دورة حياة الصفحة لأن المستخدمين يقضون ما يقرب من 90% من الوقت على الصفحة بعد تحميلها.
تقيس مدى استجابة الصفحة لتفاعلات المستخدم (INP) الوقت الذي تستغرقه صفحة الويب للاستجابة لتفاعلات المستخدم منذ بدء التفاعل وحتى اللحظة التي يتم فيها عرض الإطار التالي على الشاشة. عند استخدام مقياس INP، نأمل أن نوفِّر مقياسًا مجمّعًا لوقت الاستجابة الملحوظ لجميع التفاعلات خلال مراحل نشاط الصفحة. نعتقد أنّ مقياس INP سيقدّم لك تقديرًا أكثر دقةً لسرعة تحميل صفحات الويب وسرعة الاستجابة أثناء تشغيلها.
بما أنّ مقياس FID يقيس فقط تأخير عملية الإدخال للتفاعل الأول، من المحتمل أنّ مطوّري البرامج على الويب لم يحسِّنوا بشكل استباقي التفاعلات اللاحقة كجزء من عملية تحسين CWV. لذلك، سيتعين على المواقع الإلكترونية، وخاصةً تلك التي تتمتع بدرجة عالية من التفاعل، البدء في العمل جاهدًا لتحقيق أداء جيد وفقًا لهذا المقياس.
دور أطر العمل
بما أنّ العديد من المواقع الإلكترونية تعتمد على JavaScript لتوفير التفاعل، ستتأثر نتيجة INP بشكل أساسي بكمية JavaScript التي تمت معالجتها في سلسلة التعليمات الرئيسية. تُعدّ أُطر عمل JavaScript جزءًا أساسيًا من التطوير الحديث للواجهة الأمامية على الويب، وهي تزوّد المطوّرين بالتجريدات القيّمة للتوجيه ومعالجة الأحداث وتقسيم رمز JavaScript. وبالتالي، فلديها دور مركزي في تحسين الاستجابة وتجربة المستخدم لمواقع الويب التي تستخدمها.
ربما تكون الأطر قد اتخذت خطوات لتحسين الاستجابة من خلال تحسين FID لمواقع الويب في وقت سابق. ومع ذلك، سيتعين عليها الآن تحليل بيانات مقياس الاستجابة المتاحة والعمل على معالجة أي فجوات تم تحديدها. بشكل عام، يوفر مقياس INP معدلات نجاح أقل، ويتطلب الفرق في عملية القياس تحسينًا إضافيًا للرمز. يلخص الجدول التالي السبب.
يعمل فريق Aurora في Chrome على أُطر عمل البرامج المفتوحة المصدر على الويب لمساعدة المطوّرين على تحسين الجوانب المختلفة لتجربة المستخدم، بما في ذلك الأداء ومقاييس CWV. ومع إطلاق INP، نريد أن نكون مستعدين للتغيير في مقاييس CWV للمواقع الإلكترونية المستندة إلى إطار العمل. لقد جمعنا البيانات استنادًا إلى مقياس الاستجابة التجريبي في تقارير CrUX. وسنشارك الإحصاءات وبنود العمل لتسهيل الانتقال إلى مقياس INP للمواقع الإلكترونية المستندة إلى إطار العمل.
بيانات مقياس الاستجابة التجريبية
إذا كان مقياس INP أقل من 200 ملي ثانية أو أقل منه، تقدّم لنا بيانات تقرير تجربة المستخدم على Chrome وتقرير تكنولوجيا CWV لشهر حزيران (يونيو) 2023 المعلومات التالية حول مدى استجابة إطارات عمل JavaScript الشائعة.
يعرض الجدول النسبة المئوية للمصادر في كل إطار عمل حصلت على درجة استجابة جيدة. الأرقام مشجعة، ولكنها تخبرنا أن هناك مجالاً كبيرًا للتحسين.
كيف تؤثر JavaScript في مدى استجابة الصفحة لتفاعلات المستخدم (INP)؟
ترتبط قيم مقياس مدى استجابة الصفحة لتفاعلات المستخدم (INP) في الحقل بشكل جيد بإجمالي وقت الحظر (TBT) المرصود في التمرين المعملي. وقد يعني ذلك أنّ استخدام أي نص برمجي يحظر سلسلة التعليمات الرئيسية لمدة طويلة سيكون سيئًا بالنسبة إلى مقياس INP. قد يؤدي التنفيذ الكثيف لرموز JavaScript بعد أي تفاعل إلى حظر سلسلة التعليمات الرئيسية لفترة طويلة وتأخير الاستجابة لذلك التفاعل. في ما يلي بعض الأسباب الشائعة التي تؤدي إلى حظر النصوص البرمجية:
لغة JavaScript غير محسَّنة: يمكن أن تؤدّي الرموز المكرّرة أو الاستراتيجيات السيئة لتحميل الرموز البرمجية وتوزيعها بشكل غير محسَّن إلى تضخم محتوى JavaScript وحظر سلسلة التعليمات الرئيسية لفترات طويلة. يمكن تحسين أوقات الاستجابة بشكل كبير من خلال تقسيم الرمز والتحميل التدريجي وتقسيم المهام الطويلة.
النصوص البرمجية التابعة لجهات خارجية: النصوص البرمجية التابعة لجهات خارجية، والتي تكون في بعض الأحيان غير مطلوبة لمعالجة تفاعل (على سبيل المثال، النصوص البرمجية للإعلانات)، يمكن أن تحظر سلسلة المحادثات الرئيسية وتتسبّب في حدوث تأخيرات غير ضرورية. يمكن أن يساعد تحديد أولويات النصوص البرمجية الأساسية في تقليل التأثير السلبي للنصوص البرمجية التابعة لجهات خارجية.
معالِجات الأحداث المتعدّدة: قد تتداخل معالِجات الأحداث المتعدّدة المرتبطة بكل تفاعل، ويشغِّل كلّ منها نصًا برمجيًّا مختلفًا، مع بعضها بعضًا، وتؤدّي إلى حدوث تأخيرات طويلة. قد تكون بعض هذه المهام غير أساسية ويمكن جدولتها على أحد مشغّلي الويب أو عندما يكون المتصفّح غير نشِط لفترة قصيرة.
النفقات العامة لإطار العمل على معالجة الأحداث: قد تحتوي أُطر العمل على ميزات أو بنية إضافية لمعالجة الأحداث. على سبيل المثال، تستخدم Vue دالة v-on لإرفاق أدوات معالجة الأحداث بالعناصر، بينما تلفّ Angular معالِجات أحداث المستخدم. يتطلّب تنفيذ هذه الميزات رمز إطار عمل إضافيًا أعلى JavaScript vanilla.
تحويل صفحة الويب إلى نص: عند استخدام إطار عمل JavaScript، من الشائع أن ينشئ الخادم رمز HTML الأولي لإحدى الصفحات التي يجب بعد ذلك تعزيزها باستخدام معالِجات الأحداث وحالة التطبيق لكي تكون تفاعلية في متصفّح الويب. نسمي هذه العملية الترطيب. وقد تكون هذه عملية صعبة أثناء التحميل، ويعتمد ذلك على المدة التي يستغرقها تحميل JavaScript وانتهاء فترة المعالجة. كما يمكن أن تؤدي إلى صفحات تبدو وكأنها تفاعلية عندما لا تكون كذلك. وغالبًا ما يحدث شرب الماء بشكل تلقائي أثناء تحميل الصفحة أو الكسول (على سبيل المثال، عند تفاعل المستخدم)، ويمكن أن يؤثر على مدى استجابة الصفحة لتفاعلات المستخدم (INP) أو وقت المعالجة بسبب جدولة المهام. في مكتبات مثل React، يمكنك الاستفادة من ميزة
useTransitionلكي يظهر جزء من عرض المكوِّن في الإطار التالي ويتم ترك أي آثار جانبية أكثر تكلفة للإطارات المستقبلية. بناءً على ذلك، فإنّ التحديثات في الانتقال والتي تؤدي إلى تحديثات أكثر إلحاحًا مثل النقرات يمكن أن تكون نمطًا مناسبًا لمقياس "مدى استجابة الصفحة لتفاعلات المستخدم" (INP).الجلب المُسبَق: يمكن أن يؤدي الجلب المُسبَق للموارد اللازمة لعمليات الانتقال اللاحقة إلى تحقيق أداء جيّد عند تنفيذه بشكلٍ صحيح. ومع ذلك، إذا أجريت جلب مسبق لمسارات SPA وتعرضها بشكل متزامن، قد يؤثر ذلك سلبًا على INP نظرًا لأن كل طرق العرض المكلفة هذه تكتمل في إطار واحد. قارِن ذلك بعدم الجلب المسبق لمسارك وبدء العمل المطلوب بدلاً من ذلك (على سبيل المثال،
fetch()) وإزالة حظر الطلاء. ننصحك بإعادة النظر في ما إذا كان أسلوب إطار العمل في الجلب المُسبَق يقدّم تجربة المستخدم الأمثل، وكيفية تأثير ذلك (إن وُجد) في مقياس "مدى استجابة الصفحة لتفاعلات المستخدم" (INP).
من الآن فصاعدًا، للحصول على نتيجة جيدة لمقياس INP، سيتعين على المطوّرين التركيز على مراجعة الرمز البرمجي الذي يتم تنفيذه بعد كل تفاعل على الصفحة وتحسين استراتيجيات التقسيم والمعالجة والتحميل وحجم كل تحديث Render() لكل من النصوص البرمجية التابعة للطرف الأول والجهات الخارجية.
كيف تعالج Aurora وأطر العمل مشاكل مدى استجابة الصفحة لتفاعلات المستخدم (INP)؟
تعمل Aurora على أطر العمل من خلال دمج أفضل الممارسات لتقديم حلول مدمجة للمشكلات الشائعة. لقد تعاونّا مع Next.js وNuxt.js وGatsby وAngular لإيجاد حلول توفّر إعدادات تلقائية فعّالة ضمن إطار العمل لتحسين الأداء. في ما يلي أبرز إنجازاتنا في هذا السياق:
التفاعل وNext.js: يساعد مكوِّن النص البرمجي Next.js في معالجة المشاكل الناتجة عن التحميل غير الفعال للنصوص البرمجية التابعة لجهات خارجية. تم تقديم التقسيم الدقيق في Next.js للسماح بالتقسيم الأصغر حجمًا في التعليمات البرمجية المشتركة. ويساعد ذلك في تقليل مقدار الرموز الشائعة غير المستخدَمة التي يتم تنزيلها على جميع الصفحات. ونعمل أيضًا مع Next.js لإتاحة بيانات INP كجزء من خدمة إحصاءات Google.
Angular: شركة Aurora تتعاون مع فريق Angular لاستكشاف التحسينات المتعلّقة بالعرض من جهة الخادم وتحسين نسبة شرب الماء والسوائل. ونخطط أيضًا لفحص التحسينات في معالجة الأحداث وتغيير رصدها لتحسين INP.
Vue وNuxt.js: نحن نستكشف طرقًا للتعاون لا سيما في ما يتعلق بتحميل النصوص وعرضها.
كيف تفكِّر أطر العمل في تحسين مدى استجابة الصفحة لتفاعلات المستخدم (INP)؟
التفاعل وNext.js
تتيح لك ميزة تقسيم الوقت في React.js، التي يتم تنفيذها خلال startTransition وSuspense، الموافقة على استخدام منهج استهلاك المياه بشكل انتقائي أو تدريجي. وهذا يعني أن شرب الماء ليس منعًا متزامنًا. يتم ذلك في شرائح صغيرة يمكن مقاطعتها في أي وقت.
ويُفترض أن يساعد ذلك في تحسين INP وتمكينك من الاستجابة بسرعة أكبر لضغطات المفاتيح والتمريرات فوق التأثيرات والنقرات أثناء الانتقال. ويساعد ذلك أيضًا في الحفاظ على استجابة تطبيقات React حتى عند الانتقال بين العناصر الكبيرة، مثل الإكمال التلقائي.
نفّذ Next.js إطار عمل توجيه جديد يستخدم startTransition تلقائيًا لعمليات نقل المسار. يتيح هذا الإجراء لمالكي مواقع Next.js اعتماد تقسيم وقت التفاعل وتحسين استجابة عمليات انتقال المسار.
Angular
يستكشف فريق Angular العديد من الأفكار التي من شأنها أن تساعد أيضًا بخصوص INP:
- بدون مساحة تخزين: يقلّل هذا الخيار من حجم الحزمة الأولي والرموز المطلوبة التي يجب تحميلها ليتمكّن التطبيق من عرض أي محتوى.
- الترطيب: شُرب الماء والسوائل التي يتم استخدامها لتقليل مقدار شرب الماء الذي يجب تنشيطه من التطبيق للتفاعل مع التفاعل معه
- خفض النفقات العامة لاستخدام القرص المخصّص: على سبيل المثال، يمكنك تقليل تكلفة رصد التغيير، والبحث عن طرق للتحقّق من المحتوى الأقل من التطبيق، والاستفادة من الإشارات التفاعلية بشأن التغييرات التي تم إجراؤها.
- تقسيم الرموز البرمجية بدقة أكبر: اجعل الحزمة الأولية أصغر حجمًا.
- دعم أفضل لمؤشرات التحميل: على سبيل المثال، أثناء إعادة عرض SSR، وأثناء التنقل في المسار، وفي عمليات التحميل الكسول.
- أدوات التحليل: أدوات أفضل للمطوّرين لفهم تكلفة التفاعل، خاصةً في ما يتعلّق بتكلفة اكتشاف التغيير لتفاعلات محدَّدة.
من خلال هذه التحسينات، يمكننا معالجة المشاكل المختلفة التي تؤدي إلى ضعف الاستجابة وتجربة المستخدم، وتحسين مقاييس CWV ومقياس INP الجديد للمواقع الإلكترونية المستندة إلى إطار العمل.
الخلاصة
نتوقّع من نتيجة مقياس INP توفير بوصلة أفضل للمواقع الإلكترونية لتحسين سرعة الاستجابة والأداء في المستقبل. وسنعتمد على دليل مقياس مدى استجابة الصفحة لتفاعلات المستخدم (INP) الحالي لتوفير المزيد من النصائح المفيدة لمطوّري أُطر العمل في 2023. نحن نأمل في تحقيق ذلك من خلال:
- إنشاء قنوات لسهولة الوصول إلى البيانات الميدانية حول مقياس INP لأُطر العمل ومطوّري البرامج على الويب
- يمكنك العمل باستخدام أُطر العمل لإنشاء ميزات تعمل على تحسين مقياس INP بشكل تلقائي.
نرحّب بالملاحظات التي تلقّيناها من مستخدمي إطار العمل عند بدء تجارب تحسين مدى استجابة الصفحة لتفاعلات المستخدم (INP).