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