# Charger le JS et le CSS intelligemment sur WordPress avec defer et async > defer, async, script_loader_tag : le guide pratique pour arrêter de bloquer le rendu de vos pages WordPress avec des scripts mal chargés. - Auteur : Clément Hadrot - Publié le : 2022-07-07 - Mis à jour le : 2022-07-07 - Catégorie : Performance - URL : https://wpmoderne.dev.wordpress-developpement.fr/performance/defer-async-js-wordpress/ ## L’essentiel - defer et async ne se comportent pas du tout de la même façon - jQuery doit rester chargé en priorité s'il est une dépendance - script_loader_tag reste la méthode pour ajouter ces attributs en WP 6.0 Chaque script chargé de façon classique dans le `` d'une page WordPress bloque le rendu : le navigateur doit le télécharger et l'exécuter avant de continuer à construire la page. Sur un site avec plusieurs plugins, chacun enregistrant son propre fichier JavaScript, cette accumulation peut faire grimper le temps de rendu de façon significative sans qu'aucun octet de PHP ne soit en cause. Les attributs `defer` et `async` permettent de sortir ces scripts du chemin critique de rendu. Mais les deux ne sont pas interchangeables, et les appliquer sans discernement peut casser des scripts qui dépendent les uns des autres, à commencer par jQuery. Voici comment faire les choses proprement en WordPress 6.0. ## Comprendre la différence entre defer et async Sans attribut, un script est téléchargé et exécuté de façon synchrone, dans l'ordre où il apparaît dans le document, en bloquant le parsing du HTML pendant ce temps. - **async** télécharge le script en parallèle du parsing HTML, puis l'exécute dès qu'il est prêt, en interrompant le parsing à ce moment précis. L'ordre d'exécution entre plusieurs scripts `async` n'est pas garanti. - **defer** télécharge également le script en parallèle, mais reporte son exécution jusqu'à ce que le parsing HTML soit terminé, juste avant l'événement `DOMContentLoaded`. L'ordre d'exécution entre plusieurs scripts `defer` est, lui, garanti et respecte l'ordre du document. Pour la grande majorité des scripts WordPress (widgets, animations, tracking non critique), `defer` est le choix le plus sûr : il préserve l'ordre de dépendance tout en libérant le rendu. `async` convient mieux à des scripts totalement indépendants, comme certains outils de mesure d'audience qui n'ont besoin d'aucun autre script pour fonctionner. ## Pourquoi ne pas simplement passer un argument à wp_enqueue_script À la date de cet article, WordPress est en version 6.0. La fonction `wp_enqueue_script()` ne propose pas encore de paramètre natif pour définir une stratégie de chargement : son cinquième argument reste un simple booléen ou tableau contrôlant la position du script (pied de page ou non) et, plus récemment, quelques options limitées. Il n'existe pas d'argument `strategy` permettant de demander `defer` ou `async` directement à l'enregistrement du script. La méthode qui fonctionne aujourd'hui consiste donc à passer par le filtre `script_loader_tag`, qui permet de réécrire la balise `