I am trying to understand how CSS is evaluated in a specific setting: Lets assume I have the following content in my <code><head></code> tag: <pre class="prettyprint"><code><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> </code></pre> Now, let's assume <code>reset.css</code> and <code>style.css</code> contain some rules that immediately affect the above the fold content or the the elements in the HTML. However, <code>autocomplete.css</code> only contains class used that are used later by some JavaScript. Now, let's further assume the browser already downloaded <code>reset.css</code> and <code>style.css</code> but <code>autocomplete.css</code> 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 <code>autocomplete.css</code>? 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 <code>autocomplete.css</code> has not yet arrived? and, 2. Is the execution of the <code>script.js</code> javascript blocked until the <code>autocomplete.css</code> is there? Note, I am referring to two different things: rendering and script execution.

All <code>CSS</code> is render blocking. The only exception from this rule would be <code>CSS</code> that your <code>DOM</code> does not yet know about (loaded async, built/loaded on the fly via <code>javascript</code>). Until your browser didn't resolve (or thinks it resolved) all <code>CSS</code> by building the CSS Object Model, the page won't render and <code>javascript</code> will not be executed. However, <code>resolve</code> does not necessarily mean <code>load</code>. It can mean two things: <ul> <li> 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.</li> <li> not being able to load/parse (due to network problems or invalid rules) - if an error is returned when <code>CSS</code> 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.</li> </ul> Resources: <ul> <li>W3C's CSSOM spec.</li> <li>MDN's CSSOM resource page</li> <li><code>What is CSSOM?</code></li> </ul>

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

Understanding Render Blocking CSS

Tags:

html

css

web-performance

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.

763

asked Mar 03 '17 14:03

worenga

2 Answers

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?

answered Oct 30 '22 13:10

tao

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

answered Oct 30 '22 13:10

Sascha Grindau

Related questions
                            
                                transition opacity not working when creating element [duplicate]
                            
                                How to add Instagram Follow button in my website?
                            
                                VueJS : Getting innerHTML of custom component
                            
                                jQuery appear() and show() methods difference?
                            
                                Drag and Drop not working when there are no elements present
                            
                                jquery/javascript remove div if jpg not match
                            
                                Overlap element over other elements
                            
                                CSS for targeting variable id name
                            
                                Making a smile/horseshoe/half circle with rounded edges in CSS
                            
                                Apply basic style to non editable elements in TinyMce
                            
                                How to specify base href for scripts and styles in Angular 2?
                            
                                Over-ride Chrome Browser spell check language using JQuery or JavaScript
                            
                                Canvas Drawing Over HTML and Preserving Aspect on Screen Resize
                            
                                Bullet under the list item
                            
                                How to make marquee text only when it's overflowing?
                            
                                HTML5 Video: How to enable *non-muted* autoplay in Chrome for Android
                            
                                Why is Chrome pulling old JS file?
                            
                                SVG <image> not showing on iphone
                            
                                Equal vertical spacing with a Flexbox column
                            
                                Add hue to a regular image with CSS

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!

Donate Us With