שימוש ב-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 אלפיות השנייה עבור הצגת תמונה חשובה ראשונה
  • תקציב של 125KB לכמות הכוללת של JavaScript בדף.
  • תקציב של 300KB לגודל הכולל של הדף.
  • תקציב של 10 בקשות למספר הבקשות שנשלחו למקורות צד שלישי.

רשימה מלאה של מדדי הביצועים וסוגי המשאבים הנתמכים זמינה בקטע תקציבים של ביצועים במסמכי Lighthouse.

הפעלת Lighthouse

מריצים את Lighthouse באמצעות הדגל --budget-path. הדגל הזה מציין ל-Lighthouse את המיקום של קובץ התקציב.

lighthouse https://example.com --budget-path=./budget.json

הצגת התוצאות

אם LightWallet הוגדר בצורה נכונה, הדוח של Lighthouse יכלול את הקטע תקציבים בקטגוריה ביצועים.

'תקציבים' בקטע בדוח Lighthouse

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