همه ما شنیده ایم که عملکرد چقدر مهم است. اما وقتی در مورد عملکرد، و در مورد ساخت وب سایت ها "سریع" صحبت م�� کنیم، به طور خاص منظورمان چیست؟
حقیقت این است که عملکرد نسبی است:
- یک سایت ممکن است برای یک کاربر سریع باشد (در یک شبکه سریع با یک دستگاه قدرتمند) اما برای کاربر دیگر کند باشد (در یک شبکه کند با یک دستگاه ارزان قیمت).
- ممکن است بارگذاری دو سایت در مدت زمان یکسانی تمام شود، با این حال ممکن است به نظر برسد یکی سریع‌تر بارگذاری می‌شود (اگر محتوا را به‌طور تدریجی بارگیری کند، نه اینکه منتظر پایان برای نمایش چیزی باشد).
- ممکن است به نظر برسد که یک سایت به سرعت بارگیری می شود، اما سپس به کندی (یا اصلاً) به تعامل کاربر پاسخ نمی دهد.
هنگام صحبت در مورد عملکرد، مهم است که دقیق باشید و به عملکرد از نظر معیارها اشاره کنید. معیارهای عینی که می توان آنها را به صورت کمی اندازه گیری کرد، اما همچنین مهم است که مطمئن شوید معیارهایی که اندازه گیری می کنید مفید هستند.
تعریف معیارها
از لحاظ تاریخی، عملکرد وب با رویداد load اندازه گیری شده است. با این حال، اگرچه load یک لحظه کاملاً تعریف شده در چرخه عمر صفحه است، آن لحظه لزوماً با چیزی که کاربر به آن اهمیت می دهد مطابقت ندارد.
برای مثال، یک سرور می‌تواند با حداقل صفحه‌ای که بلافاصله «بارگذاری» می‌شود، پاسخ دهد، اما سپس واکشی محتوا یا نمایش هر چیزی در صفحه را تا چند ثانیه پس از شروع رویداد load به تعویق می‌اندازد. چنین صفحه ای از نظر فنی زمان بارگذاری سریعی دارد، اما این زمان با نحوه بارگذاری صفحه توسط کاربر مطابقت ندارد.
در چند سال گذشته، اعضای تیم Chrome - با همکاری گروه کاری عملکرد وب W3C - برای استانداردسازی مجموعه‌ای از APIها و معیارهای جدید کار کرده‌اند که با دقت بیشتری نحوه تجربه کاربران از عملکرد یک صفحه وب را اندازه‌گیری می‌کنند.
برای کمک به اطمینان از مرتبط بودن معیارها برای کاربران، آنها را حول چند سؤال کلیدی چارچوب می‌دهیم:
| آیا این اتفاق می افتد؟ | آیا ناوبری با موفقیت شروع شد؟ آیا سرور پاسخ داده است؟ |
| آیا مفید است؟ | آیا محتوای کافی ارائه شده است که کاربران بتوانند با آن درگیر شوند؟ |
| قابل استفاده هست؟ | آیا کاربران می توانند با صفحه تعامل داشته باشند یا اینکه مشغول هستند؟ |
| آیا لذت بخش است؟ | آیا تعاملات صاف و طبیعی و بدون تأخیر هستند؟ |
معیارها چگونه اندازه گیری می شوند
معیارهای عملکرد به طور کلی به یکی از دو روش اندازه گیری می شوند:
- در آزمایشگاه: استفاده از ابزارهایی برای شبیه سازی بارگذاری صفحه در یک محیط سازگار و کنترل شده
- در فیلد : در کاربران واقعی که در واقع صفحه را بارگذاری می کنند و با آن تعامل دارند
هیچ یک از این گزینه ها لزوما بهتر یا بدتر از دیگری نیست - در واقع شما معمولاً می خواهید برای اطمینان از عملکرد خوب از هر دو استفاده کنید.
در آزمایشگاه
آزمایش عملکرد در آزمایشگاه هنگام توسعه ویژگی های جدید ضروری است. قب�� از انتشار ویژگی‌ها در تولید، اندازه‌گیری ویژگی‌های عملکرد آنها بر روی کاربران واقعی غیرممکن است، بنابراین آزمایش آنها در آزمایشگاه قبل از انتشار ویژگی، بهترین راه برای جلوگیری از رگرسیون عملکرد است.
در میدان
از سوی دیگر، در حالی که آزمایش در آزمایشگاه یک پروکسی معقول برای عملکرد است، لزوماً منعکس کننده نحوه تجربه کاربران واقعی سایت شما نیست.
عملکرد یک سایت بر اساس قابلیت های دستگاه کاربر و شرایط شبکه آنها می تواند به شدت متفاوت باشد. همچنین می تواند بر اساس اینکه آیا (یا چگونه) کاربر با صفحه در حال تعامل است متفاوت باشد.
بارگذاری صفحه نیز همیشه قطعی نیست. به عنوان مثال، سایت هایی که محتوای شخصی سازی شده یا تبلیغات را بارگذاری می کنند، می توانند ویژگی های عملکردی بسیار متفاوتی را از کاربر به کاربر دیگر تجربه کنند. یک آزمایش آزمایشگاهی این تفاوت ها را نشان نمی دهد.
تنها راه برای اینکه واقعاً بدانید سایت شما چگونه برای کاربران شما کار می‌کند، اندازه‌گیری عملکرد آن با بارگیری و تعامل آن کاربران با آن است. این نوع اندازه‌گیری معمولاً مانیتورینگ کاربر واقعی (RUM) نامیده می‌شود.
انواع معیارها
چندین نوع معیار دیگر وجود دارد که به نحوه درک کاربران از عملکرد مرتبط است.
- سرعت بارگذاری درک شده: یک صفحه با چه سرعتی می تواند همه عناصر بصری خود را بارگیری کند و روی صفحه نمایش دهد.
- پاسخگویی بارگذاری: یک صفحه با چه سرعتی می تواند هر کد جاوا اسکریپت مورد نیاز را بارگیری و اجرا کند تا اجزا به سرعت به تعامل کاربر پاسخ دهند.
- پاسخگویی در زمان اجرا: پس از بارگذاری صفحه، صفحه چقدر سریع می تواند به تعامل کاربر پاسخ دهد.
- ثبات بصری: آیا عناصر موجود در صفحه به گونه‌ای تغییر می‌کنند که کاربران انتظار ندارند و به طور بالقوه در تعاملات آنها تداخل ایجاد می‌کند؟
- یکنواختی: آیا انتقال ها و انیمیشن ها با نرخ فریم ثابت رندر می شوند و به صورت روان از یک حالت به حالت دیگر جریان می یابند؟
با توجه به تمام این نوع معیارهای عملکرد، امیدواریم واضح باشد که هیچ معیاری برای ثبت تمام ویژگی های عملکرد یک صفحه کافی نیست.
معیارهای مهم برای اندازه گیری
- First Contentful Paint (FCP) : زمان شروع بارگیری صفحه تا زمانی که هر ب��شی از محتوای صفحه روی صفحه نمایش داده می شود را اندازه گیری می کند. ( آزمایشگاه ، میدان )
- بزرگترین رنگ محتوایی (LCP) : زمان شروع بارگیری صفحه تا زمانی که بزرگترین بلوک متن یا عنصر تصویر روی صفحه نمایش داده می شود را اندازه گیری می کند. ( آزمایشگاه ، میدان )
- Interaction to Next Paint (INP) : تأخیر هر ضربه، کلیک یا تعامل صفحه کلید انجام شده با صفحه را اندازه می‌گیرد و - بر اساس تعداد تعاملات - بدترین تأخیر تعامل صفحه (یا نزدیک به بالاترین) را به عنوان انتخاب می‌کند. یک مقدار واحد و نماینده برای توصیف پاسخگویی کلی یک صفحه. ( آزمایشگاه ، میدان )
- زمان مسدود کردن کل (TBT) : کل زمان بین FCP و TTI را اندازه گیری می کند که در آن رشته اصلی برای مدت طولانی مسدود شده است تا از پاسخگویی ورودی جلوگیری کند. ( آزمایشگاه )
- تغییر چیدمان تجمعی (CLS) : امتیاز تجمعی همه جابجایی‌های غیرمنتظره طرح‌بندی را که بین شروع بارگیری صفحه و زمانی که حالت چرخه عمر آن به حالت مخفی تغییر می‌کند، اندازه‌گیری می‌کند. ( آزمایشگاه ، میدان )
- Time to First Byte (TTFB) : مدت زمانی را که طول می کشد تا شبکه به درخواست کاربر با اولین بایت یک منبع پاسخ دهد، اندازه گیری می کند. ( آزمایشگاه ، میدان )
در برخی موارد، معیارهای جدیدی برای پوشش مناطق از دست رفته معرفی می‌شوند، اما در موارد دیگر بهترین معیارها معیارهایی هستند که به طور خاص برای سایت شما طراحی شده‌اند.
معیارهای سفارشی
معیارهای عملکردی که قبلاً توضیح داده شد برای درک کلی از ویژگی‌های عملکرد بیشتر سایت‌ها در وب خوب است. آنها همچنین برای داشتن مجموعه ای از معیارهای مشترک برای سایت ها برای مقایسه عملکرد آنها با رقبای خود خوب هستند.
با این حال، ممکن است مواقعی وجود داشته باشد که یک سایت خاص به نحوی منحصر به فرد باشد که به معیارهای اضافی برای ثبت تصویر عملکرد کامل نیاز دارد. برای مثال، معیار LCP برای اندازه‌گیری زمانی است که محتوای اصلی صفحه بارگذاری شده است، اما ممکن است مواردی وجود داشته باشد که بزرگترین عنصر بخشی از محتوای اصلی صفحه نباشد و بنابراین LCP ممکن است مرتبط نباشد.
برای رسیدگی به چنین مواردی، گروه کاری Web Performance نیز APIهای سطح پایین‌تری را استاندارد کرده است که می‌توانند برای پیاده‌سازی معیارهای سفارشی شما مفید باشند:
- API زمان‌بندی کاربر
- Long Tasks API
- Long Animation Frames API
- Element Timing API
- Navigation Timing API
- Resource Timeming API
- زمان بندی سرور
برای یادگیری نحوه استفاده از این APIها برای اندازه گی��ی ویژگی های عملکرد خاص سایت خود، به راهنمای معیارهای سفارشی مراجعه کنید.