اندازه گیری و تست سرعت سایت با مدل RAIL

در مدل RAIL روی کاربر تمرکز می‌کنید؛ هدف نهایی این نیست که سایت شما در هر دستگاهی عملکرد سریع داشته باشد، بلکه خوشحال کردن کاربران هدف اصلی است.

RAIL یک مدل عملکردی کاربر محور است که ساختاری برای تفکر در مورد سرعت سایت فراهم می کند. این مدل تجربه کاربر را به اقدامات کلیدی (مثلاً ضربه زدن، پیمایش و بارگیری) تقسیم می‌کند و به شما کمک می‌کند اهداف عملکردی (سرعت) را برای هر یک از آنها تعریف کنید.

RAIL (response, animation, idle and load) مخفف چهار جنبه متمایز از چرخه عمر برنامه وب است: پاسخ، انیمیشن، بیکار بودن و بارگذاری. کاربران انتظارات متفاوتی از سرعت برای هر یک از این زمینه ها دارند، بنابراین اهداف عملکردی بر اساس زمینه و تحقیق UX در مورد نحوه درک کاربران از تاخیر تعریف می شوند.

روی کاربر تمرکز کنید

کاربران را به نقطه کانونی تلاش عملکرد خود تبدیل کنید. جدول زیر معیارهای کلیدی نحوه درک کاربران از تاخیرها در سرعت سایت را توضیح می دهد:

درک کاربر از تاخیر در عملکرد

کاربران بسته به شرایط شبکه و سخت‌افزار، تاخیرهای عملکرد را متفاوت درک می کنند. به عنوان مثال، بارگذاری سایت ها روی یک ماشین دسکتاپ قدرتمند از طریق اتصال سریع Wi-Fi معمولاً در کمتر از 1 ثانیه اتفاق می افتد و کاربران به آن عادت کرده اند. بارگذاری سایت ها در دستگاه های تلفن همراه با اتصالات 3G کند زمان بیشتری می برد، بنابراین کاربران تلفن همراه عموماً صبورتر هستند و بارگیری در 5 ثانیه روی تلفن همراه هدف واقعی تری است.

اهداف و دستورالعمل ها در مدل RAIL

در مدل RAIL ، اصطلاحاتِ اهداف و دستورالعمل‌ها معانی خاصی دارند:

• اهداف: معیارهای کلیدی سرعت مرتبط با تجربه کاربر. برای مثال، “برای نقاشی در کمتر از 100 میلی ثانیه ضربه بزنید” از آنجایی که درک انسان نسبتاً ثابت است، بعید است که این اهداف به این زودی ها تغییر کنند.
• رهنمودها یا دستورالعمل‌ها: توصیه هایی که به شما در رسیدن به اهداف کمک می کند. این رهنمودها ممکن است مختص سخت افزار و شرایط اتصال شبکه فعلی باشند، بنابراین ممکن است در طول زمان تغییر کنند.

پاسخ: رویدادها را در کمتر از 50 میلی ثانیه پردازش کنید

اهداف در Response (پاسخ)

رویداد آغاز شده توسط کاربر را در عرض 100 میلی ثانیه پاسخ دهید تا کاربران احساس کنند که تعاملات آنی هستند.

دستورالعمل Response

• برای اطمینان از پاسخ قابل مشاهده در 100 میلی ثانیه، رویدادهای ورودی کاربر را در 50 میلی ثانیه پردازش کنید. این دستور برای بیشتر ورودی‌ها، مانند کلیک کردن روی دکمه‌ها، تغییر دادن کنترل‌های فرم و یا شروع انیمیشن‌ها اعمال می‌شود.البته برای کشیدن یا اسکرول لمسی این رهنمود اعمال نمی‌شود.
• می توانید از این بازه 100 میلی ثانیه برای انجام کارهای گران قیمت دیگر استفاده کنید، اما مراقب باشید که کاربر را مسدود نکنید. در صورت امکان، کار را در پس زمینه انجام دهید.
• برای اقداماتی که تکمیل آنها بیش از 50 میلی ثانیه طول می کشد، همیشه بازخورد ارائه دهید.

50 میلی ثانیه یا 100 میلی ثانیه؟

