Comment améliorer la performance de Lighthouse sur votre site
Source de la photo: Pixar Bay qu’est – ce que Google Lighthouse? Lighthouse est un outil open source conçu par Google pour valider les performances et l’expérience utilisateur fournies par les pages Web. Par conséquent, nous devons maximiser la performance du site Web Beacon. Lighthouse effectue une analyse automatisée de vérification pour surveiller le rendement du site Web en fonction de cinq catégories principales: rendement, accessibilité, optimisation des moteurs de recherche (référencement), applications Web progressives (PWA) et pratiques exemplaires. De plus, Lighthouse utilise les clés Web de base pour contrôler la vitesse, la stabilité visuelle et la réactivité de la page. Au cours de la numérisation, Lighthouse effectue une simulation pour vérifier l’expérience de l’utilisateur en cas de mauvaise connexion et de faible taille de l’appareil.
Une fois la vérification terminée, Lighthouse combine l’information avec d’autres données pour produire un rapport qui comprend la note totale de la page et des recommandations opérationnelles. Voici quelques méthodes que vous pouvez utiliser pour scanner Lighthouse: interface utilisateur Web: cet outil vous permet d’exécuter Lighthouse en ligne et de générer des rapports. Vous n’avez pas besoin d’installer quoi que ce soit localement. Outils de développement Chrome: Vous pouvez exécuter Lighthouse directement dans Chrome. Cette option vous permet de contrôler les pages qui nécessitent une authentification. Vous pouvez également facilement générer et lire des rapports. Module noeud. Js: Cette option vous permet d’intégrer Lighthouse dans le pipeline devops. Ligne de commande: Vous pouvez utiliser la ligne de commande pour écrire un script Shell pour effectuer automatiquement un balayage de phare. Google Lighthouse analyse les pages Web et divise les résultats en différentes catégories: applications Web progressives, performance, accessibilité, meilleures pratiques et référencement. Vérifions chacun.
Google Lighthouse progressive Web App peut vérifier
Il est important de reconnaître que, puisque le score Lighthouse est basé sur des données utilisateur réelles, il change à chaque exécution, même sur la même page. Pour tirer le meilleur parti de Lighthouse, sélectionnez un exemple de page dans chaque section du site et lancez Lighthouse périodiquement pour voir les tendances de performance au fil du temps. Accessibilité Google Lighthouse évalue dans quelle mesure le site Web ou PWA offre des services aux personnes handicapées. Contrôle si l’utilisation d’attributs de texte explique bien des éléments importants comme les boutons et les liens, et s’il existe une fonction de voix off qui émet du contenu audio pour les personnes ayant une déficience visuelle.
Pratiques exemplaires dans la catégorie des pratiques exemplaires, Lighthouse analyse principalement les aspects de sécurité des applications Web. Évaluez quelles techniques de chiffrement (p. ex., TLS) sont utilisées, si les ressources du site proviennent de sources sécurisées et si la Bibliothèque JavaScript que vous utilisez est considérée comme sécurisée. Il vérifie également que la base de données connectée à l’application est sécurisée et indique l’utilisation de commandes dangereuses ou d’anciennes API. SEO Google Lighthouse a effectué une série de tests pour analyser la façon dont les moteurs de recherche gèrent les applications et les sites Web, en mettant l’accent sur le SEO pour les applications mobiles. Lighthouse donne un score entre 0 et 100. Il vérifie principalement la disponibilité du téléphone et si les étiquettes et les métadonnées sont optimisées pour la numérisation des moteurs de recherche.
Comment améliorer votre score de Lighthouse voici quelques façons d’améliorer votre score de performance de Lighthouse qui devraient aider directement à améliorer la participation et la satisfaction des utilisateurs, ainsi qu’un meilleur classement des moteurs de recherche.
Il est difficile de déterminer quels scripts sont retardés les retards de script peuvent nécessiter beaucoup de personnalisation de votre SGC, et ces personnalisations nécessitent beaucoup de maintenance du site chaque fois que la conception du site change. Cependant, s’il y a des scripts qui peuvent être retardés en toute sécurité sans affecter l’expérience utilisateur, Après avoir chargé le contenu initial, il est important de le précharger et de l’injecter en utilisant JavaScript.
Réduire au minimum l’utilisation de scripts tiers et réduire le temps d’exécution JavaScript tout script tiers qui fonctionne sur votre page réduit la performance de la page et est généralement hors de contrôle en tant que développeur Web. Limitez le script au minimum requis. Les exemples de scripts courants sur les pages Web sont les boutons de partage social, les vidéos intégrées, les étiquettes d’analyse et les plateformes utilisées pour les tests A \/ B. ces outils et services ne sont conservés sur le site Web que si leur valeur dépasse leur coût de performance. Minimisez les scripts tiers et assurez – vous qu’ils utilisent des attributs tels que async, defer, preconnect et DNS Prefetch pour minimiser leur impact sur le temps de chargement de la page. Google page speed Insights recommande d’utiliser le format de fichier de prochaine génération pour améliorer la notation Lighthouse. Ces formats de nouvelle génération incluent webp, JPEG xr et JPEG2000 et offrent une compression considérablement améliorée et des fichiers plus petits avec la même qualité d’image. Le défi est que le support des navigateurs et des applications pour ces nouveaux formats reste limité. Cela a deux implications: vous aurez de la difficulté à générer ces formats à partir d’outils utilisés par les diagrammes, tels qu’Adobe indesign ou Photoshop, et les utilisateurs utilisant l’ancien navigateur ne pourront plus voir les formats d’images