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