The position is irrelevant if you are loading the CSS async (tick the select box for that). In that case, what will happen is that the browser will learn about the css file and start downloading it async, in a non render blocking way and immediately start reading your inline code (inline code is render blocking) when it finds it.
Since the page is only generated after the DOM completes loading, and since both the async css file and the critical path code is in the header, your browser will never see the body before the header and before the critical path code.
If your async CSS is small, it may also happen that it’s read before the DOM is ready.
The critical path code in that case, would only be useful to reduce the first flash of unstyle content, when the css file is still loading async.
You can simulate this by simulating a slow internet connection on chrome dev tools and see that your critical path css, actually applies before the css file finishes downloading.
Of course, if the CSS file is render blocking (default), then the critical path css is useless, as it will simply overwrite the css file.
If you really want to make sure that code shows up before the merged css file, you can add an attribute to skip it (I’ll add this functionality shortly).
For example:
<style location="critical-path"> your code </style>
On the next update today, I’ll make it so that styles with the location="critical-path" attribute and value, shows before the css file.
Thanks
