Reporter l’exécution JavaScript

🚀 Disponible à partir de WP Rocket 3.7

Dans cette doc :

L’option Reporter l'exécution JavaScript améliore les performances en retardant le chargement des fichiers JavaScript jusqu'à ce qu'il y ait une interaction avec l'utilisateur (par exemple, faire défiler ou cliquer). Cette optimisation n'est appliquée que sur les pages mises en cache ou optimisées.

Reporter le JavaScript améliorera votre score de PageSpeed et le temps de chargement initial, mais c'est une option avancée et doit être utilisée avec précaution !

Lorsque vous activez l'option, vous verrez une liste pré-testée de fichiers JS qui sont automatiquement reportés. Voir la liste complète ici.

Il se peut que vous ne les utilisiez pas tous sur votre site. Pas de soucis, vous pouvez les laisser là, sauf si l'un d'entre eux pose un problème.

Si votre site utilise l'un de ces scripts, vous bénéficiez alors automatiquement de meilleures performances simplement en activant l'option.

Cliquer sur le bouton Restaurer la liste par défaut permet de restaurer cette liste au cas où vous l'auriez modifiée et voudriez revenir en arrière.

Comment ajouter d'autres scripts à reporter ?

ATTENTION ! Vous ne devriez reporter que les fichiers JS qui ne sont pas nécessaires à l’affichage de tout ce qui se trouve "au-dessus de la ligne de flottaison".

Les fichiers à reporter doivent être saisis avec les URLs originales, non optimisées. Vous devez donc vérifier votre page lorsque la mise en cache n'est pas active, ou en en contournant WP Rocket, pour obtenir les bonnes URLs.

Vous pouvez ajouter de nouveaux fichiers et scripts à reporter en ajoutant un mot-clé ou une chaîne de texte unique qui identifie le script. Le mot-clé peut être n'importe quelle chaîne de texte dans la balise de script. Essayez d'utiliser un modèle spécifique au script et non quelque chose qui pourrait être trouvé ailleurs sur la page.

Exemple

Pour reporter ce fichier :
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.js"></script>

Vous pouvez entrer l'URL complète : https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.js

Ou, une partie unique de celui-ci : bootstrap.js

Vous pouvez également saisir uniquement le domaine, mais assurez-vous de supprimer la partie HTTP :

Correct :  cdnjs.cloudflare.com

Incorrect : https://cdnjs.cloudflare.com

Les wildcards ne fonctionneront pas dans ce champ. 

Les scripts saisis seront automatiquement exclus des autres optimisations de fichiers.

Vérifiez votre site

Après avoir activé cette option, notamment après avoir personnalisé la liste des fichiers à afficher, assurez-vous que votre site fonctionne comme prévu.

  • Visitez votre site lorsque vous êtes déconnecté de WordPress, ou dans une fenêtre incognito pour vérifier que tout fonctionne correctement. 
  • Vérifiez la console de votre navigateur pour vous assurer qu'il n'y a pas de nouvelles erreurs JavaScript.

Quels scripts peuvent être reportés ?

Une façon de découvrir les éventuels candidats à reporter est de faire un test PageSpeed en contournant WP Rocket (ajoutez ?nowprocket à la fin de votre URL).

Vérifiez les fichiers mentionnés dans les recommandations suivantes pour les candidats éventuels :

  • Réduire le Délai d'exécution de JavaScript
  • Réduire au maximum l'utilisation de code tiers
  • Supprimer les ressources JS inutilisées

Le fait de reporter les fichiers mentionnés dans ces sections pourrait améliorer le score, mais cela ne signifie pas qu'ils peuvent être reportés sans risque.

Quels sont les scripts qui peuvent être reportés en toute sécurité ?

Il est difficile de prévoir avec une précision de 100 % si un fichier peut être reporté sans risque ou non. Vous devrez faire quelques essais... et erreurs.

Si vous reportez un fichier, vous devez également reporter tout script en ligne associé :

Testez avec le blocage de requête

Dans l'onglet Network de votre navigateur, il est possible de bloquer le chargement de n'importe quel fichier.

  • Filtrer la liste pour afficher les fichiers JavaScript
  • Faites un clic droit sur un fichier et choisissez Block URL (Firefox) ou Block Request URL (Chrome)
  • Rechargez la page
  • La partie visible de la page s'affiche-t-elle correctement et est-elle fonctionnelle ?
    • Si c'est le cas, le dossier devrait pouvoir être reporté sans risque.
    • Si ce n'est pas le cas, il ne doit pas être reporté.

Comment vérifier si les fichiers sont reportés ?

Lors du test, assurez-vous que votre souris ne reste pas sur la page lorsque vous la chargez - cela comptera comme une interaction !

Vous trouverez ci-dessous un rapide gif de démonstration. Attention :

  1. Le fichier que j'ai reporté est: /includes/js/scripts.js
  2. Gardez un œil sur l'onglet " Network " en bas de page. Lors du chargement initial de la page, scripts.js n'est pas chargé
  3. Lorsque ma souris (cherchez le cercle bleu en bas de l'écran) se déplace sur la page (c'est une interaction), le fichier scripts.js apparaît dans l'onglet Network.

Notes techniques

  • Si votre JavaScript utilise ces événements - window.onload ou DOMContentLoaded , il ne faut pas les reporter.
  • Si vous voyez une erreur de console function not defined après avoir reporté des scripts, cela signifie qu'il y a un problème comme un script dépendant qui doit également être reporté.
  • Scripts externes : dans le code source de la page, WP Rocket remplacera l'attribut src des scripts externes par notre attribut data unique data-rocketlazyloadscript
  • Scripts inline : WP Rocket va récupérer le JS en ligne et l'encoder avec le codage base64 puis mettre cette chaîne encodée dans l'attribut data data-rocketlazyloadscript
  • Nous utilisons ensuite le code JavaScript pour détecter l'interaction de l'utilisateur et remplaçons ensuite notre attribut data data-rocketlazyloadscript par src pour qu'il soit exécuté.
  • 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 le document (la page) lorsqu'un dispositif de pointage (comme 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 de contact.
    • touchstart : L'événement est déclenché lorsqu'un ou plusieurs points de contact sont placés sur la surface de contact.
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.