La réduction des fichiers JavaScript est une technique d’optimisation pour réduire la charge utile JavaScript et le temps de blocage du thread principal.
La minification peut aider réduire la taille des fichiers JavaScript en supprimant les commentaires, les espaces blancs et le code redondant, et dans certains cas, rend également le code plus efficace en utilisant des noms de variables et de fonctions plus courts.
Plus ces fichiers JavaScript sont petits, plus ils sont téléchargés, analysés et exécutés rapidement par le navigateur. Cela permettra de réduire le temps de chargement de vos pages.
Avant de continuer à lire cet article je vous recommande faire un audit de votre site sur GT Metrics.
Sommaire
Comment la réduction de JavaScript affecte-t-elle les performances de la page?
Chaque fois que le navigateur charge une page, il doit télécharger, analyser et exécuter des fichiers JavaScript pendant le chargement de la page.
Étant donné que cela se produit sur le thread principal par défaut, une charge utile JavaScript plus élevée bloquera le thread principal plus longtemps, prolongeant ainsi le chargement de votre page.
La minification rend votre code plus léger et plus compact en supprimant les éléments inutiles, en diminuant la taille du fichier, en réduisant la bande passante consommée et en accélérant les temps de chargement globaux de vos pages.
Une taille de fichier / charge utile JavaScript inférieure réduit le temps passé à analyser les scripts, ce qui se traduit par des chargements de page plus rapides et une expérience de page améliorée.
La réduction des fichiers JavaScript réduit la charge utile et le temps d’analyse des scripts, ce qui accélère le chargement des pages.
Réduisez le JavaScript avec soin
La minification JavaScript pourrait casser votre site dans certains cas, si ce n’est pas fait correctement.
La réduction de votre JavaScript a moins d’impact sur l’expérience globale de la page par rapport à d’autres optimisations telles que le fractionnement du code, l’élimination du code et la mise en cache de votre code JavaScript.
Par conséquent, la minification est une optimisation de priorité inférieure qui doit être considérée comme une étape de réglage fin pour affiner votre expérience de page plutôt que d’augmenter à elle seule les performances de votre page.
Comment GTmetrix réalise-t-il cet audit?
GTmetrix évalue tous les fichiers JavaScript de votre page et calcule la quantité de bande passante gaspillée par chaque fichier JavaScript non minifié. Cliquez sur l’audit pour afficher la liste des fichiers JavaScript qui peuvent être réduits.
GTmetrix rapporte les économies de taille de fichier possibles grâce à la minification JavaScript. GTmetrix estime également les économies de taille de fichier JavaScript possibles grâce à la minification.
Comment minifier JavaScript?
Pour résoudre cela, suivez l’une des méthodes de minification JavaScript ci-dessous:
1) Minification JavaScript à l’aide d’outils en ligne
Identifiez les fichiers JavaScript signalés par GTmetrix et localisez-les dans le code HTML de votre page.
Copiez le code JavaScript du fichier non minifié et collez-le dans un outil de minification JavaScript tel que minifycode.com pour générer le fichier JavaScript minifié.
Maintenant, copiez le code JavaScript minifié et collez-le dans le fichier JavaScript correspondant sur votre site Web.
Répétez ce processus pour tous les fichiers JavaScript non réduits. Si vous avez un grand nombre de fichiers JavaScript à réduire, envisagez d’utiliser des outils de minification plus avancés.
2) Minification JavaScript à l’aide d’outils
Si vous êtes un utilisateur plus avancé, vous pouvez utiliser des outils de création tels que UglifyJS et le compilateur de fermeture de Google, entre autres, pour réduire vos fichiers JavaScript.
3) Minification JavaScript à l’aide d’un CDN
Un moyen simple de servir des fichiers JavaScript minifiés consiste à utiliser un CDN.
Les fichiers JavaScript réels sur votre serveur d’origine peuvent toujours être non réduits, mais le CDN créera et servira les versions JavaScript minifiées de ces fichiers aux visiteurs de votre page.
L’avantage d’utiliser un CDN ici est que les fichiers JavaScript d’origine et minifiés sont synchronisés, c’est-à-dire que toutes les modifications apportées à vos fichiers d’origine seront reflétées dans les versions minifiées.
4) Pour WordPress (ou d’autres utilisateurs de CMS)
Les utilisateurs de WordPress (et d’autres CMS) peuvent également utiliser des plugins pour réduire automatiquement les fichiers JavaScript. Je vous recommande WP Rocket.
