Thread by @mjackson

Spent 2 hours in a chat w @slightlylate talking about web performance budgets and what we can do to fix things. I think the pace at which web dev has evolved over the past few years has left us with some significant debt. Looking forward to finding ways to make things leaner.

@slightlylate Couple things you can do *today* to get started on the path to a better performing website.

First: run your site through webpagetest.org. You'll be able to see everything including time to first paint, interaction, and all of your bundles 👍

@slightlylate Second: use Lighthouse in your CI service (or just run it in Chrome on your production app if you don't have CI). See for how to get started.

@slightlylate Third: you can generate a budget.json file that you can use with Lighthouse that will help your team stay within pre-defined budgets that you set for your product. Use the Performance Budget Calculator to generate your config 👇
perf-budget-calculator.firebaseapp.com

@slightlylate This would be really handy to have as a part of your repo. If you haven't done any perf budgeting in the past, you might start with really big budgets. But as you improve things, you can tighten things up a bit and see the changes over time as commits in your repo!

@slightlylate Lastly (easiest): Just take your output bundle and run it through a pretty printer. Take a look at all the code in there. There is *a very good chance* that there will be a bunch of stuff in there that you don't need. Polyfills, multiple versions of the same library, etc. 🔍

@slightlylate Honestly I feel kinda bad about this because the React community (now a huge portion of the web) are some of the worst offenders when it comes to page speed. The current toolchain unfortunately makes it really easy to create a very slow site.

@slightlylate The tools that Facebook uses to deploy React at scale aren't available to the rest of the community, so we've backfilled the toolchain with our own substitutes. They give us a lot of power, but they're also very easy to misuse.

@slightlylate Example: if you're using webpack and you're not code splitting, you can probably do *a lot* to improve your site's performance. But it's so easy to just put everything in one bundle that a lot of people just do that.

This is just one example, but there are lots of others.