I'm reading a lot about CSS in the Critical Path and I decided to make some tests. I noted there isn't one version that works in all browsers. Only Chrome fails in a version.
I had to make two different versions.
TL;DR: https://www.youtube.com/watch?v=_VhgWnpdOxY
CSS inlined:
#teste {...one data uri and background color...}
#teste2 { text-indent: -99999px }
waiting2.css
{..some data uri to make the css large...}
body #teste2 { font-size: 18px; color: red;text-indent:0; }
The div #teste should be painted as soon as possible and #teste2 will only be visible after the download/parse of waiting2.css
We have to test the way of CSS loading.
- Works in Chrome and Safari
<head>
<link rel="stylesheet" type="text/css" href="http://gui-poa.github.io/talks/mobileperf/waiting2.css" media="print" id="pacoquinha">
But, at the bottom:
<script>
document.getElementById('pacoquinha').media = 'screen';
</script>
</body>
If I dont put this, the CSS isn't parsed, only downloaded.
http://gui-poa.github.io/talks/mobileperf/finalChrome.html
To see it again, use the clear button then force reload.
The version that works in Chrome, doesn't work in Firefox/IE11/Android browser.
These versions works in FF, IE11,Android Browser and Safari, but Chrome.
<script>
var path = "css";
var style = document.createElement( 'link' );
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = "http://gui-poa.github.io/talks/mobileperf/waiting2.css";
document.getElementsByTagName( 'head' )[0].appendChild( style );
</script>
</body>
OR
<link rel="stylesheet" type="text/css" href="http://gui-poa.github.io/talks/mobileperf/waiting2.css">
</body>
http://gui-poa.github.io/talks/mobileperf/finalFirefox.html JS
http://gui-poa.github.io/talks/mobileperf/finalFirefox2.html css link
The Chrome version still blocks the rendering process from performing it's first layout (easy to spot when enabling network throttling). The performance audit report doesn't complain though about blocking CSS (I assume it only does static code analysis due to which it thinks it's all fine). So you do get a higher score, but in the end it does not make a difference for the user. I guess you'll have to load the CSS through XHR and add the response text in an inline <style>