Support » Plugin: Autoptimize » Change position of CSS link when loading CSS asynchronously

  • In our theme we inline the critical CSS and ask users to use autoptimze plugin to load the other CSS asynchronously. (We usually leave the “Paste the above fold css here” blank.)

    Problem is our inline CSS is coming after the deferred styles. Any way to change the order?

    <link rel="preload" as="style" media="all" href="#" onload="this.onload=null;this.rel='stylesheet'" /><noscript id="aonoscrcss"><link type="text/css" media="all" href="#" rel="stylesheet" /></noscript>

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Satish Gandham

    (@gandham)

    We can achieve what we need by changing
    add_action( 'wp_enqueue_scripts', 'helium_enqueue_styles', -999 );
    to
    add_action( 'wp_head', 'helium_enqueue_styles', -999 );

    Ideally we would prefer to use wp_enqueue_scripts

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    Evening @gandham;
    An alternative could be to change the “injection point” for autoptimized CSS, using e.g. code like this;

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

    hope this helps,
    frank

    Thread Starter Satish Gandham

    (@gandham)

    Thanks frank. I think this will work.
    Will update you after testing.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change position of CSS link when loading CSS asynchronously’ is closed to new replies.