Comment différer l'analyse de JavaScript dans WordPress

Publié: 2021-07-22

Différer l'analyse de JavaScript dans WordPress

Votre site prend trop de temps à charger ? Peu importe que vous utilisiez un site WordPress ou autre, le temps de chargement élevé est un problème critique qui doit être résolu rapidement.

Alors, errez-vous de la même manière ? Eh bien, si vous vérifiez votre site personnellement, vous pouvez recevoir le message "Différer l'analyse de JavaScript dans WordPress". Cela semble compliqué et parfois incompréhensible car vous n'êtes pas féru de technologie.

Si vous suivez le message, vous constaterez donc une accélération de la vitesse de chargement des pages et jouerez un rôle important dans l'amélioration des conversions et des revenus du site.

Maintenant, la question est de savoir ce que signifie Différer l'analyse de JavaScript dans WordPress ?

Alors, voici une réponse rapide et courte. L'analyse différée de JavaScript dans WordPress permet au navigateur de charger d'abord le contenu du site Web sans lire les scripts pour terminer le téléchargement et améliorer le temps de chargement.

Ce processus simple est important car les navigateurs affichent et téléchargent le JavaScript à partir du serveur avant de charger le contenu du site Web. Cela entrave naturellement la vitesse du site Web et interrompt le temps de chargement.

Mais différer l'analyse de JavaScript dans WordPress est la clé pour déverrouiller le problème et vous pouvez profiter des performances du site Web sans attendre quelques minutes.

Cet article partagera les cinq techniques éprouvées pour différer JavaScript. Mais avant de sauter sur les solutions, il faut comprendre la signification réelle de ce message contextuel.

Alors, sans plus tarder, commençons !

Que signifie Différer l'analyse de JavaScript dans WordPress ?

Savez-vous comment les navigateurs rendent la page Web ? Si ce n'est pas le cas, il faut d'abord comprendre cela.

Lorsque votre navigateur reçoit une demande de l'utilisateur, il l'envoie au serveur Web et la page commence à se télécharger au format HTML. Ce document HTML comprend du texte et du code qui restitue les éléments DOM et différentes ressources telles que des images, des scripts et des feuilles de style.

Cependant, le navigateur télécharge les ressources dans l'ordre. Mais le rendu de la page reprend à nouveau tous les processus et offre des effets néfastes sur le temps de chargement. Même cela entrave parfois le processus et affiche le message - La page ne peut pas être téléchargée ou affiche une erreur de serveur.

Chaque fois que le navigateur passe par le code pour rendre le site Web ou les pages, il arrête le rendu si JavaScript s'y trouve. Ce processus est interrompu jusqu'à ce qu'il ne puisse pas récupérer et analyser le script. De plus, cela a un impact négatif sur la vitesse de votre site Web.

Mais avec l'aide de Différer l'analyse de JavaScript dans WordPress, cela aide à notifier au navigateur de télécharger la page ou le contenu principal de votre site et offre un chargement rapide. À ce stade, les utilisateurs peuvent trouver le site Web.

Pourquoi avez-vous besoin de différer l'analyse de JavaScript dans WordPress ?

Si votre site Web prend trop de temps à se charger, il faut augmenter ses performances par crochet et escroc. Si vous n'êtes pas au courant des performances du site Web, exécutez le test sur place en utilisant les meilleurs outils tels que GT Metrix, Google Pagespeed Insights ou WPEngine.

Ce sont des tests d'outils rapides qui suggèrent et vous proposent souvent de différer l'analyse de JavaScript lorsque vous analysez le site. Par exemple, essayons avec GT Metrix.

Dans le GTMetrix, vous trouverez la note de votre site sur chaque page et des scripts spécifiques qui doivent être améliorés dès que possible. Pour utiliser cet outil, on peut entrer l'URL du site Web et attendre les minutes, afin qu'il puisse récupérer toutes les données.

Une fois qu'il est terminé, passez à l'onglet Vitesse de la page et améliorez votre vitesse de chargement et développez la section Différer l'analyse de JavaScript.

Vous trouverez ici la liste des scripts de chargement qui se chargent pendant le processus de rendu. Alors lisez bien tout.

Attributs asynchrones VS différés

