تست سرعت صفحات وب: مدل RAIL چیست؟

همانطور که می دانید راه های بسیار مختلفی برای تست سرعت سایت و صفحات وب وجود دارد و مدل های مختلفی برای تحلیل و نگاه به مفهوم سرعت معرفی شده اند؛ به طور مثال آیا سرعت به خودی خود برایم مهم است؟ به چه قیمتی؟ آیا کیفیت تصاویر برایم مهم است؟ آیا کیفیت تصاویر برای من مهم تر از سرعت است؟ و هزاران سوال دیگر...

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

مدل RAIL چیست؟

همه می دانیم که پایین آوردن سرعت بارگذاری صفحات وب بسیار مهم است و نقش اصلی را در کاهش ¹bounce rate ایفا می کند اما این کار فقط نیمی از مشکل را حل می کند. قسمت اعظم زمان کاربران، صرف صبر کردن برای دریافت پاسخ input ها و... از سایت شما می شود. بنابراین اگر می خواهید کاربرانتان راضی بوده و سایت را ترک نکنند باید وب سایت شما دائما سریع باشد! این همان کاری است که مدل RAIL انجام می دهد؛ مدل RAIL تمام جوانب مفهوم سرعت را مورد بررسی قرار می دهد نه تنها سرعت سرور شما را!

1- تعریف Bounce rate: به معنی «نرخ پرش» یا «نرخ بازگشت» است. در حالت کلی یعنی درصد بازدید کنندگانی که تنها از یک صفحه از وب سایت شما بازدید می کنند. به عبارت دیگر این ها بازدید کنندگانی هستند که از گوگل وارد سایت شما می شوند و پس از دریافت یا عدم دریافت جوابشان از سایت شما خارج می شوند و به صفحه ی دیگری نمی روند. اما در دنیای وب تاکید روی حالتی است که کاربر وارد سایت شما شود و سایت شما آنقدر دیر بالا بیاید که کاربر از بازدید منصرف شود.

RAIL مخفف عبارت «Response, Animation, Idle and Load» است. در واقع بر اساس مدل RAIL تعاملات کاربران شما با سایت به چهار دسته تقسیم می شود:

مدل RAIL توسط یک توسعه دهنده به نام آقای Paul Irish در سال 2015 معرفی شد و گوگل نیز این سیستم را مقبول می داند و در کدنویسی هایش از آن استفاده می کند. بیایید این چهار جنبه از مدل RAIL را بررسی کرده و بنچ‌مارک پیشنهادی توسط گوگل را نیز ببینیم:

• Response: سرعت پاسخ دریافتی از سرور؛ در واقع این مورد یعنی سرعت وب سایت شما در پاسخ دادن به input (ورودی) کاربران چقدر است. سرعت پاسخ زیر 100ms (صد میلی ثانیه) بهترین حالت و در واقع حالت ایده آل است. هر زمانی بیشتر از این مقدار، توجه کاربر را جلب خواهد کرد.
• Animation: سرعت انیمیشن ها، اسکرول کردن و Drag کردن عناصر در سایت شما؛ حالت ایده آل این مورد 60fps (شصت فریم بر ثانیه) یا یک فریم به ازای هر 16ms است.
• Idle: مربوط به اتفاقات پشت صحنه است؛ یعنی زمانی که صفحه بارگذاری شده اما ممکن است سرور در پس زمینه در حال پردازش باشد. این نوع پردازش ها باید به قسمت های 50ms تقسیم شوند تا سرعت response را پایین نیاورند.
• Load: سرعت بارگذاری صفحات در مرورگر کاربر؛ این مورد همان ²First meaningful paint است که باید در کمتر از یک ثانیه پس از ارسال درخواست به سرور نمایش داده شود.

2- به طور خلاصه First meaningful paint عبارتی است که توسط گوگل ساخته شده است؛ First meaningful paint مقدار زمانی است که طول می کشد تا محتوای اولیه ی یک وب سایت نمایش داده شوند. متاسفانه قسمت developers سایت گوگل برای ایران تحریم است؛ برای تست اطلاعات باید این تحریم را دور بزنید.

درک کاربران از سرعت تغییر کرده است

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

البته این آستانه ی تحمل بستگی به نوع کاربران نیز دارد؛ بر اساس گزارشات Google DoubleClick کاربرانی که از اتصالات 3G استفاده می کنند آستانه ی تحمل بیشتری دارند و تا 3 ثانیه نیز صبر می کنند اما کاربران دسکتاپ تحمل بیشتر از 1 ثانیه را ندارند! بنابراین شما نمی توانید همه ی کاربران را راضی کنید اما استفاده از مدل RAIL قطعا به بهبود سایت شما کمک خواهد کرد.

اهداف خود را تعیین کنید

حالا که می دانید مدل RAIL چیست و چه فاکتورهایی را بررسی می کند باید به فکر تعیین اهداف واقع بینانه باشید. اگر نمی توانید هزینه ی سرور های خوب را بدهید و از سرورهای اقتصادی استفاده می کنید، اهدافتان را طوری تعیین کنید که از داشته هایتان بهترین استفاده را ببرید. اما اگر منابع سیستمی شما محدود نیست و سرورهای خوبی دارید می توانید از پیشنهادات گوگل استفاده کنید:

