Résoudre les problèmes liés à Reporter l’exécution JavaScript

Dans cet article, vous apprendrez comment identifier, différencier et résoudre les problèmes liés à l'option Reporter l’exécution du JavaScript, comment gérer les exclusions et quelques exemples.

Attention ! Il s'agit d'un document de niveau avancé destiné aux utilisateurs ou aux développeurs expérimentés.

Si vous avez besoin d'une aide supplémentaire ou si vous préférez simplement, vous pouvez contacter le support de WP Rocket.

Dans cet article

Premiers pas

Commencez par vous assurer que la fonction Reporter l'exécution JavaScript est bien celle qui pose problème.

Pour ce faire, le problème ne doit se produire que dans les circonstances suivantes :

  • Reporter l'exécution JavaScript est activée.

  • Toutes les autres fonctionnalités de l'onglet Optimisation des fichiers sont désactivées.

Ensuite, vous devez désactiver la fonction  Reporter l'exécution JavaScript et le problème devrait disparaître. Si c'est le cas, vous avez vérifié que l'exécution différée de JavaScript est l'option qui pose problème.

Note : Il est recommandé de corriger les erreurs préexistantes dans Developer Tools > ; Console, car elles peuvent interférer avec la fonctionnalité du site et, de ce fait, avec le processus de dépannage.

Une fois que vous avez confirmé que Reporter l'exécution JavaScript est à l'origine du problème, vous devez déterminer si le problème est uniquement d'ordre esthétique ou s'il affecte la fonctionnalité réelle du site Web.

Problèmes

Il peut y avoir des problèmes esthétiques, de mise en page ou de fonctionnalité, et des problèmes courants liés à cette option.

Problèmes purement esthétiques

En utilisant  Reporter l'exécution JavaScript, certains éléments peuvent n'apparaître qu'après un certain temps ou après une interaction de l'utilisateur. Si cela n'interfère pas avec le fonctionnement normal du site Web, on peut considérer qu'il s'agit d'un problème purement esthétique.

Pour ce type de problème, vous pouvez choisir de donner la priorité à l'expérience utilisateur ou aux performances, comme suit :

  • Expérience utilisateur : les visiteurs de votre site web bénéficieront d'une expérience utilisateur optimale.

    Afin d'offrir à vos visiteurs la meilleure ergonomie possible, vous devez trouver et exclure le ou les scripts concernés de Reporter l'exécution JavaScript, comme expliqué plus loin dans cet article. L'exclusion des fichiers entraînera une dégradation des performances.

  • Performance : les visiteurs de votre site web bénéficieront de la meilleure vitesse possible.

    Pour offrir à vos visiteurs la meilleure optimisation possible, vous ne devez pas exclure le ou les fichiers concernés de Reporter l'exécution JavaScript. Les visiteurs devront attendre un certain temps ou effectuer une interaction avant de pouvoir interagir ou voir les éléments spécifiques, avec une expérience utilisateur légèrement dégradée.

Problèmes de mise en page ou de fonctionnalité

Si un élément ne fonctionne pas correctement, même après un certain temps ou après une interaction avec l'utilisateur, il s'agit d'un problème de mise en page ou de fonctionnalité. Dans ce cas, vous devez exclure le(s) fichier(s) concerné(s) afin d'offrir à vos visiteurs une utilisation correcte du site.

Problèmes courants

