Reporter l’exécution du JavaScript

🚀  Ce guide fait référence à  WP Rocket 3.9.
Si vous utilisez WP Rocket 3.7 ou 3.8, veuillez consulter ce guide

Dans cet article

Que fait-elle ?

Le report de l'exécution de JavaScript améliore les performances en retardant le chargement de tous les fichiers JavaScript et des scripts en ligne jusqu'à ce qu'il y ait une interaction avec l'utilisateur (par exemple, déplacement de la souris sur la page, toucher l'écran, défilement, pression d'une touche, défilement avec la molette de la souris).

C'est comme du LazyLoad, mais pour les fichiers JavaScript.

Cette optimisation améliorera les recommandations suivantes dans PageSpeed : 

  • Supprimez les ressources JavaScript inutilisés
  • Minimiser le travail du fil principal
  • Réduire le temps d'exécution du JavaScript
  • Total blocking time
  • Time to Interactive
  • First contentful paint

Et peut également améliorer d'autres Core Web Vitals.

Vous le trouverez dans l'onglet Optimisation des fichiers :

Comment cela fonctionne-t-il ?

  • Cette optimisation est appliquée uniquement sur les pages mises en cache ou optimisées.
  • Elle est active par défaut lorsque vous installez et activez WP Rocket pour la première fois.
  • L’option Combiner les fichiers JavaScript sera désactivé lors de l'utilisation de cette option, afin de garantir que les scripts sont chargés dans le bon ordre.
  • Tous les scripts qui sont présents dans le code HTML de la page seront retardés. Les scripts insérés après le chargement de la page, ou récupérés indirectement à partir d'un autre script, ne peuvent pas être retardés.

Mise à jour vers WP Rocket 3.9 à partir de versions précédentes / Nouvelles installations de WP Rocket

Lorsque vous effectuez une mise à jour à partir de la version 3.7 ou 3.8 avec Reporter l’execution JavaScript, ou lorsque vous activez la fonctionnalité dans WP Rocket 3.9, nous effectuons certaines exclusions automatiques pour préserver votre configuration actuelle et éviter des erreurs inattendues. Vous verrez les exclusions par défaut suivantes en place :

  • (?:wp-content|wp-includes)(.*) - pour exclure tous les fichiers JS internes
  • /jquery-?[0-9.]*(.min|.slim|.slim.min)?.js - pour exclure jQuery
  • js-(before|after) - pour exclure les scripts en ligne. Seuls les scripts en ligne qui sont ajoutés à l'aide de wp_add_inline_script() seront exclus.

Pour profiter pleinement de la version améliorée de cette option, supprimez ces exclusions et vérifiez votre site en étant déconnecté de WordPress.

Si cela pose des problèmes, ajoutez à nouveau les exclusions et contactez notre support.

Dépannage

Si un problème survient lors de l'utilisation de cette option, vous pouvez exclure des fichiers ou des scripts en ligne en ajoutant les URL des fichiers ou des mots-clés dans la zone de texte "Fichiers JavaScript exclus".

Exclusions par défaut

Pour résoudre rapidement les problèmes, supprimez toutes les exclusions existantes, ajoutez les exclusions par défaut et vérifiez si le problème est résolu :

(?:wp-content|wp-includes)(.*)
/jquery-?[0-9.]*(.min|.slim|.slim.min)?.js
js-(before|after)

Nous avons identifié que certains plugins/thèmes/services nécessitent l'exclusion de fichiers JavaScript en ligne spécifiques pour fonctionner. Vérifiez si vous utilisez l'un d'entre eux et excluez tous les fichiers mentionnés dans notre documentation :
Exclusions de compatibilité pour le report de l'exécution de JavaScript.

Si votre thème/plugin/service n'y figure pas notre article vous aidera à identifier l'erreur spécifique et pourra vous indiquer ce qui doit être exclu.

Choisissez un mot-clé ou une chaîne de texte unique dans le nom du fichier ou du script que vous devez exclure et saisissez-le dans le champ d'exclusion. Pour identifier les URL des fichiers originaux, assurez-vous que vous regardez la version non mise en cache de la page.

Problèmes courants

Lazyload pour les images

Certains thèmes fournissent leur propre version de la fonction lazyload pour les images. Ou vous pouvez utiliser un plugin tiers pour appliquer lazyload.
Lorsque la fonction Reporter l'exécution du JavaScript est activée, il se peut que les images ne s'affichent pas du tout ou que l'utilisateur doive interagir avec la page pour qu'elles deviennent visibles.

Dans ce cas, nous recommandons de . désactiver le LazyLoad du thème/du plugin et d'utiliser le lazyload de WP Rocket à la place.

Nous excluons automatiquement les fonctionnalités de lazyload de Smush et EWWW. Si vous utilisez l'un ou l'autre de ces plugins, vous n'avez pas besoin de désactiver leur lazyload.

