Menu
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
What are render-blocking resources? Render-blocking resources are portions of code in website files, usually CSS and JavaScript, that prevent a web page from loading quickly. These resources take a relatively long time for the browser to process, but may not be necessary for the immediate user experience.
How To Identify Render-Blocking Resources. To identify the critical rendering path and analyze critical resources: Run a test using webpagetest.org and click on the “waterfall” image. Focus on all resources requested and downloaded before the green “Start Render” line.
What is Render-Blocking JavaScript and CSS? Render blocking JavaScript and CSS are files that prevent a website from displaying a web page before loading these files. Every WordPress site has a theme and plugins that add JavaScript and CSS files to the front-end of your website.
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:
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:
What is CSSOM?
94
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
35
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