Ceci est important pour s'assurer que le téléchargement d'un script n'interagit pas avec le rendu de la page Web. Ainsi, les deux méthodes pour ce faire sont Async et différé.

Si vous souhaitez commencer avec Async, vous devez ajouter la balise de script suivante.

Avec cela, votre navigateur reçoit une mise à jour indiquant que le navigateur doit charger le script de manière asynchrone. Pour être précis, le navigateur télécharge ses ressources dès qu'il rencontre le code, mais il analyse le code HTML pendant que la ressource est encore en cours de téléchargement.
Alors que d'autre part, vous pouvez choisir la deuxième méthode Différer l'attribut. Alors, ajoutez le script donné.

Avec cette balise, vous indiquerez à votre navigateur de ne pas télécharger les ressources tant qu'il n'aura pas terminé l'analyse de la page Web. Une fois le processus terminé, il télécharge les scripts différés sur lesquels il est tombé plus tôt.

La principale différence que vous êtes sur le point de vérifier lorsque les deux ressources sont téléchargées. Pour une meilleure utilisation des deux, il convient de vérifier l'application Web.

Si votre application Web est compacte, il faut opter pour le différé tandis que si vous avez peu de scripts, Async est le meilleur. Eh bien, vous ne trouverez aucune différence dans les deux, mais la vérité est que le report est pour les gros fichiers et Async est pour les petits.

Pour mieux connaître la différence entre Async et différer, nous avons partagé un exemple. Continuer à lire.

Supposons que vous ayez deux scripts java JS1 et JS2. Et il y a une condition selon laquelle JS2 apparaît dans le code après JS1, ce qui signifie que JS2 dépend de JS1, mais qu'il est plus grand que JS2.

Si vous utilisez Async, il est possible que JS2 puisse terminer son téléchargement avant JS1. Cela peut conduire à une erreur car JS2 est exécuté en l'absence de JS1

Et si vous utilisez différer, les scripts JS1 et JS2 se téléchargent avec succès et ne provoquent aucune erreur.

Différer est donc préférable pour charger des scripts et améliorer la vitesse ou le temps de chargement du site Web.

Raisons pour lesquelles vous devez différer l'analyse de JavaScript

Comme nous l'avons dit précédemment, si vous souhaitez vous classer sur la première page de Google, vous devez avoir une vitesse de chargement de la page Web élevée. Environ, une page devrait être chargée en 2-3 secondes. Malheureusement, JavaScript rend la qualité de la page et vous perdez beaucoup de trafic.

Retarder le chargement d'une page peut affecter votre site Web de plusieurs façons. Heureusement, différer l'analyse de JavaScript peut vous aider à résoudre ce problème. Jetez un coup d'œil et vérifiez les raisons pour lesquelles cela peut vous aider.

Augmenter les classements de recherche

Chaque fois que Google évalue les performances de votre site Web pour le classement de recherche, le facteur le plus important que Google vérifie est le temps de chargement du site. Si votre site Web se charge plus rapidement, il apparaît naturellement sur la première page des résultats de recherche.

Selon la recherche, nous avons constaté que 1 personne sur 2 attend que le site Web se charge, sinon elle passe à la deuxième source. De plus, Google favorisera uniquement les sites Web qui ne dérangeront pas leurs lecteurs et leur offriront la meilleure expérience utilisateur.

Et si votre site Web prend plus de 4 secondes pour se charger, cela a un impact négatif sur les performances de votre site Web. Il est donc important de travailler sur JavaScript. Et différer n'est que le moyen intelligent d'augmenter la vitesse du site de normal à super.

Pour de meilleurs résultats, il faut suivre les techniques de référencement pour booster votre contenu et optimiser la vitesse de la page.

Augmenter le taux de conversion

Une autre raison majeure pour laquelle votre site Web doit différer si vous souhaitez améliorer le taux de conversion. Si le site Web se charge lentement, il y a des chances que vos clients rebondissent vers les autres sources et que vous perdiez du trafic et des ventes.

Les utilisateurs sont pressés, ils adorent souvent suivre le site qui leur montre des informations rapides. Et si le site est lent, cela sera frustrant pour eux et ils pourraient ne plus visiter votre page. Peu importe le site ou le blog sur lequel vous travaillez.

