Load time optimization [discussion issue; will spin of actionable issues] about alchemy HOT 14 CLOSED

While sitting on that landing page, the loading of the rest of the application can be happening in the background. Then when you finally go to "Alchemy", one could then see the finished product, or a busy icon. The busy icon can actually be at multiple levels: the whole page, or various parts of the page that can be loaded independently and asynchonously, each with their own busy icon. The DX app does this.

from alchemy.

Yup, so much low hanging fruit! Want to take some of it on @jellegerbrandy :)

from alchemy.

You can see here how I specified just the contract json files I need in DX: https://github.com/daostack/dutchx-bootstrapper-ui/blob/b6b809c7dd37eaa404600c5994ba70d39951fc88/webpack.config.js#L193

from alchemy.

One other thing that could improve the user experience is this: now, the "view alchemy" ubtton on the landing page reloads the entire application; it would probably be somewhat faster to just replace the element.

from alchemy.

On the performance branch start the app with npm run start-dev-profiling, which starts the server locally but tries to mimick production settings as much as possible (specifically, downloads the initial json file from aws, and interacts with main chain). Main difference with production is that we are working with the local 45M bundle instead of the minified 1M bundle on production.

Performance depends very much on conditions not completely under our control: download speed on the network, cpu, amount of actions to sync from the change since the last state snapshot).

So we have to work with very rough stats. What I'm doing is

• go to http://127.0.0.1:3000/dao/0xa3f5411cfc9eee0dd108bf0d07433b6dd99037f1
• open devtoos, network
• reload the page ("F5")
• wait until the proposals are visible

The number we are interested in is the number after "Finish"

Sometimes the page does not seem to load at all
Here are results from commit #c58b0c42aea5c46a98b509071ac6a421ec150c2d

And these are results after commit 9407b79

So this already seems a good improvement

from alchemy.

more lowhaning fruit: this line https://github.com/daostack/alchemy/blob/dev/src/index.tsx#L18 halts execution until arcjs is initialized. This can take some time, bc the init process also waits for establishing a websocket connection [<- I think] (whcih we are not using), which can take some time.

Solutions here are (a) do not await the initilization (which takes some tricky refactoring) and (b) make the initialization ligher (or the websocket optional) (I don't know about the latter, bc I have not looked yet at what the initilization actually is supposed to do)

from alchemy.

@jellegerbrandy Regarding the call toInitializeArcJs, you should be using the filter configuration setting to speed it up. See here: https://daostack.github.io/arc.js/Configuration/#optimizedcontractloading.

I don't think it is using websockets at all.

from alchemy.

@jellegerbrandy https://github.com/daostack/alchemy/blob/dev/src/actions/arcActions.ts#L69 Loads DAOs in a sequential order instead of in parallel.

from alchemy.

Adding the filter to Initialize ArcJS is super low hanging fruit, would be curious to see how much that improves load time. I believe the only contracts we actually need are DAOToken, DaoCreator, ContributionReward, GenesisProtocol, Redeemer, StandardToken, maybe SchemeRegistrar. Not sure if we also need Avatar, UniversalController... Some testing needed

from alchemy.

@tsuberim but we only use getDAOs in the caching script when starting from scratch and locally when using ganache so shouldn't effect production at all

from alchemy.

I doubt you need SchemeRegistrar

from alchemy.

I spinned of some new issues so our discussion does not get too fragmented:

• #198: zip the initial state file
• #199: initialization of arc.js
• #200: parallelize! (good call @tsuberim ❤️)

from alchemy.

I've added some timers in a414310 to see where our time is spent:

from alchemy.

This issue has become obsolete in the midst of the refactor witht he client lib

from alchemy.