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