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 לדוגמה הזה מוגדרים חמישה תקציבים נפרדים:
- תקציב של 3,000 אלפיות השנייה עבור Time to Interactive.
- תקציב של 1,000 אלפיות השנייה להצגת התוכן העיקרי (FMP)
- תקציב של 125KB לכמות הכוללת של JavaScript בדף.
- תקציב של 300KB לגודל הכולל של הדף.
- תקציב של 10 בקשות למספר הבקשות שנשלחו למקורות צד שלישי.
רשימה מלאה של מדדי הביצועים וסוגי המשאבים הנתמכים מופיעה בקטע תקציבי ביצועים במסמכי העזרה של Lighthouse.
הפעלת Lighthouse
מריצים את Lighthouse באמצעות הדגל --budget-path. הדגל הזה מאפשר ל-Lighthouse לדעת איפה נמצא קובץ התקציב.
lighthouse https://example.com --budget-path=./budget.json
הצגת התוצאות
אם LightWallet הוגדר בצורה נכונה, הדוח של Lighthouse יכלול את הקטע Budgets (תקציבים) בקטגוריה Performance (ביצועים).
בגרסה של דוח Lighthouse בפורמט JSON, התוצאות של Lightwallet מופיעות בממצאי הביקורת של ביקורת performance-budget.