node.js - Why does text render slower than images with server-side rendering? -

i have many examples text renders slower image feels instant. doing via reactjs , server-side rendering nodejs. example gif: http://recordit.co/wama5ocwdd

shows header image loads instantly, css loaded colors there , present. but, reason, text takes half second appear. how can fix or optimize this?

the site in gif quran.com if want experiment it.

thanks!

ok, debugging kind of stuff it's useful hit yslow latest tips, etc.

in general, though, it's remember browsers make separate requests each item in page (i.e. url; images, css, etc) , of them have kind of cap on concurrent downloads (4 seems common, varies , changes lot). while 12 requests isn't lot, it's still time. time parse , load js, etc. , parsing , loading js more time happen (and typically, in browsers, pause further downloads until it's done)

without spending ton of time, i'm guessing html loads, calls in header image, , browser starts hitting js , react framework code , takes second or 2 figure out render next.

again, yslow has lot of advice on how optimize things, that's 2c.

edit: adding detail in response first question.

as mentioned above, js part of problem. sum total of render time include total time takes download , parse (including css, etc). example, looking @ in chrome debug tools looks takes around 300ms html download , parsed enough next resources called in. in browser next 2 main css , logo.png. @ around 800ms when logo done downloading, , it's rendered immediately. @ around time html done downloading, first js script starts downloading (i don't think turning js off stops happening, though stops parsing happening; i've never tested it). @ somewhere around 700ms start pulling down font sets you're using , looks finish downloading around 1second. first text shows 200ms after that, i'm guessing pulling , parsing font files holdup (when compounded them queuing behind other resources).