skip to Main Content

I’ve been doing some investigation into the behaviour of browsers as it pertains to loading resources – and I was surprised to find that the loading of CSS stylesheets, via a <link href="style.css" rel="stylesheet"/> is always render blocking – no content will be displayed until all stylesheets are loaded.

See: Render blocking and CSS

However – at the same time, during my googling I’ve been seeing questions from circa 2012 of people having the kind of opposite problem – wanting to prevent the display of content until stylesheets have loaded. For example:

How to stop web content from being displayed before css/jquery is prepared?

Is this something that has changed in recent years, or is this always how browsers have behaved?

2

Answers


  1. Use : This can give a performance boost while maintaining CSS blocking. The browser downloads the stylesheet earlier, which might help avoid delays, though it still blocks rendering:

    <link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
    
    Login or Signup to reply.
  2. Loading CSS has not always been render blocking

    A term existed back then called "Flash of Unstyled Content" (or FOUC / FUC).

    Wikipedia: Flash of Unstyled Content lists sources going back to the mid 2000s.

    Render blocking was introduced to combat this effect.
    Browsers would load the HTML and request the linked files after, while displaying the page without stylings for a split second. The styles would finish loading shortly after and the page would render itself again.

    The behavior likely came from having slow dialup connections where not seeing anything on the website for several seconds was worse than seeing unstyled content, which would correct itself after a second or ten.
    Reloading the page would then not show the flash of unstyled content again, since the stylesheets were in the browser cache.

    Even though this looked horrible for newcomers to the internet, connections with 56k modems or slower would have not shown anything for a while, so seeing at least something on the screen was seen as the internet doing its loading thing and after a couple seconds you were allowed to use the website.
    With a DSL connection or even a fast mobile connection, those small text files could now be loaded in the blink of an eye and the flashing of unstyled content for like a second turned into an eyesore.

    FOUC can still happen when loading assets asynchronously. But specifically the idea of blocking the rendering until the styles have loaded were a huge help in eliminating that early internet problem once connections were at convenient enough speeds.

    So all that history lesson to say, searching about Flash of Unstyled Content will get you deeper into the rabbit hole if you want.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search