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

Katie Hempenius
Katie Hempenius

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

تثبيت أداة Lighthouse

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

للبدء، عليك تثبيت 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 ملّي ثانية لـ "وقت التفاعل".
  • ميزانية قدرها 1,000 ملّي ثانية (أو ما يعادل ذلك بالعملة المحلية) لميزة "سرعة عرض أول محتوى مفيد على الصفحة"
  • ميزانية قدرها 125 كيلوبايت لإجمالي حجم JavaScript على الصفحة.
  • ميزانية قدرها 300 كيلوبايت للحجم الإجمالي للصفحة.
  • ميزانية مؤلفة من 10 طلبات لعدد الطلبات المقدَّمة إلى مصادر تابعة لجهة خارجية

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

تشغيل Lighthouse

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

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

عرض النتائج

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

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

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