Ajouter les attributs Defer et Async aux scripts WordPress

Les développeurs WordPress chargent souvent les scripts JS de façon incorrecte ou plutôt non optimale.
Bien souvent cette habitude a été prise car WordPress ne disposait pas jusqu'alors d'un moyen simple d'ajouter les nouveaux attributs Async et Defer.

Si vous ne savez pas comment bien charger les scripts JS dans WordPress, voici la bonne méthode avec wp_enqueue_script.

Depuis la version 4.1, un nouveau filtre "script_loader_tag" est supporté nativement par WordPress afin d'ajouter plus simplement les attributs async et defer sans prise de tête.

apply_filters('script_loader_tag', string $tag, string $handle, string $src);

Utilisation concrète : Async/Defer avec WordPress

Async sur un Script

function add_async_attribute($tag, $handle) {
  if ( 'nom-script-js' !== $handle )
    return $tag;
  return str_replace( ' src', ' async="async" src', $tag );
}

add_filter('script_loader_tag', 'add_async_attribute', 10, 2);

Defer sur un Script

Si vous souhaitez utiliser l'attribut "defer", remplacez simplement async="async" par defer="defer", comme dans l'exemple suivant :

function add_defer_attribute($tag, $handle) {
  if ( 'nom-script-js' !== $handle )
    return $tag;
  return str_replace( ' src', ' defer="defer" src', $tag );
}

add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);

Ajoutez ce code à votre fichier functions.php de préférence.

Vous devrez recopier le "handle" qui est le premier paramètre de la méthode de chargement de votre script. Dans l'exemple suivant, il s'agit de 'nom-script-js'. C'est valable pour les méthodes wp_register_script et pour wp_enqueue_script.

wp_register_script('nom-script-js', $src, $deps, $ver, $in_footer);
//OU
wp_enqueue_script('nom-script-js', $src, $deps, $ver, $in_footer);

Quel attribut choisir ?

Le bon choix de balise à utiliser dépend entièrement de la nature du script lui-même, et il existe trois choix possibles.

• Standard - C'est à dire sans l'attribut async ou defer. Cela constitue le comportement standard de votre navigateur.
• Defer - Que l'on peut traduire par différé. Cela retarde l'exécution du script jusqu'à ce que l'analyse HTML soit terminée.
• Async - Que l'on peut traduire par asynchrone. Le script s'exécute une fois qu'il est prêt et ne perturbe pas l'analyse HTML.

Comme toujours, vous devez tester toutes les modifications que vous apportez. Si vous constatez que des erreurs sont associées à l'un ou l'autre de ces attributs, ne les utilisez pas pour ce script particulier.

Utiliser Async et Defer sur plusieurs Scripts

Pour ajouter la balise async / defer à plusieurs scripts, nous devons créer un tableau (array), puis parcourir ce tableau et ajouter la balise async / defer à chaque script.

Ajoutez l'un de ces exemples de code à votre thème, dans le fichier "functions.php" et modifiez le tableau (array) pour inclure les scripts que vous avez choisi.

Plusieurs Scripts avec Async

function add_async_attribute($tag, $handle) {
  // ajouter les handles de mes scripts au array ci-dessous. Ici 3 scripts par exemple.
  $scripts_to_async = array('nom-script-1', 'nom-script-2', 'nom-script-3' );
  foreach($scripts_to_async as $async_script) {
    if ($async_script === $handle) {
      return str_replace(' src', ' async="async" src', $tag);
    }
  }
  return $tag;
}

add_filter('script_loader_tag', 'add_async_attribute', 10, 2);

Plusieurs Scripts avec Defer

function add_defer_attribute($tag, $handle) {
  // ajouter les handles de mes scripts au array ci-dessous. Ici 3 scripts par exemple.
  $scripts_to_defer = array('nom-script-1', 'nom-script-2', 'nom-script-3' );
  foreach($scripts_to_defer as $defer_script) {
    if ($defer_script === $handle) {
      return str_replace(' src', ' defer="defer" src', $tag);
    }
  }
  return $tag;
}

add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);

La solution de l'Extension WordPress

Si vous n'êtes pas à l'aise avec les manipulations précédentes, il existe une Extension WordPress qui gère cela très bien nommée Async Javascript.