Thread by @romaintaz

Voici ma première partie sur les #DevTools de Chrome. Nous allons parler #Performances et #Lighthouse. En effet, l'une des utilités des DevTools, c'est de comprendre pourquoi son site ou sa page est lente, et voir ce que l'on peut faire pour y remédier...

Le premier outil est donc "Lighthouse". Il s'agit d'un analyseur de page web. Il faut noter que cet outil n'est pas propre aux Chrome DevTools. On le retrouve sur web.dev/measure/, et peut même s'intégrer dans une chaîne de CI: github.com/GoogleChrome/l…

L'exécution est très simple : on ouvre le panneau adéquat, et on lance l'analyse. On peut y préciser la nature des résultats souhaités : Performances, Accessibilité, Bonnes Pratiques, SEO ou PWA. On peut aussi cibler les mobiles en particulier.

Une fois l'analyse terminée, on se retrouve avec des rapports assez complets. Voyons la partie "Performances". Il faut faire attention à ces résultats qui peuvent pas mal varier en fonction du contexte de test, de la puissance de la machine, etc.

On commence avec une note globale, mais aussi des métriques. Parmi celles-ci, le "First Contentful Paint" qui correspond au temps d'attente avant l'affichage du premier élément significatif pour l'utilisateur, généralement du texte ou une image.

Le "TTI" ("Time To Interactive") est aussi intéressant, car il représente le temps avant que le site devienne complètement utilisable.
Evidemment, plus il est court, mieux c'est !

Plus bas, nous avons des "opportunités", qui correspondent à des "petits" changements pouvant avoir des impacts importants (des "quick wins" comme on dit), Lighthouse nous permettant même d'estimer le gain potentiel.

Parmi ces opportunités, on nous proposera d'activer le http/2 ou la compression, d'éliminer du code non utilisé ou encore de limiter les ressources bloquantes. Enfin, d'autres diagnostics viennent s'ajouter à la liste.

Lighthouse offre également une analyse superficielle de l'accessibilité du site, mais j'y reviendrais dans une série un peu plus tard...

Chose amusante : quelques jours avant ma présentation à #DevoxxFR, j'ai découvert grâce à ma version de Canary que l'outil Lighthouse du DevTools a introduit la notion de "mode"
developer.chrome.com/blog/new-in-de…

Ce mode permet de ne plus se limiter à la seule analyse du chargement de page. Le mode "Timespan" mesure les Performances et les Bonnes Pratiques durant une période de temps, permettant ainsi d'analyser aussi des interactions utilisateurs.

Le troisième mode, "Snapshot", fonctionne un peu comme le mode normal ("Navigation") à ceci près qu'il ne recharge pas la page, et donc analyse la page comme une capture à un instant T.

Voilà, c'est terminé pour #Lighthouse, la prochaine série de tweets viendra dans la journée, et on continuera de parler de performances, avec en particulier l'outil expérimental "Performance Insights".