Preloaders

Les préchargeurs - ou preloaders - sont une fonctionnalité que certains thèmes/plugins proposent pour masquer le contenu d'une page jusqu'à ce qu'il soit entièrement rendu - généralement, une icône de tourniquet/chargeur est affichée.

Avec la nouvelle version de Reporter l'exécution du JavaScript, le loader continuera à tourner jusqu'à ce qu'un utilisateur interagisse avec la page. Pour pouvoir retarder tous les fichiers, vous devrez désactiver le preloader dans votre thème.
C'est également mieux pour l'expérience utilisateur puisque les visiteurs pourront voir le contenu d'une page plus tôt.

Exemples

Exclure un fichier

/wp-content/plugins/gravityforms/js/gravityforms.min.js?ver=2.4.23

Pour cibler uniquement ce fichier, la formule suivante fonctionnera : 

gravityforms/js/gravityforms.min.js

Il est recommandé de supprimer le numéro de version afin que le fichier soit toujours exclu s'il est modifié. 

Les jokers peuvent être utilisés pour exclure plusieurs fichiers. Pour exclure tous les fichiers sous gravityforms/js/, vous pouvez utiliser : 

/wp-content/plugins/gravityforms/js/(.*).js

Exclure un script en ligne

Pour exclure un script en ligne, choisissez une chaîne de texte qui est unique à ce script.

 <script type="text/javascript">
        (function () {
            var c = document.body.className;
            c = c.replace(/woocommerce-no-js/, 'woocommerce-js');
            document.body.className = c;
        })()
    </script>

Dans cet exemple, /woocommerce-no-js/ est un bon choix, puisqu'il devrait être propre à ce script.

Exclure un script externe

Pour exclure un script externe, choisissez le nom du fichier plutôt que le nom du domaine.

 <script src="https://hb.vntsm.com/v3/live/ad-manager.min.js" type="text/javascript">

Dans cet exemple,  /ad-manager.min.js est la chaîne à cibler.  ;

La raison pour laquelle le nom du fichier doit être ciblé plutôt que le nom de domaine est que lorsque la fonction Minifier JavaScript est activée, et que le script n'est pas exclu, le nom du fichier minifié ne comportera pas le nom de domaine. Le fichier JavaScript ne sera donc pas exclu de la fonction Retarder l'exécution de JavaScript si le nom de domaine est la chaîne que vous ciblez.

Dans cet exemple, cibler  hb.vntsm.com ne fonctionnera pas.

Comment vérifier si le report fonctionne ?

Dans le gif ci-dessous, vous verrez qu'un seul fichier JavaScript est chargé initialement (wp-embed-min est automatiquement exclu de cette fonctionnalité).
Après avoir survolé la page, tous les autres fichiers JavaScript se chargent alors.

Notes techniques

  • Cette fonctionnalité n'est pas compatible avec IE 11. Les visiteurs utilisant IE11 seront redirigés vers une version non mise en cache de la page, avec la chaîne de requête ?nowprocket=1 ajoutée à l'URL.
    Ces URL apparaîtront dans les statistiques du site. Vous pouvez en savoir plus à ce sujet dans notre documentation
  • Sur tout Javascript, qu'il ait un attribut src ou non, un attribut type="rocketlazyloadscript" sera ajouté. Cette fausse valeur de type empêche le script d'être exécuté par le navigateur.
  • Si un script possède déjà une valeur de type, elle sera copiée dans un attribut data-rocket-type afin d'être préservée.
  • Le script ajoute un préchargement pour tous les scripts avec un attribut src, afin de s'assurer qu'ils sont prêts pour l'interaction de l'utilisateur.
  • Lors de l'interaction avec l'utilisateur, notre script de report supprime le faux type, ou le remplace par le type original, et le navigateur exécute tous les scripts.
  • Le script de report est construit de manière à préserver l'ordre et la priorité des scripts de la page, en tenant compte d'attributs comme defer et async.
  • Au fur et à mesure que nous découvrirons des conflits , nous tiendrons à jour une liste d'exclusions automatiques..
  • Le JavaScript sera exécuté lorsque l'une de ces interactions sera détectée :
    • keydown : l'événement est déclenché lorsqu'une touche est enfoncée.
    • mouseover: L'événement est déclenché sur un document (page) lorsqu'un dispositif de pointage (tel qu'une souris ou un trackpad) est utilisé pour déplacer le curseur sur celui-ci.
    • touchmove: l'événement est déclenché lorsqu'un ou plusieurs points de contact sont déplacés le long de la surface tactile.
    • touchstart: l'événement est déclenché lorsqu'un ou plusieurs points de contact sont placés sur la surface tactile.
Cela a-t-il répondu à votre question ? Merci pour votre retour :) Une erreur est survenue lors de l’envoi de votre retour. Veuillez réessayer plus tard.