Otter post generated css not loaded at the top of the page

[ineagu]

Description

At the moment the css that we generate from Otter is added at the bottom of the page, which lowers it's loading priority: https://vertis.d.pr/i/2YznNZ.

This is particularly a problem when we are using background images at the top of the page, which are also defined in this CSS and cause a low priority and high waiting time for the hero image to be loaded.

I suggest we load this in the header as well.

Step-by-step reproduction instructions

1. Go to https://demosites.io/zelle-gb/
2. Look in the network tab loading waterfall

Screenshots, screen recordings, code snippets or Help Scout ticket

No response

Environment info

No response

Is the issue you are reporting a regression

No

[ineagu]

@selul since you might have a good idea about this I am wondering what you think is the best approach?

@HardeepAsrani maybe you have some context on this choice as well.

[selul]

Sure, one aspect is that some of that CSS is not critical to be used on the head.

Another aspect is that it is challenging to load that in the header on the listing pages or pages where you load multiple posts and their content.

I.e if you are on the blog listing page and load the full content, during the request lifecycle you don't know the post ids that will load in the head section when you enqueue the CSS and you get access to that once you render the posts, at that time you can load the CSS only in footer.

It might be some solution, but at that time, I think it was the best that Hardeep/I came up with.

[ineagu]

Thanks! I am not sure if there is a solution to split for big pages, like first x blocks get a dedicated CSS in head, the rest as now. But not being a very big file, not sure if it makes sense

[HardeepAsrani]

@ineagu Yea, it's a hard problem as it's not easy to know what needs to load when. We save all CSS into one file and we moved it to footer to improve FCP time. We in past had complains from user that Otter is making their site slow by loading things in header so we moved it to footer.

[ineagu]

got it.

Considering how people are using the block editor now (also to design full sites), I don't see why the theme CSS gets loaded in the header and this is not, since it can also hold the page layout.