Million.js

[ferostabio]

Million.js is a 1kb Virtual DOM easy to use with React. Just in case, VDOM is

... a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

There are year-long, heated debates about wether it actually does anything or not. So let's try it. One of the main reasons to do it BTW is that loading might improve -and that's always good.

Implementing it should be rather easy, but we have do it in a particular way because of using Next.js.

Following instructions should be enough:

https://dev.to/tobysolutions/how-to-use-millionjs-in-a-next-app-1eim

[ferostabio]

@NikolaiYurchenko already started with this (wrapped next's config).

You ran a couple of benchmarks, please do it again now and compare.

Then try wrapping pages, more components, to see if there are improvements as well.

[NikolaiYurchenko]

So, worked on that for a bit. We should rewrite whole application to use it https://millionjs.org/docs/quickstart So, no conditional rendering and rewrite array at first. Dunno if we want to do it now

Here is new benchmarks as bonus: 14 ms  Loading 4240 ms  Scripting 98 ms  Rendering 66 ms  Painting 650 ms  System 6325 ms  Idle 11395 ms  Total

Performance: 35 Accessibility: 76 Best Practices: 75 SEO: 100

First Contentful Paint 0.3 s Largest Contentful Paint 18.7 s Total Blocking Time 4,450 ms Cumulative Layout Shift 0.002 Speed Index 4.9 s

First things to fix: bundling for separate pages not to load whole app and split sdk if possible

[brozorec]

@NikolaiYurchenko are you benchamarking with Lighthouse? What url are you using, this one https://v2-staging-dot-fuji-306908.ey.r.appspot.com/ ?

[NikolaiYurchenko]

@brozorec local dev

[NikolaiYurchenko]

Ill run those on staging now and will update this comment with results

23 ms Loading 2040 ms Scripting 99 ms Rendering 35 ms Painting 273 ms System 3004 ms Idle 5475 ms Total

Performance: 50 Accessibility: 80 Best Practices: 83 SEO: 100

First Contentful Paint 0.3 s Largest Contentful Paint 4.0 s Total Blocking Time 560 ms Cumulative Layout Shift 0.023 Speed Index 2.8 s

Better there, but still, we need to make load less than 3 sec tests are for desktop