Améliorer les performances du site Web et optimiser l'expérience utilisateur! Cet article explorera en profondeur la façon d'utiliser des outils de phare pour analyser et améliorer les performances de la page Web, l'accessibilité, le référencement et d'autres aspects pour améliorer le classement des sites Web et l'engagement des utilisateurs.
Lighthouse est un puissant outil open source pour Google, analysant automatiquement la qualité des pages Web et fournissant des suggestions d'amélioration. En optimisant les scores du phare, vous pouvez attirer plus d'utilisateurs et obtenir des classements plus élevés dans les moteurs de recherche.
Cet article se concentre sur: L'importance des performances du site Web; question. De plus, nous présenterons un autre puissant outil d'évaluation des performances du site Web - WebPageTest.
Points clés:
L'importance des performances du site Web
L'une des fonctionnalités communes des meilleurs sites Web mondiaux est: une excellente expérience utilisateur. Parmi eux, la performance est cruciale. Les utilisateurs préfèrent les sites Web à chargement rapide. Si le temps de chargement est trop long, les utilisateurs sont susceptibles de partir et de se tourner pour trouver des alternatives plus pratiques.
Améliorer les performances du site Web peut améliorer le classement du référencement (plus sur cet article) et améliorer les taux de clics et de conversion. Donc, si vous souhaitez obtenir plus de ventes, d'utilisateurs enregistrés ou de trafic, vous devez d'abord vous assurer que le site Web fonctionne jusqu'à la norme.
Pourquoi choisir le phare
Lighthouse est l'outil open source de Google. En tant qu'entreprise bien connue et fiable, les résultats de Google sont plus fiables que les autres outils. En outre, comme les moteurs de recherche Google ont ouvert la voie au cours de la dernière décennie, le classement de haut niveau dans les moteurs de recherche Google est susceptible d'apporter plus de trafic. En conséquence, l'obtention de scores plus élevés dans les outils d'audit des performances de Google peut améliorer le classement de votre site Web dans les résultats de recherche.
En plus de l'approbation de Google, l'excellence du phare est également les résultats détaillés, en se concentrant toujours sur les intérêts des utilisateurs. Lighthouse fournit un grand nombre de résultats, notamment le temps de chargement des pages, la sécurité de la page (et finalement le site Web), les pratiques et les implémentations d'accessibilité des pages sont inclusives, et plus encore.
comment utiliser le phare
Cette section introduira d'abord le moyen le plus simple d'analyser et de vérifier les scores Web à l'aide de phare, c'est-à-dire fonctionner directement via le navigateur Chrome. Nous explorerons ensuite d'autres outils de phare qui peuvent fournir des résultats ou des options plus détaillés.
Utilisation du phare avec Chrome est le moyen le plus simple de mesurer les performances du site Web. Tout d'abord, ouvrez n'importe quelle page Web que vous souhaitez mesurer. Pour la démonstration, j'utiliserai les résultats d'audit qui s'exécutent sur mon site Web et sur GitHub afin que nous puissions afficher divers échantillons de résultats.
Ensuite, ouvrez l'outil de développeur en cliquant en cliquant Shift Control J ou f12 sur Windows / Linux, ou cliquez sur Option Commande j ou fn
f12sur macOS.
Après, cliquez sur l'onglet Lighthouse. 
Comme vous pouvez le voir, vous pouvez choisir de revoir la catégorie à inclure. Ces catégories comprennent les performances, les applications Web progressives, les meilleures pratiques, l'accessibilité et le référencement. Vous pouvez également choisir si l'audit s'exécute sur un appareil mobile ou de bureau.
Dans cette section, nous effectuerons quatre audits, à savoir les performances, les meilleures pratiques, l'accessibilité et le référencement, que nous exécuterons sur notre bureau. Cependant, pour les meilleurs résultats, assurez-vous de tester votre page dans différentes conditions, par exemple sur les appareils mobiles et à différentes vitesses Internet.
Ainsi, sur la page que vous souhaitez mesurer, sélectionnez les quatre catégories et le bureau mentionné ci-dessus et cliquez sur "Générer le rapport". 
Cela peut prendre plusieurs minutes et vous verrez que la fenêtre du navigateur peut devenir de plus en plus petite dans le processus. En effet, le rapport contient différentes tailles d'écran et conditions pour la page Web. Une fois terminé, l'onglet Lighthouse contiendra les résultats de la révision, y compris chaque score pour les performances, les meilleures pratiques, l'accessibilité et le référencement. 
Il est important de noter que parfois les résultats peuvent varier en fonction de votre connexion Internet. De plus, parfois le phare peut afficher des notifications selon lesquelles certaines extensions peuvent affecter les résultats. Si c'est le cas, il est préférable d'exécuter le test dans la fenêtre invisible.
Lorsque le phare s'exécute, vous pouvez cliquer sur n'importe quelle catégorie pour afficher un rapport plus détaillé.
(Le contenu suivant est une simplification et une réécriture de la partie de performance dans le texte d'origine, et d'autres parties ont également été traitées de manière similaire, et la relation spatiale est liée. Seule la réécriture de la partie de performance est montrée ici ) <script>标签添加defer或async属性。例如： <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><script src="myScript.js" defer></script> <🎜><h4> Performance </h4> <p> Les performances se concentrent sur la façon d'accélérer le chargement du site Web. Nous couvrirons six métriques de performance importantes, ce qu'ils contiennent chacun et comment obtenir de meilleurs scores dans chaque métrique. </p> <h5> Premier dessin de contenu (FCP) </h5> <p> First Content Drawing (FCP) commence à mesurer à partir du moment où l'utilisateur se rend à la page Web. Il mesure le temps qu'il faut pour charger le premier contenu DOM. Le contenu DOM peut inclure une image, un élément de toile non blanc et un élément SVG. </p> <p> FCP est mesuré en secondes. Pour faire de votre page un score "vert" - ce qui signifie que FCP est rapide - le premier contenu DOM devrait être de chargement jusqu'à 1,8 seconde. Une fois ce temps dépassé, il peut devenir moyen ou lent. </p> <p> FCP est important car il nous aide à comprendre les utilisateurs. Comme mentionné précédemment, les utilisateurs ne sont pas patients et s'ils se chargent trop longtemps, ils quitteront votre site Web. Fast FCP peut garder les utilisateurs engagés. Cela peut être un écran de chargement simple, indiquant à l'utilisateur d'attendre car la page Web est sur le point de se charger. </p> <p> Un facteur affectant le temps FCP d'un site Web est la police. Les polices peuvent se charger pendant longtemps, et parfois le texte est invisible avant le chargement. Une bonne façon de résoudre ce problème est d'utiliser la propriété CSS-Display: swap; lors de la déclaration des polices avec @ font-face. Par exemple: </p> <pre class="brush:php;toolbar:false"><code>@font-face { font-family: 'MyFont'; font-style: normal; font-weight: 400; src: url(MyFont.woff); font-display: swap; }</pre><div class="contentsignin">Copier après la connexion</div></div> <p> Si vous utilisez des polices Google, cette propriété est désormais activée par défaut. Cette propriété permet d'afficher le texte à l'aide de la police par défaut du système de l'utilisateur jusqu'à ce que la police du site Web soit chargé. </p> <p> Un autre facteur qui affecte le FCP consiste à rendre les ressources de blocage. Ce sont généralement des fichiers JavaScript ou CSS chargés en <code><head></code> de manière synchrone et ont un long temps de chargement. Ces ressources obligeront le reste de la page à attendre qu'ils se chargent avant de charger pleinement la page, affectant le FCP du contenu DOM. Voici quelques solutions: </p><ul> <li> est <code></pre> <ul> <li> Compressez les fichiers JavaScript et CSS utilisés, réduisant leur taille afin qu'il ne prenne pas trop de temps pour charger ces ressources. Cela dépend du cadre ou du langage de programmation que vous utilisez, mais presque tous les cadres ou langages de programmation ont un moyen de le faire. Vous pouvez consulter des conseils simples sur la compression de JavaScript à l'aide de divers frameworks populaires sur le site Web web.dev. <li> Supprimer les CS inutilisés dans la page Web. À mesure que la taille CSS augmente, la réduction de la taille des fichiers CSS en supprimant les règles et les propriétés inutilisées sur la page peut accélérer le chargement. Encore une fois, selon le cadre que vous utilisez, il existe différentes façons de le faire. Cependant, vous pouvez utiliser les outils de développeur de Chrome pour afficher les CSS inutilisés dans l'onglet "Couverture". L'utilisation de frameworks comme Tailwind CSS (qui utilise le mécanisme de partage des arbres pour réduire les styles CSS, plutôt que de faire gonfler votre site Web avec de nombreux styles que vous ne pouvez jamais utiliser) peut aider à accélérer le chargement du site Web. <li> Réduisez le temps de réponse du serveur. Ceci peut être réalisé en utilisant des demandes asynchrones pour effectuer la logique requise pour le chargement des pages, en cache le nombre souvent utilisé par le serveur ou optimiser le code du serveur pour obtenir les résultats souhaités plus rapidement. <p> Lorsque vous effectuez un audit de performances, si votre page a des problèmes avec les polices, les ressources de blocage de contenu, le CSS inutilisé ou d'autres problèmes mentionnés ci-dessus, Lighthouse mettra en évidence chaque fichier qui provoque le problème et fournira des suggestions d'amélioration. Par exemple, si la police bloque la visibilité du texte, Lighthouse affichera le fichier de police qui provoque le problème et la façon dont la résolution du problème accélérera l'heure FCP de la page. <p> Ce qui suit est un exemple du rapport d'audit GitHub qui affiche un fichier CSS comme une "ressource de blocage de rendu". <p> <img src="https://img.php.cn/upload/article/000/000/000/173917586115577.jpg" alt="A Beginner's Guide to Lighthouse " /> <p> Lorsque vous lisez le reste des mesures, vous vous rendez compte qu'ils dépendent des résultats de cette métrique dans une certaine mesure. Par conséquent, il est très important d'obtenir un bon score FCP. <p> <strong> (Les indicateurs restants des performances dans le texte d'origine et d'autres pièces sont omis ici) <p> <strong> Résumé <p> Améliorer les performances du site Web est une étape cruciale du processus de développement. N'ignorez ni ne sous-estimez. La fourniture de sites Web rapides, accessibles et performants dans les moteurs de recherche peut augmenter le trafic du site Web et augmenter les utilisateurs ou les ventes enregistrés. Lighthouse est un excellent outil open source qui fournit des informations complètes et des analyses pour vous aider à améliorer votre site Web et à attirer plus d'utilisateurs. <p> <strong> (La partie FAQ dans le texte d'origine est omise ici) <script>标签添加defer或async属性。例如： <pre class="brush:php;toolbar:false"><code class="language-html"><script src="myScript.js" defer></script>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Solution à javascript :;
Qu'est-ce que la résolution 2K ?
Analyse coût-efficacité de l'apprentissage de Python et C++
expression régulière Perl
Type de commande de redémarrage Linux
COMMENT INSTALLER LINUX
Classement des dix principales plateformes de trading formelles
Quels sont les logiciels de programmation du microcontrôleur ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