1. پاسخ های شما به کاربران زیر 50ms باشد: راهنمای توسعه دهندگان گوگل پیشنهاد می دهد که وب سایت شما باید در کمتر از 50ms به درخواست های کاربران واکنش نشان دهد. شاید این مقدار خیلی سریع به نظر بیاید ولی اگر هدفتان را روی 50ms قرار دهید، اطمینان خواهید داشت که تعاملات کاربر با سایت به صورت لحظه ای می باشد و رضایت کامل کاربر را خواهید داشت.

حتی اگر نمی توانید سرعت پاسخ سرور را روی 50ms تنظیم کنید به کاربر اعلام کنید که درخواستش را دریافت کرده اید. مثلا اگر کاربر روی دکمه ای کلیک کرد و سرور شما 150ms زمان برای پاسخ به آن لازم دارد باید به نحوی به کاربر اعلام کنید که درخواستش را دریافت کرده اید؛ مثلا ظاهر و رنگ دکمه را تغییر دهید یا از علامت loading و صفحات چرخان آن استفاده کنید.

2. فریم های انیمیشن خود را زیر 10ms تعریف کنید: در نگاه مدل RAIL، اسکرول کردن، زوم کردن، drag کردن و ... همگی جزئی از انیمیشن ها هستند. اگر می خواهید به 60fps برسید، برای نمایش هر فریم 16 میلی ثانیه زمان دارید اما مرورگرها به طور طبیعی 6ms برای render کردن انیمیشن زمان لازم دارند بنابراین برای شما فقط 10ms باقی می ماند. به هر حال، چه به این هدف برسید و چه نرسید، باید سعی کنید سرعت انیمیشن را در سراسر وب سایت خود ثابت نگه دارید.

3. بیشترین استفاده را از زمان Idle داشته باشید: برای رسیدن به 50ms باید از زمان idle (زمان بیکاری سرور) بهترین استفاده را ببرید. سعی کنید ابتدا محتوای اصلی و در دید کاربر را بارگذاری کنید و سپس به بارگذاری بقیه ی اجزای صفحه بپردازید. البته این مسئله نباید response time (فاکتور اول) را پایین بیاورید چرا که در غیر این صورت دیگر به افزایش سرعت کمک نخواهد کرد.

4. صفحات خود را در کمتر از 5 ثانیه تعامل پذیر کنید: بر اساس تحقیقات گوگل، کاربران باید بتوانند تا حداکثر 5 ثانیه پس از ثبت درخواست URL سایت شما در مرورگر خود، با سایت شما تعامل داشته باشند؛ گوگل می گوید در مقایسه با وب سایت های کُند و کم سرعت، وب سایت هایی که در 5 ثانیه تعاملات کاربر را قبول کنند و به آن واکنش دهند حدود 70 درصد ماندگاری کاربر بیشتری داشته، مقدار bounce rate آن ها35 درصد کاهش و مقدار بازدید از تبلیغاتشان 25 درصد افزایش داشته است. همچنین استفاده از متدهای cache برای کش کردن محتوا و کاهش زمان بارگذاری بسیار مفید است.

شما می توانید برای اندازه گیری سرعت سایت خود از ابزارهایی مانند Google Lighthouse و WebPageTest استفاده کنید تا به طور دقیق سرعت کار وب سایت خود را داشته باشید.

این ها پیشنهادات گوگل هستند اما ما می توانیم پیشنهادات بیشتری را به آن اضافه کنیم:

• مخاطب خود را بشناسید: زمانی که هدفتان را تعیین می کنید باید مخاطبین خود را در نظر بگیرید. آیا مخاطبین شما محلی هستند یا به عبارت دیگر آیا کسب و کار شما محلی است؟ در کشور شما مردم چه نوع اینترنتی دارند؟ و این دست از سوالات...
• حواستان به تکنولوژی های جدید باشد: هر ساله تکنولوژی های جدیدی وارد بازار توسعه ی وب می شوند. سعی کنید آن ها را دنبال کنید تا اگر به تکنولوژی جالبی رسیدید از آن در سایت خود استفاده کنید و سرعت سایت را بالاتر ببرید.
• به روزرسانی کنید: باید بدانید چه زمانی سرورهایتان قدیمی شده اند و نیاز به به روزرسانی دارند، باید بدانید چه زمانی نسخه های جدید یک زبان برنامه نویسی مانند PHP معرفی شده اند و از آن استفاده کنید، باید بدانید جه تکنولوژی های جدیدی وارد بازار شده اند تا سایت خود را با آن ها هماهنگ کنید.
• همیشه اولویت خود را روی Critical Rendering Path بگذارید. قبلا در رابطه با Critical Rendering Path یا مسیر ضروری رندرینگ صحبت کرده ایم، بنابراین می توانید به مقاله ی مربوطه مراجعه کنید.
• پیدا کردن مشکلات تمام راه نیست: بله تشخیص و پیدا کردن مشکلات بخش مهمی از کار ما است اما بخش مهم تر آن از بین بردن این مشکلات و فرآیند بهینه سازی سایت است! بنابراین به دنبال راه حل های جدید و به روز باشید و با توسعه دهندگان با تجربه مشورت کنید.