Voici les problèmes courants que vous devez avoir à l'esprit :

  • Lazyload pour les images :

    Certains thèmes fournissent leur propre lazyload pour les images. Il se peut aussi que vous utilisiez un plugin tiers pour appliquer le lazyload.

    Lorsque la fonction Reporter l'exécution JavaScript est activée, les images peuvent ne pas s'afficher du tout ou nécessiter qu'un utilisateur interagisse avec la page pour qu'elles deviennent visibles.

    In such cases, we recommend disabling the theme or plugin lazyload feature and use WP Rocket's LazyLoad instead.
    We automatically exclude Smush and EWWW's lazyload features. If you are using either of these plugins, you don't need to disable their lazyload.
  • Preloaders :

    Les preloaders sont une option 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 spinner/chargeur est affichée.

    Avec Reporter l'exécution JavaScript, le chargeur continuera à tourner jusqu'à ce qu'un utilisateur interagisse avec la page. Pour pouvoir retarder tous les fichiers, vous devrez désactiver l'option de préchargement dans votre thème.

    L'expérience de l'utilisateur s'en trouve également améliorée, puisque les visiteurs pourront voir le contenu d'une page plus tôt.
  • Reporter l'exécution JavaScript ne fonctionne pas sur certaines pages :

    Dans de rares cas, l'analyse syntaxique d'un code HTML spécifique peut déclencher une erreur PHP PREG_BACKTRACK_LIMIT_ERROR. Lorsque ce type d'erreur a lieu, WP Rocket n'applique pas Delay JavaScript Execution à cette page.
    Comme solution de rechange, vous pouvez essayer d'augmenter la pcre.backtrack_limit, ou demander à votre hébergeur de l'augmenter pour vous.
  • Les liens doivent être cliqués deux fois sur iOS / Safari :

    Sur le navigateur Safari d'iOS, lorsque Reporter l'exécution JavaScript est activé, les liens doivent être cliqués deux fois pour qu'ils fonctionnent.

    L'option actuellement recommandée est de désactiver la fonction Reporter l'exécution JavaScript.

    Cependant, si vous êtes à l'aise avec le code, vous pouvez également essayer de modifier le script de report selon cette ou cette autre solution de secours. Veuillez noter que ces modifications seront supprimées à chaque fois que WP Rocket sera mis à jour.

Techniques pour résoudre les problèmes

Les techniques suivantes sont les plus utiles pour trouver les bons fichiers à exclure de Reporter l'exécution JavaScript.

Note : Certains problèmes peuvent vous obliger à utiliser la même technique plusieurs fois, ou à combiner des techniques.

Recherchez les exclusions documentées

Vous pouvez utiliser les exclusions disponibles dans l'article suivant :

Exclusions de compatibilité pour le report de l'exécution de JavaScript

L'article ci-dessus contient une liste de plugins, de thèmes ou de services qui présentaient des conflits d'esthétique et de fonctionnalité et les scripts respectifs à exclure de  Reporter l'exécution JavaScript.

Vérifiez la console

L'utilisation de la console vous montrera s'il y a une erreur JavaScript qui vous conduira à identifier le fichier affecté et ensuite, le bon fichier à exclure..

  1. Allez à l'URL où vous voyez le problème. Par exemple, https://exemple.com/.

  2. Ouvrez la console, dans les Outils pour développeurs, et recherchez les erreurs JavaScript. Ces erreurs mentionnent les scripts qui ont des problèmes et vous conduiront au bon fichier à exclure. Vous pouvez consulter cet article pour plus d'informations.

    Les erreurs les plus courantes à trouver sont Uncaught ReferenceError: example_code is not defined et Uncaught ReferenceError: example_code is not a function

    L'erreur ci-dessus signifie que la fonction ou la variable  example_code était requise, mais il n'était pas disponible, dans ce cas, en raison du retard de son exécution.

  3. Ouvrez un autre onglet et allez à la même URL avec ?nowprocket attaché à l'extrémité, en vue de contourner le cache et les optimisations de WP Rocket. Par exemple, https://exemple.com/?nowprocket
  4. Ouvrez la console dans cet onglet également, et ouvrez l'onglet Recherche, qui vous permet de rechercher du texte dans toutes les ressources chargées. Dans Chrome, vous pouvez cliquer sur les trois points à droite, comme le montre l'image ci-dessous :

    search tab

  5. Recherchez example_code dans le menu Search, cela listera tous les scripts qui utilisent et définissent example_code.

  6. Placez tous les fichiers énumérés dans le champ d'exclusion de l'option  Reporter l'exécution JavaScript, enregistrez les modifications et vérifiez si le problème a disparu.

Dans une étape supplémentaire, vous pouvez supprimer les fichiers exclus, un par un, en vérifiant que l'erreur ne réapparaît pas, afin d'affiner les exclusions.

Parfois, il y a d'autres fichiers qui dépendent des exclusions et de nouvelles erreurs de console peuvent apparaître. Dans ces cas, vous devez à nouveau utiliser la technique de la console.

Vérifiez le contexte

Vous pouvez également trouver des exclusions en vous concentrant sur le contexte.

L'idée avec cette technique est d'explorer et de trouver tous les scripts liés à la fonction affectée, et de trouver les exclusions requises plus rapidement.

Vous pouvez obtenir un indice en recherchant la classe qui est ajoutée dans l'élément. Généralement, le JavaScript utilisera cette classe pour fonctionner comme prévu.

