4

I would like to force the browser to wait until all css is computed before rendering the page.

My goal is to avoid a "visual glitch" effect (mentioned here) between plain html rendered and css rendered. My goal is also to simply understand if and how I can get this level of control on the browser.

Is this possible, and how?

Community
  • 1
  • 1
Timothée HENRY
  • 14,294
  • 21
  • 96
  • 136
  • How is built your page ? There should be no glitch if your css files are only imported in the head element. Do you have a link to a small page demonstrating this effect ? Are you sure you don't see the external elements (like images) being resized after load ? – Denys Séguret Feb 27 '13 at 12:12
  • Which browser do you observe this in? – Mike Chamberlain Feb 27 '13 at 12:21
  • @dystroy I refer to my css files in the head element. As I understand the browser constantly updates the page (I see dozens of 'paint' events when using Google Speed Tracer tool), so it makes sense that I see the glitch if the css takes 1 second to download, doesn't it? – Timothée HENRY Feb 27 '13 at 12:29
  • @Mikey Cee Chrome and IE – Timothée HENRY Feb 27 '13 at 12:30
  • Probably not a CSS problem. Do you have media elements (images mainly) not sized ? This would explain your problem. – Denys Séguret Feb 27 '13 at 12:30
  • Chrome waits for all head css to be downloaded before it starts rendering the page. – Denys Séguret Feb 27 '13 at 12:31
  • @dystroy I have an image. By "not sized" do you mean it does not have the width height attributes set? I have added the width and height attributes, but I still see the plain html for an instant. – Timothée HENRY Feb 27 '13 at 12:56
  • @dystroy You wrote "Chrome waits for all head css to be downloaded before it starts rendering the page." Is there a way to check this in the Chrome specs/code? – Timothée HENRY Feb 27 '13 at 12:59
  • 1
    @tucson ["Browsers block rendering a web page until all external stylesheets have been downloaded"](https://developers.google.com/speed/docs/best-practices/rendering#PutCSSInHead). In fact it says that if you don't want progressive rendering, you'd better not put your css in the head... – Denys Séguret Feb 27 '13 at 13:01

3 Answers3

4

An old question, but found it when I was trying to figure out how to prevent a 'page flicker' - where you see HTML content without CSS fully applied for a brief moment before the CSS 'kicks in'.

There are several techniques mentioned here https://www.sitepoint.com/critical-rendering-path-css-fast-loading-website/ . This code worked for me to prevent that 'flickering':

<link rel="preload" href="mystylesheet.css" as="style" onload="this.rel='stylesheet'">
<!-- for browsers without JavaScript enabled -->
<noscript><link rel="stylesheet" href="mystylesheet.css">
</noscript>
Rick Hellewell
  • 1,032
  • 11
  • 34
1

I don't think there is anything you can do in the standard sense of avoiding a 'glitch' as you call it. Perhaps there is software out there that could serve your files a certain way, but even if that were possible, how overkill is that?!

Most browsers these days will load HTML and CSS so fast you'll never even notice it.

If you're getting glitch issues, it could be related to assets being downloaded to the page thereafter, and not in fact, the CSS itself.

Think of assets like images, scripts and even web fonts. These need to load in too. If your page design is relying on these assets to achieve a layout in some way, then of course it will have a slight glitch effect, because it needs to load in.

I think it would be near impossible to calculate when the CSS has loaded, since this is done 'on the client' side of the process. You can't really anticipate peoples browser and internet speeds to the point that you'll serve it when ready.

If you're getting font rendering (jumping) glitches, take a look at this article: http://paulirish.com/2009/fighting-the-font-face-fout/

If it's not related to this, I strongly recommend re-thinking how your pages have been put together.

Hope this helps in some way.

Michael Giovanni Pumo
  • 14,338
  • 18
  • 91
  • 140
0

The best advice is to load your CSS files in the head of your page, and load your JS just before the closing body.

If you are already doing this, then take a look at Network tab of the Developer Tools (in Chrome) to see if the network is delaying the delivery of your CSS files.

Mike Chamberlain
  • 39,692
  • 27
  • 110
  • 158