How can I send the concatenated CSS file to the footer?

  • Resolved te-online

    (@thomasebert)


    7 years, 6 months ago

    I come from using MinQueue to testing Autoptimize. Unfortunately, MinQueue is not working reliably anymore for me, as sometimes referenced resource files from the cache simply vanish and hence can’t be loaded.

    Overall, I really like Autoptimize. It looks like a lot of effort has been going into this plugin. Thanks a lot for this ??

    There is just one special usecase, I can’t really figure out. I have a custom solution in place for adding critical CSS to the top of my page. I don’t want to change this mechanism as it works quite good.

    What I would need to do now, is to defer the Autoptimize CSS file to load in the footer (without any additional JavaScript). How could I achieve that?

    I used to have this action to put all CSS files in the footer, but this won’t work with Autoptimize. Maybe it isn’t using this mechanism or the priority is too low?

    if( !function_exists( 'pf_print_styles_in_footer' ) ) {
	function pf_print_styles_in_footer() {
	  if ( ! doing_action( 'wp_head' ) ) { // ensure we are on head
	    return;
	  }
	  global $wp_styles;
	  // save actual queued scripts and styles
	  $queued_styles  = $wp_styles->queue;
	  // empty the scripts and styles queue
	  $wp_styles->queue  = array();
	  $wp_styles->to_do  = array();
	  add_action( 'wp_footer', function() use( $queued_styles ) {
	    // reset the queue to print scripts and styles in footer
	    global $wp_scripts, $wp_styles;
	    $wp_styles->queue  = $queued_styles;
	    $wp_styles->to_do  = $queued_styles;
	  }, 0 );
	}
}
add_action( 'wp_print_styles', 'pf_print_styles_in_footer', 999 );

    Can you help me with this one?

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

    (@optimizingmatters)

    well, you can change AO’s “injection point” for CSS using e.g.;

    
add_filter('autoptimize_filter_css_replacetag','te_css_replacetag',10,1;
function te_css_replacetag($replacetag) {
	return array("</body>","before");
	}

    and you could off course use AO’s “inline & defer”-option and leave the “above the fold”-textarea empty. in that case the CSS is deferred using Filamentgroup’s loadCSS uses non-blocking rel=”preload” and switches to rel=”stylesheet” using JS. pretty efficient ??

    have nice weekend,
    frank

    Thread Starter te-online

    (@thomasebert)

    Hi Frank,

    Thank you so much for your quick reply ??
    The filter is just what I was looking for!

    Thomas

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How can I send the concatenated CSS file to the footer?’ is closed to new replies.