0

I've seen this effect on wikipedia as well. When I first enter the page, the site flickers as it goes from a non-css version of the site to a css version of the site.

Lately, I see this in my site as well.

Odd because I follow advice from the Google Chrome Debug Auditor and load my CSS in the head of my document before anything else.

Note

Verified in FF and Safari.

  • The term that you're looking for is FOUC (Flash of unstyled content). This question is very little to go by, though, in its current form. Can you show some data, how quickly do your style sheets load? Maybe a live link? – Pekka Mar 09 '13 at 19:38
  • As usual, if I knew what was relevant, I would add it. I followed best practice as I stated. –  Mar 09 '13 at 19:39
  • A live link perhaps then? – Pekka Mar 09 '13 at 19:40
  • ...I already mentioned http://wikipedia.org does this as well... –  Mar 09 '13 at 19:42
  • In the link you provided, you're not loading any stylesheets in the document head, it's all coming from your JS. – ultranaut Mar 09 '13 at 19:48
  • When you see the flash. Are the developer active? – Bart Mar 09 '13 at 19:52

1 Answers1

4

You are forcing the CSS style sheet to refresh on every request:

/dev/.../source/xyz.css?_time=1362858256183

this is likely the reason why you're occasionally seeing flashes of unstyled content. You would usually force reloading only when something has changed, and allow the client to cache the style sheet until then.

Then I notice you're loading the style sheet using JavaScript. I can't give you any numbers here but if you're really about speed, it might be worth putting the reference into the raw HTML:

<link rel="stylesheet" href="...">

to allow the browser to use any and all pre-fetch and other mechanisms at its disposal.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • @pure sure, but the end result is that the browser has to fetch the CSS every time you load a page on your site. That's not really useful. (Also I added a paragraph, check it out.) – Pekka Mar 09 '13 at 19:47
  • @pure re development mode - well okay, but then occasional FOUCs might be the price for that. As said, there are better practices to catch style sheet changes if you're interested. Also, why not load the CSS using a normal HTML tag? Why the JavaScript detour? – Pekka Mar 09 '13 at 19:49
  • 3
    @pure if you force the browser to do multiple requests on each page load, it's possible that the style sheet doesn't make it in time. I'd wager that's normal from time to time. Unless you see this in a *production* environment where you don't force refresh everything, it may not be anything to worry about. And as said, if you want to make sure something is first appended to the head, why not put it there as HTML. Your JS is bound to be executed a little bit later than a real `` element in the head... you're right, browsers are *very* inconsistent. – Pekka Mar 09 '13 at 19:54
  • @pure yeah. If you want to make sure that your CSS/JS always gets refreshed when it's changed, but gets cached when it isn't, you could look at a server-side [minifier.](http://stackoverflow.com/questions/787789/any-recommendations-for-a-css-minifier) They create a hash based on the contents of the files: `my.css?v=3123442423423`, so you don't have to add a timestamp - the hash changes when the files change – Pekka Mar 09 '13 at 19:57
  • @pure fair enough; bear in mind we can't know things you don't mention. – Pekka Mar 09 '13 at 20:04
  • ... sorry ... I missed setting up the dependency ... and b.c. the error happened about 1 out of 10 times it was hard to track down what was relevant. Non repeatable errors are the most difficult to troubleshoot. –  Mar 19 '13 at 18:54