Performance Budget

Lighthouse helps you to keep the size and amount of network requests below your goals.

Speed performance

Performance Budget with Lighthouse

Once you have set performance budget targets you must always ensure that you keep the size and amount of network requests below these.

Lighthouse can help you thanks to its feature called LightWallet.

How can I install Lighthouse and create a budget?

To install Lighthouse you can simply run this code:

npm install -g lighthouse

Once done that, create a JSON file called budget.jsonand add in the following code:

[
  {
    "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
      }
    ]
  }
]

Eventually, run the code with the --budget-path flag, which indicates to Lighthouse the location of your file.

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

How can I see the report in SeoChecker?

After doing that, you can see the SeoChecker audit to check various fields, such as:

• Resource Type
• Requests
• Transfer Size
• Over Budget