Votre travail consiste à offrir le meilleur à vos utilisateurs. La recherche sur le Hubspot révèle que les temps de chargement du site Web diminuent souvent le taux de conversion de 7%. Avec la technique de différer l'analyse de JavaScript dans WordPress, vous pouvez augmenter la vitesse de votre site plus rapidement, ce qui améliore encore le taux de conversion.

Meilleure expérience utilisateur

Nous ne pensons pas que vous ayez besoin d'une explication pour cette raison. Il est assez naturel que si la vitesse de votre site soit bonne et que les utilisateurs apprécient le contenu de votre site, vous pouvez vous attendre à ce que vos visiteurs soient satisfaits du site.

Et si votre site prend plus de temps à se charger que d'habitude, les utilisateurs laisseront tomber votre site et cela améliorera le taux de rebond.

Avec l'analyse différée de JavaScript dans WordPress, vous pouvez mettre à jour les fichiers Java qui vous aident facilement à charger rapidement le contenu principal du site Web. Ce schéma de chargement rapide vous aide à accélérer le site Web, ce qui améliore l'expérience de l'utilisateur.

Les cinq méthodes différentes pour différer l'analyse de JavaScript dans WordPress

Nous sommes maintenant arrivés à notre section principale de l'article. Ici, vous apprendrez les cinq techniques brillantes qui vous aideront à accélérer le site, à offrir la meilleure expérience utilisateur et à vous donner un itinéraire pour vous classer sur le premier.

Alors, découvrons les méthodes.

Pour différer l'analyse de JavaScript, les trois routes importantes que vous pouvez choisir sont le plugin, la méthode varvy et le fichier functions.php. Avec ces itinéraires, vous pouvez appliquer les cinq méthodes données.

Méthode 1 - Utilisation du plugin JavaScript asynchrone gratuit

Dans WordPress, Async JavaScript est un plugin gratuit qui aide à éradiquer le JavaScript bloquant le rendu dans le chargement du contenu.

Avec ce plugin, vous pouvez profiter du contrôle total sur les scripts java et Async ou différer peut facilement contribuer à augmenter la vitesse du site et à améliorer ses performances dans les pages de recherche. Cependant, il y a quelques suggestions que vous devrez suivre en choisissant Async et différer.

Async peut télécharger JavaScript lors de l'analyse des fichiers HTML, mais interrompt ensuite l'analyse HTML pour exécuter les fichiers JavaScript.
Defer peut télécharger les fichiers JavaScript lors de l'analyse des fichiers HTML, mais attend pour exécuter les fichiers après la fin de l'analyse HTML.

Passons maintenant à un guide étape par étape pour différer l'analyse de JavaScript dans WordPress à l'aide du plugin Async.

Ouvrez le tableau de bord WordPress et accédez à l'onglet plugins.
Dans l'onglet du plugin, cliquez sur le bouton Ajouter un nouveau et recherchez le plugin Async JavaScript.
Lorsque vous trouvez le plugin, cliquez sur le bouton d'installation et activez-le.
Ainsi, lorsque l'installation est terminée, accédez aux paramètres et effectuez les modifications requises.
Cochez l'option Activer JavaScript asynchrone et choisissez Différer comme JavaScript asynchrone.
Pour les fonctionnalités avancées, cochez et choisissez parmi le script que vous souhaitez appliquer - Balises asynchrones et différées.
Ici, vous pouvez choisir les scripts que vous souhaitez inclure et exclure. De plus, vous pouvez également choisir les plugins et les thèmes que vous souhaitez exclure de toute modification apportée par Async JavaScript Plugin.
Une fois les modifications terminées, enregistrez les modifications

Méthode 2 : Utiliser le plugin WP Rocket

Si vous n'avez jamais entendu parler du plugin WP rocket auparavant, saisissez-le maintenant. WP Rocket est l'un des plugins les plus à la mode qui peut aider votre site Web à se charger rapidement en quelques secondes.

De plus, avec ce plugin, vous pouvez recevoir la mise en cache des pages, le préchargement du cache, la compression et de nombreuses autres fonctionnalités intéressantes.

D'un autre côté, le plugin vous aide également à différer l'analyse de JavaScript dans l'onglet d'optimisation des fichiers.

Voici comment vous pouvez installer et utiliser le plugin.

