Différer l'analyse de Javascript - 5 façons de le réparer et d'augmenter la vitesse (2024)

En tant que personne qui essaie de comprendre comment différer l'analyse de Javascript, nous pensons que vous avez un problème. Vous possédez ou avez visité le site Web de quelqu'un que vous connaissez (peut-être un client?) Et le chargement prend une éternité. Et lorsque vous l'avez exécuté via des outils de test de vitesse de site Web, vous avez reçu une recommandation que vous ne savez pas comment mettre en œuvre.

Dans cet article, nous allons partager plusieurs façons de différer Javascript et de corriger cet avertissement et, finalement, d'accélérer le chargement du site Web, sans lancer cette erreur!

Si vous manquez de temps, voici quelques actions rapides que vous pouvez effectuer:

Instructions pour différer l'analyse de JavaScript

1. Téléchargez le plugin Async ici.
2. Cliquez sur Plugins> Ajouter nouveau> Télécharger le plugin et sélectionnez le fichier que vous venez de télécharger.
3. Cliquez sur Activer du plugin installé.
4. Allez dans Plugins et cliquez sur Paramètres pour le plugin Async que vous venez d'installer.
5. En cliquant sur Activer le Javascript asynchrone, ou Appliquer Async comme deux des méthodes les plus courantes pour appliquer le correctif.
6. Testez votre site Web, pour voir que tout fonctionne toujours bien.

Pourquoi la procédure d'implémentation de l'analyse différée de Javascript est-elle importante? Si vous ne différez pas l'analyse de Javascript, votre site Web semblera se charger lentement. Javascript est essentiellement un élément constitutif important dans le langage du Web, il permet aux développeurs Web de créer des fonctionnalités «dynamiques».

Cependant, dans la plupart des cas, les fichiers Javascript ont tendance à devenir assez volumineux. Ils peuvent également provenir de serveurs tiers. Cela ralentit le téléchargement. Mais ce n'est que la moitié du problème.

Le plus gros problème est que s'il n'y a pas d'analyse différée de Javascript, le navigateur est BLOQUÉ d'afficher le contenu. Le site Web NE REND PAS. Et à quoi cela ressemble-t-il pour un utilisateur? Il semble que le site soit lent, cassé ou complètement mort. 

Le problème est aggravé sur les appareils mobiles, où la puissance de traitement disponible, ainsi que la bande passante disponible, rendent l'expérience encore pire.

Et que feront les utilisateurs qui bénéficieront d'une telle expérience? Ils rebondiront loin de votre site Web, pour ne jamais revenir!

Si vous êtes dans l'industrie du Web depuis un certain temps et que vous essayez d'améliorer le référencement de votre site Web, vous savez déjà que les performances du site Web sont crucial en améliorant la visibilité de votre moteur de recherche.

Et si vous avez utilisé Google PageSpeed ​​Insights pour vérifier votre site Web, en plus de "différer l'analyse de Javascript", il y a encore plus d'avertissements cryptiques, comme celui qui dit "Éliminer les ressources bloquant le rendu".

Ce truc technique semble avoir le plus grand impact sur votre vitesse de chargement! 

Éliminer?! Mais comment suis-je censé éliminer ces fichiers cruciaux de mon site Web?

Ne vous inquiétez pas, nous sommes là pour vous aider à corriger ces avertissements, à résoudre ces problèmes et, finalement, à accélérer le chargement de vos pages!

Parce que tu pas besoin de les supprimer. Tout ce que vous avez à faire est de différer l'analyse de JavaScript.

Regardez cette courte vidéo ci-dessous pour voir à quel point il est simple de différer l'analyse de Javascript en utilisant l'une des méthodes ci-dessous:

En non-geekspeak, cela signifie que vous devez modifier certaines choses dans votre WordPress, pour permettre à la page de laisser votre contenu se charger avant de charger ou d'analyser vos fichiers JavaScript. 

En effet, si vous ne différez pas l'analyse de Javascript, le rendu du site Web devient une opération très lourde, et comme nous l'avons dit ci-dessus, le site Web aura l'air d'être cassé.

