Performance Budget Builder

The performance budget builder is a great little tool created to help you visualise and understand the effects of adding more CSS, JS, Images and Fonts to your overall page weight. Over weight, go on a performance diet.

The Performance Budget builder tool allows you to set up a variety of template types, name them, set a template for each of the types and then add the sizes for each category.

The categories include

HTML
CSS
JS
Images
Fonts
Ads

A note from Brad Frost

Fair warning, this is mostly an experiment and hasn’t been cross-browser tested or anything like that. Feel free to take it and run with it.

Want to try it here? Well check out the embed pen below…

See the Pen Performance Budget Builder by Brad Frost (@bradfrost) on CodePen.

Description

The Performance Budget builder lets you lay out your template types, set a size budget for each template type, then plug in the sizes for each asset category that will load in the template. The tool will adjust each category’s width accordingly and yell at you if you exceed your budget. Pretty fun! Fair warning, this is mostly an experiment and hasn’t been cross-browser tested or anything like that. Feel free to take it and run with it.

View on Github Download Resource

Resource Name

Resource Creator

Description

Codekit

Macaw