App statistics: Help us make Preact even faster

🚀 Making Preact even faster

Good news! We’re experimenting with various ways to speed up Preact even more 💯 To do so we have various enhancements and optimizations planned for our reconciler. So far we’ve come up with multiple different approaches that are battling against each other to claim the speed title or be less memory intensive.

Although we do have a small selection of apps to test the various optimizations, we want to make sure that we optimize the things that actually matter most to everyone. We some intuitions what that might be, but it’s always better to have some solid data!

For this reason we’ve added a new “Statistics” panel to the Preact Devtools extensions. It allows you to measure statistics for our renderer and will help us get a picture of which optimizations will matter the most.

👋 How you can help

To start you need to have the Preact Devtools extension installed. Only the latest version (1.1.0) has the “Statistics”-tab. The extension is currently waiting approval and you can see the status for your browser below:

• Chrome: Released
• Edge: Released
• Firefox: Released

Now we’re ready to go!

1. Open Preact Devtools and go to the “Statistics” tab
2. Click the red “Record” button or the “Reload and record stats” button right next to it
3. Navigate through your app like a typical user would
4. Post a screenshot of the “Statistics”-Panel in this thread.

Here is an example of what it looks like after measuring preactjs.com for a while by clicking through various pages:

[srdjan]

[austinjp]

If it’s of use, here’s a small screenshot of the UI that I’m building. It’s a toy Bayesian network modeller. Everything is a Preact component. Data is adjusted using sliders which are drag-to-resize divs, which causes lots of re-rendering. I’ll probably refactor that at some point. Probably 😄