تتيح أداة Lighthouse الآن استخدام الميزانيات القائمة على الأداء. يمكن إعداد هذه الميزة، المعروفة باسم LightWallet، في أقل من خمس دقائق، وهي تقدّم ملاحظات حول مقاييس الأداء وحجم موارد الصفحة وكميتها.
تثبيت Lighthouse
تتوفّر LightWallet في إصدار سطر الأوامر من 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 ملي ثانية لسرعة الاستعداد للتفاعل
- ميزانية تبلغ 125 كيلوبايت لإجمالي حجم JavaScript على الصفحة
- ميزانية تبلغ 300 كيلوبايت للحجم الإجمالي للصفحة
- ميزانية من 10 طلبات لعدد الطلبات المقدَّمة إلى مصادر تابعة لجهات خارجية
للحصول على قائمة كاملة بمقاييس الأداء وأنواع الموارد المتوافقة، يُرجى الرجوع إلى قسم ميزانية قائمة على الأداء في مستندات Lighthouse.
تشغيل Lighthouse
شغِّل Lighthouse باستخدام علامة --budget-path. تُعلم هذه العلامة Lighthouse بموقع ملف الميزانية.
lighthouse https://example.com --budget-path=./budget.json
عرض النتائج
إذا تم ضبط LightWallet بشكل صحيح، سيحتوي تقرير Lighthouse على قسم الميزانيات ضمن فئة الأداء.
في إصدار JSON من تقرير Lighthouse، يمكن العثور على نتائج Lightwallet ضمن نتائج التدقيق لعملية التدقيق performance-budget.