مقدمه
با پیچیدهتر شدن وباپها، بزرگتر شدن Bundleها و رشد استفاده از فریمورکهایی مانند React، Next.js و Vue، سرعت وبسایتها بهراحتی افت میکند.
اینجاست که Performance Budget بهعنوان یک «چراغ قرمز» وارد بازی میشود؛ تا هر وقت تیم از حد مجاز عبور کرد، به آن هشدار دهد.
بهطور ساده:
Performance Budget = محدودیتهایی که برای عملکرد سایت تعیین میکنید.
Performance Budget چیست؟
Performance Budget مجموعهای از مقادیر عددی است که سقف مصرف منابع و زمانهای بحرانی سایت را تعریف میکند.
این مقادیر معمولاً شامل:
- حجم کل جاوااسکریپت
- حجم CSS
- حجم تصاویر
- تعداد درخواستها
- TTFB
- LCP
- INP
- CLS
- Total Page Weight
- Time To Interactive
- First Contentful Paint
اگر خروجی Build یا نسخه جدید سایت از این حد عبور کند → هشدار یا شکست Build.
چرا Performance Budget مهم است؟
۱. جلوگیری از سنگین شدن پروژه در طول زمان
معمولاً پروژهها در ابتدا سریع هستند، اما با اضافهشدن فیچرها:
- JS بیشتر
- تصاویر بزرگتر
- dependencyهای جدید
- اسکریپتهای تحلیلی اضافه
نتیجه: کندی تدریجی و نامحسوس سایت
Performance Budget جلوی این روند را میگیرد.
۲. تضمین Core Web Vitals خوب
Performance Budget به تیم کمک میکند:
- LCP کمتر از ۲.۵ ثانیه
- INP کمتر از ۲۰۰ میلیثانیه
- CLS نزدیک صفر
را حفظ کند.
این موضوع برای SEO، رتبه و تجربه موبایل حیاتی است.
۳. حفظ تجربه کاربری در مقیاس بالا
برای محصولاتی با میلیونها بازدید (فروشگاهها، سوپر اپها، سرویسهای مالی):
- سرعت = درآمد
- سرعت = رضایت مشتری
- سرعت = نرخ تبدیل
Performance Budget تضمین میکند:
- محصول شلوغ نشود
- تغییرات فیچرها سرعت را نابود نکند
- تیم توسعه بتواند با خیال راحت کار کند
۴. هماهنگکردن تیمها روی یک استاندارد ثابت
یکی از بزرگترین مزایای آن: شفافیت بین تیمها
- تیم توسعه
- تیم طراحی
- تیم محصول
- تیم محتوا
- تیم DevOps
همه میدانند سقف مجاز چیست.
مثال:
“تصاویر صفحه اول نباید بیش از ۵۰۰KB باشند.”
“JS صفحه Home نباید بیش از ۲۰۰KB باشد.”
۵. کمک به پیشگیری از رهبری تصمیمات اشتباه
در جلسات محصول معمولاً درخواستهایی مثل:
- اضافهکردن چت آنلاین
- اضافهکردن چندین اسکریپت تبلیغاتی
- اضافه کردن ویدیوهای اتوپلی
شنیده میشود.
Performance Budget یک معیار علمی برای مخالفت یا اصلاح آنها فراهم میکند.
انواع Performance Budget
۱. مبتنی بر Metrics (زمانها)
- LCP
- INP
- TTFB
- FCP
- TTI
- CLS
این نوع روی تجربه واقعی کاربر تمرکز دارد.
۲. مبتنی بر Quantity (تعدادها)
- تعداد درخواستها
- تعداد اسکریپتها
- تعداد فونتها
این نوع برای جلوگیری از شلوغی است.
۳. مبتنی بر Size (حجمها)
- حجم JS
- حجم CSS
- حجم تصاویر
- حجم fonts
- حجم کل صفحه
این نوع کنترل مستقیم روی وزن صفحه دارد.
چگونه Performance Budget عملی میشود؟
۱. تعیین سقفها
مثلاً:
- JS ≤ 170 KB
- CSS ≤ 60 KB
- Img ≤ 400 KB
- LCP ≤ 2.5s
- INP ≤ 200ms
۲. نظارت مداوم
با ابزارهایی مثل:
- Lighthouse CI
- WebPageTest
- PageSpeed Insights
- Calibre
- SpeedCurve
- Vercel Analytics
- Netlify Analytics
- GitHub Actions
۳. شکست Build در CI/CD
اگر خروجی از حد مجاز بیشتر شد → Build fail
این یعنی:
کیفیت فدای سرعت نمیشود.
بهترین مقادیر برای Performance Budget (۲۰۲۶)
خطکش جهانی (برای سایتهای مدرن):
- JS: کمتر از ۲۰۰ KB gzip
- CSS: کمتر از 70 KB
- تصاویر صفحه اول: کمتر از 500 KB
- LCP: زیر ۲.۵ ثانیه
- INP: زیر ۲۰۰ms
- CLS: نزدیک صفر
- Page Weight: زیر ۱.۲MB در موبایل
چه کسانی باید از Performance Budget استفاده کنند؟
- تیمهای حرفهای Front-end
- فروشگاهها و مارکتپلیسها
- سرویسهای مالی و دولتی
- استارتاپهایی که scale-up شدهاند
- سایتهای محتوایی بزرگ
- وباپها و SaaSها
- تیمهایی که با Next.js یا React کار میکنند
بهخصوص تیمهایی که سرعت اولویت مهم برای آنهاست.
جمعبندی
Performance Budget ابزاری برای محدودکردن رشد بیرویه سورسکد و حفظ سرعت سایت است.
داشتن آن یعنی:
- سرعت ثابت
- تجربه کاربری بهتر
- کنترل کیفیت
- ارتقای Core Web Vitals
- جلوگیری از سنگینشدن پروژه
اگر تیم شما هنوز Performance Budget ندارد، احتمالاً پروژه با هر فیچر جدید کمی کندتر میشود.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر میدهد!