Comment combiner Javascript externe dans WordPress
Publié: 2022-04-22Le langage de programmation javascript aide les pages Web à afficher un contenu dynamique. Sur les sites Web WordPress, par exemple, Javascript est utilisé pour intégrer de l'audio et de la vidéo. Il est également utilisé pour afficher des galeries d'images, des menus interactifs, des comptes à rebours et plus encore.
Les fichiers Javascript utilisent l'extension de fichier .js et sur un site Web WordPress typique, les fichiers Javascript sont insérés dans les pages par le thème WordPress et les plugins WordPress qui sont activés. Par exemple, le curseur de la page d'accueil de votre thème peut nécessiter un fichier appelé slider.js pour fonctionner correctement, tandis que votre page de formulaire de contact peut nécessiter un fichier appelé form.js.
Je crois que Javascript est essentiel aux sites Web WordPress modernes. Malheureusement, cela peut également ralentir un site Web s'il n'est pas optimisé correctement.
Dans les premières versions du protocole de transfert hypertexte, Javascript pouvait ralentir les sites Web car chaque fichier Javascript devait être téléchargé et exécuté pour que la page s'affiche correctement. Une technique d'optimisation populaire pour résoudre ce problème consiste à combiner plusieurs fichiers Javascript afin de réduire le nombre de requêtes HTTP qu'un navigateur doit effectuer. La technique est parfois appelée agrégation Javascript.
Dans cet article, j'expliquerai pourquoi de nombreux propriétaires de sites Web combinent Javascript externe dans WordPress et partagent des plugins WordPress utiles qui peuvent être utilisés pour effectuer cette tâche. J'expliquerai également pourquoi la combinaison de fichiers Javascript externes n'est plus nécessaire pour la plupart des propriétaires de sites Web.
Pourquoi combiner des fichiers Javascript externes dans WordPress ?
Bien que les fonctions Javascript puissent être ajoutées directement dans HTML à l'aide de la balise SCRIPT, il est courant d'enregistrer le code Javascript dans un fichier externe à la place. Il est plus pratique de le faire car cela sépare le code et permet aux fonctions Javascript d'être appelées par de nombreuses pages.
Chaque fichier Javascript requis par une page Web doit être téléchargé par le navigateur pendant le processus de rendu de la page.
| Rendu des pages | Lorsqu'une personne consulte une page Web, le navigateur crée la page en traitant chaque ligne de code dans l'ordre. C'est ce qu'on appelle le rendu de page. |
| Requêtes HTTP | Une demande d'accès à un fichier sur un serveur est appelée une demande HTTP. Le navigateur doit donc effectuer une requête HTTP pour chaque fichier Javascript requis pour la page. |
Lorsque les fichiers sont téléchargés dans un ordre séquentiel, un nombre élevé de requêtes HTTP peut augmenter le temps nécessaire au chargement d'une page Web. Ainsi, en combinant des fichiers Javascript externes dans WordPress, vous pouvez réduire considérablement le nombre de requêtes HTTP effectuées lors du rendu de la page.
Certains moteurs de recherche recommandent de combiner le Javascript externe en deux fichiers.
| Fonctions Javascript importantes (Fichier 1) | Le premier fichier Javascript contient des fonctions importantes qui sont nécessaires pour rendre correctement le chargement initial de la page. |
| Fonctions Javascript moins importantes (fichier 2) | Le deuxième fichier Javascript contient des fonctions moins importantes qui peuvent être appelées une fois la page chargée. |
Si une page Web nécessite neuf fichiers Javascript pour s'afficher correctement, la combinaison de fichiers JS externes dans WordPress pourrait vous aider à réduire le nombre total de requêtes HTTP pour le code Javascript de neuf à seulement deux. Les fichiers CSS externes peuvent également être combinés, réduisant encore plus le nombre de requêtes HTTP d'une page.
Mon site WordPress sera-t-il plus rapide si je combine des fichiers Javascript externes ?
Grâce aux améliorations apportées au protocole de transfert hypertexte, il n'est plus essentiel de combiner des fichiers Javascript et des fichiers CSS, sauf si votre hébergeur ne prend pas en charge HTTP/2.
Dans HTTP/1.0 et HTTP/1.1, chaque fichier Javascript et CSS devait être téléchargé dans un ordre séquentiel. Cela signifiait qu'un fichier devait être complètement téléchargé avant que le fichier suivant puisse commencer à être téléchargé. Le protocole HTTP/2, lancé en 2015, a résolu ce problème en autorisant les téléchargements parallèles. Comme toutes les ressources externes peuvent être téléchargées en même temps, il n'y a plus aucun avantage à combiner des fichiers si HTTP/2 est disponible.
HTTP/2 est actuellement pris en charge par 95,6 % des navigateurs Internet. Au 6 janvier 2022, HTTP/2 est utilisé par 46,9 % de tous les sites Web en ligne, bien que vous puissiez voir sur le graphique ci-dessous que ce chiffre est nettement plus élevé parmi les sites Web les plus populaires sur Internet.
Si votre hébergeur prend en charge HTTP/2, la combinaison de fichiers peut ralentir votre site Web car les fichiers Javascript combinés sont plus volumineux que les fichiers qu'ils ont agrégés. En effet, il faut plus de temps à un navigateur pour télécharger deux gros fichiers Javascript que de nombreux petits fichiers Javascript téléchargés en même temps.
Deux techniques que je recommande d'utiliser avec Javascript sont la minification et l'analyse différée.
| Réduire | La minification consiste à supprimer les caractères inutiles tels que les espaces et les commentaires. Il en résulte que le fichier Javascript est plus petit. |
| Différer l'analyse | Le code Javascript ralentit le processus de rendu de la page. Deux techniques appelées Defer et Async peuvent être utilisées pour résoudre ce problème. |
Veuillez lire mon article sur le report de l'analyse Javascript dans WordPress pour mieux comprendre pourquoi Javascript ralentit le processus de rendu des pages.
Comment combiner Javascript externe dans WordPress
Si votre hébergeur utilise toujours HTTP 1.1, il est toujours recommandé de combiner des fichiers Javascript externes et des fichiers CSS dans WordPress.
Assurez-vous d'exécuter des tests de performances avant et après la combinaison de fichiers afin de savoir comment les temps de chargement des pages ont été affectés. Vous pouvez le faire en utilisant GTmetrix, Google PageSpeed Insights et le test de vitesse du site Web Pingdom.
Optimisation automatique
Autoptimize est l'un des plugins d'optimisation les plus efficaces disponibles pour les utilisateurs de WordPress. Il prend en charge la minification pour HTML et la combinaison de fichiers et la minification pour Javascript et CSS. Les fichiers Javascript peuvent également être différés au lieu d'être agrégés pour éviter le blocage du rendu et il existe également des options d'optimisation pour Google Fonts.
J'ai utilisé Autoptimize sur de nombreux sites Web WordPress car il améliore toujours les temps de chargement des pages.
Nettoyage des actifs
Asset CleanUp est un plugin WordPress d'optimisation hautement configurable qui prend en charge la minification, la combinaison et le report de Javascript et CSS. Il vous permet également de nettoyer le HTML et fournit de nombreux outils pour gérer les polices et réduire leur effet sur les temps de chargement des pages.
Une fonctionnalité d'Asset Cleanup qui se démarque est le gestionnaire Javascript et CSS. Cela vous permet de spécifier exactement sur quelles pages les fichiers Javascript et CSS sont chargés sur votre site Web.
WP Super Minifier
WP Super Minify fait les choses un peu différemment en vous donnant uniquement la possibilité de compresser Javascript et de compresser CSS. Lorsqu'il est sélectionné, WP Super Minify combinera, minifiera et mettra en cache vos fichiers.
Si vous cherchez une solution d'optimisation simple qui fonctionne, c'est peut-être le plugin qu'il vous faut.
Combinaison de fichiers Javascript externes à l'aide d'un plugin de cache WordPress
Les meilleurs plugins de mise en cache WordPress incluent de nombreux outils d'optimisation supplémentaires pour vous aider à améliorer les performances du site Web. Il y a donc de fortes chances que votre solution de mise en cache WordPress existante vous permette de combiner des fichiers Javascript et CSS externes.
Dans WP Rocket, par exemple, il existe des options pour réduire et combiner les fichiers Javascript et CSS. Les fichiers Javascript peuvent également être différés pour éviter le blocage du rendu.
Ma recommandation est de tester les temps de chargement des pages en utilisant la combinaison de fichiers à l'aide de votre plugin de mise en cache WordPress préféré, puis de comparer les résultats avec des solutions d'optimisation Javascript autonomes telles que Autoptimize et Asset CleanUp.
Dernières pensées
J'espère que vous avez apprécié ce regard sur la combinaison de fichiers Javascript externes. Comme vous l'avez vu, il n'est plus nécessaire d'agréger des fichiers Javascript si votre hébergeur supporte HTTP/2 car le téléchargement de fichiers en parallèle est plus efficace.
Si votre hébergeur ne prend en charge que HTTP/1.1, vous pouvez combiner du javascript externe dans WordPress afin de réduire les temps de chargement des pages.
Lecture recommandée : Supprimer les CSS inutilisés dans WordPress
Merci d'avoir lu.
Kévin