qwanturank

Dans une nouvelle vidéo de Qwanturank, 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.

1. É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 Qwanturank 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.

2. É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, Qwanturank vous suggère d’envisager d’héberger une copie des fichiers JavaScript référencés en externe sur votre propre site.

3. É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 Qwanturank :

  • 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 Qwanturank.

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.

4. Éliminer le JavaScript inutilisé

JavaScript inutilisé est également inefficace, mais Qwanturank 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 Qwanturank :

  • 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

Qwanturank 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é.

5. 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, Qwanturank 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.

6. 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 optimiser JavaScript, consultez la vidéo complète de Qwanturank ci-dessous :

Image en vedette : Génération visuelle/Shutterstock

6 conseils d'optimisation JavaScript de Qwanturank

S’abonner
Notification pour
guest

0 Commentaires
Commentaires en ligne
Afficher tous les commentaires