اولین بودجه عملکرد شما

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

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

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

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

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

در زیر پانل حسابرسی در Chrome DevTools، Lighthouse را پیدا خواهید کرد. ممیزی را در هر صفحه در پنجره مهمان اجرا کنید تا این دو بار ثبت شود:

پنل Lighthouse در Chrome DevTools

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

دسکتاپ FCP TTI
صفحه نخست 1680 میلی‌ثانیه 5550 میلی‌ثانیه
صفحه نتایج 2060 میلی‌ثانیه 6690 میلی‌ثانیه
تجزیه و تحلیل دسکتاپ Doggos.com
سیار FCP TTI
صفحه نخست 1800 میلی‌ثانیه 6150 میلی‌ثانیه
صفحه نتایج 1100 میلی‌ثانیه 7870 میلی‌ثانیه
تجزیه و تحلیل موبایل Doggos.com

تحلیل رقابتی

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

اگر مطمئن نیستید که به کدام سایت ها نگاه کنید، در اینجا چند ابزار وجود دارد که باید امتحان کنید:

  1. کلمه کلیدی "related:" جستجوی گوگل
  2. ویژگی های سایت های مشابه الکسا
  3. مشابه وب

اسکرین شات جستجوی گوگل با کلمه کلیدی مرتبط

برای یک تصویر واقعی، سعی کنید 10 رقیب یا بیشتر پیدا کنید .

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

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

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

سایت/صفحه اصلی FCP TTI
goggles.com 880 میلی‌ثانیه 3150 میلی‌ثانیه
Doggos.com 1800 میلی‌ثانیه 6500 میلی‌ثانیه
quackquackgo.com 2680 میلی‌ثانیه 4740 میلی‌ثانیه
ding.xyz 2420 میلی‌ثانیه 7040 میلی‌ثانیه
تجزیه و تحلیل رقابتی Doggos.com در شبکه 3G
سگ در کنار کامپیوتر
به نظر می رسد Doggos.com در معیار FCP خوب عمل می کند، اما در TTI به طور جدی عقب مانده است.

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

اندازه گرفتن زمان فعلی بودجه (20٪ سریعتر از رقابت)
FCP 1800 میلی‌ثانیه 704 میلی‌ثانیه
TTI 6500 میلی‌ثانیه 2520 میلی‌ثانیه
بودجه عملکردی که Doggos.com را جلوتر از رقابت می کند

اگر می‌خواهید یک سایت موجود را بهینه کنید، ممکن است رسیدن به آن هدف غیرممکن به نظر برسد. این نشانه آن نیست که شما تسلیم شوید. با گام های کوچک شروع کنید و بودجه را 20 درصد سریعتر از سرعت فعلی خود تنظیم کنید. از آنجا به بهینه سازی ادامه دهید.

برای Doggos.com، یک بودجه اصلاح شده می تواند به این شکل باشد.

اندازه گرفتن زمان فعلی بودجه اولیه (20٪ سریعتر از زمان فعلی) هدف بلند مدت (20% سریعتر از رقابت)
FCP 1800 میلی‌ثانیه 1,440 میلی‌ثانیه 704 میلی‌ثانیه
TTI 6500 میلی‌ثانیه 5200 میلی‌ثانیه 2520 میلی‌ثانیه
بودجه عملکرد Doggos.com اصلاح شده است

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

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

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

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

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

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

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

شبکه دستگاه JS تصاویر CSS HTML فونت ها جمع زمان به بودجه تعاملی
3G کند Moto G4 100 30 10 10 20 ~ 170 کیلوبایت 5 ثانیه
4G کند Moto G4 200 50 35 30 30 ~ 345 کیلوبایت 3s
وای فای دسکتاپ 300 250 50 50 100 ~ 750 کیلوبایت 2 ثانیه

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

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

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

بودجه برای معیارهای مبتنی بر قانون

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

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

اولویت بندی کنید

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

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

داده‌های توزیع دستگاه از گزارش تجربه کاربر Chrome
داده‌های توزیع دستگاه از گزارش تجربه کاربر Chrome

مراحل بعدی

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