Performance Budget Builder | Responsive Web Design

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

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.

  • Resource Name

    Performance Budget Builder

  • Resource Creator

    Brad Frost

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

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.