طراحی بودجه عملکرد سایت در چند مرحله ساده

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

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

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

در ادامه مراحل ساخت و طراحی بودجه عملکرد یک سایت فرضی را به عنوان مثال با هم بررسی خواهیم کرد.

تجزیه و تحلیل اولیه سرعت وبسایت

اگر در تلاش برای بهبود سرعت یک سایت هستید، با شناسایی مهمترین صفحات شروع کنید. مهمترین صفحات می‌توانند صفحاتی باشند که بیشترین میزان ترافیک ورودی را دارند یا صفحات فرود محصول هستند.

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

در زیر پانل Audits در Chrome DevTools ابزار Lighthouse را خواهید یافت.

از این حالت برای بدست آوردن معیارهای زیر استفاده می‌کنیم

  • First Contentful Paint (FCP)
  • Time to Interactive (TTI)

استفاده از پنجره مهمان، محیط آزمایشی تمیزی را بدون هیچ گونه برنامه افزودنی Chrome که می تواند در ممیزی تداخل داشته باشد، به شما می دهد.

باز کردن Guest Mode در کروم

مثال مورد بررسی

مثال مورد بررسی در این مقاله برای طراحی بودجه عملکرد یک موتور جستجوی بسیار تخصصی به نام doggos.com است. Doggos.com قصد دارد همه چیزهای مربوط به سگ را در اینترنت فهرست کند و مهمترین صفحات آن صفحه اصلی و نتایج هستند. در جدول زیر معیارهای FCP و TTI اندازه گیری شده برای سایت در دسکتاپ و موبایل آمده است.

DesktopFCPTTI
صفحه اصلی1,680ms5,550ms
صفحه نتایج2,060ms6,690ms
جدول شماره 1 : تجزیه و تحلیل دسکتاپ doggos.io

MobileFCPTTI
صفحه اصلی1800ms6150ms
صفحه نتایج1100ms7870ms
جدول شماره 2 : تجزیه و تحلیل موبایل doggos.io

تحلیل رقبا در طراحی بودجه عملکرد

زمانی که سایت خود را آنالیز کردید، نوبت به تجزیه و تحلیل سایت‌های رقبا می رسد. مقایسه نتایج از وب‌سایت‌های مشابه با وب‌سایت شما، راهی عالی برای تعیین بودجه عملکرد است. چه در حال کار بر روی یک پروژه قدیمی باشید و چه از ابتدا شروع کنید، این بخش یک مرحله مهم است. زمانی مزیت رقابتی به دست می آورید که از رقبای خود سریعتر باشید.

اگر رقبای خود را نمی‌شناسید در ادامه چند ابزار ساده برای شناسایی رقبا به شما معرفی می‌کنیم

  1. استفاده از عبارت related: در جسجوی گوگل
  2. ویژگی Alexa’s similar sites
  3. SimilarWeb

بودجه کارایی برای نقاط عطف زمان‌بندی

موتور جستجوی تخصصی مورد بحث ما در این مثال تعداد کمی رقیب دارد و ما بر روی بهینه‌سازی صفحه اصلی در موبایل تمرکز خواهیم کرد.

جدولی با زمان‌های FCP و TTI برای همه وب سایت‌های رقیب ایجاد کنید و سریع ترین ها را برجسته کنید. این جدول تصویر واضح تری از عملکرد وب سایت شما در مقایسه با رقبا به شما می دهد.

سایت و رقباFCPTTI
goggles.com880ms3,150ms
doggos.com1,800ms6,500ms
quackquackgo.com2,680ms4,740ms
ding.xyz2,420ms7,040ms
جدول شماره 3 : بررسی دو معیار fcp و tti برای رقبا در طراحی بودجه عملکرد

با توجه به جدول بالا باید گفت که جا برای پیشرفت وجود دارد و یک راه حل خوب برای آن قانون 20 درصد است. تحقیقات بیان می کند که کاربران زمانی که پاسخ دهی (response times) نسبتت به یه سایت دیگر بیشتر از 20 درصد است به سادگی تفاوت تشخیص می دهند. این بدان معنی است که اگر می خواهید به طور قابل توجهی بهتر از بهترین سایت قابل مقایسه باشید، باید حداقل 20٪ سریعتر باشید.

