Reporter l’exécution du JavaScript

Vous voyez toujours l'audit Reduce unused JavaScript dans PageSpeed?

Il se peut que vous excluiez trop de scripts pour qu'ils soient reportés. Veuillez envisager de réduire les exclusions afin de donner la priorité à la performance en fonction de ce qui suit.

Reporter l’exécution du JavaScript est l'optimisation JavaScript la plus puissante dont dispose WP Rocket. Elle retarde l'exécution des scripts pour donner la priorité au rendu du site. Cet article contient des détails sur ce qu'elle fait, une section de dépannage et des notes techniques.

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
  • 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.
  • 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.

Remarque : la combinaison de JavaScript provenant d'autres plugins/thèmes doit être désactivée lors de l'utilisation de l'option Retarder l'exécution de JavaScript ; dans le cas contraire, des problèmes d'affichage pourraient survenir.

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".

Si un problème survient lors de l'utilisation de cette option, vous pouvez exclure des scripts de 2 façons :

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.
  • Le paramètre data-rocket-status sera ajouté aux fichiers inline et JavaScript. Leur valuer sera executed lorsque le script a été retardé et exécuté comme prévu, et sera failed lorsque le script n'a pas été exécuté pour une raison quelconque.
  • Dans Chrome et Safari, les scripts en ligne auront un attribut src="data:text/javascript;base64,..., utilisé pour accélérer le traitement du script après qu'il a été reporté.
  • 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. Les exclusions automatiques sont liées à des questions et sont différentes des exclusions en un clic que vous trouverez ici, qui sont facultatives.
  • 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.