عملکرد بخش مهمی از تجربه کاربر است و بر معیارهای تجاری تأثیر می گذارد . این وسوسه انگیز است که فکر کنید اگر یک توسعه دهنده خوب باشید، در نهایت یک سایت کارآمد خواهید داشت، اما حقیقت این است که عملکرد خوب به ندرت یک عارضه جانبی است. مانند بسیاری از چیزهای دیگر، برای رسیدن به یک هدف باید آن را به وضوح تعریف کنید. سفر را با تنظیم بودجه عملکرد شروع کنید.
تعریف
بودجه عملکرد مجموعه ای از محدودیت های اعمال شده بر معیارهایی است که بر عملکرد سایت تأثیر می گذارد. این می تواند اندازه کل یک صفحه، زمان بارگیری در شبکه تلفن همراه یا حتی تعداد درخواست های HTTP ارسال شده باشد. تعریف بودجه به شروع مکالمه عملکرد وب کمک می کند. این به عنوان یک نقطه مرجع برای تصمیم گیری در مورد طراحی، فناوری و افزودن ویژگی ها عمل می کند.
داشتن بودجه به طراحان این امکان را می دهد تا در مورد اثرات تصاویر با وضوح بالا و تعداد فونت های وب که انتخاب می کنند فکر کنند. همچنین به توسعه دهندگان کمک می کند تا رویکردهای مختلف را برای یک مشکل مقایسه کنند و چارچوب ها و کتابخانه ها را بر اساس اندازه و هزینه تجزیه آنها ارزیابی کنند.
معیارها را انتخاب کنید
معیارهای مبتنی بر کمیت ⚖️
این معیارها در مراحل اولیه توسعه مفید هستند زیرا تأثیر گنجاندن تصاویر و اسکریپت های سنگین را برجسته می کنند. همچنین ارتباط آنها با طراحان و توسعه دهندگان آسان است.
ما قبلاً به چند مورد اشاره کرده‌ایم که می‌توانید در بودجه عملکردی مانند وزن صفحه و تعداد درخواست‌های HTTP لحاظ کنید، اما می‌توانید این موارد را به محدودیت‌های دقیق‌تر تقسیم کنید، مانند:
- حداکثر اندازه تصاویر
- حداکثر تعداد فونت های وب
- حداکثر اندازه اسکریپت ها، از جمله چارچوب ها
- تعداد کل منابع خارجی، مانند اسکریپت های شخص ثالث
با این حال، این اعداد چیز زیادی در مورد تجربه کاربری به شما نمی گویند. دو صفحه با تعداد درخواست های یکسان یا وزن یکسان می توانند بسته به ترتیب درخواست منابع متفاوت ارائه شوند. اگر یک منبع مهم مانند یک تصویر قهرمان یا یک شیوه نامه در یکی از صفحات در اواخر فرآیند بارگیری شود، کاربران برای دیدن چیزی مفید بیشتر منتظر می مانند و صفحه را کندتر می دانند. اگر در صفحه دیگر، مهم‌ترین قسمت‌ها به سرعت لود شوند، ممکن است حتی متوجه نشوند اگر بقیه صفحه این کار را انجام ندهند.
به همین دلیل مهم است که نوع دیگری از معیارها را پیگیری کنید.
زمان های عطف ⏱️
زمان‌بندی‌های نقطه عطف، رویدادهایی را که در حین بارگذاری صفحه اتفاق می‌افتند، نشان می‌دهند، مانند DOMContentLoaded یا رویداد بارگذاری . مفیدترین زمان بندی ها معیارهای عملکرد کاربر محور هستند که چیزی در مورد تجربه بارگذاری یک صفحه به شما می گوید. این معیارها از طریق APIهای مرورگر و به عنوان بخشی از گزارش های Lighthouse در دسترس هستند.
First Contentful Paint (FCP) زمانی را اندازه‌گیری می‌کند که مرورگر اولین بیت از محتوا را از DOM نمایش می‌دهد، مانند متن یا تصاویر.
Time to Interactive (TTI) مدت زمانی را که طول می‌کشد تا یک صفحه کاملاً تعاملی شود و به ورودی کاربر به طور قابل اعتماد پاسخ دهد، اندازه‌گیری می‌کند. این یک معیار بسیار مهم است که اگر انتظار هر نوع تعامل کاربر در صفحه را دارید مانند کلیک کردن روی پیوندها، دکمه ها، تایپ کردن یا استفاده از عناصر فرم، معیار بسیار مهمی است.
معیارهای مبتنی بر قانون 💯
Lighthouse و WebPageTest امتیازهای عملکرد را بر اساس قوانین کلی بهترین عملکرد محاسبه می کنند که می توانید از آنها به عنوان دستورالعمل استفاده کنید. به عنوان یک امتیاز، Lighthouse همچنین نکاتی را برای بهینه سازی ساده به شما ارائه می دهد.
اگر ترکیبی از معیارهای عملکرد مبتنی بر کمیت و کاربر محور را دنبال کنید، بهترین نتایج را دریافت خواهید کرد. روی اندازه دارایی در مراحل اولیه پروژه تمرکز کنید و در اسرع وقت ردیابی FCP و TTI را شروع کنید.
یک خط پایه ایجاد کنید
تنها راه برای اینکه واقعاً بدانید چه چیزی برای سایت شما بهتر است، این است که آن را امتحان کنید - تحقیق کنید و سپس یافته های خود را آزمایش کنید. رقابت را تجزیه و تحلیل کنید تا ببینید چگونه روی هم می نشینید. 🕵️
اگر برای این کار وقت ندارید، در اینجا اعداد پیش فرض خوبی برای شروع شما وجود دارد:
- زیر 5 ثانیه زمان برای تعامل
- کمتر از 170 کیلوبایت منابع مسیر بحرانی (فشرده / کوچک شده)
این اعداد بر اساس دستگاه های پایه دنیای واقعی و سرعت شبکه 3G محاسبه می شوند. بیش از نیمی از ترافیک اینترنت امروزه در شبکه های تلفن همراه اتفاق می افتد، بنابراین باید از سرعت شبکه 3G به عنوان نقطه شروع استفاده کنید.
نمونه هایی از بودجه
شما باید برای انواع مختلف صفحات سایت خود بودجه ای در نظر بگیرید زیرا محتوا متفاوت است. مثلا:
- صفحه محصول ما باید کمتر از 170 کیلوبایت جاوا اسکریپت را روی موبایل ارسال کند
- صفحه جستجوی ما باید شامل کمتر از 2 مگابایت تصاویر روی دسکتاپ باشد
- صفحه اصلی ما باید در کمتر از 5 ثانیه در 3G کند روی یک تلفن Moto G4 بارگیری و تعاملی شود.
- وبلاگ ما باید در ممیزی عملکرد Lighthouse امتیاز > 80 داشته باشد
بودجه عملکرد را به فرآیند ساخت خود اضافه کنید
انتخاب ابزاری برای این کار بستگی زیادی به مقیاس پروژه و منابعی دارد که می توانید به آن کار اختصاص دهید. چند ابزار منبع باز وجود دارد که می تواند به شما کمک کند بودجه بندی را به فرآیند ساخت خود اضافه کنید:
اگر چیزی از یک آستانه تعریف شده فراتر رفت، می توانید یکی از موارد زیر را انجام دهید:
- یک ویژگی یا دارایی موجود را بهینه کنید 🛠️
- یک ویژگی یا دارایی موجود را حذف کنید 🗑️
- ویژگی یا دارایی جدید را اضافه نکنید ✋⛔
عملکرد را پیگیری کنید
اطمینان از اینکه سایت شما به اندازه کافی سریع است به این معنی است که باید بعد از راه اندازی اولیه به اندازه گیری ادامه دهید. نظارت بر این معیارها در طول زمان و دریافت داده‌ها از کاربران واقعی به شما نشان می‌دهد که چگونه تغییرات عملکرد بر معیارهای کلیدی کسب‌وکار تأثیر می‌گذارد.
بسته شدن
هدف از بودجه عملکرد این است که مطمئن شوید که روی عملکرد در طول یک پروژه تمرکز می کنید و تنظیم زودهنگام آن به جلوگیری از عقب نشینی در آینده کمک می کند. این باید نقطه مرجعی باشد تا به شما کمک کند بفهمید چه چیزی را در وب سایت خود قرار دهید. ایده اصلی این است که اهدافی را تعیین کنید تا بتوانید عملکرد بهتری را بدون آسیب رساندن به عملکرد یا تجربه کاربر متعادل کنید.🎯
راهنمای بعدی شما را در تعریف اولین بودجه عملکرد خود در چند مرحله ساده راهنمایی می کند.