اگر هدف Response در مدل RAIL پاسخگویی به ورودی در کمتر از 100 میلی ثانیه است، پس چرا بودجه ما فقط 50 میلی ثانیه در نظر گرفته شده است؟ این به این دلیل است که معمولاً علاوه بر مدیریت ورودی، کارهای دیگری نیز در حال انجام است و این کار بخشی از زمان موجود برای پاسخ ورودی قابل قبول را می گیرد. به این معنی که ورودی می‌تواند تا 50 میلی‌ثانیه در صف قرار گیرد، . با توجه به این موضوع، می‌توان فرض کرد که تنها 50 میلی‌ثانیه باقی‌مانده برای مدیریت ورودی واقعی موجود است. تاثیر چنین تاخیری در نمودار زیر نمایش داده شده است که نشان می‌دهد چگونه ورودی دریافتی در طول یک وظیفه دیگر در صف قرار می‌گیرد و زمان پردازش موجود را کاهش می‌دهد:

انیمیشن در مدل RAIL : پردازش یک فریم در 10 میلی ثانیه

اهداف در Animation

• در انیمیشن هایتان هر فریم را حداکثر به 10 میلی ثانیه یا کمتر از آن محدود کنید. از نظر فنی، حداکثر بودجه برای هر فریم 16 میلی‌ثانیه است (1000 میلی‌ثانیه / 60 فریم در ثانیه ≈ 16 میلی‌ثانیه)، اما مرورگرها برای رندر کردن هر فریم به حدود 6 میلی‌ثانیه نیاز دارند، از این رو 10 میلی‌ثانیه در هر فریم مناسب ترین انتخاب است.
• روان بودن بصری انیمیشن را هدف قرار دهید. کاربران به سادگی متوجه نرخ فریم های متفاوت می‌شوند.

دستورالعمل ها

• در نقاط پرفشار مانند انیمیشن ها، نکته کلیدی این است که تا جایی که می توانید هیچ کاری را انجام ندهید. در صورت امکان، از پاسخ 100 میلی‌ثانیه برای پیش‌محاسبه کار سنگین استفاده کنید تا شانس خود را برای رسیدن به 60 فریم در ثانیه به حداکثر برسانید.
• برای استراتژی‌های مختلف بهینه‌سازی انیمیشن، Rendering Performance(انگلیسی) را ببینید.

انواع انیمیشن ها را بشناسید. انیمیشن ها فقط افکت ها در رابط کاربری نیستند. هر یک از تعاملات زیر به عنوان انیمیشن در نظر گرفته می شوند:

• انیمیشن های بصری، مانند ورود و خروج ها، tweens و نشانگر بارگذاری.
• پیمایش (scrolling) صفحه
• کشیدن(Dragging). انیمیشن‌ها اغلب از تعاملات کاربر، مانند حرکت به سمت نقشه یا کوچک کردن برای زوم ، پیروی می‌کنند.

بیکاری: زمان بیکاری را به حداکثر برسانید

هدف idle در مدل RAIL :

• با به حداکثر رساندن زمان بیکاری(idle)، احتمال پاسخ به ورودی های کاربر در کمتر از 50 ثانیه را افزایش دهید.

رهنمودها :

• از زمان بیکاری برای تکمیل کارهای معوق استفاده کنید. به عنوان مثال، در بارگذاری اولیه صفحه، تا حد امکان داده های کمتری را بارگیری کنید، سپس از زمان بیکاری برای بارگیری بقیه بخش های صفحه استفاده کنید.
• کارهای زمان بیکاری را در 50 میلی ثانیه یا کمتر انجام دهید. تا خطر عدم پاسخگویی به ورودی کاربر کاهش یابد.
• اگر کاربر زمان بیکاری با یک صفحه تعامل داشته باشد، تعامل کاربر باید همیشه بالاترین اولویت را داشته باشد و کار زمان بیکاری را قطع کند.

بارگذاری: ارائه محتوا و تعامل در کمتر از 5 ثانیه

هنگامی که صفحات به کندی بارگذاری می شوند باعث می‌شود توجه کاربر از مساله اصلی دور و کار را ناقص فرض کنند.در عوض سایت‌هایی که سریع بارگیری می‌شوند، میانگین جلسات طولانی‌تر، نرخ پرش کم‌تر و قابلیت مشاهده آگهی بالاتری دارند.

اهداف Load در مدل RAIL

