Problem with start render time

Why I have Start Render time so far?

Why the browser waits with rendering when it has downloaded css and JS?

My results:


Thanks for advices! :slight_smile:

FAILED - (97.5 KB, compressed = 48.2 KB - savings of 49.3 KB) -
WARNING - (116.3 KB, compressed = 67.6 KB - savings of 48.6 KB) -
WARNING - (114.5 KB, compressed = 66.7 KB - savings of 47.8 KB) -
WARNING - (52.8 KB, compressed = 33.5 KB - savings of 19.3 KB) -
WARNING - (39.4 KB, compressed = 31.2 KB - savings of 8.2 KB) -

Ok… and where is the problem?

The browser’s parser stops for every non-async JS it encounters, waits for it to download, and then executes the script before it can proceed to the next bit of html. If any of those scripts use document.write() to inject other scripts then it needs to wait for those to download and execute before continuing.

This is by-spec and all browsers do it.

If css is pending then browsers will also not paint anything until the css finishes loading because that is what defines the layout of the content to paint.

Sorry, in case you were asking why it waits even after it has finished the css/js, it is hard to say without seeing the HTML but most browsers will try to delay layout/paint as long as they are working on things to avoid having to re-do the layout and waste time.

It is also possible that what was first painted was a blank screen depending on what the HTML looks like (the browser-reported first paint time was 1.5s while the actual first content rendered was at 2.2s.

Thanks. Can the problem be caused by a bad HTML structure? Now is first, then . Can the solution be put in the first place ?