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