Thread by @iamakulov

Thread of my favorite web performance tools 🚀

1) slowfil.es by @csswizardry and @RyanTownsend gives you a URL with a huge (and customizable) server response time.

Super convenient to test what happens when a CSS or JS files takes forever to load.

2) input-delay.glitch.me by @notwaldorf shows how it feels to have a laggy input field. (It’s the most irritating tool ever.)

bl.ocks.org/esjewett/2b188… by @esjewett does the same – but for mouse cursor.

Both tools are 💯 for demos.

(Semi-related: a 3-minute Microsoft video that shows how *huge* a difference between a 100 ms latency and a 5 ms latency feels.)

3) statoscope.tech by @smelukov is a modern version of webpack.github.io/analyse/. A bit less detailed, but so much nicer!

My primary use case: drop a webpack stats file → see why exactly that specific huge file is bundled.

4) web-vitals-report.web.app builds a Core Web Vitals report based on your Google Analytics data (but you need to send CWV data into GA explicitly).

Haven’t had a chance to use it yet (don’t collect CWV data with GA), but should be a great helpful tool for some clients.

5) Also, datastudiohelp.com/core-web-vital… explains how to get a Core Web Vitals report in Google Data Studio. (It’s actually quick! Just clone a template and change the url.)

Unlike with the previous tool, you don’t need to collect any data yourself! The report uses CrUX data.

6) usehooks.com/useWhyDidYouUp… is a React hook that prints why a specific component rerendered. Just copy and paste it! Perfect for debugging runtime performance of a single component 💅

Like github.com/welldone-softw…, but much less invasive.

7) meowni.ca/font-style-mat… (yet another tool by @notwaldorf!) lets you find a fallback font that matches your custom font as closely as possible.

If you ever had a high CLS score because the layout jumped after a custom font loaded, this is for you.

(Oh, and shameless plug: in addition to these tools above, I also have a GitHub list with 50+ webpack performance tools and plugins: github.com/iamakulov/awes…)

8) glyphhanger, which makes fonts smaller by removing any characters your page doesn’t need (and more). And it’s a one-line command!