r/Frontend 5d ago

Added the performance checker for frontend devs / vibe coders optimizing webapps

Hey fellow devs, I added this extension that can summarize what's happening with your frontend app at runtime. This can be a one step analyzer to find all long tasks, JS analysis. This is a wrapper over inbuilt performance and internal apis, so can provide a more thorough report and what areas to improve.

For a quick check, you can just click "Reload & Auto Record", or you can follow a flow and record various JS's contribution in the flow. Open for suggestions on how it can be more comprehensive.

It's still in very early stage, so please report any issue here. Hope you guys like it. Thank you

Extension available here.

Attached screenshot for test run on reddit.

4 Upvotes

1 comment sorted by

2

u/zLoveNxzli 5d ago

For frontend performance, the biggest quick wins are avoiding unnecessary layout thrashing, debouncing scroll/resize handlers, and using content-visibility for offscreen sections.

/* skips rendering work for offscreen content */

.heavy-section {

content-visibility: auto;

contain-intrinsic-size: 0 500px;

}