Page delay on first load on publish (locally too).

[epozsh]

Hello, i have published page and saw there is delaya on initial load the page and i do not mean in data load from database. I just used pingdom and saw there is delay.
If check ur demo site demosite
You will see the orange one wait 153ms. In my site it is 4.08 sec.

Also like ur and mine first page is too big
In ur Demosite -> 4.4 MB because of Script 1.33 MB
In my site -> 5.1 MB script 2.15

Also is normal for vendor.js be 1.6MB?
Any suggestion or guideline where to look or check this better?

[frenzzy]

Probably it caused by models.sync() on server launch, you can try to remove it.

[epozsh]

Thanks for answer, but this not because i have commented it.

[frenzzy]

Just to make sure, did you compile the app via yarn run build -- --release and deploy only the content of build folder to your production server?

[epozsh]

yeah i am doing npm run build -- -- release.
and i deploy only the build in production mode with docker image.

The site give pingdom give me some suggestions.
There are 2 JavaScript files served from test.site.com They should be combined into as few files as possible.

test.site.com/assets/client.e0463c34.js
test.site.com/assets/vendor.0dae6872.js

Also i am using some external css and the site say this:
Combine external CSS

https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.7.0/css/flag-icon.css
https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css

Also on server.js file i used
Parallelize Everything

function parallel(middlewares) {
  return function (req, res, next) {
    async.each(middlewares, function (mw, cb) {
      mw(req, res, cb);
    }, next);
  };
}

And this improved a little the load time of page, about 1-2 sec

[langpavel]

It is still too long. You must doing something nasty in server. Is this happening only on very first request to the server or every fresh browser will take a lot of time?

[langpavel]

Can you avoid execution of any of your middleware?

[epozsh]

I am using feathers js -sequelize as middlware.For getting data. My page data based on db , so i cannot remove middleware for feathersjs.
I do not think the problem is the data from db, cause it take 1 sec the most to get the data for the 1st page.
Also The extra middlware i added is useragent.express().
Maybe u know any tool so i can check step by step the executions of fucntions ets? so i can see where is the problem?

[langpavel]

@Shadowman4205 See magic of debug library used in most node packages:

Run DEBUG="*" node server.js on production build:

[epozsh]

@langpavel Sorry for inconvience, to get ur result do i put this in specific part on server.js or i have to put it on all functions/modules that i want track?

[langpavel]

@Shadowman4205 Just set this environment variable and figure out what is taking so much time when you making request.. Not all modules use debug package, but express and much another modules do, so digg yourself. I don't know how I can help you more..

[epozsh]

@langpavel ok thank you very much, i just copied ur command on cmder, but i am on windows i had to do
set DEBUG=*,-not_this first.

[epozsh]

After running this command, when i go to load 1st page the first command take 6s.

The server is running at http://localhost:3000/
express:router dispatching GET / +6s,

is this normal?

[langpavel]

@Shadowman4205 What preceding this line? debug remembers when it was invoked lastly and simply echoes time delta, so if you make request after 1 minute, you will see one minute. Try looking for relatively large times when processing request — after this line

[epozsh]

@langpavel after testing app and using cache for data somehow i reduced the time.
But testing application with siege (stress test) with simulated users of 50 avg response time is 3.02 sec,
can this be because of reactdom? (I read about rascalion, but for the moment could not implement it in some part of server.js without error)

[langpavel]

3 sec are bad. How performant is your machine? Focus on really unoptimized and unneeded code paths. I have background database proccess running which consumes 98% of CPU now, but page is rendered in ~700ms. First rendered content I have in cca 2s after I press enter. But after first load everything behaves smoothly even on slow connections, so this is price for prerendered SPA. Note that I have no optimization and RSK is without cache in default (see #1245)..

[epozsh]

@langpavel
In server.js adding in app.get('*'.....)
await store.dispatch(loadData1())
await store.dispatch(loadData2())
ets,
does this make loading slower?

[langpavel]

@Shadowman4205
Yeah, you are loading data (await store.dispatch(loadData1())) this must take some time.
Are you sure you need all this data for each request which hit this point?
At least, are you sure you cannot parallelize loading of data? like:

await Promise.all(loadData1(), loadData2())

and make sure that if you parallelize promises your database driver will use two connection from the pool, otherwise this will have no effect.

[epozsh]

@langpavel
I load these data once and i need these in all pages almost. Lets say it something common component.
If this bad idea, is there recommended way to load them once? or i have check in every route or component if data1 is in redux store then do not refetch again else fetch data?

[langpavel]

@Shadowman4205 Node server is long living process. You can use something like LRU cache and feed store from it. LRU caches can implement max age etc…

If your data updates really rarely, you can preload them once at process start, but I cannot recommend this for nothing except statics (files, really static data etc..) <-- you will need server restart to reload this..

[epozsh]

@langpavel thank you very much, you helped me a lot. Lots of good and new for me recommendations.
One more question, i mentioned that i used stress test with siege 50 simulated users every second, and i have got sometimes 503 errors

can this happen because of application? and when this stress test running i get data from cache without any call to db.

[epozsh]

@langpavel Sorry for inconvience, on stress test with siege in ur react starter kit demo and mine app based on this starter kit we getting similar error with socket:

HTTP/1.0 503   0.58 secs:     108 bytes ==> GET  /
HTTP/1.0 503   0.56 secs:     108 bytes ==> GET  /
HTTP/1.0 503   0.54 secs:     108 bytes ==> GET  /
HTTP/1.0 503   0.57 secs:     108 bytes ==> GET  /
HTTP/1.0 503   0.54 secs:     108 bytes ==> GET  /
HTTP/1.1 200   0.89 secs:   37527 bytes ==> GET  /
HTTP/1.1 200   0.98 secs:   37527 bytes ==> GET  /
[error] socket: unable to connect sock.c:230: No such file or directory
HTTP/1.1 200   1.05 secs:   37528 bytes ==> GET  /
[error] socket: unable to connect sock.c:230: Address family not supported by protocol
[error] socket: unable to connect sock.c:230: Address family not supported by protocol
[error] socket: unable to connect sock.c:230: No such file or directory
[error] socket: unable to connect sock.c:230: Address family not supported by protocol
[error] socket: unable to connect sock.c:230: Address family not supported by protocol
[error] socket: unable to connect sock.c:230: Address family not supported by protocol
[error] socket: unable to connect sock.c:230: Address family not supported by protocol

for reproduce you can run command: siege -d1 -c100 https://demo.reactstarter.com/

[langpavel]

Hmm, weird, can you catch content of 503 response?
503 means SERVICE UNAVAILABLE and I'm sure it is not generated by RSK..

[epozsh]

i tried catch with winston exception handler but it did not catch it.

[ulani]

@Shadowman4205 thank you very much for crating this issue! Unfortunately, we have close it due to inactivity. Feel free to re-open it or join our Discord channel for discussion.

NOTE: The main branch has been updated with React Starter Kit v2, using JAM-style architecture.