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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

اولویت بندی

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

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

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