استخدام Lighthouse لميزانيات الأداء

Katie Hempenius
Katie Hempenius

توفِّر Lighthouse الآن الميزانيات للأداء. يمكن إعداد هذه الميزة، المعروفة باسم LightWallet، في أقل من خمس دقائق، وهي تقدّم ملاحظات حول مقاييس الأداء وحجم موارد الصفحة وكميتها.

تثبيت Lighthouse

يتوفّر LightWallet في إصدار سطر الأوامر من Lighthouse 5 والإصدارات الأحدث.

للبدء، ثبِّت Lighthouse:

npm install -g lighthouse

إنشاء ميزانية.

إنشاء ملف باسم budget.json في هذا الملف، أضِف JSON التالي:

[
  {
    "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
      }
    ]
  }
]

يضبط هذا المثال على ملف budget.json خمس ميزانيات منفصلة:

  • ميزانية تبلغ 3000 ملي ثانية لمقياس "سرعة التفاعل"
  • حدّ أقصى يبلغ 1000 ملي ثانية لمقياس "سرعة عرض أوّل محتوى مفيد على الصفحة"
  • ميزانية تبلغ 125 كيلوبايت لإجمالي مقدار JavaScript على الصفحة
  • ميزانية قدرها 300 كيلوبايت للحجم الإجمالي للصفحة.
  • ميزانية تبلغ 10 طلبات لعدد الطلبات المقدَّمة إلى مصادر خارجية

للحصول على قائمة كاملة بمقاييس الأداء وأنواع الموارد المتوافقة، يُرجى الرجوع إلى قسم الميزانيات المستندة إلى الأداء في مستندات Lighthouse.

تشغيل Lighthouse

يمكنك تشغيل Lighthouse باستخدام العلامة --budget-path. تُعلم هذه العلامة Lighthouse بموقع ملف الميزانية.

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

عرض النتائج

إذا تم ضبط LightWallet بشكلٍ صحيح، سيتضمّن تقرير Lighthouse قسم الميزانيات ضمن فئة الأداء.

قسم "الميزانيات" في تقرير Lighthouse

في إصدار JSON من تقرير Lighthouse، يمكن العثور على نتائج Lightwallet ضمن نتائج التدقيق الخاصة بتدقيق performance-budget.