Cours Web Performances & SEO
Session 1 Module 4 25 min

Les Outils d'Analyse

DevTools, PageSpeed, Lighthouse, Search Console

1) Prendre en main les DevTools Chrome

Les DevTools Chrome sont ton meilleur allié pour analyser la performance. Tu peux les ouvrir avec F12 ou clic droit > Inspecter. Pas besoin de savoir coder pour les utiliser, il suffit de savoir observer.

L'onglet Elements te permet de voir le HTML et le CSS de la page. L'onglet Network est particulièrement utile : tu y vois toutes les requêtes (fichiers téléchargés), le poids de chaque ressource, et le waterfall qui montre l'ordre de chargement. Tu peux aussi simuler une connexion lente (throttling) et désactiver le cache pour tester en conditions réelles.

L'onglet Lighthouse te permet de lancer un audit complet directement, tandis que l'onglet Performance (plus avancé) enregistre tout le processus de chargement pour une analyse détaillée.

✏️

Exercice : Explorer ensemble les DevTools sur un site

2) Google PageSpeed Insights

PageSpeed Insights est l'outil de référence pour mesurer la performance d'un site. Il te donne deux types de données essentielles.

Les données de terrain (Field Data) représentent les données réelles des utilisateurs Chrome sur les 28 derniers jours. C'est ce que Google utilise pour le classement SEO, donc c'est la section la plus importante. Les données de laboratoire (Lab Data) sont une simulation Lighthouse, utile pour identifier les problèmes techniques à corriger.

0-49 Rouge (mauvais)
50-89 Orange (à améliorer)
90-100 Vert (bon)

La section Opportunités liste ce que tu peux améliorer avec une estimation du gain potentiel. Les Diagnostics donnent des informations complémentaires sur la structure de ta page.

✏️

Exercice pratique : Analyser 3 sites ensemble

3) Google Lighthouse

Lighthouse est intégré directement dans les DevTools Chrome (F12 > onglet Lighthouse). Il analyse ton site sur 5 catégories :

  • Performance
  • Accessibilité
  • Bonnes pratiques
  • SEO
  • PWA

Son principal avantage est de pouvoir tester un site en local ou en développement, avant même sa mise en production. Tu peux configurer le test pour simuler un mobile ou desktop, et choisir les conditions réseau. Le rapport généré est détaillé et actionnable.

✏️

Exercice pratique : Générer un rapport Lighthouse

4) Google Search Console - Rapport Core Web Vitals

Dans la Search Console, tu trouveras le rapport Core Web Vitals sous Expérience > Signaux Web essentiels. Les vues Mobile et Desktop sont séparées car les performances peuvent varier significativement.

Tes URLs sont classées en 3 catégories : Bon (vert), À améliorer (orange), et Médiocre (rouge). Les URLs sont groupées par type de problème, ce qui te permet de cibler tes optimisations. Tu peux suivre l'évolution dans le temps et demander une validation après corrections pour que Google réévalue tes pages.

5) Autres outils utiles

Au-delà des outils Google, plusieurs alternatives méritent d'être connues. GTmetrix offre une analyse détaillée gratuite avec un historique de tes tests. WebPageTest permet des tests avancés depuis plusieurs localisations dans le monde.

Treo est spécialisé dans le monitoring continu des Core Web Vitals. Et Squoosh est un excellent outil de compression d'images que nous reverrons dans le module sur l'optimisation des images.

🎯

Challenges Pratiques

Mettez en pratique ce que vous venez d'apprendre ! Analysez ces pages avec des problèmes de performance intentionnels.

Voir tous les challenges →
Question 1/4

Comment ouvrir les DevTools Chrome ?

Les DevTools s'ouvrent avec F12 ou clic droit > Inspecter. C'est ton meilleur allie pour analyser la performance.