1

When I load my web page I first see plain html during almost 1 second, and then I see the web page with the css design.

Why would the page be rendered first in plain html? and how can I avoid that?

I tried investigating with Google Speedtracer tool but the trace shows lots of 'paint' DOM events before the 'DOMContentLoaded' DOM event, so I am not sure what to look for...

How can I pinpoint the moment or event that renders the plain html using the Speedtracer tool or any other tool?

Additional infos: I have the problem both in Chrome and IE. Also I call the css files in my html header. So none of the answers on this question helped me solve the problem.

Community
  • 1
  • 1
Timothée HENRY
  • 14,294
  • 21
  • 96
  • 136
  • That's the delay of the time taken to download the CSS file. Is there a LOT of CSS in there? If so, consider breaking it up into smaller files or minifying it. – Mathew Thompson Feb 27 '13 at 11:23
  • possible duplicate of [Browser displays page without styles for a short moment (visual glitch)](http://stackoverflow.com/questions/2399716/browser-displays-page-without-styles-for-a-short-moment-visual-glitch) – Quentin Feb 27 '13 at 11:23
  • @Quentin Actually I have the problem also for Chrome and the link you mention seems to be only a IE problem. – Timothée HENRY Feb 27 '13 at 11:28
  • Do you have your CSS files referenced in the `head` element? – Curtis Feb 27 '13 at 11:36
  • @Curt Yes css files are referenced in the head element – Timothée HENRY Feb 27 '13 at 11:39
  • Whats the file size of the css ? – Toping Feb 27 '13 at 11:41
  • @mattytommo I reference to 4 different css files which total 230k. I know I should make one file and minify it, but I have difficulties doing it. I also wanted to see if I could block all rendering before all css are computed by the browser. – Timothée HENRY Feb 27 '13 at 11:48
  • What if your users are in the underground and their phone loads just the HTML but can't download the styles? Not their fault, not yours, but probably they appreciate to see at least the markup and content. Same with screen readers for blind people; they probably skip completely on downloading CSS resources because it's not useful to them. – Kamafeather Feb 25 '19 at 19:14

0 Answers0