'WordPress - Add sync defer tag in wp_enqueue_style CSS Files

I need to add sync or defer attribute in Stylesheets CSS file which are included by using wp_enqueue_style.

My Code is below.

function my_scripts() {
  wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.css', array(), '4.4.2');
  wp_enqueue_style('my-style', get_stylesheet_uri());
  wp_enqueue_style('about-page', get_template_directory_uri() . '/css/about-styles.css', array(), '4.4.3');
  wp_enqueue_script('bootstrap-min', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '20151112', true);
  wp_enqueue_script('jquery-scrollto', get_template_directory_uri() . '/js/jquery-scrollto.js', array(), '20112', true);
  wp_enqueue_style('details-pages', get_template_directory_uri() . '/css/details-pages.css', array(), '4.4.3');
  wp_enqueue_style('owl-carousel-css', get_template_directory_uri() . '/css/owl/owl.carousel.css', array(), '4.4.2');
  wp_enqueue_script('owl-carousel-js', get_template_directory_uri() . '/css/owl/owl.carousel.min.js', array(), '202', true);
  wp_enqueue_script('scripts-js', get_template_directory_uri() . '/js/scripts.js', array(), '20151112', true);
}

add_action('wp_enqueue_scripts', 'my_scripts');

Now I want to add sync or defer attribute in different CSS Style sheets. So please help me, how to add sync or defer attribute. I want to add attributes in just CSS files not in JavaScript files.

Any help will be appreciated.

Thanks.

wordpress

Solution 1:^[1]

Try this code

function add_custom_attr( $tag, $handle, $src ) {
    $scriptArr = array('bootstrap','my-style','about-page','bootstrap-min','jquery-scrollto','details-pages','owl-carousel-css','owl-carousel-js','scripts-js');

    if (in_array($handle, $scriptArr)) {
    $tag = str_replace( 'src=', 'sync="false" src=', $tag );
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'add_custom_attr', 10, 3 );

Solution 2:^[2]

Another solution using a different filter, which can be used to target a specific script handle:

 function frontend_scripts(){
    wp_enqueue_script( 'my-unique-script-handle', 'path/to/my/script.js' );
 }
 add_action( 'wp_enqueue_scripts', 'frontend_script' );

 function make_script_async( $tag, $handle, $src ){
    if ( 'my-unique-script-handle' != $handle ) {
        return $tag;
    }
   return str_replace( '<script', '<script async', $tag );
 }
 add_filter( 'script_loader_tag', 'make_script_async', 10, 3 );

I hope this will help you to solve your problems.

Thank you

Solution 3:^[3]

This is the script I use to control style and script attributes: enqueue script

This allows you to selectively add Defer, Async, and Lazy Load to stylesheets and scripts. A perfect way to make Google PageSpeed happy LOL.

Applying proper minification, caching and lazy loading of images, along with managing the styles and scripts with this script, changed our PageSpeed score from 60 mobile / 88 Desktop to 74 Mobile and 96 desktop.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Xedecimal
Solution 2	Niket Joshi
Solution 3	revive

'WordPress - Add sync defer tag in wp_enqueue_style CSS Files

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]