Voici les étapes à suivre pour appliquer la technique du contexte :

  1. Allez à l'URL où vous voyez le problème. Ex. https://exemple.com/.
  2. Identifiez l'élément concerné. Par exemple, le menu hamburger mobile.
  3. Trouvez le marquage de l'élément dans le HTML avec l'une de ces deux options :
    • Cliquez avec le bouton droit de la souris sur l'élément pour ouvrir le menu contextuel et cliquez sur Inspecter l'élément.
    • Ouvrez l'onglet Éléments dans Outils de développement
  4. Identifiez la classe liée à l'élément, comme le montre l'image ci-dessous :

    identify the class

  5. Ouvrez un autre onglet et allez à la même URL avec ?nowprocket attaché à la fin. Ex. https://exemple.com/?nowprocket.
  6. Utilisez l'onglet Recherche pour trouver les scripts liés.
  7. Ajoutez tous les scripts listés dans le champ d'exclusion de Reporter l'exécution JavaScript, enregistrez les modifications et vérifiez si le problème a disparu.

Vous pouvez affiner les résultats en supprimant les fichiers exclus, un par un, en vérifiant à chaque fois le comportement du problème.

Processus d'élimination

Vous pouvez également trouver les bonnes exclusions en suivant un processus d'élimination, comme décrit dans l'article suivant :

Résoudre les problèmes avec la Minification / Combinaison CSS

Le tutoriel ci-dessus mentionne les CSS mais il peut également être appliqué à JavaScript.

Exclusions

Il existe différentes façons de traiter les exclusions de Reporter l'exécution JavaScript en fonction de leur nature.

Exclusions par défaut

Pour résoudre rapidement les problèmes, vous pouvez supprimer toutes les exclusions existantes, ajouter les exclusions par défaut suivantes, puis vérifier si le problème est résolu :