• عملکرد سرعت سایت را نسبت به دستگاه و قابلیت های شبکه کاربران خود بهینه کنید. در حال حاضر، یک هدف خوب برای اولین باری که کاربر سایت را باز می‌کند، بارگیری صفحه و تعامل در 5 ثانیه یا کمتر در دستگاه های تلفن همراه میان رده با اتصالات 3G کند است.
• برای بارگذاری های بعدی، یک هدف خوب این است که صفحه را در کمتر از 2 ثانیه بارگیری کنید.

توجه داشته باشید که این اهداف ممکن است در طول زمان تغییر کنند.

دستورالعمل‌ها

• عملکرد سرعت صفحات خود را در دستگاه های تلفن همراه و اتصالات شبکه‌ای که در بین کاربران شما رایج است، آزمایش کنید. می‌توانید از گزارش تجربه کاربری کروم (Chrome User Experience Report) برای اطلاع از توزیع اتصال کاربران خود استفاده کنید. اگر داده‌های سایت شما در دسترس نیست، The Mobile Economy 2019 نشان می‌دهد که یک خط میانگین جهانی خوب، یک تلفن اندرویدی میان رده، مانند Moto G4، و یک شبکه 3G کند است که WebPageTest در قسمت easy خود این ترکیب را در نظر گرفته و می‌توانید با آن سایت خود را تست کنید.
• به خاطر داشته باشید که اگرچه ممکن است کاربر ادعا کند که بر روی یک اتصال 2G، 3G یا 4G سریع است، اما در واقعیت، سرعت اتصال مؤثر اغلب به‌دلیل از دست دادن بسته‌ها و واریانس شبکه، به طور قابل‌توجهی کندتر از تئوری است.
• منابع مسدودکننده رندر را حذف کنید.
• لازم نیست همه چیز را در کمتر از 5 ثانیه بارگیری کنید تا درک یک بار کامل را ایجاد کنید. تصاویر بارگذاری تنبل، بسته‌های جاوا اسکریپت با تقسیم کد و سایر بهینه‌سازی‌های پیشنهاد شده در دوره جامع سرعت سایت را در نظر بگیرید را در نظر بگیرید.

عوامل موثر بر عملکرد بارگذاری صفحه را بشناسید:

• سرعت و تاخیر شبکه
• سخت‌افزار (مثلاً پردازنده های کندتر)
• تخلیه حافظه پنهان
• تفاوت در کش L2/L3
• تجزیه جاوا اسکریپت

ابزارهای اندازه گیری مدل RAIL

چند ابزار وجود دارد که به شما کمک می کند اندازه گیری های مدل RAIL خود را خودکار کنید. اینکه کدام یک از آنها استفاده می کنید بستگی به نوع اطلاعات مورد نیاز شما دارد.

Chrome DevTools

Chrome DevTools مجموعه ای از ابزارهای توسعه دهنده وب است که مستقیماً در مرورگر Google Chrome ساخته شده است. DevTools می تواند به شما در ویرایش سریع صفحات و تشخیص سریع مشکلات کمک کند، که در نهایت به شما کمک می کند وب سایت های بهتر و سریعتر بسازید.

Chrome DevTools تجزیه و تحلیل عمیقی را در مورد هر چیزی که هنگام بارگیری یا اجرا صفحه شما اتفاق می افتد ارائه می دهد.

باز کردن Chrome DevTools

راه های زیادی برای باز کردن DevTools وجود دارد، زیرا کاربران مختلف خواهان دسترسی سریع به بخش های مختلف DevTools UI هستند.

• هنگامی که می خواهید با DOM یا CSS کار کنید، روی یک عنصر در صفحه کلیک راست کرده و Inspect را انتخاب کنید تا به پنل Elements بروید. یا Command+Option+C (Mac) یا Control+Shift+C (Windows، Linux، Chrome OS) را فشار دهید.
• وقتی می‌خواهید پیام‌های ثبت‌شده را ببینید یا جاوا اسکریپت را اجرا کنید، Command+Option+J (Mac) یا Control+Shift+J (ویندوز، لینوکس، سیستم‌عامل Chrome) را فشار دهید تا مستقیماً به پانل کنسول بروید.

ویژگی های مورد نیاز DevTools

• محدود کردن CPU برای شبیه سازی دستگاهی با قدرت کمتر.

