Demystifying start render

Hello, I tried to read all content on start render and painting on IE.

It seems to be an awful subject as we only have small hints on when a webpage will have a good and early progressive rendering whether it will just show up the whole webpage after 3 seconds (bad).

I have a LOT of questions :

  • What is triggering the first painting ?
  • What do I need to do to leverage the start render ?
  • Does some tags blocks the start render / progressive rendering ?
    • Conditional comment ?
    • Tables ?
    • Iframes ?
    • other ?
  • Does some front end techniques are bad for progressive rendering ?
  • More generally, what to do to ensure a good progressive rendering.

I know a lot of best practices for web performance but start render is a very difficult subject.

Hi,

I think your question goes beyond the expertise of this forum – you should probably look elsewhere. That said, I think heavy optimization for initial render is over-doing it. Just follow the classical advice, and use async script loading, and you’re doing as much as is feasible…

If you want to know more, then have a look at Steve Souder’s 2nd book, “Even faster websites”. It has a section on flushing the HEAD of the HTML early, to allow the browser to start downloading CSS, IMGs etc ASAP. A not-so-great summary of the technique can be found in this blog post by Steve. You’ll need to read the book though, because there are browser-specific implementation details that matter, fx you must flush a certain amount of HTML before some browsers notice etc…