\/jquery(-migrate)?-?([0-9.]+)?(.min|.slim|.slim.min)?.js(\?(.*))?( |'|"|>)
js-(before|after)
(?:/wp-content/|/wp-includes/)(.*)

Les lignes ci-dessus excluront tous les scripts des dossiers /wp-content et /wp-includes, Le fichier jQuery et ses déclinaisons, ainsi que les scripts en ligne qui sont ajoutés par les thèmes/plugins à l'aide de la fonction wp_add_inline_script() de WordPress.

En d'autres termes, la majorité des scripts de votre site Web ne seront pas retardés et, par conséquent, les problèmes devraient disparaître.

Cela signifie également que votre site Web ne bénéficiera pas de la majeure partie de l'amélioration des performances attendue de Reporter l'exécution JavaScript.

Par conséquent, vous devez toujours affiner les exclusions avec les techniques décrites ci-dessus, ou avec l'aide de l'équipe de support.

Remarque : L'utilisation d'exclusions par défaut n'est pas recommandée. Il s'agit d'un dernier recours, dans les cas où la recherche d'exclusions devient trop complexe.

Patterns d'exclusion

Voici les principaux patterns que vous pouvez utiliser pour gérer les exclusions :

/plugins/(.*)
/themes/(.*)
/wp-includes/(.*)
/uploads/(.*)
/cache/min/(.*)
\(
\{

/plugins/(.*), /themes/(.*), /wp-includes/(.*), /uploads/(.*) et /cache/min/(.*) excluront tous les scripts dans les dossiers respectifs.

\( et \{ excluront tous les scripts inline.

Attention !

Certains patterns d'exclusions ne peuvent pas être traités et sont automatiquement supprimées. 
Si vous les ajoutez, vous devriez voir un message du type "WP Rocket : Les patterns suivants ne sont pas valides et ont été supprimés".

Veuillez consulter l’article : Patterns d'exclusion non valides

Exclusions de scripts externes

Pour exclure un script externe, vous devez utiliser le nom de fichier du script, et parfois, une partie du chemin d'accès. Évitez d'utiliser le domaine externe d'un script externe.

En effet, lorsque l'option Minifier les fichiers JavaScript est activée, le script est hébergé localement, sur votre serveur. Dans ce cas, le domaine figurant dans la liste des exclusions ne correspondra pas et le script ne sera pas exclu.

Exemple : Pour exclure le fichier ads.com/ads-folder/script.js, vous devriez entrer /ads-folder/script.js dans la boîte d’exclusion.

Exclusions par paires

Les exclusions suivantes doivent être additionnées, ce qui signifie que si vous excluez l'un des fichiers, l'autre doit également être exclu :

/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/jquery-migrate(.min)?.js

Exclusions spécifiques à une page

Il peut être utile d'exclure certains scripts mais uniquement pour les URLs affectées, au lieu de les exclure globalement.

Pour cela, veuillez utiliser le plugin d'aide comme décrit dans le guide suivant :

Exclure du JavaScript de l'option Reporter l'exécution JavaScript uniquement sur certaines URLs

Exemples

Vérifiez l'exemple de la console

Voici un exemple de l'application de la technique de la console, dans un problème avec le plugin WOOF - Products Filter for WooCommerce (WOOF) plugin.

Dans ce cas, les visiteurs ne peuvent pas filtrer les résultats de recherche des produits, donc, Reporter l’éxecution JavaScript affecte la fonctionnalité réelle de WOOF, et vous devez trouver une exclusion.

Après avoir effectué les premières étapes, voici les étapes à suivre pour utiliser la technique de la console :

  1. Allez à l'URL où le problème apparaît.
  2. Ouvrez la console et recherchez les éventuelles erreurs JavaScript :

    console errors
    Dans ce cas, woof_current_values et woof_autosubmit sont les fonctions touchées.

  3. Ouvrez un autre onglet et allez à la même URL avec ?nowprocket.
  4. Ouvrez la console dans cet onglet également, et ouvrez l'onglet Search.
  5. Entrez woof_current_values dans la barre de recherche, ce qui permettra de lister tous les scripts utilisant et définissant cette fonction. Dans ce cas, vous pouvez voir les fichiers listés comme indiqué ci-dessous :

    files in search results

    La même liste est présentée lors de la recherche de la fonction woof_autosubmit.

  6. Placez tous les fichiers listés dans le champ d’exclusion de l'option Reporter l’exécution JavaScript.

    files in the exclusions box

    Enregistrez les modifications et vérifiez si le problème a disparu.

  7. Le problème du filtre se produit toujours, et une nouvelle erreur est apparue dans la console, regardez :

    new error in console

  8. Suivez une procédure similaire à ce qui a été fait ci-dessus mais pour la fonction jQuery.

    Gardez à l'esprit que le fichier jQuery est lié à une exclusion jumelée avec le fichier jQuery Migrate.

    Ou, tout simplement, utilisez le guide "jQuery n'est pas défini".

  9. Comme il y a beaucoup de fichiers WOOF à exclure, vous devriez les fusionner pour éviter toute nouvelle erreur possible avec d'autres fichiers WOOF. Utilisez le caractère générique suivant :

    /woocommerce-products-filter/(.*)

    Cela exclura tout le JavaScript du dossier /woocommerce-products-filter/.

  10. Voilà les exclusions finales : 

    /jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/jquery-migrate(.min)?.js
/woocommerce-products-filter/(.*)

Exemple de vérification par contexte

Dans cet exemple, Reporter l’exécution JavaScript empêche de cliquer sur le menu mobile hamburger.

Afin de trouver les exclusions, vous devez suivre les étapes suivantes :

  1. Allez à l'URL où le problème apparaît.
  2. Identifiez l'élément de menu hamburger mobile, qui se trouve en haut à droite de la page.
  3. Trouvez la balise du menu hamburger dans le HTML avec Inspecter l'élément.
  4. Identifiez la classe liée au menu du hamburger. Dans ce cas, la classe est burger comme indiqué ci-dessous :

    burger class

  5. Ouvrez un autre onglet et allez à la même URL avec ?nowprocket.
  6. Ouvrez la console dans cet onglet également, et ouvrez l'onglet Search.
  7. Entrez burger dans la barre de recherche, ce qui permettra de lister tous les scripts utilisant et définissant cette classe CSS. Dans ce cas, vous pouvez voir les fichiers listés comme indiqué ci-dessous :

    search results for burger class

  8. Ajoutez le script /themes/V4/assets/js/scripts.min.js dans le champ d’exclusion de l'option Reporter l’exécution JavaScript, enregistrez les modifications et vérifiez si le problème a disparu.

Exemples de base

Exclusion d'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é.

Exclusion de plusieurs fichiers

L'exclusion de plusieurs fichiers peut se faire de deux manières. Pour exclure tous les fichiers sous /gravityforms/js/, utilisez l'un des moyens suivants :

1. La méthode d'exclusion détecte les mots-clés, pas seulement les chemins de fichiers, donc la méthode la plus simple est d'utiliser :

/wp-content/plugins/gravityforms/js/

2. Les wildcards peuvent également être utilisés :

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

Exclusion d'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 doit être propre à ce script.

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.

Articles en relation