وقتی یک بودجه شخصی، تجاری یا خانوادگی تعیین می کنید، محدودیتی برای مخارج خود تعیین می کنید و مطمئن می شوید که در آن باقی خواهید ماند. بودجه های عملکردی به همان شیوه کار می کنند، اما برای معیارهایی که بر عملکرد وب سایت تأثیر می گذارد.
با بودجه عملکردی که ایجاد و اجرا می شود، می توانید مطمئن باشید که سایت شما در سریع ترین زمان ممکن ارائه می شود. این تجربه بهتری را برای بازدیدکنندگان شما فراهم می کند و بر معیارهای کسب و کار تأثیر مثبتی خواهد داشت.
در اینجا نحوه تعریف اولین بودجه عملکرد خود در چند مرحله ساده آورده شده است.
تجزیه و تحلیل اولیه
اگر در تلاش برای بهبود عملکرد یک سایت موجود هستید، با شناسایی مهمترین صفحات شروع کنید. به عنوان مثال، اینها می توانند صفحاتی باشند که بیشترین ترافیک کاربر را دارند یا صفحه فرود محصول.
بعد از اینکه صفحات کلیدی خود را شناسایی کردید، نوبت به تجزیه و تحلیل آنها می رسد. ابتدا، ما بر نقاط عطف زمانی تمرکز خواهیم کرد که به بهترین شکل تجربه کاربر را اندازه گیری می کنند.
در زیر پانل حسابرسی در Chrome DevTools، Lighthouse را پیدا خواهید کرد. ممیزی را در هر صفحه در پنجره مهمان اجرا کنید تا این دو بار ثبت شود:
بیایید یک موتور جستجوی بسیار تخصصی، Doggos.com را به عنوان مثال در نظر بگیریم. Doggos.com قصد دارد تمام موارد مرتبط با سگ را در اینترنت فهرست کند و مهمترین صفحات آن صفحه اصلی و نتایج هستند. در اینجا اعداد FCP و TTI اندازه گیری شده برای سایت در دسکتاپ و موبایل آمده است.
| دسکتاپ | FCP | TTI |
|---|---|---|
| صفحه نخست | 1680 میلی‌ثانیه | 5550 میلی‌ثانیه |
| صفحه نتایج | 2060 میلی‌ثانیه | 6690 میلی‌ثانیه |
| سیار | FCP | TTI |
|---|---|---|
| صفحه نخست | 1800 میلی‌ثانیه | 6150 میلی‌ثانیه |
| صفحه نتایج | 1100 میلی‌ثانیه | 7870 میلی‌ثانیه |
تحلیل رقابتی
زمانی که سایت خود را آنالیز کردید، نوبت به تجزیه و تحلیل سایت های رقبا می رسد. مقایسه نتایج از وب‌سایت‌های مشابه با وب‌سایت شما، راهی عالی برای تعیین بودجه عملکرد است. چه در حال کار بر روی یک پروژه تاسیس شده باشید یا از ابتدا شروع کنید، این یک مرحله مهم است. زمانی مزیت رقابتی به دست می آورید که از رقبای خود سریعتر باشید.
اگر مطمئن نیستید که به کدام سایت ها نگاه کنید، در اینجا چند ابزار وجود دارد که باید امتحان کنید:
- کلمه کلیدی "related:" جستجوی گوگل
- ویژگی های سایت های مشابه الکسا
- مشابه وب
برای یک تصویر واقعی، سعی کنید 10 رقیب یا بیشتر پیدا کنید .
بودجه برای نقاط عطف زمان بندی
موتور جستجوی تخصصی ما در این مثال تعداد کمی رقیب دارد و ما بر روی بهینه سازی صفحه اصلی برای دستگاه های تلفن همراه تمرکز خواهیم کرد. بیش از نیمی از ترافیک اینترنت امروز در شبکه های تلفن همراه اتفاق می افتد و استفاده از شماره تلفن همراه به عنوان پیش فرض نه تنها برای کاربران تلفن همراه، بلکه برای کاربران دسکتاپ شما نیز مفید خواهد بود.
نموداری با زمان های FCP و TTI برای همه وب سایت های مشابه ایجاد کنید و سریع ترین ها را در این دسته برجسته کنید. نموداری مانند این تصویر واضح تری از عملکرد وب سایت شما در مقایسه با رقبا به شما می دهد.
| سایت/صفحه اصلی | FCP | TTI |
|---|---|---|
| goggles.com | 880 میلی‌ثانیه | 3150 میلی‌ثانیه |
| Doggos.com | 1800 میلی‌ثانیه | 6500 میلی‌ثانیه |
| quackquackgo.com | 2680 میلی‌ثانیه | 4740 میلی‌ثانیه |
| ding.xyz | 2420 میلی‌ثانیه | 7040 میلی‌ثانیه |
جا برای بهبود وجود دارد و یک دستورالعمل خوب برای آن قانون 20 درصد است. تحقیقات بیان می کند که کاربران زمانی که بیشتر از 20 درصد است تفاوت در زمان پاسخ را تشخیص می دهند. این بدان معنی است که اگر می خواهید به طور قابل توجهی بهتر از بهترین سایت قابل مقایسه باشید، باید حداقل 20٪ سریعتر باشید .
| اندازه گرفتن | زمان فعلی | بودجه (20٪ سریعتر از رقابت) |
|---|---|---|
| FCP | 1800 میلی‌ثانیه | 704 میلی‌ثانیه |
| TTI | 6500 میلی‌ثانیه | 2520 میلی‌ثانیه |
اگر می‌خواهید یک سایت موجود را بهینه کنید، ممکن است رسیدن به آن هدف غیرممکن به نظر برسد. این نشانه آن نیست که شما تسلیم شوید. با گام های کوچک شروع کنید و بودجه را 20 درصد سریعتر از سرعت فعلی خود تنظیم کنید. از آنجا به بهینه سازی ادامه دهید.
برای Doggos.com، یک بودجه اصلاح شده می تواند به این شکل باشد.
| اندازه گرفتن | زمان فعلی | بودجه اولیه (20٪ سریعتر از زمان فعلی) | هدف بلند مدت (20% سریعتر از رقابت) |
|---|---|---|---|
| FCP | 1800 میلی‌ثانیه | 1,440 میلی‌ثانیه | 704 میلی‌ثانیه |
| TTI | 6500 میلی‌ثانیه | 5200 میلی‌ثانیه | 2520 میلی‌ثانیه |
معیارهای مختلف را با هم ترکیب کنید
بودجه عملکرد جامد انواع مختلفی از معیارها را ترکیب می کند. ما قبلاً بودجه را برای زمان‌بندی نقطه عطف تعریف کرده‌ایم و اکنون دو مورد دیگر را به ترکیب اضافه می‌کنیم:
- معیارهای مبتنی بر کمیت
- معیارهای مبتنی بر قانون
بودجه برای معیارهای کمیت
با هر تعداد وزن کل صفحه که به دست می آورید، سعی کنید کمتر از 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 بررسی کنید که مخاطبان شما در وب‌سایت‌های رقبا چه می‌کنند.
مراحل بعدی
اطمینان حاصل کنید که بودجه عملکرد شما در طول پروژه اجرا می شود و آن را در فرآیند ساخت خود بگنجانید.