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

Share this Guide

Did you like it? Share it!

Share it!

Web tools for modern developers. Try these one!

Over 50 generators, builders and validators to improve your SEO and web performances

Home Back to top of the page