La vitesse de la page est une mesure critique des performances de votre site Web. La vitesse de la page est le temps que prend un navigateur pour afficher un site Web. Des temps de chargement plus rapides garantissent qu’une plus grande proportion de vos visiteurs reste sur votre site Web pendant qu’il se charge. La vitesse de la page détermine également en partie le classement de votre site Web dans les résultats des moteurs de recherche. Par conséquent, l’accélération d’un site Web WordPress est souvent en haut de la liste de souhaits d’un propriétaire de site.
Dans ce didacticiel, nous aborderons le report de l’analyse de JavaScript pendant le chargement de la page Web, une technique clé pour éliminer le poids mort de votre site Web.
La vitesse de la page est une partie importante de l’expérience utilisateur qui dépend de beaucoup de choses. Cet article suppose que vous avez vérifié un facteur sous-jacent : l’exécution de votre site Web sur un hôte WordPress suffisamment rapide.
Pourquoi différer l’analyse de JavaScript ?
Pour comprendre la technique consistant à différer l’analyse syntaxique de JavaScript, prenons du recul et analysons comment un navigateur Web affiche une page. Lorsque votre navigateur envoie une requête à votre serveur web, la page renvoyée par le serveur est téléchargée sous la forme d’un document HTML. Ce document HTML contient du texte, du code qui restitue divers éléments DOM et des ressources telles que des images, des feuilles de style et des scripts.
Le navigateur lit ce balisage HTML ligne par ligne. De plus, les ressources présentes sur la page doivent être téléchargées. Par défaut, le navigateur télécharge séquentiellement ces ressources au fur et à mesure qu’il les trouve dans le document. Le rendu de la page Web ne reprend qu’une fois qu’une ressource a été téléchargée.
Les grandes ressources affectent négativement le temps de chargement de la page. Comme les images représentent une partie importante de la taille de la page, il est recommandé d’optimiser les images pour votre site WordPress. Pour les fichiers JavaScript, vous devez identifier les scripts nécessaires pour afficher correctement votre page. Vous pouvez différer le téléchargement des scripts non essentiels pour accélérer votre page Web.
Dans la section suivante, nous examinerons les moyens d’identifier les scripts nécessaires au rendu de votre page.
Quels scripts reporter ?
Pour un site Web relativement petit qui utilise un minimum de JavaScript, aucun script n’est essentiel pour le chargement de la page. Cependant, si vous gérez un site Web plus complexe, une analyse minutieuse de tous les scripts de votre site Web peut révéler quels scripts sont essentiels pour le chargement des pages.
Une façon d’effectuer cette analyse consiste à supprimer les scripts un par un et à vérifier s’il y a des erreurs dans la console JavaScript lors du chargement de la page. Cependant, ce processus nécessite une connaissance considérable de JavaScript et des technologies Web.
Une méthode plus simple pour évaluer quels scripts sont essentiels au chargement de votre page consiste à utiliser un outil de test de vitesse tel que GTmetrix. Entrez l’URL de votre site Web et attendez que l’outil l’évalue. Dans la page de résultats, rendez-vous sur l’onglet PageSpeed et développez la section « Différer l’analyse de JavaScript ». Cette section vous montre une liste de scripts non essentiels qui sont chargés pendant le processus de rendu.
Attributs asynchrones et différés
Il existe deux manières de s’assurer que le téléchargement d’un script n’interfère pas avec le rendu d’une page Web.
Tout d’abord, vous pouvez ajouter un async attribuer à la script étiqueter. Cela indique au navigateur de charger le script de manière asynchrone. En d’autres termes, le navigateur commence à télécharger la ressource dès qu’il la rencontre dans le code mais continue à analyser le code HTML pendant que la ressource est toujours en cours de téléchargement. L’échantillon script la balise ci-dessous montre comment ajouter le async attribut:
<script src="https://athemes.com/tutorials/defer-parsing-of-javascript-in-wordpress/path/to/script" async></script>
Deuxièmement, vous pouvez ajouter un defer attribuer à la script étiqueter. Cela indique au navigateur de ne pas télécharger la ressource tant que l’analyse de la page n’est pas terminée. Une fois l’analyse et le rendu terminés, le navigateur télécharge la liste des scripts différés qu’il a rencontrés précédemment. L’échantillon script la balise ci-dessous montre comment ajouter le defer attribut à une page HTML :
<script src="https://athemes.com/tutorials/defer-parsing-of-javascript-in-wordpress/path/to/script" defer></script>
La principale différence entre le defer et async attributs est le moment où la ressource sera téléchargée.
Supposons que vous ayez deux scripts : A et B. B apparaît dans le code après A, B a une dépendance vis-à-vis de A, mais A est nettement plus grand que B.
Si tu utilises async, il est possible que B termine le téléchargement avant que A ne soit complètement téléchargé. Cela conduira à une erreur, car B sera exécuté en l’absence de A.
Cependant, si vous utilisez defer, A et B seront téléchargés séquentiellement à la fin, ce qui n’entraînera pas d’erreur.
Si vous n’avez que quelques scripts dans le chemin de rendu, vous ne trouverez aucune différence entre l’utilisation de async et defer. Cependant, si vous avez une application Web complexe, il peut être judicieux d’utiliser defer pour s’assurer que les interdépendances sont satisfaites.
Parlons maintenant des moyens de différer le téléchargement de scripts dans WordPress.
Différer l’analyse de JavaScript dans WordPress
1. Modifiez le fichier functions.php
Si vous avez travaillé dans le développement WordPress, vous savez qu’il n’est pas recommandé d’ajouter des scripts directement via le balisage HTML. Au lieu de cela, vous devez utiliser fonctions WordPress intégrées demander des ressources.
Donc, si vous souhaitez ajouter un async ou defer attribuer à l’un de vos scripts, vous devez ajouter la fonction suivante à votre thème fonctions.php déposer:
add_filter('script_loader_tag', 'add_defer_tags_to_scripts');
function add_defer_tags_to_scripts($tag){
# List scripts to add attributes to
$scripts_to_defer = array('script_a', 'script_b');
$scripts_to_async = array('script_c', 'script_d');
# add the defer tags to scripts_to_defer array
foreach($scripts_to_defer as $current_script){
if(true == strpos($tag, $current_script))
return str_replace(' src', ' defer="defer" src', $tag);
}
# add the async tags to scripts_to_async array
foreach($scripts_to_async as $current_script){
if(true == strpos($tag, $current_script))
return str_replace(' src', ' async="async" src', $tag);
}
return $tag;
}
N’oubliez pas qu’avant d’ajouter le defer et async attributs aux balises de script, vous devez également mettre en file d’attente chaque script pour que WordPress puisse y accéder :
add_action('wp_enqueue_scripts', 'enqueue_custom_js');
function enqueue_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_d', get_stylesheet_directory_uri().'/script_d.js');
}
2. Utilisez un plugin
Modification du code source via le fonctions.php fichier peut ne pas être idéal pour tous. Si vous n’êtes pas féru de technologie, vous pouvez simplement utiliser un plugin pour différer l’analyse de JavaScript sur votre site WordPress.
JavaScript asynchrone
JavaScript asynchrone est un plugin gratuit que vous pouvez télécharger et installer sur votre site WordPress pour effectuer cette tâche.
Pour activer la fonction, cochez la case Activer JavaScript asynchrone option dans la zone des paramètres du plugin. Ensuite, faites défiler jusqu’au Méthode JavaScript asynchrone section et sélectionnez si vous souhaitez utiliser la méthode async ou defer.
Pour des options plus avancées, faites défiler la page vers le bas. Ici, vous pouvez lister les scripts que vous souhaitez appliquer le async et defer balises à. Ensuite, vous pouvez également ajouter une liste de scripts à exclure. Vous pouvez également répertorier les plugins et les thèmes à exclure de toute modification apportée par ce plugin.
Optimisation automatique
L’option de différer l’analyse de vos scripts est également disponible dans le cadre du Optimisation automatique plugin créé par le même auteur que Async JavaScript.
Dans la page des paramètres du plugin, vérifiez le Optimiser le code JavaScript et vos scripts non essentiels seront différés et déplacés vers le pied de page. Dans le Supplémentaire onglet, vous pouvez également lister les scripts que vous souhaitez ajouter le async attribuer à.
Emballer
Dans ce didacticiel, nous avons d’abord discuté de l’importance de la vitesse des pages et du fonctionnement du rendu de JavaScript. Ensuite, nous avons exploré les raisons pour lesquelles vous devriez différer l’analyse de JavaScript.
Enfin, nous avons examiné deux options à travers lesquelles vous pouvez y parvenir dans WordPress. Vous pouvez soit modifier le fonctions.php fichier pour ajouter le async ou defer attribue à votre script balises ou utilisez un plugin tel que JavaScript asynchrone ou Optimisation automatique pour optimiser vos scripts.
Des questions sur la façon de différer l’analyse de JavaSript dans WordPress ? Si tel est le cas, n’hésitez pas à demander dans les commentaires ci-dessous.