معیارزمان فعلیبودجه (20 درصد سریعتر از بهترین رقیب)
FCP1,800ms704ms
TTI6,500ms2,520ms
جدول شماره 4 : بودجه عملکردی که doggos.com را جلوتر از رقابت می برد

ترکیب معیارهای مختلف

بودجه عملکرد جامد انواع مختلفی از معیارها را ترکیب می کند. ما قبلاً بودجه را برای زمان‌بندی نقطه عطف تعریف کرده‌ایم و اکنون دو مورد دیگر را به ترکیب اضافه می‌کنیم:

  • معیارهای مبتنی بر کمیت
  • معیارهای مبتنی بر قانون

طراحی بودجه کارایی برای معیارهای مبتنی بر کمیت

سعی کنید منابع بحرانی (فشرده/ کوچک شده) سایت که باید با سرعت بارگذاری شوند کمتر از 170 کیلوبایت باشد. این کار تضمین می کند که وب سایت شما حتی در دستگاه های ارزان قیمت و 3G کند نیز سریع خواهد بود.

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

در اینجا چند نمونه بر اساس بودجه TTI آورده شده است:

شبکهدستگاهJSعکسCSSHTMLفونتمجموعبودجه TTI
Slow 3GMoto G410030101020~170KB5s
Slow 4GMoto G420050353030~345KB3s
WiFiDesktop3002505050100~750KB2s
جدول شماره 4 : مثال هایی برای بودجه tti

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

طراحی بودجه بر اساس معیارهای کمیتی یک کار پیچیده است. یک وب سایت e-commerce با تعداد زیادی عکس تفاوت زیادی با یک پورتال خبری که بیشتر متنی است دارد. اگر در سایت خود از تبلیغات یا analytics استفاده کنید باعث می‌شوید حجم بیشتری از جاوا اسکریپت درگیر شود.

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

اگر که یک وب سایت فعال دارید، بررسی کنید که در معیارهای عملکردی کاربر محور چگونه عمل می کنید و بودجه خود را تنظیم کنید.

طراحی بودجه عملکرد برای معیارهای مبتنی بر قوانین (rule)

از مهمترین معیارهای مبتنی بر قانون، امتیازات Lighthouse هستند. Lighthouse برنامه شما را در 5 دسته طبقه‌بندی می کند که یکی از آنها عملکرد (سرعت) است. امتیازات عملکرد بر اساس 5 معیار مختلف، از جمله First Contentful Paint و Time to Interactive محاسبه می شود.

وقتی سعی می کنید یک سایت عالی بسازید، بودجه امتیاز عملکرد Lighthouse را حداقل بر روی 85 (از 100) تنظیم کنید.

اولویت بندی

از خود بپرسید که چه سطحی از تعامل را در سایت خود انتظار دارید. اگر یک وب سایت خبری است، هدف اصلی کاربران خواندن محتوا است، بنابراین باید روی رندر سریع و پایین نگه داشتن FCP تمرکز کنید. بازدیدکنندگان Doggos.com می‌خواهند در اسرع وقت روی پیوندهای مورد نظرشان کلیک کنند، بنابراین اولویت اول TTI پایین است.

دقیقاً متوجه شوید که چه بخشی از مخاطبان شما روی دسکتاپ در مقایسه با دستگاه های تلفن همراه از سایت شما بازدید می‌کنند و بر این اساس اولویت بندی کنید. یکی از راه‌های پی بردن به این موضوع این است که از طریق داشبورد گزارش تجربه کاربری Chrome بررسی کنید که مخاطبان شما در وب‌سایت‌های رقبا چه می‌کنند.

طراحی بودجه کارایی  : بررسی نسبت کاربران موبایل و دسکتاپ در گزارش تجربه کاربری Chrome

سوالات متداول

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

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