Comment diagnostiquer et réparer un site Web à chargement lent
Que pouvez-vous faire pour garantir que les pages les plus importantes de votre site Web se chargent toujours le plus rapidement possible ? Effectuer des tests de vitesse réguliers et maintenir votre site Web bien entretenu pour ses performances vous aidera énormément.
Vous ou votre client avez peut-être remarqué que les pages ne se chargent pas aussi rapidement qu’elles devraient l’être sur votre site Web. Ou, pire encore, un visiteur ou un client s’est plaint d’un problème de vitesse de page.
Alors, par où commencer pour diagnostiquer le problème ?
Commencez par exécuter une analyse des performances. Il existe différents outils qui vous aideront à aller à la racine du problème. Mais ne vous arrêtez pas là. Les sites Web ne ralentissent pas une seule fois, ne sont pas réparés, puis fonctionnent à des vitesses optimales. Ils nécessitent des tests et une maintenance continus.
Dans cet article, nous examinerons ce que font ces outils de test de vitesse et comment vous pouvez les utiliser pour résoudre les problèmes immédiats de chargement des pages. Ensuite, nous détaillerons différentes choses que vous pouvez faire pour que votre site Web continue de fonctionner à toute vitesse.
Comment tester la vitesse de chargement de votre site Web
Il existe un certain nombre d’outils gratuits que vous pouvez utiliser pour analyser les performances de votre site Web. Nous allons utiliser GTmetrix pour tester la vitesse de notre site de bureau et Informations sur la vitesse de page pour tester l’homologue mobile.
Tester votre site Web de bureau
GTmetrix est une bonne option si vous cherchez à diagnostiquer des problèmes avec un site Web de bureau. Voici ce que vous verrez dans votre rapport sur les performances :
Résumé raconte et montre vous à quelle vitesse votre page Web se charge. Il vous fournit également un score de performance basé sur Lighthouse.
Les onglets révèlent encore plus de détails sur les performances de votre page.
Performance fournit une ventilation des métriques de chargement telles que la première peinture de contenu, le temps d’interactivité et l’indice de vitesse.
Structure fournit des conseils sur la façon d’améliorer votre vitesse. Il se concentre sur des choses comme :
Formats et tailles d’images
Ressources bloquant le rendu
CSS et JavaScript inutilisés
Code tiers
Requêtes volumineuses
Si votre page Web se charge lentement en ce moment, c’est par là que vous commencez. Parcourez les éléments marqués comme ayant un impact (faible, moyen ou élevé) et effectuez les réparations suggérées.
Cascade vous montre une répartition de chaque requête HTTP que la page doit traiter, la taille de la requête et le temps qu’il faut pour récupérer chacune d’entre elles. Une fois les éléments urgents corrigés, c’est sur cette liste que vous devez travailler ensuite, car elle vous indiquera les zones de la page qui pourraient bénéficier d’une plus grande optimisation.
En plus de vous montrer quelles ressources prennent le plus de temps à charger, cet onglet indiquera s’il existe des ressources inutiles ou des scripts qui ralentissent les choses. Cela s’avérera également utile si vous souhaitez réduire le nombre de requêtes HTTP en général. Si vous disposez de fonctionnalités importantes ou de fonctionnalités intéressantes mais non essentielles, vous souhaiterez peut-être les supprimer complètement.
Tester votre site Web mobile
Il est désormais important de fournir aux utilisateurs un site Web rapide sur ordinateur. Cependant, si vous êtes préoccupé par la façon dont les pages à chargement lent affectent votre Référencement (et c’est le cas), vous souhaiterez également effectuer un test de vitesse à l’aide de PageSpeed Insights.
PageSpeed Insights donne la priorité à l’expérience mobile. Ainsi, même si vous pouvez analyser et résoudre les problèmes sur ordinateur avec cet outil, vous devez prêter une attention particulière aux résultats de vitesse mobile, car vous ne les trouverez pas dans GTmetrix ou dans d’autres outils de test de vitesse comme Pingdom.
Voici à quoi ressemble l’analyse de la vitesse des pages mobiles :
En plus d’analyser les vitesses de votre ordinateur et de votre mobile, cet outil résout les problèmes d’accessibilité, d’optimisation de la recherche, de réactivité, etc. mise à jour de l’expérience de la page).
L’analyse de vitesse de PageSpeed Insights est similaire à ce que vous trouverez sous les onglets Résumé, Performance et Structure de GTmetrix.
Ce n’est pas seulement le type de données qui est similaire, les recommandations sont également similaires. Une grande partie des commentaires que j’ai reçus sur le site de bureau chevauchent ceux du site mobile. Cependant, ce n’est pas complètement identique, il est donc important d’utiliser ces deux outils afin de pouvoir améliorer les performances sur tous les appareils.
La seule chose qui manque dans ce rapport par rapport à GTmetrix est la Waterfall. Cependant, si vous faites défiler jusqu’aux images timelapse de votre site et cliquez sur Voir l’arborescencevous trouverez l’analyse visuelle et tabulaire suivante de Lighthouse :
Cette page vous montre ce qui se passe avec les bundles JavaScript sur la page. La visualisation est utile car elle vous aidera à identifier rapidement lesquels d’entre eux consomment le plus de ressources.
Ce rapport vous montre également lesquels de ces scripts ont des octets inutilisés. Les octets inutilisés sont problématiques car ils consomment des ressources du serveur qui pourraient être utilisées par d’autres actifs sur la page, ce qui rend le chargement de la page plus long que nécessaire. Cela peut se produire parce qu’il contient du code ancien et inutilisé. Cela peut également se produire lorsque du code qui n’a pas besoin d’être chargé le fait avant les composants qui sont réellement visibles et actifs lorsque la page apparaît pour la première fois.
Comment maintenir le chargement rapide de votre site Web
La liste des recommandations que vous trouverez dans GTmetrix et PageSpeed Insights est utile pour résoudre les problèmes de vitesse que vous rencontrez. tout de suite. En plus de tester régulièrement la vitesse de votre site et de mettre en œuvre les correctifs suggérés, vous devez également faire de la maintenance des performances une habitude de routine.
Si vous cherchez des moyens de maintenir un chargement rapide de votre site, voici une liste de contrôle que vous pouvez utiliser pour vous concentrer sur les perturbateurs de performances courants et les corriger :
Médias
Enregistrez les images dans des formats de nouvelle génération tels que WebP et AVIF chaque fois que cela est possible.
Redimensionnez les images pour l’espace désigné sur le site Web.
Compresser les images.
Implémentez le chargement paresseux.
Lorsque vous téléchargez plusieurs vidéos sur une page, hébergez-les en externe sur YouTube ou Vimeo.
Supprimez les fichiers multimédias inutilisés de votre serveur.
Utilisez les polices système plutôt que de les télécharger sur le serveur.
Code
Utilisez la compression gzip.
Réduisez tous vos fichiers.
Chargez les feuilles de style avant tout.
Supprimez les CSS et JavaScript inutilisés.
Supprimez les CSS et JavaScript bloquant le rendu.
Implémentez le chargement asynchrone de vos fichiers JavaScript.
Concevez des sites Web en utilisant une mentalité axée sur le mobile.
Limitez le nombre de requêtes HTTP sur chaque page à 30.
Désactivez le défilement sans fin.
Minimisez les cookies.
Évitez de mettre en œuvre des redirections.
Supprimez les redirections de page lorsque le trafic a ralenti ou a disparu vers la page d’origine.
Évitez d’utiliser une quantité excessive de transitions de page, d’animations et d’interactions.
Contenu tiers
Limitez le nombre d’éléments externes et d’API que vous connectez à votre site.
Si vous affichez des publicités externes, limitez le nombre d’annonces qui apparaissent sur chaque page.
Vous pouvez également publier des annonces sous forme d’images avec des liens.
Utilisez des intégrations tierces compatibles les unes avec les autres.
Supprimez les plugins ou extensions inutilisés ou inutiles.
Remplacez les extensions lentes par des solutions comparables et plus rapides.
CMS
Implémentez la mise en cache du site Web.
Utilisez les en-têtes Expires pour que les navigateurs sachent quand abandonner le contenu mis en cache.
Gardez votre logiciel de système de gestion de contenu à jour.
Gardez tous les thèmes et extensions tiers à jour.
Nettoyez votre base de données plusieurs fois par an.
Hébergement
Utilisez un hébergement Web conçu pour le type de votre site Web et le trafic prévu.
Adaptez la capacité de votre serveur à mesure que le trafic augmente.
Préparez votre serveur aux périodes de trafic élevé, comme pendant les vacances.
Implémentez la mise en cache côté serveur.
Gardez PHP à jour.
Utilisez un CDN pour les sites Web mondiaux à fort trafic.
Mettez en place un suivi des performances en temps réel.
Conclure
Personne ne veut attendre plus de quelques secondes pour qu’une page Web se charge, surtout s’il s’agit de la page d’accueil d’un site Web. Plutôt que d’attendre que les visiteurs se plaignent ou, pire encore, que votre taux de rebond monte en flèche à cause d’un site à chargement lent, faites de la performance une priorité.
Planifiez des tests de vitesse et des réparations tous les quelques mois pour vous assurer que vous résolvez les problèmes les plus critiques. Ensuite, au moins une fois par an, effectuez un audit en utilisant la liste de contrôle ci-dessus. Même si votre site reçoit une note de passage sur GTmetrix de PageSpeed Insights, vous pouvez toujours trouver des moyens d’accélérer le chargement de vos pages les plus importantes.
avril 18, 2024
Comment diagnostiquer et réparer un site Web à chargement lent
Que pouvez-vous faire pour garantir que les pages les plus importantes de votre site Web se chargent toujours le plus rapidement possible ? Effectuer des tests de vitesse réguliers et maintenir votre site Web bien entretenu pour ses performances vous aidera énormément.
Vous ou votre client avez peut-être remarqué que les pages ne se chargent pas aussi rapidement qu’elles devraient l’être sur votre site Web. Ou, pire encore, un visiteur ou un client s’est plaint d’un problème de vitesse de page.
Alors, par où commencer pour diagnostiquer le problème ?
Commencez par exécuter une analyse des performances. Il existe différents outils qui vous aideront à aller à la racine du problème. Mais ne vous arrêtez pas là. Les sites Web ne ralentissent pas une seule fois, ne sont pas réparés, puis fonctionnent à des vitesses optimales. Ils nécessitent des tests et une maintenance continus.
Dans cet article, nous examinerons ce que font ces outils de test de vitesse et comment vous pouvez les utiliser pour résoudre les problèmes immédiats de chargement des pages. Ensuite, nous détaillerons différentes choses que vous pouvez faire pour que votre site Web continue de fonctionner à toute vitesse.
Comment tester la vitesse de chargement de votre site Web
Il existe un certain nombre d’outils gratuits que vous pouvez utiliser pour analyser les performances de votre site Web. Nous allons utiliser GTmetrix pour tester la vitesse de notre site de bureau et Informations sur la vitesse de page pour tester l’homologue mobile.
Tester votre site Web de bureau
GTmetrix est une bonne option si vous cherchez à diagnostiquer des problèmes avec un site Web de bureau. Voici ce que vous verrez dans votre rapport sur les performances :
Résumé raconte et montre vous à quelle vitesse votre page Web se charge. Il vous fournit également un score de performance basé sur Lighthouse.
Les onglets révèlent encore plus de détails sur les performances de votre page.
Performance fournit une ventilation des métriques de chargement telles que la première peinture de contenu, le temps d’interactivité et l’indice de vitesse.
Structure fournit des conseils sur la façon d’améliorer votre vitesse. Il se concentre sur des choses comme :
Si votre page Web se charge lentement en ce moment, c’est par là que vous commencez. Parcourez les éléments marqués comme ayant un impact (faible, moyen ou élevé) et effectuez les réparations suggérées.
Cascade vous montre une répartition de chaque requête HTTP que la page doit traiter, la taille de la requête et le temps qu’il faut pour récupérer chacune d’entre elles. Une fois les éléments urgents corrigés, c’est sur cette liste que vous devez travailler ensuite, car elle vous indiquera les zones de la page qui pourraient bénéficier d’une plus grande optimisation.
En plus de vous montrer quelles ressources prennent le plus de temps à charger, cet onglet indiquera s’il existe des ressources inutiles ou des scripts qui ralentissent les choses. Cela s’avérera également utile si vous souhaitez réduire le nombre de requêtes HTTP en général. Si vous disposez de fonctionnalités importantes ou de fonctionnalités intéressantes mais non essentielles, vous souhaiterez peut-être les supprimer complètement.
Tester votre site Web mobile
Il est désormais important de fournir aux utilisateurs un site Web rapide sur ordinateur. Cependant, si vous êtes préoccupé par la façon dont les pages à chargement lent affectent votre Référencement (et c’est le cas), vous souhaiterez également effectuer un test de vitesse à l’aide de PageSpeed Insights.
PageSpeed Insights donne la priorité à l’expérience mobile. Ainsi, même si vous pouvez analyser et résoudre les problèmes sur ordinateur avec cet outil, vous devez prêter une attention particulière aux résultats de vitesse mobile, car vous ne les trouverez pas dans GTmetrix ou dans d’autres outils de test de vitesse comme Pingdom.
Voici à quoi ressemble l’analyse de la vitesse des pages mobiles :
En plus d’analyser les vitesses de votre ordinateur et de votre mobile, cet outil résout les problèmes d’accessibilité, d’optimisation de la recherche, de réactivité, etc. mise à jour de l’expérience de la page).
L’analyse de vitesse de PageSpeed Insights est similaire à ce que vous trouverez sous les onglets Résumé, Performance et Structure de GTmetrix.
Ce n’est pas seulement le type de données qui est similaire, les recommandations sont également similaires. Une grande partie des commentaires que j’ai reçus sur le site de bureau chevauchent ceux du site mobile. Cependant, ce n’est pas complètement identique, il est donc important d’utiliser ces deux outils afin de pouvoir améliorer les performances sur tous les appareils.
La seule chose qui manque dans ce rapport par rapport à GTmetrix est la Waterfall. Cependant, si vous faites défiler jusqu’aux images timelapse de votre site et cliquez sur Voir l’arborescencevous trouverez l’analyse visuelle et tabulaire suivante de Lighthouse :
Cette page vous montre ce qui se passe avec les bundles JavaScript sur la page. La visualisation est utile car elle vous aidera à identifier rapidement lesquels d’entre eux consomment le plus de ressources.
Ce rapport vous montre également lesquels de ces scripts ont des octets inutilisés. Les octets inutilisés sont problématiques car ils consomment des ressources du serveur qui pourraient être utilisées par d’autres actifs sur la page, ce qui rend le chargement de la page plus long que nécessaire. Cela peut se produire parce qu’il contient du code ancien et inutilisé. Cela peut également se produire lorsque du code qui n’a pas besoin d’être chargé le fait avant les composants qui sont réellement visibles et actifs lorsque la page apparaît pour la première fois.
Comment maintenir le chargement rapide de votre site Web
La liste des recommandations que vous trouverez dans GTmetrix et PageSpeed Insights est utile pour résoudre les problèmes de vitesse que vous rencontrez. tout de suite. En plus de tester régulièrement la vitesse de votre site et de mettre en œuvre les correctifs suggérés, vous devez également faire de la maintenance des performances une habitude de routine.
Si vous cherchez des moyens de maintenir un chargement rapide de votre site, voici une liste de contrôle que vous pouvez utiliser pour vous concentrer sur les perturbateurs de performances courants et les corriger :
Médias
Code
Caractéristiques et fonctionnalités
Contenu tiers
CMS
Hébergement
Conclure
Personne ne veut attendre plus de quelques secondes pour qu’une page Web se charge, surtout s’il s’agit de la page d’accueil d’un site Web. Plutôt que d’attendre que les visiteurs se plaignent ou, pire encore, que votre taux de rebond monte en flèche à cause d’un site à chargement lent, faites de la performance une priorité.
Planifiez des tests de vitesse et des réparations tous les quelques mois pour vous assurer que vous résolvez les problèmes les plus critiques. Ensuite, au moins une fois par an, effectuez un audit en utilisant la liste de contrôle ci-dessus. Même si votre site reçoit une note de passage sur GTmetrix de PageSpeed Insights, vous pouvez toujours trouver des moyens d’accélérer le chargement de vos pages les plus importantes.
Source link
Partager :
Articles similaires