pcfreak30/wp-criticalcss

Feature request: Fallback Critical CSS

Closed this issue · 11 comments

graylaurenm commented

Manual, post-type based critical CSS would be amazing. Something similar to what Above The Fold Optimization has. This would be like duct tape for:

  • CriticalCSS.com errors
  • Private pages (good for membership sites)
  • The processing limits of CriticalCSS.com (good for high traffic sites)
  • Pages that don't have their own critical CSS generated yet (good for when caching plugins are more widely supported and clients are clearing said cache)
pcfreak30 commented

Can you give details on how you would want that to work?

Thanks.

graylaurenm commented
  1. Look for critical CSS generated by the API. If none exists,
  2. Check for fallback CSS in the plugin settings (e.g. Above the Fold). If no conditions match,
  3. Inline all CSS (e.g. Autoptimize).

I'm not sure of the actual performance repercussions of this, I just want to reduce visual disruption when a site needs to generate new critical CSS.

fallback-css

Ideas for steps 2 & 3 come from current functionality in the mentioned plugins.

Autoptimize
ao

Above the Fold
atf

Let me know where I can be more specific. :)

pcfreak30 commented

The inline css will be tricky since WPCSS does not work as a caching/minify plugin and would ideally have to integrate with said plugins to enable that.

pocketjoso commented

@pcfreak30 If the plugin offers a UI where the user can paste in the fallback css they want to inline if there's no critical css, then you should be able to just use that in place of the critical css where there is none (i.e. treat it exactly the same). You could even consider it to be "critical css" - since the way @graylaurenm intents to use it is indeed to unblock the critical path for rendering by default - even if there is no "real" critical css available.

pcfreak30 commented

Having a default critical css input in the settings is pretty simple in terms of logic. Is anything more advanced being expected here?

pocketjoso commented

Well let's verify with @graylaurenm. In her sketch it seems like the default critical css (fallback css) is per page (or page type), but I think setting it globally should be enough. As soon as the plugin has created critical css for the pages - as we expect - this css will no longer be used. It's just meant to bridge the gap so the end user can start deferring their full css straight away (yes there are other cases, but they should not be common).

graylaurenm commented

This works for me! If it integrates with Autoptimize, I could enable "inline all CSS" as long as that's automatically disabled when critical CSS exists.

This solution is acceptable as long as the critical CSS can be properly generated for the site. If the CSS isn't up to par, continuing to inline all CSS probably isn't a good idea for performance reasons.

pocketjoso commented

@graylaurenm
Note that WP Critical CSS does not at the moment integrate well with Autoptimize. You have to check with the plugin author to ask for such a feature. (but this problem doesn't relate to this issue)

Properly generate critical css is always possible, and in the majority of cases comes by default. For the others, the end user is meant to be able to detect and fix the issues via the warnings on criticalcss.com. If they struggle, I offer support via criticalcss.com.

graylaurenm commented

It doesn't have to integrate with Autoptimize, I'm just trying to make the job easier. :)

Right now, AFAIK, WPCCSS doesn't defer the CSS. That means another plugin needs to be used to do so. If others are also using AO for that step, then WPCCSS doesn't need to add duplicate functionality, it just needs to have some sort of fallback plan in place for when critical CSS isn't yet in place.

It may be helpful to create some sketches of information workflow and user paths in order to make decisions about moving forward with this plugin. That may help determine what features to implement and how. I'm not married to any particular solution, I'm just looking for a decent set-it-up-and-forget-it solution for my non-developer clients.

pcfreak30 commented

@graylaurenm @pocketjoso has wanted an all-in-one solution with WPCCSS before but I have been against it as there are a number of plugins that do a single job very well and I am not a fan of reinventing the wheel. I have yet to integrate with anything besides wp-rocket based on necessity.

Any complex UI though I would likely need assistance with as im not a designer at all.

pcfreak30 commented

@pocketjoso @graylaurenm

This has been implemented with the following logic.

  1. The generated is checked 1dst
  2. Post and Terms have a new text box for css. For posts its a meta, for terms it is below the description field. This does not support author or general urls right now. This is used first if theres no generated CSS.
  3. There is a global fallback CSS option. This is used third if theres no generated css or post/term css.

There is also an option Enable Manual CSS Override that sort of inverts this. It put manual, thus prioritize post, then global, before generated css even when generated exists.

Lastly there are new filters wp_criticalcss_manual_post_css and wp_criticalcss_manual_term_css to forcibly disable manual completely.

This will all be in the new release coming soon :)