Load style.css async

[iamzeus]

I want to implement (without using echo in the function) this into genesis:

    // load styles asynchronously
    function new_site_make_styles_async($tag, $handle, $src) {
        if (!is_admin()) {
            return str_replace("rel='stylesheet'", "rel='preload' as='style' onload=\"this.rel='stylesheet'\"", $tag) . "<noscript>{$tag}</noscript>";
            exit;
        }
        return $tag;
    }
    add_filter("style_loader_tag", "new_site_make_styles_async", 10, 3);

This is the format I need before placing loadCSS js. Anybody knows?

[Victor Font]

You almost have it right. The style_loader_tag filter has 4 parameters. You want to manipulate the $html parameter, not $tag. This code will give you what you want:

// load styles asynchronously
function new_site_make_styles_async($html) {
    if (!is_admin()) {
        $html = str_replace("rel='stylesheet'", "rel='preload' as='style' onload=\"this.rel='stylesheet'\"", $html) . "<noscript>{$html}</noscript>";
    }
    return $html;
}
add_filter("style_loader_tag", "new_site_make_styles_async", 10, 4);

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[iamzeus]

Thanks a lot, yea needed $handle as well :), ended up with this solution:

// load styles asynchronously
add_filter( 'style_loader_tag', 'style_transform_loadCSS', 10, 2 );
function style_transform_loadCSS( $html, $handle ) {
	if ( CHILD_THEME_NAME == $handle )
		$searchArray = array("rel='stylesheet' id='$handle-css'", "type='text/css' media='all'");
		$replaceArray = array("rel=\"preload\"", "as=\"style\" onload=\"this.rel='stylesheet'\"");
 	return str_replace($searchArray, $replaceArray, $html);
	return $html;
}

thanks for the help

[iamzeus]

Another question, how do I add cache busting query strings of last mod to that function i Just posted?

This is my query string last mod function

// Replace Query String for Last Modified String
add_action( 'wp_enqueue_scripts', 'cache_buster_styles' );
function cache_buster_styles() {
	// Get the stylesheet info.
	$stylesheet_uri = get_stylesheet_directory_uri() . '/style.css';
	$stylesheet_dir = get_stylesheet_directory() . '/style.css';
	$last_modified = date ( "ymd.h.i.s", filemtime( $stylesheet_dir ) );
	// Enqueue the stylesheet.
	wp_enqueue_style( 'cache-buster' , $stylesheet_uri, array(), $last_modified );
}

How to I implement that into my correct function that mos my style.css

// load styles asynchronously
add_filter( 'style_loader_tag', 'style_transform_loadCSS', 10, 2 );
function style_transform_loadCSS( $html, $handle ) {
	if ( CHILD_THEME_NAME == $handle )
		$searchArray = array("rel='stylesheet' id='$handle-css'", "type='text/css' media='all'");
		$replaceArray = array("rel=\"preload\"", "as=\"style\" onload=\"this.rel='stylesheet'\"");
	return str_replace($searchArray, $replaceArray, $html)."<noscript>{$html}</noscript>";
	return $html;

}

[Victor Font]

You don't need two return statements in the first function.

I suggest you use the kint php debugger plugin. https://wordpress.org/plugins/kint-php-debugger/

At the start of the style_transform_loadCSS function, add the line d($html);

This will display the value of the HTML being sent to the function. You'll have to append the filetime to the src attribute. By using kint, you'll be able to figure out what you have to do. In fact, with kint, you can see the value of any function, array, or filter return value. It's quite useful for custom functions.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts