Web performance: distant start render time

Question

Why I have Start Render time so far?

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

My results: https://www.webpagetest.org/result/170518_GZ_13B6/ or https://www.webpagetest.org/result/170518_4Q_13B9/

Thanks for advices! :-)

Answer 1

The biggest thing that stands out to me is the size of your HTML document. It's about 500 KB uncompressed and has almost 5000 DOM elements. Your CSS and JS are also massive: https://www.webpagetest.org/result/170518_GZ_13B6/1/breakdown/

So it seems to me that the browser is unable to render your page quickly because it first needs to:

• load and generate the DOM for 500 KB of HTML
• load and parse 500 KB of CSS
• load and parse 1.4 MB of JS
• execute the JS (solid ~400 ms alone)
• reflow and relayout the content based on JS/CSS

You could prioritize the initial page load by only including the content within the browser viewport and deferring unnecessary scripts/styles/markup until after the page loads.