Exclure de la mise en différé de Jetpack Boost les fichiers JavaScript

Cet article explique comment empêcher Jetpack Boost de différer certains fichiers JavaScript ou des pages entières. Vous pouvez exclure des scripts individuels par leur identifiant, ajouter l’attribut data-jetpack-boost="ignore" à une balise de script, ou ignorer le différé de JavaScript sur des pages entières correspondant à un modèle d’URL. Utilisez ces exclusions lorsque le différé de JavaScript entraîne des problèmes de mise en page ou perturbe le fonctionnement de la page.

Quand exclure JavaScript de la mise en différéMD

Si vous constatez un comportement indésirable sur votre site lorsque vous différez JavaScript (JS) avec Jetpack Boost, les fonctionnalités concernées peuvent dépendre du fait que les fichiers JavaScript soient dans un certain ordre ou soient rendus disponibles pour la page dès que possible.

Jetpack Boost vous offre deux façons de gérer ce problème. Vous pouvez exclure des scripts individuels afin que le reste de la page continue de bénéficier du report, ou exclure une page entière lorsque le report entraîne des problèmes sur l’ensemble de la page.

• Exclusions au niveau des scripts empêchent Jetpack Boost de différer un script précis tout en continuant à différer les autres scripts de la page. Utilisez cette méthode lorsqu’un script doit être chargé immédiatement ou dans un ordre précis.
• Exclusions au niveau des pages empêchent Jetpack Boost de différer tout JavaScript sur les pages correspondant à un modèle d’URL. Utilisez cette méthode lorsque le report entraîne des problèmes de mise en page ou d’exécution de JavaScript sur toute une page, comme une page de paiement ou une page de galerie.

Exclure un script individuel du reportMD

Vous pouvez demander à Jetpack Boost de ne pas reporter un fichier précis en ajoutant l’attribut data-jetpack-boost="ignore" à la balise de script. La méthode à utiliser dépend du fait que la balise de script soit codée en dur ou mise en file d’attente avec wp_enqueue_script.

Si votre balise de script est codée en dur, ajoutez directement l’attribut à la balise :

<script data-jetpack-boost="ignore">

Exclure du report un script mis en file d’attente avec wp_enqueue_scriptMD

Si votre balise de script est mise en file d’attente avec wp_enqueue_script comme dans l’exemple suivant :

function wpdemo_enqueue_scripts() {
    wp_enqueue_script( 'wpdemo', get_template_directory_uri().'/js/wpdemo.js' );
}
add_action( 'wp_enqueue_scripts', 'wpdemo_enqueue_scripts' );

Vous pouvez utiliser l’extrait de code ci-dessous et l’ajouter au fichier functions.php de votre thème :

function add_data_jetpack_boost_tag( $src, $handle ) {
    if ( $handle !== 'wpdemo') {
        return $src;
    }
    return str_replace( ' src', ' data-jetpack-boost="ignore" src', $src );
}
add_filter( 'script_loader_tag', 'add_data_jetpack_boost_tag', 10, 2 );

N’oubliez pas de remplacer wpdemo par l’identifiant du fichier de script que vous souhaitez exclure.

Exclure une page entière du reportMD

Depuis Jetpack Boost 4.6.2, la fonctionnalité Différer les fichiers JavaScript non essentiels inclut une liste d’exclusion de modèles d’URL par page. Cette liste empêche Jetpack Boost de différer tout JavaScript sur les pages dont l’URL correspond à un modèle que vous saisissez, sans désactiver la fonctionnalité de différé de JS sur l’ensemble de votre site.

Pour ajouter une exclusion au niveau d’une page, procédez comme suit :

1. Accédez à Jetpack → Boost et ouvrez le panneau des réglages de Jetpack Boost.
2. Trouvez la fonctionnalité Différer les fichiers JavaScript non essentiels.
3. Saisissez un ou plusieurs modèles d’URL dans la liste d’exclusion. Le panneau affiche un exemple intégré du format attendu.
4. Enregistrez vos modifications.

Syntaxe des modèles d’URLMD

La syntaxe des modèles d’URL pour les exclusions au niveau des pages correspond à celle utilisée pour les exclusions du cache de page. Vous pouvez saisir un fragment de texte brut tel que checkout, ou un modèle comportant un caractère générique tel que gallery/(.*). Toute page dont l’URL correspond à un modèle de la liste est exclue du différé de JS.

Pour plus de détails sur le fonctionnement de la correspondance des modèles, consultez Exclure certaines parties du site de la mise en cache.