Pour nous assurer que l'utilisateur reste sur le site, nous aimerions lui faire savoir que quelque chose se passe réellement et montrer le contenu à l'utilisateur, au lieu d'attendre que le navigateur fasse tout le travail avant de montrer quoi que ce soit à l'utilisateur. . 

Incidemment, si vous cherchez à rendre votre WordPress rapide, il existe quelques plugins tels que ici qui peut faire une réelle différence de performance en quelques minutes (avec peu ou pas d'effort).

Si vous êtes intéressé, WP Rocket pouvez configurer l'analyse différée de Javascript et de nombreux autres ajustements pour rendre votre site plus rapide, cliquez simplement sur la bannière ci-dessous pour le vérifier. 

Vous n'êtes pas prêt à utiliser un plugin pour le moment? Continuer à lire... 

Qu'est-ce que l'analyse différée de JavaScript?

Différer l'analyse de Javascript signifie utiliser "defer"Ou"async"pour éviter le blocage du rendu d'une page. Cette commande HTML demande au navigateur d'exécuter / d'analyser les scripts après (différer) ou de manière asynchrone (en parallèle) le chargement de la page. Cela permet au contenu de s'afficher sans attendre le chargement des scripts .

En configurant l'analyse différée de JavaScript, vous pourrez laisser votre contenu se charger plus rapidement et avec une priorité élevée.

Pourquoi est-ce ainsi ?

Voir ci-dessous cet excellent explicatif montrant comment les pages Web sont chargées et comment les fichiers JavaScript entravent considérablement le temps de chargement de votre site Web.

Poursuivant la vidéo ci-dessus, jetons un bref coup d'œil à ce qui se passe lorsque quelqu'un visite votre site Web: 

1. Lorsqu'un utilisateur clique sur un lien pointant vers votre site Web, le navigateur de l'utilisateur le demandera à votre serveur, que votre serveur «servira» ensuite au navigateur de votre utilisateur.
2. Le navigateur de l'utilisateur reçoit et voit alors le contenu HTML de votre page Web et commence à le rendre. Il commencera à créer votre page Web de haut en bas.
3. S'il trouve des fichiers JavaScript en cours de route, le navigateur s'arrêtera et les récupérera (s'il s'agit d'un fichier externe), puis l'analysera
4. Ce n'est qu'après avoir complètement récupéré et analysé chaque script qu'il continuera à charger le reste de votre contenu.

Vous commencez probablement déjà à voir où se situe le problème.

Lorsque vos pages contiennent beaucoup de fichiers JavaScript, cela peut avoir un impact négatif considérable sur le temps de chargement de votre site Web.

Le navigateur de votre utilisateur affichera en permanence l'icône de chargement ou le rouet lors de l'analyse et du chargement de vos scripts avant d'afficher votre contenu réel - cela est particulièrement visible sur les navigateurs mobiles ou les utilisateurs sur des connexions de données à faible vitesse.

Si cela prend plus de quelques secondes, surtout si vous servez vos scripts à partir d'un serveur externe (et que ce serveur a des problèmes en ce moment), vos visiteurs commenceront à être énervés.

Pendant ce temps, votre utilisateur ne voit rien d'autre qu'une page blanche et vierge. N'est-ce pas l'une des choses les plus frustrantes sur Internet? Tout est censé être instantané sur le web, pourquoi doivent-ils attendre que votre page se charge?

Si un utilisateur attend plus de 4 secondes, il commencera à devenir nerveux. Au-delà de 8 secondes et votre site Web est presque mort - l'utilisateur rebondira sur un autre site Web.

Vous avez perdu un visiteur et probablement son entreprise. 

La complication supplémentaire est que ces fichiers JS sont souvent ajoutés à votre site Web par des plugins et des thèmes essentiels que vous avez installés, vous ne pouvez donc pas vous en débarrasser facilement.

Alors, que faites-vous ?

Pour résoudre ce problème, vous devez différer l'analyse de JavaScript. Cela fonctionne en analysant vos scripts une fois que le contenu principal a été chargé. Consultez le visuel ci-dessous pour voir exactement l'impact sur le temps de chargement. Comme nous pouvons le voir, la commande defer force le navigateur à exécuter le Javascript plus tard, tandis que l'async permet aux choses de se produire en parallèle du téléchargement.

Par conséquent, lorsqu'un utilisateur visite votre site, votre navigateur continuera à tout analyser de haut en bas, mais ignorera vos fichiers JavaScript pour plus tard. De cette façon, vos utilisateurs pourront voir votre contenu immédiatement sans avoir à attendre. 

Si vous avez regardé la vidéo ci-dessus, vous avez vu que les attributs «asynchrone» et «différer» sont d'une grande utilité.

Mais comment feriez-vous cela dans WordPress? Aussi, quel est le bon moment pour les utiliser? Voyons voir et commençons!

Analysez votre site Web

Avant de commencer, vous devez savoir si vous devez implémenter le correctif de différer Javascript sur votre site ou non. Pour savoir si vous en avez besoin, vous pouvez utiliser plusieurs outils facilement disponibles en ligne.

Quelques exemples sont les suivants:

1. GTMetrix

Celui-ci fonctionne en vérifiant à la fois les métriques PageSpeed ​​et Yslow et vous donne un score de F à A. Ils vous donnent également des recommandations ainsi que des conseils sur la façon d'améliorer votre site Web en cas de problème. Il vous indiquera spécifiquement si vous devez différer l'analyse de JavaScript. 

En général, le score doit être d'au moins 71.

L'image ci-dessous montre un site Web qui n'a pas besoin d'être différé. 

2. Outils PageSpeed

un outil développé par Google, PageSpeed ​​Insights est un autre outil complet qui vous fournit des informations complètes sur les problèmes de performances de votre site ainsi que des conseils pour les résoudre, tout comme GTMetrix.

L'une des meilleures choses à propos de cet outil est qu'il comprend des liens vers des guides et des ressources détaillés pour vous aider à résoudre tous vos problèmes de performances. L'image ci-dessous montre un site Web qui a grandement besoin d'implémenter l'analyse différée de JavaScript.

3. Outils Pingdom 

Un autre outil de test de performance de site Web populaire qui est disponible gratuitement pour tout le monde.

Bien que cela ne semble pas vous dire explicitement si vous devez différer l'analyse de JavaScript, vous pouvez vérifier le temps qu'il a fallu pour que vos scripts se chargent grâce à leur page de résultats complète.

L'image ci-dessous montre un site Web dont près de la moitié de sa page est constituée de JavaScript - un excellent indicateur que vous voudrez peut-être différer vos scripts. 

4.  Vitesse de page Varvy 

Un autre excellent outil qui vous dira si votre site a des scripts de blocage de rendu.

Le mieux, c'est qu'il vous permet de savoir exactement ce qu'ils sont, comme dans l'image ci-dessous: 

Ok, cool!

Vous avez désormais accès à des outils qui peuvent vous aider à déterminer si vous devez implémenter une analyse différée des fichiers JavaScript.

Mais vous vous demandez peut-être pourquoi ne pas simplement le mettre en œuvre et le laisser tranquille? Si vous différez l'analyse de JavaScript de manière incorrecte, cela peut casser des choses et il peut être frustrant de le réparer si vous n'êtes pas un féru de technologie.

Le simple fait d'activer le mode différé ne signifie pas que tout est prêt à être oublié et fonctionnera correctement. Vous devrez vérifier si vous l'avez bien fait et vous assurer que tout fonctionne toujours comme prévu. 

Par exemple, si vous utilisez jQuery, vous devez choisir soigneusement lequel de vos scripts vous devez différer car il semble y avoir un problème avec defer et jQuery.

En plus de cela, vous constaterez qu'il y a des tonnes de questions sur Stack Overflow à propos de jQuery, async et defer, qui portent souvent sur la façon dont vous devez implémenter defer et async, si vous le souhaitez, à vos scripts qui reposent sur jQuery. 

Alors, quels sont les résultats? Avez-vous besoin de reporter vos scripts?

Si tel est le cas, découvrons maintenant comment différer JavaScript dans WordPress!

Comment différer l'analyse de JavaScript dans WordPress

Le report de l'analyse de JavaScript dans WordPress peut être assez simple.

Vous pouvez simplement installer l'un des milliers de plugins dans le référentiel WordPress et vous êtes prêt à partir. Mais il existe également des moyens avancés de le faire si vous avez besoin de plus de contrôle, en particulier si vous utilisez des scripts complexes pour rendre votre site plus attrayant et interactif. 

Dans cette section, nous allons vérifier cinq façons différentes d'effectuer une analyse différée de JavaScript dans WordPress: via des plugins, via functions.php et en éditant le code manuellement. 

Il y a tellement de plugins dans le référentiel WordPress qui peuvent vous aider à améliorer les performances de votre site Web.

Il y en a qui sont dédiés à une tâche particulière comme la réduction de votre code HTML et il existe des plugins qui essaient d'incorporer tous les ajustements liés aux performances dans un plugin, comme la possibilité de réduire et de différer les fichiers CSS et JavaScript, d'implémenter et d'exploiter la mise en cache du navigateur. (que nous avons couvert en détail dans cet article) Et plus.  

Cependant, tous les plugins ne sont pas créés égaux. Certains fonctionnent très bien, certains fonctionnent bien, d'autres ne fonctionnent pas du tout et peuvent même interrompre certaines ou toutes les fonctionnalités de votre site. 

(Si vous préférez que quelqu'un expérimenté gère cela pour vous, vous pouvez le faire en utilisant un concert Fiverr bon marché en cliquant sur le bouton ci-dessous.)

1. Différer l'analyse de Javascript à l'aide du plug-in Async

Honnêtement, nous vous suggérons fortement d'opter pour un plugin premium (qui est très bon marché), mais vous êtes assuré de résoudre non seulement cet avertissement, mais toute une série de problèmes de vitesse de chargement du site Web.

Nous allons commencer par l'un des plus populaires qui sont destinés à faire un seul travail défini par cet article.

L'un des choix les plus populaires pour effectuer ce travail est Async Javascript. Ce plugin se concentre sur l'amélioration des performances de votre site en modifiant la façon dont vos scripts sont chargés et comme WP Rocket ci-dessous, il est également livré avec des fonctionnalités avancées supplémentaires qui vous permettent d'exclure certains scripts du report.

Voici les étapes à suivre pour utiliser ce plugin.

1. Téléchargez le plugin Async ici.
2. Cliquez sur Plugins> Ajouter nouveau dans le backend WP.
3. Cliquez sur Télécharger le plugin et sélectionnez le fichier que vous venez de télécharger.
4. Vous pouvez également rechercher Async Javascript et cliquer sur Installer maintenant.
5. Cliquez sur Activer du plugin installé.
6. Allez dans Plugins et cliquez sur Paramètres pour le plugin Async que vous venez d'installer.
7. Nous suggérons de cliquer sur Activer le Javascript asynchrone, ou Appliquer Async comme deux des méthodes les plus courantes pour appliquer le correctif.
8. Si cela ne fonctionne pas, vous pouvez essayer différentes combinaisons.
9. Testez votre site Web, pour voir que tout fonctionne toujours bien.

L'un de ses points forts est peut-être qu'en plus de la possibilité d'exclure certains scripts du report, vous avez également la possibilité de choisir les scripts à différer à la place:

Vous pouvez également remarquer que vous avez la possibilité d’asynchroniser ou de différer un script. Pour plus d'informations sur la différence entre les deux, vous pouvez lire ceci article.

Une caractéristique unique de ce plugin est que vous pouvez spécifier d'exclure un certain thème ou plugin.

Il existe également une option pour intégrer GTMetrix sur votre site afin que vous puissiez toujours vérifier ses performances. Notez que chaque fois que vous effectuez un test, cependant, un crédit API sera déduit de votre compte GTMetrix.

Alors que certaines personnes recommanderont JavaScript différé WP, ce plugin n'a pas été mis à jour depuis plus de 3 ans et n'a pas été testé avec les 3 dernières versions majeures, nous vous recommandons donc fortement de ne pas utiliser celui-ci. Cela peut toujours fonctionner, mais il n'a pas été testé, c'est donc un risque que vous ne devriez pas prendre.

Si vous avez un site relativement simple et que vous cherchez à améliorer encore vos temps de chargement, alors c'est peut-être exactement ce dont vous avez besoin. Ce plugin ne nécessite aucune configuration - il suffit d'installer, d'activer et d'oublier.

Encore une fois, gardez à l'esprit que celui-ci n'est pas recommandé pour les sites complexes comme le commerce électronique en raison de son manque d'options de réglage avancées et en raison de son âge. Il est essentiel de pouvoir affiner les options de report JavaScript pour les sites volumineux et complexes.

2. WP Rocket

Actuellement, le plugin de performance WordPress leader sur le marché, WP Rocket offre non seulement la possibilité de différer l'analyse des fichiers JavaScript, mais également de vos fichiers CSS. En plus de cela, vous obtenez des tonnes d'autres options d'amélioration des performances.

Certaines fonctionnalités sont les suivantes: 

• Minification - réduit la taille du code de votre site afin qu'il se charge plus rapidement. Il le fait en supprimant les espaces blancs et autres caractères inutiles du code sans affecter ses fonctionnalités de base.
• Concaténation - combine plusieurs fichiers CSS et JavaScript en un seul.
• Chargement paresseux - c'est le mode différé pour les fichiers vidéo et autres contenus multimédias comme les images. Il retarde le chargement de ces fichiers gourmands en ressources jusqu'à ce que l'utilisateur y fasse défiler.

L'une des meilleures choses à propos de WP Rocket est qu'une fois que vous l'avez installé et activé, vous pouvez simplement le laisser seul et vous obtiendrez automatiquement des gains de performances.

Vous pouvez toutefois configurer des paramètres avancés pour améliorer encore les performances, mais gardez à l'esprit que certains d'entre eux peuvent avoir des effets négatifs sur votre site. C'est pourquoi leur option de report pour les fichiers JavaScript et CSS n'est pas activée par défaut, car si elle est effectuée sans précaution, elle peut casser des éléments.

Heureusement, vous pouvez exclure certains scripts du report.

Vous pouvez essayer d'exclure d'abord tous vos scripts, puis différer l'analyse des fichiers Javascript un par un jusqu'à ce que vous trouviez le problème. Ils ont documentation complète pour vous aider avec ça. De cette façon, vous serez en mesure de maximiser les améliorations de performances sans casser ou sacrifier une partie ou la totalité des fonctionnalités de votre site Web.

WP Rocket est un plugin premium, mais étant donné le prix et les fonctionnalités fournis (pas seulement le report et l'asynchronisation des fichiers JS, mais de nombreuses autres optimisations qui sont garantie pour rendre votre site Web plus rapide), nous pensons que cela vaut vraiment le prix.

Télécharger WP Rocket

3. Pack accélérateur de vitesse

Un autre excellent plugin de performance tout-en-un qui vous permet de différer l'analyse des fichiers Javascript est Pack accélérateur de vitesse. C'est similaire à WP Rocket en termes de fonctionnalités, mais c'est gratuit. Il possède la plupart des fonctionnalités de base de WP Rocket telles que la minification, le report, la suppression de fichiers inutiles, etc.

Ci-dessous, vous pouvez voir certaines des fonctionnalités disponibles dans le plugin: 

Sous l'onglet Avancé, vous pouvez choisir d'exclure certains scripts d'être déplacés vers le pied de page ou d'être différés ou les deux. Cependant, vous ne pouvez ajouter que 4 scripts exclus, ce qui est certainement une limitation pour les sites complexes et volumineux. 

Dans l'ensemble, c'est une bonne alternative gratuite à WP Rocket, adaptée aux petits sites.

4. Utilisation des ajustements de functions.php

Et si vous ne souhaitez pas utiliser de plugins?

Il y a une autre astuce que vous pouvez faire pour différer l'analyse de Javascript dans WordPress et c'est en éditant le fichier functions.php de votre thème.

Copiez simplement le code ci-dessous et collez-le au bas du fichier function.php de votre thème: 

function defer_parsing_of_javascript ( $url ) {
  if ( FALSE === strpos( $url, '.js' ) ) return $url;
  if ( strpos( $url, 'jquery.js' ) ) return $url;
    return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_javascript', 11, 1 ); 

Gardez à l'esprit que vous risquez de gâcher votre site si vous le faites mal, alors faites très attention et assurez-vous que vous modifiez le bon fichier dans le bon thème et que vous collez l'extrait de code au bon endroit. Assurez-vous de ne rien supprimer / modifier.

Heureusement, vous pouvez créer un thème enfant pour apporter des modifications sécurisées à votre fichier functions.php. En plus de cela, si vous remplacez ou mettez à jour votre thème, vous pouvez facilement conserver toutes vos modifications personnalisées dans le fichier. Voici un excellent article expliquant comment créer un thème enfant. Une fois que vous avez créé un thème enfant, collez simplement l'extrait de code dans le fichier function.php de l'enfant, enregistrez-le et tout est prêt.

Lire la suite: Le blocage des messages est actif

5. Ajustez votre code manuellement

Cela peut sembler effrayant, surtout si vous n'aimez pas le codage, mais pour les utilisateurs avancés, modifier le code manuellement est un excellent moyen de différer l'analyse des fichiers JavaScript dans WordPress. 

Varvy a un excellent extrait de code qui permet au contenu initial de votre page Web de se charger complètement avant de charger tout autre script externe. L'extrait de code est ci-dessous:

  function downloadJSAtOnload () {
    var element = document.createElement ("script");
    element.src = "//www.votredomaine.com/defer.js";
    document.body.appendChild (élément);
  }
  si (window.addEventListener)
    window.addEventListener ("load", downloadJSAtOnload, false);
  sinon si (window.attachEvent)
    window.attachEvent ("onload", downloadJSAtOnload);
  sinon window.onload = downloadJSAtOnload;

Remplacez defer.js par votre propre fichier de script. Une fois que vous l'avez modifié pour refléter votre propre script, collez-le juste avant votre code HTML étiqueter. Dans WordPress, vous pouvez le faire en éditant le fichier footer.php de votre thème.

Encore une fois, il est recommandé d'utiliser un thème enfant si vous deviez créer des modifications dans vos fichiers de thème. Une petite note: éditer footer.php via le thème enfant est différent de functions.php: vous devez copier l'intégralité du footer.php de votre thème principal avec son contenu dans votre thème enfant, puis effectuer / ajouter les modifications. 

Si vous ne voulez pas vous soucier de la modification de votre footer.php, vous pouvez utiliser un plugin appelé Insérer des en-têtes et des pieds de page. 

Collez simplement l'extrait de code dans la zone "Scripts dans le pied de page", appuyez sur Enregistrer et vous aurez le script ajouté dans la zone inférieure du code de votre site, au-dessus du étiqueter. 

Et c'est toutes les façons dont vous pouvez différer l'analyse de JavaScript dans WordPress! Mais fonctionnent-ils? Ont-ils amélioré les performances de votre site? Vérifions les résultats!

Tester les résultats

Pour tester les résultats, accédez à GTMetrix.com, PageSpeed ​​Insights et Pingdom Tools pour voir si votre note de performance et votre temps de chargement se sont améliorés.

Dans GTMetrix, votre score doit être d'au moins 71. Plus il y en a, mieux c'est! Un score parfait aimerait ceci :-) 

Dans PageSpeed ​​Insights, recherchez les «premières peintures»:

En règle générale, lorsque vous testez si votre implémentation de l'analyse différée de JavaScript a entraîné le report des scripts, visez des résultats verts dans First Contentful Paint et First Meaningful Paint.

Comparez avant et après le report et vérifiez s'ils s'améliorent.

Pour Pingdom Tools, jetez un œil dans la section Ordre de chargement et voyez si la plupart, sinon la totalité, de vos fichiers de script sont chargés en dernier. Comparez avant et après le report et regardez si les fichiers de script ont changé de position dans l'ordre de chargement (c'est-à-dire qu'ils se sont chargés plus tôt ou plus tard). 

Les résultats vous ont-ils satisfaits? Si oui, excellent travail! Sinon, essayez d'expérimenter davantage. Si vous avez utilisé d'autres méthodes de notre liste, essayez d'utiliser des plugins avancés qui vous permettent de personnaliser davantage vos options de report et de performance. En outre, consultez quelques recommandations de Google dans la section suivante. Ils pourraient vous aider.

Comment différer l'analyse de JavaScript à l'aide d'un script

Il existe différentes techniques que vous pouvez utiliser pour différer l'analyse de JavaScript. La section suivante explique ce que vous devez faire. 

En résumé, vous devez effectuer les opérations suivantes:

1. Copiez le code ci-dessous et ajoutez-le juste avant le balise dans votre HTML.
2. Remplacez example.js dans le code ci-dessous par le fichier contenant le script à différer.
3. Enregistrer les modifications
4. Testez votre site Web pour voir l'effet.

Examinons ces étapes plus en détail:

• Utilisez un script pour appeler un fichier JS externe une fois le chargement de la page initiale terminé. Sur varvy.com, Patrick Sexton propose une méthode qui permet au contenu du site de se charger, avant de charger un JS (pour s'assurer que l'utilisateur peut voir le contenu en premier). Cela garantit que le chemin de chargement critique n'est pas affecté par les scripts qui provoquent un blocage du rendu. La méthode implique la création d'un fichier externe qui n'est pas nécessaire pour afficher le contenu initialement. En ajoutant ensuite le script suivant juste avant le dans le HTML. L'exemple suivant utilise un fichier example.js, qui devra être mis à jour en conséquence. 

  <script type="text/javascript">
      function downloadJSAtOnload() {
          var element = document.createElement("script");
          element.src = "example.js";
          document.body.appendChild(element);
      }
      if (window.addEventListener)
          window.addEventListener("load", downloadJSAtOnload, false);
      else if (window.attachEvent)
          window.attachEvent("onload", downloadJSAtOnload);
      else window.onload = downloadJSAtOnload;
  </script>

  Une fois le chargement de la page Web terminé, le script commencera à télécharger et à s'exécuter exemple.js - le problème est que vous devrez créer le fichier manuellement.

• Utilisation des attributs async ou defer. La balise JS async or reporter Les attributs agissent de la même manière - leur fonctionnement est tel qu'ils minimisent le temps pendant lequel l'analyse HTML s'arrête pour attendre le téléchargement et l'exécution des scripts. Async permet au téléchargement de fichiers JS de se produire de manière asynchrone, plutôt que synchrone, c'est-à-dire qu'un nouveau thread est ouvert pour être téléchargé pendant que HTML continue à analyser. Defer indique au navigateur d'exécuter le script UNE FOIS le chargement de la page terminé. C'est une autre façon de permettre à l'analyse de la page de se terminer et donc de ne pas créer d'impact sur le temps de chargement. Ces deux balises minimisent le blocage du rendu de JS. Dans l'utilisation de ces deux éléments, le JS n'a pas besoin d'attendre la fin de l'analyse HTML avant de commencer à télécharger ou à exécuter - ce qui garantit que la page se charge toujours rapidement. Voyez comment l'exécution se produit pour async et différer respectivement dans les images ci-dessous.
  
  

• Déplacez JavaScript au bas de votre page. La troisième et dernière suggestion est de déplacer tout <script> les balises au bas des pages (surtout si elles ne sont pas critiques, comme les publicités). Cette méthode n'est pas idéale, car le navigateur sera toujours occupé jusqu'à ce que le dernier script soit complètement téléchargé et analysé. Étant donné que le navigateur semble occupé, certains visiteurs peuvent ne pas interagir avec la page tant qu'elle n'est pas complètement chargée, ce qui peut entraîner une expérience utilisateur potentiellement négative.

Suggestions de Google

Google dispose de tonnes de ressources pour améliorer les performances de votre site Web. Ils ont même une page dédiée à l'amélioration du temps de chargement des scripts de votre site, que vous pouvez vérifier ici.

Dans le menu de gauche, vous pouvez également trouver d'autres ressources qui vous aident à améliorer les performances de votre site. Assurez-vous également de les vérifier si votre rapport PageSpeed ​​Insights a signalé des problèmes liés à eux.

Pour un aperçu, Google suggère que vous devriez plutôt intégrer les scripts critiques et soit asynchroniser, soit différer les scripts non critiques. Cela signifie que les scripts requis par votre site doivent être intégrés dans le HTML à la place. C'est cependant le travail des développeurs de thèmes et d'extensions WordPress - mais si vous deviez créer votre thème ou plugin, gardez cela à l'esprit.

Lire la suite:  Comment embaucher (GRANDS) développeurs Javascript

En plus de cela, Google a également décrit un moyen pour vous d'identifier manuellement lequel de vos scripts bloque le rendu de votre page Web en ayant un temps de chargement très long. Vous pouvez le faire en utilisant les outils de développement de Chrome couverture languette.

Différer le CSS inutilisé

Un problème similaire que vous pourriez voir se produire ces jours-ci, également dans l'outil Pagespeed insights, est le Defer of Unused CSS. Bien qu'il s'agisse d'un problème similaire, ses racines sont quelque peu différentes. Essentiellement, le CSS aurait besoin d'être restructuré pour résoudre ce problème correctement.

{loadpostion imh-embed}

FAQ

Comment réparer l'analyse différée de JavaScript dans WordPress ?

Pour corriger l'analyse différée de Javascript dans WordPress, vous devez apporter quelques modifications mineures à votre code. Vous pouvez soit trouver tous les scripts et ajouter le reporter tag à eux, ou vous pouvez installer un plugin qui le fait automatiquement. Vous pouvez également créer un script qui charge les fichiers de manière asynchrone, comme illustré dans la section Comment différer l'analyse de Javascript à l'aide d'une section de script de cet article.

Qu'est-ce que le JavaScript différé ?

Différer l'analyse de Javascript est le processus consistant à demander au navigateur des visiteurs de votre site Web de charger des fichiers spécifiques APRÈS le chargement de la page. Cela permet à l'utilisateur de voir le contenu de la page beaucoup plus rapidement que si vous n'aviez pas implémenté l'analyse différée de Javascript.

Quelle est la différence entre async et defer Javascript ?

Async signifie que le contenu Javascript est chargé comme sa propre nouvelle connexion, en parallèle à tout autre code existant. Avec async, le navigateur crée un nouveau thread de traitement qui ne ralentira aucun téléchargement existant pendant le téléchargement et l'exécution du Javascript. Defer d'autre part, demande au navigateur d'analyser le script, une fois que le reste du contenu a été téléchargé. Bien que cela soit généralement bon pour la vitesse, il peut y avoir des problèmes avec votre contenu, s'il fait référence au script qui a été différé (car il ne sera pas disponible).

Comment minifier JavaScript dans WordPress ?

Pour minimiser Javascript dans WordPress, vous devrez implémenter un plugin qui le fait automatiquement. Vous pouvez en savoir plus à ce sujet ici. 

Récapitulation

Et vous venez de voir comment différer l'analyse de JavaScript dans WordPress.

Nous avons appris que cela peut être réalisé soit via des plugins, soit via des ajustements manuels. Il présente de nombreux avantages pour votre site, tels qu'un référencement amélioré, une meilleure expérience utilisateur et des temps de chargement plus rapides. Il est donc important de vous assurer de différer autant de scripts que possible pour des gains de performances maximum.

Mais rappelez-vous, gardez toujours une sauvegarde et testez beaucoup pour vous assurer que vous avez différé les bons scripts! Cela peut sembler fastidieux, mais si cela est bien fait, les avantages et les gains sont énormes.

Si vous voulez vraiment maximiser la vitesse de chargement de votre site Web, nous vous suggérons de laisser le soin aux PRO, tels que les gars de WP Rocket, de tirer le maximum d'avantages de cela et de centaines d'autres actions pour accélérer le chargement de votre site Web.

Visitez WP Rocket pour rendre votre site Web plus rapide aujourd'hui  

À propos de l’auteur

Auteur : David AttarSite Web : https://www.linkedin.com/in/dattard/Courriel : David@collectiveray.com

David travaille dans ou autour de l'industrie en ligne et numérique depuis 21 ans. Il possède une vaste expérience dans les secteurs des logiciels et de la conception Web utilisant WordPress, Joomla et les niches qui les entourent. Il a travaillé avec des agences de développement de logiciels, des éditeurs de logiciels internationaux, des agences de marketing locales et est désormais responsable des opérations marketing chez Aphex Media, une agence de référencement. En tant que consultant numérique, son objectif est d'aider les entreprises à obtenir un avantage concurrentiel en utilisant une combinaison de leur site Web et des plateformes numériques disponibles aujourd'hui. Son mélange d'expertise technologique combiné à un fort sens des affaires confère un avantage concurrentiel à ses écrits.