IE specific stylesheet and inline and defer.

for both inline&defer and “normal” CSS optimization, the optimized CSS is injected before the title-tag. you can however use the API (autoptimize_filter_css_replacetag-filter, cfr. example in autoptimize_helper.php_example) to change that.

hope this clarifies,
frank

Thanks for your response.

Will try to experiment.

Quick question: doesn’t the deferred CSS get loaded using lCSS which injects using d.getElementsByTagName(‘head’)[0].appendChild(l)?

Quick question: doesn’t the deferred CSS get loaded using lCSS which injects using d.getElementsByTagName(‘head’)[0].appendChild(l)?

you’re absolutely right, only the noscript-CSS gets inserted before the title-tag ??

Hmmm. Maybe I should include ie.css in the child style.css by using “.ie8” and “.ie7”

Even the Twenty Sixteen theme has these IE stylesheets!

https://github.com/WordPress/twentysixteen/blob/master/functions.php#L241-L255

It’s almost 2016.

Will figure out. Thanks again.

but as the main theme already enqueues those files (with conditionals), there’s no reason for your child theme to load them as well, no?

That’s because the ordering seems to matter.

The ie stylesheet is needed for things like left aligning the header and so on.

Without Autoptimize or with simply minifying, the ordering is preserved. With inline and defer the function lCSS loads the deferred CSS <i>after</i> the ie stylesheet.

I see … so ideally there would be a autoptimize_filter_css_deferjsmethod filter to let you choose between appendChild and insertBefore (before head’s first child)?

Yeah.

One could insert it just below the inlined/above-the-fold css for example.

Something like insertBefore could be helpful.

ok … so we give the inlined CSS an ID and use that (with a bit of nextSibling-magic) to do an insertBefore? doable, for sure. you’re into coding, no? feel like forking AO on GitHub? ??

frank

Yeah something like that – with an ID.

Not into coding. But because of Autoptimize, I am becoming interested in such things. Following your code working has made me interested in WordPress in general :-).

ah, I’ll see what I can come up with then ??

https://github.com/futtta/autoptimize/commit/08c31374e21897e5e6b2fcb84d69ce14a1532182

care to test? ??

Tested.

Seems the autoptimize_xyz.css is still inserted after ie.css

https://www.webpagetest.org/result/151114_F1_DJA/

Your page on the other hand looks fine because you have inlined all css and ie.css is after it.

https://www.webpagetest.org/result/151114_FH_DMJ/

Compare screenshots of the header.

ah, but the deferred CSS will always be loaded way after ie.css, simply because it is deferred. the only thing changed by the code is the place where the CSS is inserted in the DOM.

Yeah it is loaded late.

My thinking was that one can ask the javascript to load the deferred CSS at a place after which there’ll be recalculations of the CSS cascade (if needed).