I have many examples where text renders slower than an image which almost feels instant. I am doing this via reactjs and server-side rendering with nodejs. For example this gif: http://recordit.co/waMa5ocwdd
Shows you that the header image loads instantly, the CSS is already loaded as the colors are there and present. But, for some reason, the text takes almost a half second to appear. How can I fix or optimize this?
Thanks!
Ok, so debugging this kind of stuff it's useful to hit YSlow for the latest tips, etc.
In general, though, it's good to remember that browsers will make separate requests for each item in your page (i.e. everything with a URL; images, css, etc) and that most of them have some kind of cap on concurrent downloads (4 seems common, but it varies and changes a lot). So while 12 requests isn't a lot, it's still time. As is the time to parse and load your JS, etc. And parsing and loading JS is more time that will happen (and typically, in most browsers, will pause further downloads until it's done)
Without spending a ton of time, I'm guessing that your HTML loads, that calls in the header image, and then the browser starts hitting all the JS and react framework code and it takes a second or two to figure out what to render next.
Again, YSlow has a lot of advice on how to optimize those things, but that's my 2c.
EDIT: adding detail in response to your first question.
As i mentioned above, the JS is only part of the problem. The sum total of render time will include the total time it takes to download and parse everything (including CSS, etc). As an example, looking at it in Chrome debug tools it looks like it takes something around 300ms for the html to download and be parsed enough for the next resources to get called in. In my browser the next two are your main css and logo.png. At around 800ms is when your logo is done downloading, and it's rendered almost immediately. At around the time the html is done downloading, the first js script starts downloading (I don't think turning JS off stops that from happening, though it probably stops the parsing from happening; I've never tested it). At somewhere around 700ms is where you start pulling down the font sets you're using and it looks like they finish downloading around 1second. Your first text shows up about 200ms after that, so I'm guessing that pulling and parsing the font files is what the holdup is (when compounded with them queuing behind other resources).