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
@iLaurens If the browser supports Fetch (most of them will in a few months), the Fetch API can be used in lieu of XHR for inlining CSS: https://www.npmjs.com/package/fetch-inject#loading-css-asynchronously