بودجه عملکرد و سرعت سایت (Performance budgets)
عملکرد و سرعت بخش مهمی از تجربه کاربری است و دیدیم که چگونه سرعت بر معیارهای تجاری تأثیر می گذارد. شاید فکر کنید اگه توسعه دهنده خوبی باشید به سادگی می‌توانید یک سایت سریع داشته باشید، اما حقیقت این است که بهبود سرعت سایت و عملکرد خوب آن یک فرایند مجزا از توسعه وب سایت است که نیاز به برنامه ریزی مختص خود را دارد.
برای رسیدن به این هدف (افزایش سرعت سایت) باید آن را به وضوح تعریف کنیم. این فرایند را با تنظیم بودجه عملکرد (Performance budgets) شروع می‌کنیم.
آنچه در این مقاله می‌خوانیم
بودجه عملکرد سایت چیست؟ ❓
بودجه عملکرد مجموعه ای از محدودیت های اعمال شده بر معیارهایی است که بر سرعت سایت و کارایی آن تأثیر می‌گذارد. این می‌تواند حجم یک صفحه، زمان بارگذاری در تلفن همراه یا حتی تعداد درخواست های HTTP ارسال شده باشد. تعریف بودجه به شروع بهبود سرعت و کارایی وب کمک می‌کند. این مرحله از فرایند بهبود سرعت سایت به عنوان یک نقطه مرجع برای تصمیم گیری در مورد طراحی، فناوری و افزودن ویژگی‌ها عمل می‌کند.
داشتن بودجه به طراحان وب‌سایت این امکان را می‌دهد تا در مورد تاثیر تصاویر با وضوح بالا و تعداد فونت‌هایی که انتخاب می‌کنند بر سرعت و کارایی سایت بررسی‌های لازم را انجام دهند. همچنین به توسعه دهندگان کمک می‌کند تا رویکردهای مختلف را برای یک مشکل مقایسه کنند و چارچوب‌ها و کتابخانه‌ها را بر اساس اندازه و هزینه تجزیه (parsing cost) آنها ارزیابی کنند.
انتخاب معیارها برای بودجه کارایی🤏
معیارهای مبتنی بر کمیت ⚖️
این معیارها در مراحل اولیه توسعه مفید هستند زیرا تأثیر گنجاندن تصاویر و اسکریپت های سنگین را برجسته می‌کنند. درک و تعامل آنها با طراحان و توسعه دهندگان نیز آسان است.
قبلاً به چند مورد مانند حجم صفحه و تعداد درخواست‌های HTTP اشاره کردیم، اما می‌توانید این موارد را به محدودیت‌های دقیق‌تر تقسیم کنید، مانند:
با این حال، این اعداد چیز زیادی در مورد تجربه کاربری به شما نمی‌گویند. دو صفحه با تعداد درخواست های یکسان یا حجم یکسان می‌توانند بسته به ترتیب درخواست منابع متفاوت ارائه شوند. اگر یک منبع مهم مانند یک تصویر hero(منظور تصویر اصلی در ابتدای صفحاتی مانند landing page ها است) یا یک شیوه نامه در یکی از صفحات در اواخر فرآیند بارگیری شود، کاربران مدت بیشتری منتظر می‌مانند تا چیز مفیدی را ببینند و این باعث می‌شود که صفحه را کندتر درک کنند. اگر در صفحه دیگر، مهم‌ترین قسمت‌ها به سرعت بارگذاری شوند، ممکن است کاربران حتی متوجه نشوند که بقیه صفحه هنوز بارگیری نشده است.
به همین دلیل مهم است که نوع دیگری از معیارها را نیز مورد توجه قرار دهیم.
زمانبندی نقاط عطف⏱️
زمانبندی نقاط عطف، رویدادهایی را که در حین بارگذاری صفحه رخ می‌دهند، مانند DOMContentLoaded یا رویداد load، مشخص می‌کنند. مفیدترین زمان‌بندی‌ها معیارهای عملکردی کاربر محور هستند که اطلاعاتی در مورد تجربه بارگذاری صفحه به شما می‌گوید. این معیارها از طریق APIهای مرورگر و به عنوان بخشی از گزارش های Lighthouse در دسترس هستند.
First Contentful Paint (FCP): زمانی را اندازه‌گیری می‌کند که مرورگر اولین بیت از محتوا را از DOM نمایش می‌دهد، مانند متن یا تصاویر.
Time to Interactive (TTI): مدت زمانی را که طول می‌کشد تا یک صفحه کاملاً تعاملی شود و به ورودی کاربر به طور قابل اعتماد پاسخ دهد، اندازه‌گیری می‌کند. این یک معیار بسیار مهم است که اگر انتظار هر نوع تعامل کاربر در صفحه مانند کلیک کردن روی پیوندها، دکمه ها، تایپ کردن یا استفاده از عناصر فرم را دارید، اندازه گیری بسیار مهمی است.
معیارهای مبتنی بر ضابطه و قانون💯
Lighthouse و WebPageTest امتیازهای عملکردی را بر اساس قوانین کلی بهترین عملکرد محاسبه می‌کنند که می‌توانید از آنها به عنوان دستورالعمل استفاده کنید. به عنوان یک امتیاز، Lighthouse همچنین نکاتی را برای بهینه‌سازی ساده به شما ارائه می‌دهد.
برای دریافت بهترین نتیجه بهتر است ترکیبی از معیارهای عملکردی مبتنی بر کمیت و کاربر محور را در بودجه عملکرد سایت خود بگنجانید، به عبارت ساده‌تر تمرکز بر اندازه فایل‌ها و دارایی‌ها در ابتدای پروژه و ردیابی و کنترل FCP و TTI به صورت مداوم در طول پروژه.
ایجاد یک خط پایه (حداقل‌ها)📈
تنها راه برای اینکه واقعاً بدانید چه چیزی برای سایت شما بهترین است این است که حالت‌های مختلف را امتحان کنید – تحقیق کنید و سپس یافته های خود را آزمایش کنید تا در کدام شرایط وب‌سایت سریعتری دارید.
اگر وقت لازم برای آزمون و خطا را ندارید، اعداد پیش‌فرض خوبی برای شروع وجود دارد:
این اعداد بر اساس دستگاه های پایه دنیای واقعی و سرعت شبکه 3G محاسبه می‌شوند. بیش از نیمی از ترافیک اینترنت امروز در شبکه های تلفن همراه اتفاق می‌افتد، بنابراین باید از سرعت شبکه 3G به عنوان نقطه شروع استفاده کنید.
نمونه هایی از بودجه کارایی سایت
بهتر است برای انواع صفحات مختلف در سایت بودجه‌های کارایی متفاوت در نظر بگیریم زیرا محتوا و شیوه تعامل کاربر در آنها متفاوت است.
بودجه عملکرد را به فرآیند ساخت خود اضافه کنید
انتخاب ابزاری برای این کار بستگی زیادی به مقیاس پروژه و منابعی دارد که می‌توانید به آن کار اختصاص دهید. چند ابزار منبع باز وجود دارد که می‌تواند به شما کمک کند بودجه بندی را به فرآیند ساخت خود اضافه کنید:
اگر چیزی از یک آستانه تعریف شده فراتر رفت، می‌توانید یکی از موارد زیر را انجام دهید:
ردیابی کارایی و سرعت سایت
اطمینان از اینکه سایت شما به اندازه کافی سریع است به این معنی است که باید بعد از راه‌اندازی اولیه به اندازه گیری ادامه دهید. نظارت بر این معیارها در طول زمان و دریافت داده ها از کاربران واقعی به شما نشان می‌دهد که چگونه تغییرات عملکرد بر معیارهای کلیدی کسب و کار تأثیر می‌گذارد.
نتیجه گیری
هدف از بودجه عملکرد این است که مطمئن شوید که روی عملکرد و سرعت در طول یک پروژه تمرکز می‌کنید. تنظیم بودجه عملکرد سایت باید نقطه مرجعی باشد تا به شما کمک کند بفهمید چه چیزی را در وب سایت خود قرار دهید. ایده اصلی این است که اهدافی را تعیین کنید تا بتوانید عملکرد بهتری را بدون آسیب رساندن به عملکرد یا تجربه کاربر به دست آورید.🎯