RAIL یک مدل عملکرد کاربر محور است که ساختاری برای تفکر در مورد عملکرد فراهم می کند. این مدل تجربه کاربر را به اقدامات کلیدی (مثلاً ضربه زدن، پیمایش، بارگیری) تقسیم می‌کند و به شما کمک می‌کند اهداف عملکردی را برای هر یک از آنها تعریف کنید.
RAIL مخفف چهار جنبه متمایز از چرخه عمر برنامه وب است: پاسخ، انیمیشن، بیکار و بارگذاری. کاربران انتظارات عملکرد متفاوتی برای هر یک از این زمینه ها دارند، بنابراین اهداف عملکرد بر اساس زمینه و تحقیقات UX در مورد نحوه درک کاربران از تاخیر تعریف می شوند.
روی کاربر تمرکز کنید
کاربران را به نقطه کانونی تلاش عملکرد خود تبدیل کنید. جدول زیر معیارهای کلیدی نحوه درک کاربران از تاخیرهای عملکرد را شرح می دهد:
| 0 تا 16 میلی ثانیه | کاربران در ردیابی حرکت مهارت فوق العاده ای دارند و وقتی انیمیشن ها صاف نیستند از آن خوششان نمی آید. آنها انیمیشن‌ها را تا زمانی که در هر ثانیه ۶۰ فریم جدید رندر می‌شوند، نرم می‌دانند. این 16 میلی‌ثانیه در هر فریم است، شامل مدت زمانی که مرورگر برای رنگ آمیزی فریم جدید روی صفحه می‌برد، و یک برنامه حدود 10 میلی‌ثانیه برای تولید یک فریم باقی می‌گذارد. |
| 0 تا 100 میلی ثانیه | در این پنجره زمانی به اقدامات کاربر پاسخ دهید و کاربران احساس می کنند که نتیجه فوری است. دیگر، و ارتباط بین کنش و واکنش از بین می رود. |
| 100 تا 1000 میلی‌ثانیه | در این پنجره، چیزها بخشی از پیشرفت طبیعی و مداوم وظایف را احساس می کنند. برای اکثر کاربران در وب، بارگیری صفحات یا تغییر نماها نشان دهنده یک کار است. |
| 1000 میلی‌ثانیه یا بیشتر | بیش از 1000 میلی ثانیه (1 ثانیه)، کاربران تمرکز خود را بر روی کاری که انجام می دهند از دست می دهند. |
| 10000 میلی‌ثانیه یا بیشتر | بیش از 10000 میلی ثانیه (10 ثانیه)، کاربران ناامید هستند و احتمالاً وظایف خود را رها می کنند. ممکن است بعدا برگردند یا نشوند. |
اهداف و دستورالعمل ها
در زمینه راه آهن، اصطلاحات اهداف و دستورالعمل ها معانی خاصی دارند:
اهداف معیارهای کلیدی عملکرد مرتبط با تجربه کاربر. برای مثال، برای نقاشی در کمتر از 100 میلی ثانیه ضربه بزنید. از آنجایی که درک انسان نسبتاً ثابت است، بعید است که این اهداف به این زودی ها تغییر کنند.
رهنمودها توصیه هایی که به شما در رسیدن به اهداف کمک می کند. اینها ممکن است مختص سخت افزار فعلی و شرایط اتصال شبکه باشد و بنابراین ممکن است در طول زمان تغییر کنند.
پاسخ: رویدادها را در کمتر از 50 میلی ثانیه پردازش کنید
هدف : یک انتقال آغاز شده توسط ورودی کاربر را در عرض 100 میلی ثانیه تکمیل کنید تا کاربران احساس کنند که تعاملات آنی است.
رهنمودها :
برای اطمینان از پاسخ قابل مشاهده در 100 میلی ثانیه، رویدادهای ورودی کاربر را در 50 میلی ثانیه پردازش کنید. این برای اکثر ورودی‌ها، مانند کلیک کردن روی دکمه‌ها، تغییر دادن کنترل‌های فرم، یا شروع انیمیشن‌ها اعمال می‌شود. این برای کشیدن یا اسکرول لمسی اعمال نمی شود.
اگرچه ممکن است خلاف واقع به نظر برسد، اما پاسخگویی فوری به ورودی کاربر همیشه تماس مناسبی نیست. می توانید از این پنجره 100 میلی ثانیه برای انجام کارهای گران قیمت دیگر استفاده کنید، اما مراقب باشید که کاربر را مسدود نکنید. در صورت امکان، کار را در پس زمینه انجام دهید.
برای اقداماتی که تکمیل آنها بیش از 50 میلی ثانیه طول می کشد، همیشه بازخورد ارائه دهید.
50 میلی‌ثانیه یا 100 میلی‌ثانیه؟
هدف پاسخگویی به ورودی در کمتر از 100 میلی ثانیه است، پس چرا بودجه ما فقط 50 میلی ثانیه است؟ این به این دلیل است که معمولاً علاوه بر مدیریت ورودی، کارهای دیگری نیز انجام می شود، و این کار بخشی از زمان موجود برای پاسخ ورودی قابل قبول را می گیرد. اگر برنامه‌ای در طول زمان بی‌حرکتی در بخش‌های توصیه‌شده 50 میلی‌ثانیه کار می‌کند، به این معنی است که ورودی می‌تواند تا 50 میلی‌ثانیه در صف قرار بگیرد، اگر در یکی از آن تکه‌های کار رخ دهد. با توجه به این، می توان فرض کرد که تنها 50 میلی ثانیه باقیمانده برای مدیریت ورودی واقعی در دسترس است. این افکت در نمودار زیر نشان داده شده است که نشان می‌دهد چگونه ورودی دریافتی در طول یک کار بی‌حرکت در صف قرار می‌گیرد و زمان پردازش موجود را کاهش می‌دهد:
انیمیشن: تولید یک فریم در 10 میلی ثانیه
اهداف :
هر فریم را در یک انیمیشن در 10 میلی ثانیه یا کمتر تولید کنید. از نظر فنی، حداکثر بودجه برای هر فریم 16 میلی‌ثانیه است (1000 میلی‌ثانیه / 60 فریم در ثانیه ≈ 16 میلی‌ثانیه)، اما مرورگرها برای رندر کردن هر فریم به حدود 6 میلی‌ثانیه نیاز دارند، از این رو دستورالعمل 10 میلی‌ثانیه در هر فریم است.
صافی بصری را هدف بگیرید. کاربران متوجه می شوند که نرخ فریم متفاوت است.
رهنمودها :
در نقاط پرفشار مانند انیمیشن ها، نکته کلیدی این است که هیچ کاری را در جایی که می توانید انجام ندهید، و حداقل مطلق را در جایی که نمی توانید انجام دهید. در صورت امکان، از پاسخ ۱۰۰ میلی‌ثانیه برای پیش‌محاسبه کار گران‌قیمت استفاده کنید تا شانس خود را برای رسیدن به سرعت ۶۰ فریم در ثانیه به حداکثر برسانید.
برای استراتژی‌های مختلف بهینه‌سازی انیمیشن ، Rendering Performance را ببینید.
- انیمیشن های بصری، مانند ورودی ها و خروجی ها، tweens و نشانگرهای بارگذاری.
- پیمایش. این شامل پرت کردن می شود، یعنی زمانی که کاربر شروع به پیمایش می کند، سپس رها می کند و صفحه به پیمایش ادامه می دهد.
- کشیدن. انیمیشن ها اغلب از تعاملات کاربر، مانند حرکت به نقشه یا کوچک کردن برای بزرگنمایی، پیروی می کنند.
بیکار: زمان بیکاری را به حداکثر برسانید
هدف : زمان بیکاری را به حداکثر برسانید تا شانس پاسخ صفحه به ورودی کاربر در عرض 50 میلی ثانیه افزایش یابد.
رهنمودها :
از زمان بیکاری برای تکمیل کارهای معوق استفاده کنید. برای مثال، برای بارگذاری اولیه صفحه، تا حد امکان داده های کمتری را بارگیری کنید، سپس از زمان بیکاری برای بارگیری بقیه استفاده کنید.
کار را در زمان بیکاری در 50 میلی ثانیه یا کمتر انجام دهید. دیگر، و شما در معرض خطر تداخل با توانایی برنامه برای پاسخ دادن به ورودی کاربر در عرض 50 میلی ثانیه هستید.
اگر کاربر در حین کار در زمان بیکاری با یک صفحه تعامل داشته باشد، تعامل کاربر همیشه باید بالاترین اولویت را داشته باشد و کار زمان بیکاری را قطع کند.
بارگذاری: ارائه محتوا و تعاملی شدن در کمتر از 5 ثانیه
وقتی صفحات به کندی بارگذاری می شوند، توجه کاربر سرگردان می شود و کاربران کار را شکسته می دانند. سایت‌هایی که به سرعت بارگیری می‌شوند میانگین جلسات طولانی‌تری، نرخ پرش پایین‌تر و قابلیت مشاهده آگهی بالاتری دارند.
اهداف :
عملکرد بارگیری سریع را نسبت به دستگاه و قابلیت های شبکه کاربران خود بهینه کنید. در حال حاضر، یک هدف خوب برای اولین بارگذاری، بارگیری صفحه و تعامل در 5 ثانیه یا کمتر در دستگاه های تلفن همراه میان رده با اتصالات 3G کند است.
برای بارگذاری های بعدی، یک هدف خوب این است که صفحه را در کمتر از 2 ثانیه بارگیری کنید.
رهنمودها :
عملکرد بارگذاری خود را در دستگاه های تلفن همراه و اتصالات شبکه ای که در بین کاربران شما رایج است آزمایش کنید. می‌توانید از گزارش تجربه کاربر Chrome برای اطلاع از توزیع اتصال کاربران خود استفاده کنید. اگر داده‌ها برای سایت شما در دسترس نیست، The Mobile Economy 2019 نشان می‌دهد که یک خط پایه جهانی خوب، یک تلفن اندرویدی میان رده، مانند Moto G4، و یک شبکه 3G کند (معرفی شده به عنوان 400 میلی‌ثانیه RTT و سرعت انتقال 400 کیلوبیت بر ثانیه است. ). این ترکیب در WebPageTest موجود است.
به خاطر داشته باشید که اگرچه دستگاه معمولی کاربر تلفن همراه شما ممکن است ادعا کند که روی یک اتصال 2G، 3G یا 4G است، در واقع سرعت اتصال موثر اغلب به دلیل از دست دادن بسته ها و واریانس شبکه، به طور قابل توجهی کندتر است.
برای ایجاد درک بار کامل، لازم نیست همه چیز را در کمتر از 5 ثانیه بارگیری کنید. بارگذاری تنبل تصاویر ، بسته‌های جاوا اسکریپت با تقسیم کد و سایر بهینه‌سازی‌های پیشنهاد شده در web.dev را در نظر بگیرید.
ابزار اندازه گیری RAIL
چند ابزار وجود دارد که به شما کمک می کند اندازه گیری RAIL خود را خودکار کنید. اینکه کدام یک از آنها استفاده می کنید بستگی به نوع اطلاعات مورد نیاز شما و نوع گردش کار شما دارد.
Chrome DevTools
Chrome DevTools تجزیه و تحلیل عمیقی را در مورد هر چیزی که هنگام بارگیری یا اجرا صفحه شما اتفاق می افتد ارائه می دهد. برای آشنایی با رابط کاربری پنل عملکرد ، به شروع به تجزیه و تحلیل عملکرد زمان اجرا مراجعه کنید.
ویژگی های DevTools زیر به ویژه مرتبط هستند:
CPU خود را دریچه گاز بگیرید تا دستگاهی با قدرت کمتر شبیه سازی شود.
شبکه را مهار کنید تا اتصالات کندتر شبیه سازی شود.
مشاهده فعالیت رشته اصلی برای مشاهده هر رویدادی که در موضوع اصلی در حین ضبط رخ داده است.
فعالیت‌های رشته اصلی را در یک جدول مشاهده کنید تا فعالیت‌ها را بر اساس اینکه کدام یک بیشترین زمان را گرفته‌اند مرتب کنید.
فریم در ثانیه (FPS) را تجزیه و تحلیل کنید تا بسنجید که آیا انیمیشن های شما واقعاً روان اجرا می شوند یا خیر.
استفاده از CPU، اندازه پشته JS، گره‌های DOM، طرح‌بندی‌ها در ثانیه و موارد دیگر را در زمان واقعی با نمایشگر عملکرد نظارت کنید .
درخواست‌های شبکه‌ای را که هنگام ضبط ضبط می‌کردید، با بخش Network تجسم کنید.
هنگام ضبط، از صفحه نمایش عکس بگیرید تا دقیقاً همانطور که صفحه در هنگام بارگیری صفحه به نظر می رسد، یا یک انیمیشن پخش می شود، و غیره پخش شود.
فعل و انفعالات را مشاهده کنید تا به سرعت آنچه را که در یک صفحه پس از تعامل کاربر با آن اتفاق افتاده است، شناسایی کنید.
با برجسته کردن صفحه هر زمان که شنونده بالقوه مشکل ساز فعال می شود ، مشکلات عملکرد اسکرول را در زمان واقعی پیدا کنید .
رویدادهای رنگ را در زمان واقعی مشاهده کنید تا رویدادهای رنگارنگ پرهزینه ای را که ممکن است به عملکرد انیمیشن های شما آسیب بزنند شناسایی کنید.
فانوس دریایی
Lighthouse در Chrome DevTools، در PageSpeed Insights ، به عنوان افزونه Chrome، به عنوان یک ماژول Node.js و در WebPageTest در دسترس است. شما یک URL به آن می‌دهید، دستگاهی میان‌رده با اتصال 3G کند را شبیه‌سازی می‌کند، یک سری ممیزی‌ها را روی صفحه انجام می‌دهد و سپس گزارشی از عملکرد بارگذاری و همچنین پیشنهادهایی در مورد نحوه بهبود ارائه می‌دهد.
ممیزی های زیر به ویژه مرتبط هستند:
واکنش
حداکثر تاخیر ورودی اول بالقوه تخمین می‌زند که برنامه شما چقدر طول می‌کشد تا به ورودی کاربر پاسخ دهد، بر اساس زمان بیکاری رشته اصلی.
از شنوندگان غیرفعال برای بهبود عملکرد اسکرول استفاده نمی کند .
زمان مسدود کردن کل کل مدت زمانی را که یک صفحه از پاسخ دادن به ورودی های کاربر، مانند کلیک های ماوس، ضربه های روی صفحه، یا فشار دادن صفحه کلید مسدود می شود، اندازه گیری می کند.
زمان تعامل زمانی که کاربر می تواند به طور مداوم با تمام عناصر صفحه تعامل داشته باشد را اندازه گیری می کند.
بار
یک سرویس‌کار که صفحه و start_url را کنترل می‌کند ثبت نمی‌کند . یک سرویس‌کار می‌تواند منابع رایج را در دستگاه کاربر ذخیره کند و زمان صرف شده برای واکشی منابع از طریق شبکه را کاهش دهد.
بارگذاری صفحه در شبکه های تلفن همراه به اندازه کافی سریع نیست .
به تعویق انداختن تصاویر خارج از صفحه بارگذاری تصاویر خارج از صفحه را تا زمانی که نیاز باشد به تعویق بیندازید.
اندازه مناسب تصاویر تصاویری را که به طور قابل توجهی بزرگتر از اندازه نمایش داده شده در نمای تلفن همراه هستند، ارائه نکنید.
از اندازه DOM بیش از حد خودداری کنید . بایت های شبکه را فقط با ارسال گره های DOM که برای رندر کردن صفحه مورد نیاز هستند، کاهش دهید.
WebPageTest
WebPageTest یک ابزار عملکرد وب است که از مرورگرهای واقعی برای دسترسی به صفحات وب و جمع آوری معیارهای زمان بندی استفاده می کند. یک URL در webpagetest.org/easy وارد کنید تا گزارش دقیقی از عملکرد بارگذاری صفحه در یک دستگاه واقعی Moto G4 با اتصال 3G کند دریافت کنید. شما همچنین می توانید آن را به گونه ای پیکربندی کنید که ممیزی Lighthouse را نیز شامل شود.
خلاصه
RAIL لنزی برای مشاهده تجربه کاربری یک وب سایت به عنوان سفری متشکل از تعاملات متمایز است. درک اینکه کاربران چگونه سایت شما را درک می کنند تا اهداف عملکردی را با بیشترین تأثیر بر تجربه کاربر تعیین کنید.
روی کاربر تمرکز کنید.
به ورودی کاربر در کمتر از 100 میلی ثانیه پاسخ دهید.
هنگام متحرک سازی یا پیمایش یک فریم در کمتر از 10 میلی ثانیه تولید کنید.
زمان بیکاری نخ اصلی را به حداکثر برسانید.
محتوای تعاملی را در کمتر از 5000 میلی ثانیه بارگیری کنید.