Skip to content

Instantly share code, notes, and snippets.

@gui-poa gui-poa/gist:8ba1315befeafc915189 Secret
Last active Mar 15, 2017

Embed
What would you like to do?
CSS Critical Path

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.

  1. 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

This comment has been minimized.

Copy link

commented Apr 4, 2016

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>

@ghost

This comment has been minimized.

Copy link

commented Mar 15, 2017

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.