عملکرد بخش مهمی از تجربه کاربر است و بر معیارهای تجاری تأثیر می گذارد. این تفکر که اگر توسعه دهنده ای خوب باشید در نهایت به یک وب سایت اجرایی خوب می رسید، وسوسه انگیز است. اما حقیقت این است که عملکرد خوب به ندرت عارضه ای جانبی است. مانند اکثر موارد دیگر، برای رسیدن به یک هدف، باید آن را به روشنی تعریف کرد. سفر را با تعیین بودجه عملکرد شروع می کنیم.
تعریف performance budget
بودجه عملکرد مجموعه ای از محدودیت های اعمال شده بر معیارها است که بر عملکرد وب سایت تأثیر می گذارد. این عامل می تواند اندازه کل یک صفحه، مدت زمان بارگیری در شبکه تلفن همراه یا حتی تعداد درخواستهای HTTP ارسالی را شامل شود. تعریف بودجه به شروع مبحث عملکرد وب کمک می کند و به عنوان نقطه ای مرجع برای تصمیم گیری در رابطه با طراحی، فناوری و افزودن ویژگی ها عمل می کند.
داشتن بودجه، طراحان را قادر می سازد تا درباره تأثیرات تصاویر با وضوح بالا و تعداد فونت های وب که انتخاب می کنند، فکر کنند. همچنین به توسعه دهندگان کمک می کند تا رویکردهای مختلف حل یک مسئله و یا چارچوب های ارزیابی و کتابخانه ای را بر اساس اندازه و هزینه تجزیه و تحلیل آنها، مقایسه کنند.
معیار ها را انتخاب کنید!
معیارهای مبتنی بر مقدار
این معیارها در مراحل اولیه توسعه مفید هستند؛ زیرا تأثیر گنجاندن تصاویر و اسکریپت های سنگین را برجسته می کنند. همچنین ارتباط آنها با طراحان و توسعه دهندگان آسان است.
ما قبلاً به مواردی اشاره کرده ایم که می توانید در بودجه عملکردی مانند وزن صفحه و تعداد درخواست های HTTP قرار دهید؛ اما می توانید این موارد را به محدودیت های دقیق تری نیز تقسیم کنید:
- حداکثر اندازه تصاویر
- حداکثر تعداد فونت های وب
- حداکثر اندازه اسکریپت ها، از جمله فریم ورک ها
- تعداد کل منابع خارجی، مانند اسکریپت های ثالث
با این حال، این اعداد چیز زیادی درباره تجربه کاربر در اختیار شما نمی گذارند. دو صفحه با تعداد درخواست های یکسان یا وزن مشابه بسته به ترتیب درخواست منابع، می توانند متفاوت ارائه شوند. اگر منبعی مهم مانند تصویر ابر قهرمانی یا برگه سبک نگارشی در یکی از صفحات در اواخر مراحل بارگیری شود، کاربران مدت بیشتری منتظر می مانند تا چیز مفیدی را ببینند و صفحه را کندتر تشخیص می دهند. اگر در صفحه دیگر مهمترین قسمت ها به سرعت بارگیری می شوند، در صورت عدم بارگیری سایر قسمت های صفحه، حتی ممکن است متوجه نشوند.
به همین دلیل مهم است که نوع دیگری از معیار را ثبت کنید.
زمان بندی های مهم
زمان بندی های مهم، رویدادهایی را که هنگام بارگذاری صفحه اتفاق می افتد، مانند DOMContentLoade یا رویداد بارگذاری را مشخص می کنند. مفیدترین زمان سنجی ها معیارهای عملکرد کاربر محور هستند که در رابطه با تجربه بارگیری صفحه به شما بینش می دهند. این معیارها از طریق API مرورگر و به عنوان بخشی از گزارش های Lighthouse در دسترس هستند.
First Contentful Paint (FCP)، زمانی اندازه گیری می شود که مرورگر اولین بیت محتوا را از DOM مانند متن یا عکس نمایش می دهد.
Time to Interactive (TTI) مدت زمانی که طول می کشد صفحه کاملاً تعاملی شود و با اطمینان به ورودی کاربر پاسخ می دهد را اندازه گیری می کند. اگر انتظار هر نوع تعامل کاربر در صفحه مانند کلیک کردن روی لینک ها، دکمه ها، تایپ کردن یا استفاده از عناصر فرم را دارید، این معیاری بسیار مهم است.
معیارهای مبتنی بر قانون
Lighthouse و WebPageTest نمرات عملکرد را بر اساس اصول عمومی بهترین روش ها محاسبه می کنند، که می توانید به عنوان راهنما از آنها استفاده کنید. Lighthouse همچنین به عنوان جایزه، نکاتی را برای بهینه سازی های ساده به شما ارائه می دهد.
اگر ترکیبی از معیارهای عملکرد کمیت محور و کاربر محور را دنبال کنید، بهترین نتیجه را خواهید گرفت. در مراحل اولیه یک پروژه بر روی اندازه های اطلاعات تمرکز کنید و در اسرع وقت ردیابی FCP و TTI را شروع کنید.
یک خط پایه ایجاد کنید
تنها راه برای دانستن اینکه چه چیزی برای وب سایت شما مفیدتر است این است که آن را امتحان کنید، تحقیق کنید و سپس یافته های خود را آزمایش کنید. رقابت را تجزیه و تحلیل کنید تا ببینید چگونه جمع بندی می شوید.
اگر برای این کار وقت ندارید، در اینجا اعداد پیش فرض خوبی برای شروع وجود دارد:
- کمتر از 5 ثانیه زمان برای تعامل
- زیر 170 کیلوبایت منابع مسیر حیاتی (فشرده / کوچک)
این اعداد بر اساس دستگاه های پایه در دنیای واقعی و سرعت شبکه 3G محاسبه می شوند. بیش از نیمی از ترافیک اینترنت امروز در شبکه های تلفن همراه اتفاق می افتد؛ بنابراین شما باید از سرعت شبکه 3G به عنوان نقطه شروع استفاده کنید.
نمونه بودجه ها
شما باید برای انواع مختلف صفحات سایت خود بودجه در نظر بگیرید زیرا محتوا متفاوت خواهد بود. مثلا:
- صفحه محصول ما باید کمتر از 170 کیلوبایت جاوا اسکریپت را روی تلفن همراه ارسال کند
- صفحه جستجوی ما باید کمتر از 2 مگابایت عکس در دسک تاپ داشته باشد
- صفحه اصلی ما باید در تلفن های 3G کمتر از 5 ثانیه بارگیری و تعاملی شود.
- امتیاز وبلاگ ما باید نمره ای بیش از 80 در تست عملکرد Lighthouse کسب کند.
بودجه عملکرد را به روند ساخت خود اضافه کنید
انتخاب ابزار برای این امر به مقیاس پروژه و منابعی که می توانید به کار اختصاص دهید، بستگی بسیار زیادی دارد. چند ابزار منبع باز وجود دارد که می تواند به شما کمک کند بودجه را به روند ساخت خود اضافه کنید:
اگر چیزی بیش از آستانه مشخص شده باشد، می توانید:
- ویژگی یا دارایی موجود را بهینه کنید
- یک ویژگی یا اطلاعات موجود را حذف کنید
- ویژگی یا اطلاعات جدید اضافه نشود
ردیابی عملکرد
اطمینان از اینکه وب سایت شما به اندازه کافی سریع است، به این معنی است که پس از راه اندازی اولیه باید اندازه گیری خود را ادامه دهید. نظارت بر این معیارها در طول زمان و دریافت داده از کاربران واقعی به شما نشان می دهد که چگونه تغییرات در عملکرد بر معیارهای اصلی کسب و کار تأثیر می گذارند.
در آخر
هدف از بودجه عملکرد این است که اطمینان حاصل کنید شما در طول یک پروژه روی عملکرد تمرکز کرده اید و تنظیم زودهنگام آن به جلوگیری از عقب گرداندن در آینده کمک می کند. این عامل باید نقطه اتکای شما باشد تا به شما کمک کند بفهمید چه مواردی را باید در وب سایت خود بگنجانید. ایده اصلی این است که اهداف را تعیین کنید تا بتوانید پرفرمنس را بدون آسیب رساندن به عملکرد و یا تجربه کاربر به گونه ای بهتر متعادل کنید.
میدانید لایت هاوس چگونه نمره عملکرد سایت شما را محاسبه می کند؟
