Inline and Defer CSS should be an option on page level not site wide

  • Resolved baksteendegeweldige

    (@baksteendegeweldige)


    4 years, 6 months ago

    Hello,

    First:
    I like your plugin very much!
    Many thanks for your work!

    But I find the option “Inline and Defer CSS” a weird one (maybe because I don’t understand it 100%).
    As I understand it correctly inlining and Defer CSS should be done for every page separately.
    There is no such thing as a universal above the fold CSS for whole your website.
    If you try to make this universal above the fold CSS you end up with a very very large inline CSS, you deoptimize your site if you do this.
    If you make a small and optimized “universal” above the fold CSS, you will end up with CLS’s (cumulative layout shifts).
    So, in my opinion, the inline and Defer CSS option should be on page level and not for the whole site.
    The only option you have right now (if you want to do it correctly) is to pay for Criticalcss.com.
    This works great, and I understand that you need companies who sponsor your work.
    But I find it strange that there is an option to do it without criticalcss.com, but that option can’t work properly (unless you have a one-page website).

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    It’s not a matter of “companies who sponsor your work”, but of needing a service to connect to to automatically generate critical CSS for each page separately and keeping it up-to-date and criticalcss.com is the only service that I know of that does so I’m afraid.

    And alternative could be to use AUtoptimize’s API to programmatically tell AO which “above the fold CSS” to use for which request? If you want I can give you some pointers of where to start with that?

    Thread Starter baksteendegeweldige

    (@baksteendegeweldige)

    Yes, Criticalcss.com is also the only service that I know that does this automatically.
    (Sorry I do not want to offend you by suggesting you put it in there for sponsorship, I appreciate your work)

    Yes, I am willing to give it a try to create an alternative service to tell autoptimize which above the fold CSS to use for which request. Please give me some pointers.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    well, it boils down to hooking into autoptimize_filter_css_defer_inline and then returning CCSS based on conditions, here’s an example stub;

    add_filter( 'autoptimize_filter_css_defer_inline', 'baksteen_ccss', 10, 2 ) ;
function baksteen_ccss( $default_ccss, $html_context ) {
  if ( is_front_page() ) {
    return '<your frontpage CCSS goes here>';
  } else if ( is_single() ) {
    return '<your blogpost CCSS goes here>';
  } else if ( strpos( $html_context, 'slider' ) !== false ) {
    return '<CCSS for pages that have the word slider in the HTML>';
  } else if ( strpos( $_SERVER['REQUEST_URI'], '/gallery/') !== false ) {
    return '<CCSS for pages with /gallery/ in the URL>';
  }

  // no matches so just return the default.
  return $default_ccss;
}

    veel plezier ??
    frank

    Thread Starter baksteendegeweldige

    (@baksteendegeweldige)

    Bedankt! Ik laat nog wat weten!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Inline and Defer CSS should be an option on page level not site wide’ is closed to new replies.