کنترل بودجه عملکرد سایت با Lighthouse

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

از نسخه 5 به بعد Lighthouse از بودجه عملکرد پشتیبانی می‌کند. این ویژگی می‌تواند در زمان بسیار کمی راه‌اندازی شود و بازخوردی در مورد معیارهای عملکرد و اندازه و کمیت منابع و همچنین سرعت صفحه ارائه می‌دهد.

آنچه در این مقاله خواهیم خواند

نصب Lighthouse

در این مقاله ما لایت هوس را بر روی ویندوز 11 نصب می‌کنیم که در محیط cmd قابل دسترسی است.

Node CLI بیشترین انعطاف را در نحوه پیکربندی و گزارش اجرای Lighthouse فراهم می‌کند. کاربرانی که خواهان استفاده پیشرفته‌تر هستند یا می‌خواهند Lighthouse را به صورت خودکار اجرا کنند باید از Node CLI استفاده کنند.

برای شروع ابتدا باید Lighthouse را از طریق دستور زیر در cmd نصب کنید.

npm install -g lighthouse

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

ساخت بودجه کارایی برای Lighthouse

بودجه عملکرد و سرعت سایت (Performance budgets)

برای ساخت بودجه کارایی ابتدا فایلی متنی با نام budget.json ایجاد و متن زیر را که دستورات ساخت یک بودجه کارایی در Lighthouse است در آن کپی کنید.

[
  {
    "path": "/*",
    "timings": [
      {
        "metric": "interactive",
        "budget": 3000
      },
      {
        "metric": "first-meaningful-paint",
        "budget": 1000
      }
    ],
    "resourceSizes": [
      {
        "resourceType": "script",
        "budget": 125
      },
      {
        "resourceType": "total",
        "budget": 300
      }
    ],
    "resourceCounts": [
      {
        "resourceType": "third-party",
        "budget": 10
      }
    ]
  }
]

فایل بودجه بالا شامل 5 بودجه مجزا برای 5 معیار مختلف است

• بودجه 3000 میلی‌ثانیه برای Time to Interactive.
• بودجه 1000 میلی‌ثانیه برای First Meaningful Paint
• بودجه 125 کیلوبایتی برای کل جاوا اسکریپت در صفحه.
• بودجه 300 کیلوبایت برای اندازه کلی صفحه.
• بودجه ای از 10 درخواست برای تعداد درخواست های ارائه شده به منابع شخص ثالث.

بودجه‌هایی که در دسته ویژگی "timings": هستند بودجه‌های وابسته به زمان و ویژگی "resourceSizes": بودجه‌های مربوط به اندازه منابع را شامل می‌شود، این ابزار از بودجه‌های کارایی مختلفی پشتیبانی می‌کند

معیارهای زمان‌بندی پشتیبانی شده:

• first-contentful-paint
• interactive
• first-meaningful-paint
• max-potential-fid
• total-blocking-time
• speed-index
• largest-contentful-paint
• cumulative-layout-shift

بودجه را می توان برای انواع منابع زیر تنظیم کرد:

• document
• font
• image
• media
• other
• script
• stylesheet
• third-party
• total

برای دیدن فهرست کامل معیارها، منابع و همچنین شیوه استفاده به بخش Performance Budgets در اسناد Lighthouse مراجعه کنید.

اجرای Lighthouse برای بررسی معیارها با بودجه تعیین شده

Lighthouse را با استفاده از پارامتر(پرچم) --budget-path اجرا کنید. این پارامتر محل فایل بودجه شما را به Lighthouse می گوید.

lighthouse https://example.com --budget-path=./budget.json

همانطور که در تصویر بالا می‌بینید ما برنامه را با آدرس وب سایت نکست و مسیر فایل بودجه که در درایو D کامپیوتر بوده اجرا کرده‌ایم نتایج تمامی بررسی ها در فایلی با نام آدرس سایت در مسیری که بررسی را اجرا کرده اید ایجاد خواهد شد. مانند شکل زیر فایل ما در مسیر درایو d ذخیره شده.

لزومی ندارد که حتما نام فایل بودجه حتما budget.json باشد.

مشاهده نتایج

برای مشاهده نتایج بررسی و ممیزی URL مشخص شده و تطبیق با بودجه فایل خروجی بررسی در مسیری که قبلا گفته شد به صورت html ذخیره خواهد شد و شما می‌توانید با باز کردن این فایل در مرورگر گزارش کامل بررسی را ببینید.

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

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