Hierarchical position in wp_head

Resolved tetrakern
(@tetrakern)

2 months, 3 weeks ago

tldr; output aggregated CSS on position 9 in wp_head.

By default, Autoptimize puts its aggregated CSS right at the top of the HTML head. I’m not sure this was always the case, but it’s not a good practice for compatibility.

The intended output order in WP is wp_print_styles on 8 and wp_print_head_scripts on 9 in wp_head, custom CSS even later. This ensures that properly enqueued CSS files are rendered below the inline block styles, avoiding hierarchy issues that require bloated selectors or !important to overcome.

Obviously, if you now put the aggregated CSS above that, things are going to break as the block styles suddenly overrule your theme styles. Aggregating inline styles often leads to even more issues since that lacks fine control, so I do not consider that a viable solution.

Now, you can move the insertion point with the autoptimize_filter_css_replacetag filter to the end of the head. However, suddenly you have the opposite problem and your aggregated styles are too strong, overruling custom CSS, child themes, and plugins. Trying to filter in a replacetag in the proper position just didn’t work, I assume that it fires too late or this is not how Autoptimize works.

Anyway, I believe it would be sensible to add an option or make it even default to insert the aggregated CSS where it belongs: on position 9. Otherwise this is near guaranteed to cause problems. If there is a way to do this or I did something wrong, please let me know.

Viewing 1 replies (of 1 total)

Thread Starter tetrakern
(@tetrakern)

2 months, 3 weeks ago
Alright, I just saw (obviously a creating this topic) that the default is ["<title", "before"]. Sorry about that. I tried to filter in a replace HTML comment tag, but that didn’t work. Yet if the title is working, I wonder what I’m doing wrong.

Autoptimize found a problem with the HTML in your Theme, tag !--ao_css_insert-- missing

Edit: So this works, but I wonder why an HTML comment is not. Still, I think this should be the default position and not above wherever the title happens to be.
```
function fictioneer_ao_add_replace_tag() {
echo '<style id="fictioneer-ao-insert">/* dummy tag */</style>';
}
add_action( 'wp_head', 'fictioneer_ao_add_replace_tag', 9 );
```
- This reply was modified 2 months, 3 weeks ago by tetrakern.
- This reply was modified 2 months, 3 weeks ago by tetrakern.

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.

Tags