Comment puis-je reporter ou async ce JavaScript WordPress snippet à charger enfin pour des temps de chargement de page plus rapides?

Ou de manière plus universelle:

function add_async_forscript($url)
{
    if (strpos($url, '#asyncload')===false)
        return $url;
    else if (is_admin())
        return str_replace('#asyncload', '', $url);
    else
        return str_replace('#asyncload', '', $url)."' async='async"; 
}
add_filter('clean_url', 'add_async_forscript', 11, 1);

vous pouvez donc ajouter async à n'importe quel script sans changement de code, il suffit d'ajouter #asyncload pour que l'url du script soit:

wp_enqueue_script('dcsnt', '/js/jquery.social.media.tabs.1.7.1.min.js#asyncload' )

en essayant de garder les choses quelque peu modulaires et globales, l'approche suivante choisit dynamiquement comment intégrer l'étiquette avec les attributs async ou defer en ajoutant simplement un petit identifiant au nom $ handle:

/**
* Add async or defer attributes to script enqueues
* @author Mike Kormendy
* @param  String  $tag     The original enqueued <script src="...> tag
* @param  String  $handle  The registered unique name of the script
* @return String  $tag     The modified <script async|defer src="...> tag
*/
// only on the front-end
if(!is_admin()) {
    function add_asyncdefer_attribute($tag, $handle) {
        // if the unique handle/name of the registered script has 'async' in it
        if (strpos($handle, 'async') !== false) {
            // return the tag with the async attribute
            return str_replace( '<script ', '<script async ', $tag );
        }
        // if the unique handle/name of the registered script has 'defer' in it
        else if (strpos($handle, 'defer') !== false) {
            // return the tag with the defer attribute
            return str_replace( '<script ', '<script defer ', $tag );
        }
        // otherwise skip
        else {
            return $tag;
        }
    }
    add_filter('script_loader_tag', 'add_asyncdefer_attribute', 10, 2);
}

Exemple d'utilisation:

function enqueue_my_scripts() {

    // script to load asynchronously
    wp_register_script('firstscript-async', '//www.domain.com/somescript.js', '', 2, false);
    wp_enqueue_script('firstscript-async');

    // script to be deferred
    wp_register_script('secondscript-defer', '//www.domain.com/otherscript.js', '', 2, false);
    wp_enqueue_script('secondscript-defer');


    // standard script embed
    wp_register_script('thirdscript', '//www.domain.com/anotherscript.js', '', 2, false);
    wp_enqueue_script('thirdscript');
}
add_action('wp_enqueue_scripts', 'enqueue_my_scripts', 9999);

Sorties:

<script async type='text/javascript' src='//www.domain.com/somescript.js'></script>
<script defer type='text/javascript' src='//www.domain.com/otherscript.js'></script>
<script type='text/javascript' src='//www.domain.com/anothercript.js'></script>

merci à @MattKeys @crissoca d'avoir inspiré ma réponse ici.

une autre solution utilisant un filtre différent, qui peut être utilisé pour cibler une poignée de script spécifique:

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 );

Une méthode simplifiée. Ajouter à vos fonctions.php file to make JavaScript asynchronous dans Wordpress

// Make JavaScript Asynchronous in Wordpress
add_filter( 'script_loader_tag', function ( $tag, $handle ) {    
    if( is_admin() ) {
        return $tag;
    }
    return str_replace( ' src', ' async src', $tag );
}, 10, 2 );

pour avoir le contrôle sur les fichiers JS à reporter et éviter les conflits, vous pouvez ajouter une variable à l'url dans la fonction wp_register_script comme ci-dessous.

wp_register_script( 'menu', get_template_directory_uri() . '/js/script.js?defer', array('jquery'), '1.0', true );

alors changez la ligne:

if ( FALSE === strpos( $url, '.js' ))

À:

if ( FALSE === strpos( $url, '.js?defer' ))

Le nouveau filtre ressemble à ceci.

add_filter( 'clean_url', function( $url )
{
    if ( FALSE === strpos( $url, '.js?defer' ) )
    { // not our file
    return $url;
    }
    // Must be a ', not "!
    return "$url' defer='defer";
}, 11, 1 );

incorporez le async attribuez aux scripts de sorte qu'ils ne soient chargés qu'une fois que toute la page est chargée

<script type="text/javascript">
    function ngfbJavascript( d, s, id, url ) {
        var js, ngfb_js = d.getElementsByTagName( s )[0];
        if ( d.getElementById( id ) ) return;
        js = d.createElement( s );
        js.id = id;
        js.async = true;
        js.src = url;
        ngfb_js.parentNode.insertBefore( js, ngfb_js );
    };
</script>

Source:Ici

quelque Chose à ajouter le clean_url solution de filtre, assurez-vous de valider pour l'utiliser seulement sur la fin de police peut-être en utilisant if( ! is_admin() ){} les plugins populaires comme ACF peuvent vous donner mal à la tête.

mise à Jour

Voici ma version modifiée de la solution:

if( ! is_admin() ){
  add_filter( 'clean_url', 'so_18944027_front_end_defer', 11, 1 );
  function so_18944027_front_end_defer( $url ) {
    if ( FALSE === strpos( $url, '.js' ) )
    { // not our file
        return $url;
    }
    // Must be a ', not "!
    return "$url' defer='defer";
  }
}

je crois que c'est une mauvaise pratique de reporter/async WordPress jQuery. La meilleure solution serait de exclure jQuery dans le filtre:

if (!is_admin()) {
    add_filter( 'script_loader_tag', function ( $tag, $handle ) {    
        if ( strpos( $tag, "jquery.js" ) || strpos( $tag, "jquery-migrate.min.js") ) {
            return $tag;
        }
        return str_replace( ' src', ' async src', $tag );
    }, 10, 2 );
}

Vous pouvez utiliser defer au lieu de async

très peu de code de modification Mike Kormendy, qui vous permet d'ajouter 2 attributs à la fois:

// Async load
function add_asyncdefer_attribute($tag, $handle)
{
    $param = '';
    if ( strpos($handle, 'async') !== false ) $param = 'async ';
    if ( strpos($handle, 'defer') !== false ) $param .= 'defer ';
    if ( $param )
        return str_replace('<script ', '<script ' . $param, $tag);
    else
        return $tag;
}

Résultat:

<script async defer type='text/javascript' src='#URL'></script>

La bonne façon de le faire

wp_script_add_data( 'script-handle', 'async/defer' , true );

en savoir plus