Understanding Render Blocking CSS

Asked 3/3, 2017 at 14:13 Answered 27/3, 2017 at 9:40

I am trying to understand how CSS is evaluated in a specific setting:

Lets assume I have the following content in my <head> tag:

<html><head>
...
    <link href="reset.css" type="text/css" rel="stylesheet">
    <link href="style.css" type="text/css" rel="stylesheet">
    <link href="autocomplete.css" type="text/css" rel="stylesheet">
</head>
<body>
... html ...
<script type="text/javascript" src="/js/script.js"></script>
</body></html>

Now, let's assume reset.css and style.css contain some rules that immediately affect the above the fold content or the the elements in the HTML. However, autocomplete.css only contains class used that are used later by some JavaScript.

Now, let's further assume the browser already downloaded reset.css and style.css but autocomplete.css is still pending. I am wondering what would happen if the browser would do it encounters the blocking script tag at the end of the page? Obviously, it can render the HTML up to the script tag, but is the execution of the script blocked by the missing autocomplete.css?

Note that the script tag is not a sync.

I've read: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp

And there it says that the execution of the JavaScript is blocked until the CSSOM is there.

Now: 1. Will the page start rendering even autocomplete.css has not yet arrived? and, 2. Is the execution of the script.js javascript blocked until the autocomplete.css is there?

Note, I am referring to two different things: rendering and script execution.

Nedanedda answered 3/3, 2017 at 14:13 Comment(2)

Read this. Just a Tip Eliminate render blocking css – Footage 3/3, 2017 at 14:20

If autocomplete.css is missing then the page will throw a silent error: Failed to load resource: net::ERR_FILE_NOT_FOUND. But everything will continue to load including your script. If the file exists and it is taking time to load then your page will not load since your css is in the head and it must be loaded before loading the rest of the page. – Incombustible 3/3, 2017 at 14:23

All CSS is render blocking. The only exception from this rule would be CSS that your DOM does not yet know about (loaded async, built/loaded on the fly via javascript).

Until your browser didn't resolve (or thinks it resolved) all CSS by building the CSS Object Model, the page won't render and javascript will not be executed. However, resolve does not necessarily mean load. It can mean two things:

load & parse. If it's above 2k lines of code, you're going to notice it when measuring with proper tools. If it's above 10k lines of code, you'll be able to notice it without using any tools. This is regardless if it contains rules concerning elements above the fold or not.
not being able to load/parse (due to network problems or invalid rules) - if an error is returned when CSS is loaded/parsed, it will resolve faster and the resulting differences will be hardly noticeable. If the server does not return an error (and just doesn't respond) - that's going to block your CSSOM from building, your page from loading and your scripts from executing.

Resources:

W3C's CSSOM spec.
MDN's CSSOM resource page
What is CSSOM?

Glazer answered 3/3, 2017 at 14:34 Comment(3)

Ok so to be clear: The execution of /js/script.js will be blocked but the rendering will not? – Nedanedda 3/3, 2017 at 14:44

That gets to the core of my question: Reading developers.google.com/web/fundamentals/performance/… it sais the execution of the js is blocked until the cssom is constructed (note the script is not async). So will the script be blocked even thoug autocomplete.css does not contain rules that apply to the contents of the html? I understand now that that rendering can happen even though some css are not there? – Nedanedda 3/3, 2017 at 15:10

@worega I've updated my answer in light of what I could find on the subject. It looks like javascript execution is delayed until CSSOM is built. – Glazer 3/3, 2017 at 15:36

The latest performance recommendations are as follows:

1) Inline all css into the header that the browser needs to render above-the-fold-content. Content which is visible without scrolling.

2) Add all other css to the bottom of the page or better load it asynchronously with something like this: https://github.com/filamentgroup/loadCSS

Fimbriate answered 27/3, 2017 at 9:40 Comment(0)

autocomplete is a css file. As such, it only adds style properties to the classes which are defined in the html. The javascript will still execute correctly, even if the css is missing.

The only thing that might happen is that if the js changes some css styles of the classes which style is defined in autocomplete.css. However even then it's unlikely.

Slipperwort answered 3/3, 2017 at 14:29 Comment(1)

Don't the browser need to wait with the execution of /js/script.js until autocomplete.css has arrived? – Nedanedda 3/3, 2017 at 14:46

Recommended topics

Hot tags