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