Move combined css html tag below in header

  • Hi,

    actually we have an issue with LCP. We tried to add the preload tag to speed up the image loading process. It helped but not enough.

    We are noticing that the css files minimized and compressed by autoptimize are loaded always before our featured image link rel preload tag.

    I attach you two images:

    This is one shows how the html source looks like: https://ibb.co/KFdrsGT

    This one shows the network tab: https://ibb.co/JvKkw4M

    My question is, how can I force the css tags to go below the image preload tag?

    I cannot find any setting in the plugin and also if I try to use the wordpress standard method to embed tags they are still appearing below autoptimize css tags.

    Thank you!

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

    (@optimizingmatters)

    you can change the “injection point” of the Autoptimized CSS with a code snippet, see example below @lucop1

    add_filters( 'autoptimize_filter_css_replacetag', array( '</head>", 'before' ) );

    where </head> can be any string in your HTML and before can also be after or replace.

    hope this helps,
    frank

    Thread Starter lucop1

    (@lucop1)

    Hi Frank,

    thank you for the suggestion. At the moment it doesn’t work. I added this in the functions.php of my template:

    add_filter( 'autoptimize_filter_css_replacetag', array( '<head>', 'after' ), 10,1 );

    tried also with this:

    add_filter( 'autoptimize_filter_css_replacetag', array( '<title', 'before' ));

    add_filter( 'autoptimize_filter_css_replacetag', array( '</head', 'before' ), 10,1 );

    add_filter( 'autoptimize_filter_css_replacetag', array( '</head', 'before' ));

    But same output in the html: https://ibb.co/3yHmPsg

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    my bad, there’s a (silly) bug in my example code, try something like this instead;

    add_filters( 'autoptimize_filter_css_replacetag', 
  function(){
    return array( '</head>", 'before' );
  }
);
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Move combined css html tag below in header’ is closed to new replies.