Ouvrez le tableau de bord WordPress et redirigez vers l'onglet plugin
Cliquez maintenant sur le bouton Ajouter un nouveau et recherchez le plug-in de fusée WP.
Appuyez sur installer et activez le plugin.
Ensuite, allez dans les paramètres et ouvrez l'optimisation du fichier dans le menu pour commencer.
Maintenant, faites défiler les fichiers JavaScript et cochez l'option de chargement différé JavaScript et activez le mode sans échec pour Query.
Lorsque l'ensemble du processus est terminé, allez à la fin de la page et cliquez sur l'option d'enregistrement des modifications.

Méthode 3 : Utilisation du plugin W3 Total Cache

W3 Total Cache est un autre meilleur plugin que vous pouvez utiliser pour différer l'analyse de JavaScript dans WordPress. Ce plugin WordPress est simplement utile pour améliorer l'expérience utilisateur et le référencement de votre site Web. De plus, il améliore les performances du site Web et réduit le temps de chargement en tirant parti du CDN (intégration de la livraison de contenu).

Le cache total W3 est très efficace et sûr à utiliser. De plus, vous pouvez utiliser ce plugin pour différer l'analyse de JavaScript dans WordPress. Voici comment vous pouvez utiliser ce plugin.

Visitez d'abord le tableau de bord WordPress et sautez sur la page des plugins.
Ensuite, ajoutez un nouveau bouton et recherchez le plugin W3 Total Cache Plugin.
Une fois le plugin trouvé, cliquez sur le bouton installer et activer.
Le plugin est maintenant installé. Accédez aux performances et aux paramètres généraux de WordPress.
Ensuite, faites défiler le tableau de bord et accédez à la section minify et cochez l'option d'activation.
De plus, vous pouvez cocher l'option manuelle à partir du mode minify et cliquer sur l'option de sauvegarde pour continuer.

Minifier le code
Dirigez-vous vers l'onglet performances et choisissez l'onglet minify dans la barre latérale gauche et faites défiler jusqu'à l'en-tête JS, vous pouvez y rechercher la section opérations et zone avec deux balises HTML.

Réduire les options de paramètres
Choisissez le non bloquant à l'aide de l'option de report et intégrez le type de code avant étiqueter.

Paramètres de minification JS

Dans les paramètres, vous pouvez voir la gestion des fichiers JS où vous devez sélectionner le thème WordPress.
Cliquez ensuite sur l'option Ajouter un script pour inclure l'URL de JavaScript que vous souhaitez analyser.
Vous pouvez ajouter autant d'URL que vous le souhaitez en appuyant sur le bouton Ajouter un script.
Une fois les modifications terminées, cliquez sur le bouton Enregistrer les paramètres et sur le bouton Caches purs pour continuer.
Une fois cela fait, faites défiler la section CSS.
Cliquez maintenant sur le bouton Ajouter une feuille de style.
Ensuite dans la gestion des fichiers CSS insérez les URL des feuilles de style.
Vous pouvez en ajouter plusieurs en fonction des suggestions qui vous sont fournies par les outils de surveillance.
Maintenant que vous avez terminé les modifications, enregistrez les paramètres et le bouton des caches purs.

Méthode 4 : Utilisation de la méthode recommandée de Vary

Une autre meilleure méthode que vous pouvez opter pour Différer l'analyse de JavaScript dans WordPress est de choisir le Vary, cela utilise un script pour appeler le fichier JavaScript externe une fois la page initiale chargée.

Cela signifie que les navigateurs ne téléchargent pas ou n'exécutent pas le JavaScript tant que la page Web n'est pas chargée. Cependant, cette méthode est suggérée par Patrick Sexton.

Pour utiliser cette méthode, vous pouvez modifier l'extrait de code fourni par varvy, puis l'ajouter à l'éditeur de thème sous la section body.

Voici donc le code que vous pouvez ajouter dans la partie corps de votre thème pour différer l'analyse de JavaScript dans WordPress.

