Critical CSS in footer vs head

Hello,

I am using this function in order to put the autoptimize.css file in the footer and loading it after the rest of the page :

add_filter('autoptimize_filter_css_replacetag','te_css_replacetag',10,1);
function te_css_replacetag($replacetag) {
	return array("</body>","before");
}

I realised that using this function, also move the critical css (id=”aoatfcss”) to the footer. Maybe I am wrong but this is not the correct behavior, right ?

If I remove the function, the main css file and critical css move back to the head.
There is the onload attribute on the main css file tag to defer loading

this.onload=null;this.rel='stylesheet'

But the file is loaded 3rd anyway in the waterfall. What am I missing ?

What function can I use to move the main concatenated CSS to the footer and keep the critcal css in the head ?

Thank you