שימוש ב-Lighthouse לתקציבי ביצועים

Katie Hempenius
Katie Hempenius

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

בגרסה של דוח Lighthouse בפורמט JSON, התוצאות של Lightwallet מופיעות בממצאי הביקורת של ביקורת performance-budget.