Avec le projet Core Web Vitals, Google a fait peur Ă beaucoup de monde. Ăa y est l’expĂ©rience utilisateur devient un facteur de classement, bien que trĂšs minime.
Et ton site ? Il se charge facilement et rapidement ?
Pour tester ça, il existe de nombreux outils.
J’ai fait le choix de comparer 4 d’entre eux.
Pour faciliter ta navigation, tu peux accĂ©der directement Ă l’outil qui t’intĂ©resse via le sommaire.
Larguez les amarres ! â”
Pourquoi la vitesse du site web est importanteâ?
Avec cette mise Ă jour, Google frappe un grand coup. Et lâintĂ©gration des Core Web Vitals oblige les sites Ă devenir de plus en plus performant.
Pour rappel, Google attribue un budget de crawl.
Il nâaime pas perdre de temps et son objectif est de pouvoir naviguer le plus rapidement possible sur les sites web.
Au-delĂ du simple crawl, les internautes nâont pas de temps Ă perdre, il leur faut donc lâinformation tout de suite.
Or, si ton site met plus de 3 secondes Ă se charger, tu risques de perdre, en moyenne, 53 % de tes visiteurs (source).
VoilĂ pourquoi il est important de tester rĂ©guliĂšrement vitesse de son site web et vĂ©rifier quâil est performant.
Maintenant, passons en revue 4 outils de tests de performances.
Google PageSpeed Insights
Commençons par celui qui vient directement de chez Google, PageSpeed Insight.
Cet outil a Ă©tĂ© spĂ©cifiquement crĂ©Ă© pour tester les performances dâune page web, et donc la vitesse du site web, selon des mĂ©triques prĂ©cises :
- First Contentful Paint (FCP) : le temps oĂč le premier contenu apparaĂźt Ă lâĂ©cran
- Largest Contentful Paint (LCP) : le temps de rendu du plus grand élément visible
- Speed Index : le temps de chargement global de la page
- Cumulative Layout Shift (CLS) : la stabilité visuelle des éléments
- Time To Interactive (TTI) : dĂ©termine le temps quâil faut pour que la page soit totalement opĂ©rationnelle
- Total Blocking Time (TBT) : compare la durée totale entre le FCP et le TTI
Ces 6 donnĂ©es sont exĂ©cutĂ©es par Lighthouse, qui est disponible Ă tout moment dans lâinspecteur de donnĂ©es de Chrome.
Une fois combinées, il en ressort une note finale allant de 0 à 100.
Un score de performance au-dessus de 90 sera considéré comme bon, 50-89 : à améliorer, <50 : médiocre.
Il est calculé pour la version ordinateur, mais également pour la version mobile du site.
Ce dernier est souvent trÚs médiocre, car la plupart des sites sont créés pour la version ordinateur puis améliorés pour le mobile.
Mais on sait bien que Google crawl les sites dans leur version mobile.
Il est donc trĂšs important dâavoir un site optimisĂ© pour ce format.
La part de trafic sur smartphone ne cesse dâaugmenter et a mĂȘme dĂ©passĂ©, depuis 2019, celle sur lâordinateur.
Et comme ils sont sympas chez Google, lâoutil te fournit toutes les recommandations pour savoir comment amĂ©liorer ton score, et ainsi avoir un site performant.
Pingdom Website Speed Test
Ce site, crĂ©Ă© pour la surveillance de performance des sites, propose un outil gratuit dâanalyse du temps de chargement de ton site.
à la différence du précédent, Pingdom te permet de choisir ta région.
Le test sera donc plus précis, car fait depuis un serveur proche.
Pour la France, on testera la vitesse de son site sur les serveurs de Londres.
Une fois le test effectuĂ©, il tâaffichera 4 premiĂšres donnĂ©es :
- Un score global, de 0 Ă 100, des performances du temps de chargement
- Le poids de ton site qui influe Ă©normĂ©ment sur la vitesse dâaffichage
- Le nombre de requĂȘtes sur la page
- Le temps de chargement complet de la page
En scrollant un peu on peut voir un premier tableau, qui correspond au détail du score vu plus haut.
Un prochain outil sera plus précis sur ces points de détails.
Dans la partie suivante, Pingdom rĂ©parti en 4 tableaux certains points pouvant ralentir le chargement du site, avec dâun cĂŽtĂ© :
- Le contenu par poids
- Le contenu par nombre de requĂȘtes
Et en dessous :
- Le poids par domaine Ă charger
- Le nombre de requĂȘtes par domaines
Cette deuxiĂšme partie nâest pas la plus intĂ©ressante, car on ne peut pas influer sur les domaines externes.
En revanche, la premiĂšre partie te servira Ă comprendre ce qui alourdit ton site (bien souvent ce sont les images), pour pouvoir lâoptimiser et gagner en performance.
Et si tu es vraiment curieux, alors en dessous tu trouveras la temporalitĂ© du chargement de ta page, avec lâordre et le temps de chargement des donnĂ©es et de contenus du site.
Pingdom est utilisable gratuitement en illimitée.
Dareboost
CrĂ©Ă© par quatre amis en 2013, pour leur projet de fin dâĂ©tudes, Dareboost est un outil français dĂ©diĂ© Ă la performance web.
Cet outil nâest pas Ă mettre entre les mains dâun dĂ©butant !
En effet, les rĂ©sultats sont bien plus complets et complexes Ă analyser si lâon nâa pas les connaissances suffisantes.
Dans la premiĂšre zone, tu peux voir de gauche Ă droite :
- Le score global de performance du site
- Les tests qui sont passĂ©s ou non, avec possibilitĂ© dâaller directement aux problĂšmes Ă amĂ©liorer en prioritĂ©
- La vidĂ©o du chargement, oĂč lâon peut jouer sur la vitesse pour voir Ă partir de quel moment il y a le premier affichage et comment le site se charge
La seconde partie est beaucoup plus complĂšte.
On y voit une premiÚre zone qui indique de quelle façon a été simulé le passage sur le site.
Pour lâexemple actuel, tu analyses comme un visiteur qui utilise le navigateur Chrome, dont le serveur le plus proche est situĂ© Ă Paris et qui possĂšde un dĂ©bit internet de 8 Mb/s.
Dans la seconde zone, tu as à droite le poids du site et sa répartition.
Et Ă gauche :
- Le temps de chargement total de la page (LCP)
- Le temps cumulé durant lequel le navigateur est resté bloqué (TBT)
- La stabilité des éléments sur la page (CLS)
On peut voir pour chacun de ces 3 chargements, un morceau de cercle en gris.
Il sâagit tout simplement du temps idĂ©al pour chacun des 3 paramĂštres.
Dans la troisiĂšme zone, on voit quâil nây a aucune erreur de navigateur, et quâil possĂšde un speed index supĂ©rieur Ă 1000.
Ce dernier est un indice de performance sur la vitesse de chargement de la page, sans scroll.
Google recommande quâil soit infĂ©rieur Ă 1000.
Et enfin dans la derniÚre zone, on trouve les technologies utilisées sur le site.
Enfin, tu vas avoir accÚs à la liste des recommandations et bonnes pratiques pour améliorer les performances de ton site.
Tu peux dâailleurs choisir la catĂ©gorie que tu souhaites voir parmi :
- LâaccessibilitĂ©
- La compatibilité
- Le nombre de requĂȘtes
- Lâoptimisation du rendu
- La politique de cache
- La qualité
- Le SEO
- La sécurité
- Le volume de données
- Certaines données spécifiques aux technologies utilisées
Dareboost propose un test gratuit par mois.
En tâinscrivant, tu passes Ă 5 tests par mois, sinon il faudra passer par la formule payante Ă 49 âŹ/mois.
GTmetrix
De loin mon favori, GTmetrix est Ă©galement un site dĂ©diĂ© Ă lâanalyse des performances.
Il a dâailleurs subi une mise Ă jour majeure en novembre 2020.
Ce changement lui permet dâintĂ©grer complĂštement les web vitals de Google, via Lighthouse.
Dans cette premiĂšre partie, tu observes 2 types de contenus : le «âGTmetrix gradeâ» et les «âWeb vitalsâ».
Le premier te donne 2 scores :
- La performance de ton site basé sur les données de Lighthouse
- La structure correspond à la façon dont est construit ton site
La partie de droite te montre les indications des web vitals, obtenus avec Lighthouse.
Ce sont donc les mĂȘmes donnĂ©es que lâon peut retrouver du cĂŽtĂ© de Page speed Insight, Ă savoir :
- Le Largest Contenful Paint (LCP)
- Le Total Blocking Time (TBT)
- Et le Cumulative Layout Shift (CLS)
Ensuite, tu as plusieurs onglets.
Regardons de plus prĂšs ce que chacun dâentre eux peut tâapporter.
Summary
Cet onglet est un résumé des 5 autres. Tu trouveras dessus :
- La visualisation du chargement de la page avec les différentes données de Lighthouse
- Les principaux problÚmes à résoudre, et sur quels éléments
- La division du contenu de la page en poids et nombre de requĂȘtes
Performance
Cette partie va reprendre les temps de chargement des différentes données de performance de Lighthouse.
Tu peux retrouver chaque définition dans la partie sur PageSpeed.
En dessous, il va signaler les différentes durées de chargement reportées par le navigateur :
- Redirection de lâURL
- Connexion au serveur
- RĂ©ponse du serveur
- Réception de la premiÚre donnée
- Premier rendu de la page
- Traitement de la page
- Fin dâanalyse du HTML
- Téléchargement de toutes les ressources
- Temps de chargement global
Structure
Ce tableau t’affiche tous les problĂšmes structurels de ton site.
Il précise quels éléments sont impactés et te dit tout ce qui est déjà bien optimisé.
Il donne un ordre de priorité pour améliorer les performances du site.
Waterfall
Le waterfall, ou graphique en cascade, tâaffiche un graphique qui reprends le chargement de toutes les donnĂ©es chronologiquement.
On peux vraiment analyser tout ce qui bloque le chargement et pendant combien de temps.
Sur cet exemple, tu peux voir que le chargement des polices Google est bloquant.
Vidéo
Elle permet simplement dâavoir une vidĂ©o du chargement de la page.
Lâavantage est de pouvoir la ralentir pour analyser comment se chargent les contenus.
History
Elle garde une trace des diffĂ©rents tests effectuĂ©s, pour une mĂȘme page.
Les versions de GTmetrix
Je te recommande vivement de te créer un compte sur le site.
Une fois connecté, tu peux choisir différentes options pour le test de ton site, notamment le serveur le plus proche de toi.
Dans sa version gratuite, GTmetrix propose 50 tests gratuits par semaine, dont une surveillance de page quotidienne.
Les prix varient ensuite entre 12 $ et 47 $ par mois.
Ă toi de voir ce dont tu as besoin.
Le compte gratuit permet déjà de faire pas mal de tests.
Conclusion
T’as pu voir quâil existe un bon nombre dâoutils pour tester la vitesse dâun site.
Celui que je recommande est Gtmetrix, de par sa simplicitĂ© dâutilisation et son modĂšle Ă©conomique.
En revanche, je ne me focalise jamais sur les donnĂ©es dâun seul outil.
Câest pour ça quâil vaut mieux toujours comparer ces tests avec au moins 2 outils.
Dis-moi en commentaire, quel rĂ©sultat tu as obtenu et ce que tu vas mettre en place đ