Chargement différé (defer)

Définition : Le chargement defer demande au navigateur de télécharger un script sans bloquer l’analyse HTML puis de l’exécuter après celle-ci. WordPress peut gérer cette stratégie dans wp_enqueue_script().

Comprendre et utiliser

À quoi sert ce terme ?

Il aide à améliorer la progression du rendu lorsque l’exécution immédiate d’un script n’est pas nécessaire. Les scripts classiques différés conservent généralement leur ordre relatif dans le document.

Fonctionnement technique

Depuis WordPress 6.3, un script classique peut demander strategy=defer avec ses autres arguments. Le Core tient compte des relations de dépendances et peut choisir une stratégie finale admissible.

Dans quels contextes l’utiliser ?

À utiliser pour un composant qui dépend du DOM disponible et dont l’ordre avec d’autres scripts doit rester cohérent. Tester les événements utilisés et les attentes de chargement.

Cas concret : ATOOLPHA

Un script ATOOLPHA chargé pour améliorer un menu peut attendre que l’analyse HTML soit terminée sans bloquer la construction de la page.

Exemple de code commenté

Extrait PHP destiné à un plugin ou à un template WordPress, dans le contexte indiqué ; pas au contenu HTML de l’article.

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'atoolpha-menu-helper',
        plugin_dir_url( __FILE__ ) . 'assets/menu.js',
        array(), '1.0.0',
        array( 'strategy' => 'defer', 'in_footer' => true )
    );
} );

Décryptage de l’exemple

La clé strategy demande le chargement différé, mais n’ajoute aucune fonctionnalité au fichier lui-même. Le script menu.js doit être livré avec le plugin et compatible avec l’environnement.

Résultat attendu

Le fichier peut être chargé sans bloquer l’analyse principale, avec une exécution conforme à la stratégie retenue par WordPress.

Exercice pratique et vérification

Comparer le rendu réseau avec et sans defer sur une page de test, puis chronométrer sans inventer de gain de performance.

Précautions et limites

Defer ne garantit pas un bénéfice mesurable sans audit réseau et CPU. Les dépendances peuvent forcer une adaptation de la stratégie.

À ne pas confondre

Un script defer classique diffère d’un module ES, déjà traité par le navigateur selon les règles propres aux modules ; async n’offre pas les mêmes garanties d’ordre.

Diagnostic avancé

En cas d’erreur undefined, comparer l’ordre d’exécution des dépendances et les événements utilisés par le script.

Choix d’architecture et déploiement

Defer est un choix de stratégie qui doit découler des dépendances et du comportement attendu. Un gain de performances allégué ne vaut pas preuve : mesurer la page réelle et conserver des cas de test pour les formulaires, menus et composants interactifs.