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

Change position of CSS link when loading CSS asynchronously

  • Resolved Satish Gandham

    (@gandham)


    4 years, 4 months ago

    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)

    4 years, 4 months ago

    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)

    4 years, 4 months ago

    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)

    4 years, 4 months ago

    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.

Views