The web is getting fatter. If you take a look at the top 1 million sites, you will see that median page weight is now bigger than SimCity 2000. Can you believe that? Page weight is a super important metric and affects conversion, retention, and SEO. Actually, it not only costs user engagement — it costs money. That's why Browser Calories exists. We will help you set a performance budget and measure if a page is exceeding these numbers or not.

Install

At this moment, Browser Calories is available as a browser extension for Chrome, Firefox and Opera. This may change in the future depending on how the community will react to this project. There's definitely room for a separate web app if people find this useful. Treat this as a "MVP" ;)

Usage

Once you install this extension, you'll see a donut icon next to the address bar. Every time you hit that donut, we'll calculate a performance budget based on the tab that is currently open in your browser. Behind the scenes, a new HTTP request is made and the response is broken down by resource type. Then, we compare the size of each resource with the page weight from top 100 sites. You can also configure your own budget comparison based on competitors or whatever number you come up with your team.

FAQ

Why not PageSpeed, YSlow, or WebPageTest? ∞ ?? If you're new to web development, it's easy to get confused with all the tools available out there. In fact, people tend to believe that new tools are only made to replace existing ones, which is not always the case. Browser Calories was created to do only one thing really simply and really well. It shows page weight and nothing else. Note that this tool does not try to compete with any of the projects mentioned above. Instead, it complements your toolbelt.

Can I test pages that are running locally? ∞ ?? Unfortunately not. If the page you're trying to measure isn't accessible from the public internet or requires some kind of authentication to be accessed, this is not going to work.