<Type de script= "texte/javascript">
Fonction downloadSAtOnload() {
élément var = document.createElement ("Script");
element.src = "différer .js" ; document.body.appendChild (élément);
}
Si
(window.addEventListener) window.addEventListener (“charger' ,
downloadJSAtOnload , faux);
sinon si
(window.attachEvent)
Window.attachEvent ("onload", downloadJSAtonlaod ;
</script>

Tout en faisant cela, assurez-vous d'avoir remplacé le defer.Js par le nom du fichier JavaScript externe. Puis après utiliser le Wp_footer pour injecter le code via le fichier functions.php du thème enfant.

Voici le code que vous devez utiliser.

/**
Différer l'analyse de JavaScript avec l'extrait de code de Varvy
*/
Add_action ('wp_footer' , 'my_footer_scripts');
Une fonction
Mes_scripts_de_pied_de_page(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}

Nous passons maintenant à notre guide étape par étape pour le sens clair.

Accédez à votre tableau de bord WordPress et passez à l'apparence puis à l'éditeur de thème.
Naviguez dans le fichier header.php puis collez le code mentionné ci-dessus après et avant la section body.
Cliquez ensuite sur l'option de fichier de mise à jour.

Méthode 5- Utilisation du fichier functions.php

Si vous oubliez, laissez-nous vous rappeler que vous ne pouvez pas ajouter de scripts directement à WordPress via HTML. Au lieu de cela, vous devez utiliser les fonctions WordPress intégrées pour demander les ressources et également sauvegarder votre site.

Vous devez utiliser l'attribut defer pour les fichiers JavaScript en ajoutant l'extrait de code à votre fichier functions.php.

Pour terminer le processus, ouvrez l'éditeur de thème et accédez au fichier functions.php pour ajouter le code donné.

Une fonction
Defer_parsing_of_js ( $url ) {
Si (
L'utilisateur_ est_ connecté_in() )
Retourne $url ; // ne cassez pas WP Admin
Si ( FAUX ===
Strops( $url, '.js' ) )
Retourne $url ;
If ( strops ($url, 'jquery.js' ) ) return $url;
Return str_replace( ' src', ' defer src', $url);
}

Ajouter_filtre (
'script_loader_tag',
'defer_parsing_of_js' , 10
);

Ce code aide WordPress à ajouter l'attribut defer aux fichiers JavaScript à l'exception de JQuery.

Voici le code que vous pouvez utiliser pour synchroniser les attributs différés avec vos fichiers JavaScript via le fichier functions.php.

Add_filter ('script _loader_tag ',
'add_defer_tags_to_scripts');
 
Une fonction
add_defer_tags_to_scripts ($tyag) {
#liste des scripts à ajouter attribués à $scripts_to_defer = array ('script_a', script_b');
$scripts_to_async = tableau ('script _c', 'script_d');
#ajouter les balises defer au tableau scripts_to_defer
Foreach ( $scripts_to_defer as $current_script) {
Si (true == strops ($tag,
$script_actuel) )
Retour
Str_replace ('src,'defer=”defer” src','$tag);
}
#ajoutez les balises asynchrones au tableau scripts_to_async
Foreach ( $scripts_to_async as $current_script) {
Si (true == strops ($tag,
$script_actuel) )
Retourner
Str_replace ('src,'defer="
Async="async" src', $tag);

}
Retourne $tag ;
)

N'oubliez pas que vous devez mettre en file d'attente chaque code, de sorte qu'il faut ajouter le code suivant.

Add_action ('wp_enqueue_scripts',
'enqueue_custom_js');
Une fonction
Mettre en file d'attente_ custom_js () {
Wp_enqueue_script ('script_a',
Get_stylesheet_directory_uri (), '/script_a.js') ;
Wp_enqueue_script ('script_b',
Get_stylesheet_directory_uri (), '/script_b.js') ;
Wp_enqueue_script ('script_c',
Get_stylesheet_directory_uri (), '/script_\c.js') ;
Wp_enqueue_script ('script_ds',
Get_stylesheet_directory_uri (), '/script_d.js') ;
}

Lorsque vous avez mis à jour tous les codes dans le fichier functions.php, mettez à jour le fichier et voyez les modifications. Voici un guide étape par étape pour mettre à jour le fichier.

Ouvrez le tableau de bord WordPress et passez à l'apparence puis à l'éditeur de thème.
Naviguez dans le fichier functions.php puis collez les codes mentionnés ci-dessus.
Cliquez ensuite sur l'option de fichier de mise à jour.

Les plugins alternatifs pour différer l'analyse de JavaScript dans WordPress

Outre Async et Defer, vous disposez de deux autres options de plugins Defer Parsing of JavaScript dans WordPress.

Pack booster de vitesse

C'est encore un autre meilleur plugin WordPress que vous pouvez utiliser pour améliorer facilement la vitesse du site Web et l'optimiser pour les utilisateurs. Faites-nous savoir ses avantages et ses inconvénients.

Avantages:

Il est simple et facile à utiliser par n'importe qui grâce à son interface utilisateur interactive.
Cela aide à l'optimisation JavaScript, au chargement médiocre et à l'intégration CDN.
Cela sera régulièrement mis à jour et éliminera la menace de bogues

Les inconvénients:

Cela pourrait créer des problèmes lors de l'utilisation d'autres plugins.

JavaScript asynchrone

Ce plugin permet le chargement facile de tous les scripts java ajoutés en tant que wp_enqueue_script() à l'aide de LABJS. Faites-nous savoir ses avantages et ses inconvénients.

Avantages:

Il est très facile à utiliser le plugin
Il est le plus populaire sur le marché des plugins
Conçu pour différer l'analyse de JavaScript dans WordPress

Les inconvénients:

Mises à jour irrégulières
Peut-être incompatible avec les nouvelles versions de WordPress
Peut causer des problèmes à d'autres plugins

Questions fréquemment posées

Que voulez-vous dire par différer l'analyse?

L'analyse différée est l'état dans lequel vos fichiers JavaScript se chargent après le contenu du site Web dans le navigateur. Cela signifie que le report ne participera pas au chargement et au rendu.

Ainsi, lorsqu'un utilisateur demande votre site Web dans le navigateur, l'analyse JavaScript différée n'attend pas pour charger JavaScript dans le navigateur et affiche le contenu immédiatement. En termes simples, votre contenu s'affiche en premier, puis est chargé.

Comment supprimer le blocage de rendu du site Web WordPress ?

L'une des approches efficaces pour supprimer le blocage de rendu du site Web consiste à différer l'analyse avant les autres éléments du site Web. Une autre méthode pour minimiser le rendu consiste à concaténer à la fois JS et CSS.

Quels outils puis-je utiliser pour identifier les JS non critiques sur mon site ?

Pour déterminer si JavaScript critique ou non votre site Web, vous pouvez accéder aux outils suivants.

Informations Google PageSpeed : cela vous aidera à identifier les principaux points faibles de la vitesse et des performances de votre site Web. De plus, cet outil propose également quelques suggestions pour améliorer les performances et le temps de chargement de votre site.
Avec cela, votre site recevra des scores de différentes couleurs telles que le rouge, l'orange et le vert. Le rouge montrera de faibles performances, de même que l'orange révélera la moyenne et le vert pour de bon.
Test de vitesse du site Web Pingdom : c'est encore un autre outil populaire pour suivre et surveiller les performances. Avec cet outil, vous pouvez tester les performances de votre site Web dans sept endroits différents.
De plus, cet outil propose également des suggestions pour améliorer la vitesse de la page afin que vous puissiez profiter de la meilleure vitesse et des meilleures performances du site Web.

Pouvez-vous différer l'analyse de JavaScript dans WordPress via le plugin Auto Optimize ?

Avec l'outil d'optimisation automatique, vous pouvez facilement différer l'analyse de JavaScript. Pour assurer le processus, il faut installer et activer le plugin comme d'habitude. Une fois le plugin installé et activé, visitez les paramètres et optez pour l'option JS, CSS et HTML.

Optimisez maintenant l'option de code JavaScript et vous débloquerez les options. Cochez maintenant les fichiers JS agrégés et laissez les autres.

De plus, le plugin vous permet d'exclure le JavaScript que vous ne souhaitez pas afficher. Une fois les modifications effectuées, cliquez sur le bouton Enregistrer.

Emballer
Pour optimiser votre site Web et réduire le temps de chargement, différer l'analyse de JavaScript dans WordPress est important.

Nous espérons qu'avec cet article, vous avez compris la signification de l'analyse des cerfs et comment cela peut aider votre site Web à se classer en haut des pages de recherche. Bonne chance!