Get per page critical CSS from custom field

  • Resolved Fzn.shaikh

    (@fznshaikh)


    5 years, 10 months ago

    Hi Frank,

    Thanks for the great work.

    I want to override the critical CSS for pages & this CSS is added to a custom field. I added the below code, but I think there’s some issue as I see there are multiple CSS files. I am not sure if this is how it should be(Please correct me if I am wrong).

    I just want to override the critical CSS I have added to autoptimize settings if $custom_critical_css has a value. I think there’s a problem with my code or it can be better. Thank you for your time.

    add_filter('autoptimize_filter_css_defer_inline','my_ao_css_defer_inline',10,1);
 function my_ao_css_defer_inline($inlined) {
 $custom_critical_css = get_post_meta( get_the_ID() , 'custom_critical_css' , true );
 if (is_page() && $custom_critical_css) {
 return $custom_critical_css; // overwrite default a-t-f CSS
 } else {
 return $inlined; // use default a-t-f CSS for all other types
 }
 }
    • This topic was modified 5 years, 10 months ago by Fzn.shaikh.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    looks OK at first sight? maybe add debug-logging to see where things go wrong?

    error_log('post id was: '.get_the_ID());
error_log('custom CCSS was: '.get_post_meta( get_the_ID() , 'custom_critical_css' , true ) );

    frank

    Thread Starter Fzn.shaikh

    (@fznshaikh)

    I’m not sure where to place the logging code into the snippet.

    The issue is, I saw some css files loaded on multiple pages, even though I’ve added different critical css for different pages.
    Is that normal?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    The issue is, I saw some css files loaded on multiple pages, even though I’ve added different critical css for different pages.
    Is that normal?

    yes, that is normal; the critical CSS only takes care of the initial rendering of the page, the full CSS is loaded in a non-render-blocking way and is applied when downloaded.

    hope this clarifies,
    frank

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Get per page critical CSS from custom field’ is closed to new replies.