Option to inline above the fold CSS

[andypillip]

Since Google is taking mobile friendliness into account for ranking, performance optimization becomes way more important.

Theme+ already moves scripts down to the body to load them deferred.

How about the option to insert certain stylesheets (or single rules) inline on first visit, to make it possible to also defer CSS loading?

For PageSpeed and therefore mobile friendliness this is a hard requirement!

[andypillip]

I'd be willing to work on this btw.

[dmolineus]

Have you take a look at Theme+ 5? There's already an option to add assets inline.

[andypillip]

I didn't, but it's always adding them inline, no?

We'd need some option to only add them on first time visit, since afterwards the CSS file will be cached.

But using this or another field of the same type for ftu, developers could pack their above-the-fold styles in single stylesheets. By integrating 3rd-party libraries the selection of above-the-fold styles could be done automatically.

[dmolineus]

Yes, it only adds the the content of the css as inline style all the time. At the moment when I have to do above the fold optimizations I always add the inline css for the above the fold part.

Only adding it when no style is cached sound pretty nice, but I guess it's also complicated. How would you detect if the styles are already loaded? It has done for each page separetely. How will it work with cached pages?

If there is a solid way to implement it, I'm fine to add this feature if you provide it as pull request. If it has to many requirements (depending on a specific js library, limited to non cached pages, and so on) I'll prefer it as a separate plugin. So please let me know how you would solve it, so I can make my finaly decision.

If you're going to provide a pull request, please use the 5.0.x version (dev branch) as the base.