Dans une nouvelle vidéo de Google, le Developer Advocate Alan Kent partage six façons d’optimiser JavaScript pour améliorer les performances de votre site Web. Kent identifie les problèmes de performances courants causés par JavaScript et passe en revue les étapes que vous pouvez suivre pour les résoudre.
Évitez la prolifération des fichiers JavaScript
Évitez la prolifération du nombre de fichiers JavaScript sur votre site. Le nombre de fichiers JavaScript peut devenir excessif si vous ne faites pas attention, surtout si chaque composant de l’interface utilisateur se trouve dans un fichier séparé. Réduire le nombre de fichiers JavaScript qu’un navigateur doit télécharger peut améliorer les performances du site Web.
Comment détecter
Le Occasion partie de la Informations sur la vitesse de la page rapport répertorie les recommandations spécifiques à votre site. Recherchez la recommandation de garder le nombre de demandes bas et les tailles de transfert petites. Cliquez sur la recommandation pour obtenir un résumé du nombre et de la taille des types de ressources demandés, y compris les fichiers JavaScript.
Comment réparer
Vous pouvez résoudre ce problème de différentes manières. Une option recommandée par Google consiste à combiner des fichiers plus petits pour avoir un seul fichier plus volumineux à télécharger. Une autre solution consiste à prendre en charge HTTP2 sur votre site, car il peut améliorer les performances sans joindre de fichiers.
Évitez les recherches DNS excessives
Évitez un nombre excessif de recherches DNS pour les fichiers JavaScript de référence, car cela peut ralentir la première visite d’un utilisateur sur votre site.
Comment détecter
PageSpeed Insights peut vous montrer une liste des noms de domaine utilisés dans les URL dans des sections telles que réduire le temps d’exécution de JavaScript. L’onglet réseau dans Chrome Developer Tools est un autre moyen de voir tous les noms de domaine référencés.
Comment réparer
Pour réduire le nombre de recherches DNS, Google vous suggère d’envisager d’héberger une copie des fichiers JavaScript référencés en externe sur votre propre site.
Éliminer le JavaScript inefficace
Réduisez ou éliminez le JavaScript inefficace, car il peut ralentir les pages Web et entraîner une mauvaise expérience utilisateur.
Comment détecter
Recherchez les opportunités suivantes dans le rapport PageSpeed Insights de Google :
- Réduire le temps d’exécution de JavaScript: Cela signale les scripts où une grande quantité de temps CPU a été consacrée à l’analyse ou à l’exécution de code JavaScript
- Éliminer les ressources bloquant le rendu : Cela inclut JavaScript qui peut être exécuté avant que la page ne puisse être rendue, ce qui oblige l’utilisateur à attendre plus longtemps pour voir le contenu
- Document.écrire : Si elle est mal utilisée, cela peut entraîner des problèmes de performances importants sur une page car elle empêche d’autres opérations de se produire
- N’utilise pas d’écouteurs passifs: Un écouteur passif est un indice pour le navigateur que le code JavaScript n’appellera pas une fonction qui empêche le défilement, permettant au navigateur de faire défiler la page même pendant que le JavaScript est encore en cours d’exécution
Comment réparer
L’élimination de JavaScript inefficace est un sujet plus vaste qui dépasse le cadre de la vidéo de Google. Les solutions impliquent généralement une écriture différente du code JavaScript. Les techniques incluent le profilage du code existant et l’écriture de vos propres versions réduites de composants plus puissants.
Éliminer le JavaScript inutilisé
JavaScript inutilisé est également inefficace, mais Google affirme que ce problème est suffisamment courant pour le signaler tout seul. La réutilisation de code sur plusieurs sites peut entraîner l’inclusion de JavaScript qui n’est pas nécessaire. JavaScript qui n’est jamais appelé doit toujours être téléchargé et analysé par le navigateur Web, ce qui est un gaspillage de ressources.
Comment détecter
Recherchez les opportunités suivantes dans le rapport PageSpeed Insights de Google :
- Réduire le JavaScript inutilisé : Cela vous montre JavaScript qui n’a pas été exécuté dans le cadre du chargement d’une page
- Évitez les énormes charges utiles du réseau : Cela identifie les domaines à améliorer en appelant les téléchargements de bibliothèques volumineuses
- Minimiser le travail du thread principal : Inclut le temps passé à analyser, compiler et exécuter JavaScript
Comment réparer
Google recommande une technique appelée arborescence qui peut être utilisée pour identifier le JavaScript qui n’est jamais appelé, et qui peut être supprimé en toute sécurité.
Compresser les fichiers JavaScript
Assurez-vous que vos fichiers JavaScript sont compressés lors du téléchargement. Alors que le navigateur Web doit consacrer plus de temps CPU pour décompresser le contenu du fichier, Google affirme que la compression est une victoire globale.
Comment détecter
Le rapport PageSpeed Insights comporte une section mettant en évidence les fichiers JavaScript qui pourraient bénéficier d’une compression. En cliquant Activer la compression de texte vous montrera quels fichiers sont recommandés pour être compressés.
Comment réparer
La plupart des navigateurs Web ou des systèmes de gestion de contenu ont un support intégré pour compresser les téléchargements s’ils sont correctement configurés.
Définir des durées de cache appropriées pour le code JavaScript
Vérifiez que vos fichiers JavaScript sont renvoyés avec les en-têtes de date d’expiration du cache appropriés. Cela aide les navigateurs à éviter la surcharge de vérification si les fichiers JavaScript dans son cache sont obsolètes, ce qui améliore les performances.
Comment détecter
Dans le La mise en réseau onglet de Outils de développement Chrome vous pouvez vérifier les en-têtes de réponse HTTP pour les fichiers JavaScript qui sont téléchargés. Recherchez des en-têtes tels que Contrôle du cache. Dans PageSpeed Insights, recherchez l’opportunité intitulée Servir des actifs statiques avec une politique de cache efficace. En cliquant dessus, vous verrez une liste de ressources, y compris des fichiers JavaScript, qui peuvent bénéficier d’en-têtes de cache correctement définis.
Comment réparer
Un moyen d’améliorer la mise en cache des fichiers JavaScript couramment utilisés consiste à référencer les fichiers à partir d’un emplacement public partagé. Si un utilisateur visite des sites qui réutilisent le même fichier JavaScript, le navigateur peut utiliser la copie précédemment téléchargée du fichier, ce qui améliorera les performances. Pour plus de détails sur l’une des recommandations ci-dessus pour l’optimisation de JavaScript, consultez la vidéo complète de Google ci-dessous : Image en vedette : Génération visuelle/Shutterstock