RAIL هو نموذج أداء يركّز على المستخدم ويوفّر بنية للتفكير في الأداء. يقسّم النموذج تجربة المستخدم إلى إجراءات رئيسية (مثل النقر والتمرير والتحميل) ويساعدك في تحديد أهداف الأداء لكل منها.
يرمز الاختصار RAIL إلى أربعة جوانب مختلفة من دورة حياة تطبيق الويب: الاستجابة، والصور المتحركة، والخمول، والتحميل. تختلف توقعات المستخدمين بشأن الأداء في كل سياق من هذه السياقات، لذا يتم تحديد أهداف الأداء بناءً على السياق وأبحاث تجربة المستخدم حول كيفية إدراك المستخدمين للتأخيرات.
التركيز على احتياجات المستخدم واهتماماته
اجعل المستخدمين محور جهودك لتحسين الأداء. يوضح الجدول أدناه المقاييس الرئيسية لكيفية إدراك المستخدمين لتأخيرات الأداء:
تصوّر المستخدم لتأخيرات الأداء| من 0 إلى 16 ملي ثانية | يتمتع المستخدمون بقدرة استثنائية على تتبُّع الحركة، ولا يحبون أن تكون الرسوم المتحركة غير سلسة. ويعتبرون الصور المتحركة سلسة طالما يتم عرض 60 إطارًا جديدًا كل ثانية. وهذا يعني 16 ملي ثانية لكل إطار، بما في ذلك الوقت الذي يستغرقه المتصفّح لرسم الإطار الجديد على الشاشة، ما يترك للتطبيق حوالي 10 ملي ثانية لإنتاج إطار. |
| من 0 إلى 100 مللي ثانية | إذا استجبت لإجراءات المستخدمين خلال هذه الفترة الزمنية، سيشعرون بأنّ النتيجة فورية. إذا طالت المدة، سينقطع الرابط بين الفعل ورد الفعل. |
| من 100 إلى 1000 مللي ثانية | ضمن هذه النافذة، تبدو الأشياء جزءًا من تقدم طبيعي ومستمر للمهام. بالنسبة إلى معظم المستخدمين على الويب، يمثّل تحميل الصفحات أو تغيير طرق العرض مهمة. |
| 1,000 ملي ثانية أو أكثر | بعد 1000 مللي ثانية (ثانية واحدة)، يفقد المستخدمون التركيز على المهمة التي يؤدونها. |
| 10,000 ملي ثانية أو أكثر | بعد 10000 مللي ثانية (10 ثوانٍ)، يشعر المستخدمون بالإحباط ومن المرجح أن يتخلوا عن المهام. وقد يعودون لاحقًا أو لا يعودون. |
الأهداف والإرشادات
في سياق RAIL، يكون للمصطلحَين الأهداف والإرشادات معانٍ محدّدة:
الأهداف: مقاييس الأداء الرئيسية ذات الصلة بتجربة المستخدم على سبيل المثال، انقر للرسم في أقل من 100 مللي ثانية. بما أن الإدراك البشري ثابت نسبيًا، فمن غير المرجح أن تتغير هذه الأهداف في أي وقت قريب.
الإرشادات: اقتراحات تساعدك في تحقيق أهدافك، وقد تكون خاصة بحالة الأجهزة الحالية واتصال الشبكة، وبالتالي قد تتغيّر بمرور الوقت
الاستجابة: معالجة الأحداث في أقل من 50 ملي ثانية
الهدف: إكمال عملية انتقال بدأها المستخدم في غضون 100 ملي ثانية، ليشعر المستخدمون بأنّ التفاعلات فورية.
الإرشادات:
لضمان ظهور الاستجابة في غضون 100 ملي ثانية، يجب معالجة أحداث إدخال المستخدم في غضون 50 ملي ثانية. ينطبق ذلك على معظم الإدخالات، مثل النقر على الأزرار أو تبديل عناصر التحكّم في النماذج أو بدء الصور المتحركة. لا ينطبق هذا على عمليات السحب أو التمرير باللمس.
على الرغم من أنّ ذلك قد يبدو غير منطقي، إلا أنّ الاستجابة لإدخال المستخدم على الفور ليست دائمًا الخيار الصحيح. يمكنك استخدام هذه النافذة التي تبلغ مدتها 100 ملي ثانية لإجراء عمليات أخرى مكلفة، ولكن احرص على عدم حظر المستخدم. إذا أمكن، يمكنك تنفيذ العمل في الخلفية.
بالنسبة إلى الإجراءات التي تستغرق أكثر من 50 ملي ثانية لإكمالها، يجب دائمًا تقديم ملاحظات.
50 ملي ثانية أم 100 ملي ثانية؟
الهدف هو الاستجابة للإدخال في أقل من 100 ملي ثانية، فلماذا تبلغ ميزانيتنا 50 ملي ثانية فقط؟ ويرجع ذلك إلى أنّه يتم عادةً تنفيذ أعمال أخرى بالإضافة إلى معالجة الإدخال، ويستغرق هذا العمل جزءًا من الوقت المتاح للاستجابة المقبولة للإدخال. إذا كان التطبيق ينفّذ العمل في الأجزاء المقترَحة التي تبلغ مدتها 50 ملي ثانية خلال وقت الخمول، يعني ذلك أنّه يمكن وضع الإدخال في قائمة الانتظار لمدة تصل إلى 50 ملي ثانية إذا حدث خلال أحد أجزاء العمل هذه. وبالتالي، يمكننا افتراض أنّ 50 ملي ثانية فقط من الوقت المتبقي متاح لمعالجة الإدخال الفعلي. يتم توضيح هذا التأثير في المخطّط البياني أدناه الذي يعرض كيفية وضع الإدخال الذي يتم تلقّيه أثناء مهمة غير نشطة في قائمة الانتظار، ما يقلّل من وقت المعالجة المتاح:
الصور المتحركة: إنتاج إطار في 10 ملي ثانية
الأهداف:
إنشاء كل إطار في صورة متحركة خلال 10 ملي ثانية أو أقل من الناحية الفنية، الحد الأقصى للميزانية لكل لقطة هو 16 ملي ثانية (1000 ملي ثانية / 60 لقطة في الثانية ≈ 16 ملي ثانية)، ولكن تحتاج المتصفحات إلى حوالي 6 ملي ثانية لعرض كل لقطة، وبالتالي فإن الإرشادات هي 10 ملي ثانية لكل لقطة.
اسعَ إلى تحقيق السلاسة المرئية. يلاحظ المستخدمون اختلاف عدد اللقطات في الثانية.
الإرشادات:
في نقاط الضغط العالي مثل الرسوم المتحركة، المفتاح هو عدم القيام بأي شيء حيث يمكنك، والحد الأدنى المطلق حيث لا يمكنك ذلك. استفِد من الاستجابة التي تستغرق 100 ملي ثانية كلما أمكن ذلك لإجراء العمليات الحسابية المسبقة للعمليات المكلفة، وذلك لزيادة فرصك في الوصول إلى 60 لقطة في الثانية.
يمكنك الاطّلاع على أداء العرض للتعرّف على استراتيجيات مختلفة لتحسين الصور المتحركة.
- الرسوم المتحركة المرئية، مثل الدخول والخروج، والرسوم البينية، ومؤشرات التحميل.
- الانتقال ويشمل ذلك التمرير السريع، أي عندما يبدأ المستخدم بالتمرير ثم يترك الشاشة، وتستمر الصفحة في التمرير.
- السحب غالبًا ما تتبع الصور المتحركة تفاعلات المستخدم، مثل تحريك الخريطة أو التصغير أو التكبير بإصبعين.
الخمول: زيادة وقت الخمول إلى أقصى حد
الهدف: زيادة وقت عدم النشاط إلى أقصى حد لزيادة احتمالات استجابة الصفحة لإدخال المستخدم في غضون 50 ملي ثانية.
الإرشادات:
استخدِم وقت الخمول لإكمال العمل المؤجَّل. على سبيل المثال، عند تحميل الصفحة لأول مرة، يجب تحميل أقل قدر ممكن من البيانات، ثم استخدام وقت الخمول لتحميل بقية البيانات.
تنفيذ العمل أثناء وقت عدم النشاط في 50 ملي ثانية أو أقل وإذا استغرقت وقتًا أطول، قد يؤثر ذلك في قدرة التطبيق على الاستجابة لإدخالات المستخدم في غضون 50 ملي ثانية.
إذا تفاعل المستخدم مع صفحة أثناء عمل وقت الخمول، يجب أن يحظى تفاعل المستخدم دائمًا بالأولوية القصوى وأن يقاطع عمل وقت الخمول.
التحميل: تقديم المحتوى وإتاحة التفاعل معه في أقل من 5 ثوانٍ
عندما يتم تحميل الصفحات ببطء، يتشتت انتباه المستخدمين، ويعتبرون أنّ المهمة غير مكتملة. تتميّز المواقع الإلكترونية التي يتم تحميلها بسرعة بمتوسط مدة جلسات أطول ومعدلات ارتداد أقل وإمكانية عرض أعلى للإعلانات.
الأهداف:
حسِّن أداء التحميل السريع بما يتناسب مع إمكانات أجهزة المستخدمين وشبكاتهم. في الوقت الحالي، من الأهداف الجيدة لعمليات التحميل الأولى أن يتم تحميل الصفحة وأن تكون تفاعلية خلال 5 ثوانٍ أو أقل على الأجهزة الجوّالة المتوسطة المواصفات التي تستخدم اتصالات 3G بطيئة.
بالنسبة إلى عمليات التحميل اللاحقة، من الجيد أن يتم تحميل الصفحة في أقل من ثانيتين.
الإرشادات:
اختبِر أداء التحميل على الأجهزة الجوّالة واتصالات الشبكة الشائعة بين المستخدمين. يمكنك استخدام تقرير تجربة المستخدم على Chrome لمعرفة توزيع الاتصال لدى المستخدمين. إذا لم تكن البيانات متاحة لموقعك الإلكتروني، يقترح تقرير The Mobile Economy 2019 أن يكون خط الأساس العالمي الجيد هو هاتف Android متوسط المدى، مثل Moto G4، وشبكة 3G بطيئة (يتم تعريفها على أنها 400 مللي ثانية من وقت الإرسال والاستجابة وسرعة نقل 400 كيلوبت في الثانية). تتوفّر هذه المجموعة على WebPageTest.
يُرجى العِلم أنّه على الرغم من أنّ جهاز المستخدم العادي للأجهزة الجوّالة قد يشير إلى أنّه متصل بشبكة الجيل الثاني أو الثالث أو الرابع، تكون سرعة الاتصال الفعلية في الواقع أبطأ بكثير في أغلب الأحيان بسبب فقدان الحِزم واختلاف الشبكة.
ليس عليك تحميل كل شيء في أقل من 5 ثوانٍ لإنتاج تصور التحميل الكامل. يمكنك استخدام التحميل الكسول للصور وتقسيم الرموز البرمجية لحِزم JavaScript والتحسينات الأخرى المقترَحة على web.dev.
أدوات لقياس RAIL
هناك بعض الأدوات التي تساعدك في أتمتة قياسات RAIL. يعتمد أي منها تستخدمه على نوع المعلومات التي تحتاجها، ونوع سير العمل الذي تفضله.
أدوات مطوري البرامج في Chrome
توفّر أدوات مطوّري البرامج في Chrome تحليلاً متعمقًا لكل ما يحدث أثناء تحميل صفحتك أو تشغيلها. يمكنك الاطّلاع على بدء تحليل أداء وقت التشغيل للتعرّف على واجهة مستخدم لوحة الأداء.
تُعدّ ميزات "أدوات مطوري البرامج" التالية ذات صلة بشكل خاص:
تقييد وحدة المعالجة المركزية لمحاكاة جهاز أقل قوة
اضبط الحدّ الأقصى المسموح لعرض نطاق الشبكة لمحاكاة الاتصالات البطيئة.
عرض نشاط سلسلة التعليمات الرئيسية لعرض كل حدث وقع في سلسلة التعليمات الرئيسية أثناء التسجيل.
عرض أنشطة سلسلة التعليمات الرئيسية في جدول لترتيب الأنشطة حسب الأنشطة التي استغرقت وقتًا أطول
تحليل عدد اللقطات في الثانية (FPS) لقياس ما إذا كانت الصور المتحركة تعمل بسلاسة.
يمكنك مراقبة استخدام وحدة المعالجة المركزية (CPU) وحجم كومة الذاكرة المؤقتة في JS وعُقد نموذج العناصر في المستند (DOM) والتنسيقات في الثانية والمزيد في الوقت الفعلي باستخدام أداة مراقبة الأداء.
عرض طلبات الشبكة التي حدثت أثناء التسجيل باستخدام قسم الشبكة
التقاط لقطات شاشة أثناء التسجيل لتشغيل شكل الصفحة بالضبط أثناء تحميلها أو تشغيل صورة متحركة وما إلى ذلك.
عرض التفاعلات لتحديد ما حدث على الصفحة بسرعة بعد تفاعل المستخدم معها
العثور على مشاكل أداء الانتقال في الوقت الفعلي من خلال تمييز الصفحة كلما تم تشغيل مستمع قد يتسبب في حدوث مشاكل
عرض أحداث الرسم في الوقت الفعلي لتحديد أحداث الرسم المكلفة التي قد تضر بأداء الرسوم المتحركة.
منارة
تتوفّر أداة Lighthouse في "أدوات مطوّري البرامج في Chrome"، وعلى إحصاءات PageSpeed، وكإضافة في Chrome، وكوحدة Node.js، وضمن WebPageTest. ما عليك سوى إدخال عنوان URL، وستحاكي الأداة جهازًا متوسط المواصفات متصل بشبكة 3G بطيئة، وتجري سلسلة من عمليات التدقيق على الصفحة، ثم تقدّم لك تقريرًا عن أداء التحميل، بالإضافة إلى اقتراحات حول كيفية تحسينه.
عمليات التدقيق التالية ذات صلة بشكل خاص:
الردّ
الحد الأقصى المحتمَل لمهلة الاستجابة لأوّل إدخال: يقدّر هذا المقياس الوقت الذي سيستغرقه تطبيقك للاستجابة للبيانات التي يُدخلها المستخدم، استنادًا إلى وقت عدم نشاط سلسلة التعليمات الرئيسية.
لا يتم استخدام أدوات معالجة الأحداث السلبية لتحسين أداء الانتقال في الصفحة.
إجمالي وقت الحظر: يقيس هذا المقياس إجمالي الوقت الذي يتم فيه حظر صفحة من الاستجابة لإدخال المستخدم، مثل نقرات الماوس أو النقر على الشاشة أو الضغط على لوحة المفاتيح.
سرعة الاستعداد للتفاعل: يقيس هذا المقياس الوقت الذي يمكن فيه للمستخدم التفاعل باستمرار مع جميع عناصر الصفحة.
التحميل
لا يتم تسجيل مشغّل خدمات يتحكّم في الصفحة وstart_url. يمكن لبرنامج الخدمة تخزين الموارد الشائعة مؤقتًا على جهاز المستخدم، ما يقلل من الوقت المستغرق في جلب الموارد عبر الشبكة.
تأجيل تحميل الصور خارج الشاشة يمكنك تأجيل تحميل الصور خارج الشاشة إلى أن تكون هناك حاجة إليها.
اختيار حجم مناسب للصور لا تعرض صورًا أكبر بكثير من الحجم الذي يتم عرضه في إطار العرض على الأجهزة الجوّالة.
تجنُّب زيادة حجم عناصر DOM يمكنك تقليل وحدات بايت الشبكة من خلال إرسال عُقد DOM اللازمة فقط لعرض الصفحة.
WebPageTest
WebPageTest هي أداة لقياس أداء الويب تستخدم متصفّحات حقيقية للوصول إلى صفحات الويب وجمع مقاييس التوقيت. أدخِل عنوان URL على webpagetest.org/easy للحصول على تقرير مفصّل عن أداء تحميل الصفحة على جهاز Moto G4 حقيقي باتصال بطيء بشبكة الجيل الثالث. ويمكنك أيضًا ضبطه ليتضمّن تدقيق Lighthouse.
ملخّص
RAIL هو نموذج يركّز على تجربة المستخدم في الموقع الإلكتروني كرحلة تتألف من تفاعلات مختلفة. افهم كيف يرى المستخدمون موقعك الإلكتروني من أجل تحديد أهداف الأداء التي لها أكبر تأثير في تجربة المستخدم.
التركيز على احتياجات المستخدم واهتماماته
الاستجابة لإدخال المستخدم في أقل من 100 ملي ثانية
إنشاء إطار في أقل من 10 ملي ثانية عند استخدام الصور المتحركة أو التمرير
زيادة وقت عدم نشاط سلسلة التعليمات الرئيسية إلى أقصى حد
تحميل المحتوى التفاعلي في أقل من 5000 ملي ثانية