بودجه عملکرد و سرعت سایت (Performance budgets)

بودجه عملکرد وب مجموعه ای از محدودیت‌های اعمال‌شده بر معیارهایی است که بر عملکرد و سرعت سایت تأثیر می‌گذارد.

بودجه کارایی و سرعت سایت Performance budgets

عملکرد و سرعت بخش مهمی از تجربه کاربری است و دیدیم که چگونه سرعت بر معیارهای تجاری تأثیر می گذارد. شاید فکر کنید اگه توسعه دهنده خوبی باشید به سادگی می‌توانید یک سایت سریع داشته باشید، اما حقیقت این است که بهبود سرعت سایت و عملکرد خوب آن یک فرایند مجزا از توسعه وب سایت است که نیاز به برنامه ریزی مختص خود را دارد.

برای رسیدن به این هدف (افزایش سرعت سایت) باید آن را به وضوح تعریف کنیم. این فرایند را با تنظیم بودجه عملکرد (Performance budgets) شروع می‌کنیم.

بودجه عملکرد سایت چیست؟ ❓

بودجه عملکرد مجموعه ای از محدودیت های اعمال شده بر معیارهایی است که بر سرعت سایت و کارایی آن تأثیر می‌گذارد. این می‌تواند حجم یک صفحه، زمان بارگذاری در تلفن همراه یا حتی تعداد درخواست های HTTP ارسال شده باشد. تعریف بودجه به شروع بهبود سرعت و کارایی وب کمک می‌کند. این مرحله از فرایند بهبود سرعت سایت به عنوان یک نقطه مرجع برای تصمیم گیری در مورد طراحی، فناوری و افزودن ویژگی‌ها عمل می‌کند.

داشتن بودجه به طراحان وب‌سایت این امکان را می‌دهد تا در مورد تاثیر تصاویر با وضوح بالا و تعداد فونت‌هایی که انتخاب می‌کنند بر سرعت و کارایی سایت بررسی‌های لازم را انجام دهند. همچنین به توسعه دهندگان کمک می‌کند تا رویکردهای مختلف را برای یک مشکل مقایسه کنند و چارچوب‌ها و کتابخانه‌ها را بر اساس اندازه و هزینه تجزیه (parsing cost) آنها ارزیابی کنند.

انتخاب معیارها برای بودجه کارایی🤏

معیارهای مبتنی بر کمیت ⚖️

این معیارها در مراحل اولیه توسعه مفید هستند زیرا تأثیر گنجاندن تصاویر و اسکریپت های سنگین را برجسته می‌کنند. درک و تعامل آنها با طراحان و توسعه دهندگان نیز آسان است.

قبلاً به چند مورد مانند حجم صفحه و تعداد درخواست‌های HTTP اشاره کردیم، اما می‌توانید این موارد را به محدودیت‌های دقیق‌تر تقسیم کنید، مانند:

  • حداکثر اندازه تصاویر
  • حداکثر تعداد فونت های وب
  • حداکثر اندازه اسکریپت‌ها، به خصوص frameworks ها
  • تعداد کل منابع خارجی، مانند اسکریپت های شخص ثالث

با این حال، این اعداد چیز زیادی در مورد تجربه کاربری به شما نمی‌گویند. دو صفحه با تعداد درخواست های یکسان یا حجم یکسان می‌توانند بسته به ترتیب درخواست منابع متفاوت ارائه شوند. اگر یک منبع مهم مانند یک تصویر hero(منظور تصویر اصلی در ابتدای صفحاتی مانند landing page ها است) یا یک شیوه نامه در یکی از صفحات در اواخر فرآیند بارگیری شود، کاربران مدت بیشتری منتظر می‌مانند تا چیز مفیدی را ببینند و این باعث می‌شود که صفحه را کندتر درک کنند. اگر در صفحه دیگر، مهم‌ترین قسمت‌ها به سرعت بارگذاری شوند، ممکن است کاربران حتی متوجه نشوند که بقیه صفحه هنوز بارگیری نشده است.

تفاوت تجربه کاربری در صفحات بهینه شده و بهینه نشده برای سریع تر بودن با استفاده از بودجه کارایی

به همین دلیل مهم است که نوع دیگری از معیارها را نیز مورد توجه قرار دهیم.

زمانبندی نقاط عطف⏱️

زمان‌بندی نقاط عطف، رویدادهایی را که در حین بارگذاری صفحه رخ می‌دهند، مانند DOMContentLoaded یا رویداد load، مشخص می‌کنند. مفیدترین زمان‌بندی‌ها معیارهای عملکردی کاربر محور هستند که اطلاعاتی در مورد تجربه بارگذاری صفحه به شما می‌گوید. این معیارها از طریق 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 داشته باشد.

بودجه عملکرد را به فرآیند ساخت خود اضافه کنید

بودجه عملکرد را به فرآیند ساخت خود اضافه کنید

انتخاب ابزاری برای این کار بستگی زیادی به مقیاس پروژه و منابعی دارد که می‌توانید به آن کار اختصاص دهید. چند ابزار منبع باز وجود دارد که می‌تواند به شما کمک کند بودجه بندی را به فرآیند ساخت خود اضافه کنید:

اگر چیزی از یک آستانه تعریف شده فراتر رفت، می‌توانید یکی از موارد زیر را انجام دهید:

  • بهینه کردن یک ویژگی یا دارایی موجود 🛠️
  • حذف یک ویژگی یا دارایی موجود 🗑️
  • اضافه نکردن ویژگی یا دارایی جدید ✋⛔

ردیابی کارایی و سرعت سایت

اطمینان از اینکه سایت شما به اندازه کافی سریع است به این معنی است که باید بعد از راه‌اندازی اولیه به اندازه گیری ادامه دهید. نظارت بر این معیارها در طول زمان و دریافت داده ها از کاربران واقعی به شما نشان می‌دهد که چگونه تغییرات عملکرد بر معیارهای کلیدی کسب و کار تأثیر می‌گذارد.

نتیجه گیری

هدف از بودجه عملکرد این است که مطمئن شوید که روی عملکرد و سرعت در طول یک پروژه تمرکز می‌کنید. تنظیم بودجه عملکرد سایت باید نقطه مرجعی باشد تا به شما کمک کند بفهمید چه چیزی را در وب سایت خود قرار دهید. ایده اصلی این است که اهدافی را تعیین کنید تا بتوانید عملکرد بهتری را بدون آسیب رساندن به عملکرد یا تجربه کاربر به دست آورید.🎯

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.