• محدود کردن اتصال شبکه برای شبیه‎سازی اتصالات کندتر.
• بازبینی فعالیت رشته اصلی برای مشاهده رویدادهای آن.

• مشاهده جدولی فعالیت‌های رشته اصلی برای مرتب کردن فعالیت‌ها بر اساس اینکه کدام یک بیشترین زمان را می‌گیرند.
• تجزیه و تحلیل فریم در ثانیه (FPS) برای سنجش اینکه آیا انیمیشن های شما واقعاً روان اجرا می شوند یا خیر.

• مانیتورینگ CPU، اندازه heap جاوااسکریپت ، گره‌های DOM و ….

• ویژوال کردن درخواست‌های شبکه‌ای که حین ضبط کردن رخ داده‌اند.

• عکس گرفتن از صفحه نمایش در حین ضبط.

• مشاهده فعل و انفعالات برای شناسایی آنچه را که پس از تعامل کاربر با آن اتفاق افتاده است.

Lighthouse

Lighthouse یک ابزار متن باز و خودکار برای بهبود عملکرد، کیفیت و صحت برنامه های وب شما است.

Lighthouse مجموعه‌ای از آزمایش‌ها را بر روی صفحه انجام می‌دهد و سپس گزارشی از عملکرد و سرعت صفحه ایجاد می‌کند.

Response

• حداکثر تاخیر ورودی اول (FID) بالقوه.بر اساس زمان بی‌کاری رشته اصلی تخمین می‌زند که برنامه شما چقدر طول می‌کشد تا به ورودی کاربر پاسخ دهد،
• استفاده نکردن از listener ها برای بهبود عملکرد اسکرول استفاده

• کل زمان مسدود شدن (Total Blocking Time)
• زمان تعامل(Time To Interactive): زمانی که کاربر می تواند به طور مداوم با تمام عناصر صفحه تعامل داشته باشد را اندازه گیری می کند

Load

• service worker :service worker می‌تواند منابع پر استفاده را در دستگاه کاربر ذخیره کند و زمان صرف شده برای واکشی منابع از طریق شبکه را کاهش دهد.
• بارگذاری صفحه در شبکه های تلفن همراه به اندازه کافی سریع نیست.
• منابع مسدودکننده رندر را حذف کنید.
• به تعویق انداختن تصاویر خارج از صفحه: بارگذاری تصاویر خارج از صفحه را تا زمانی که نیاز باشد به تعویق بیندازید.
• اندازه مناسب تصاویر تصاویری را که به طور قابل توجهی بزرگتر از اندازه نمایش داده شده در تلفن همراه هستند، ارائه نکنید.
• از زنجیر زدن درخواست های حیاتی خودداری کنید.
• از HTTP/2 برای همه منابع خود استفاده نمی کند.
• کدگذاری کارآمد تصاویر
• فشرده سازی متن را فعال کنید
• از بارهای سنگین شبکه خودداری کنید.
• از اندازه DOM بیش از حد خودداری کنید.

WebPageTest

WebPageTest یک ابزار برای بررسی عملکرد و تست سرعت وب است که از مرورگرهای واقعی برای دسترسی به صفحات وب و جمع‌آوری معیارهای زمان‌بندی استفاده می‌کند. URL مورد نظرتان را در webpagetest.org/easy وارد کنید تا گزارش دقیقی از عملکرد بارگذاری صفحه و سرعت آن در یک دستگاه واقعی Moto G4 با اتصال 3G کند دریافت کنید. شما همچنین می توانید آن را به گونه ای پیکربندی کنید که ممیزی Lighthouse را نیز شامل شود.

خلاصه : مدل RAIL و سرعت سایت

مدل RAIL لنزی برای مشاهده تجربه کاربری یک وب‌سایت به عنوان سفری است که از تعاملات متمایز تشکیل شده است. بررسی اینکه کاربران چگونه سایت شما را درک می کنند تا اهداف عملکردی را با بیشترین تأثیر بر تجربه کاربر تعیین کنید.

• روی کاربر تمرکز کنید.
• به ورودی کاربر در کمتر از 100 میلی ثانیه پاسخ دهید.
• هنگام متحرک سازی، یک فریم در کمتر از 10 میلی ثانیه ایجاد کنید.
• زمان بیکاری نخ اصلی را به حداکثر برسانید.
• محتوای تعاملی را در کمتر از 5000 میلی ثانیه بارگیری کنید.