Audit de Performance Web

Votre connaissance des métriques de performance web, des seuils et des API d'outils peut être obsolète. Préférez la récupération à la pré-formation lors de la citation de chiffres ou de recommandations spécifiques.

Sources de Récupération

Source	Comment récupérer	Utiliser pour
web.dev	`https://web.dev/articles/vitals`	Seuils Core Web Vitals, définitions
Documentation Chrome DevTools	`https://developer.chrome.com/docs/devtools/performance`	API d'outils, analyse de trace
Notation Lighthouse	`https://developer.chrome.com/docs/lighthouse/performance/performance-scoring`	Poids des scores, seuils des métriques

D'ABORD : Vérifier la Disponibilité des Outils MCP

Exécutez ceci avant de commencer. Essayez d'appeler navigate_page ou performance_start_trace. Si indisponible, ARRÊTEZ—le serveur MCP chrome-devtools n'est pas configuré.

Demandez à l'utilisateur d'ajouter ceci à sa configuration MCP :

"chrome-devtools": {
  "type": "local",
  "command": ["npx", "-y", "chrome-devtools-mcp@latest"]
}

Directives Clés

Soyez affirmatif : Vérifiez les réclamations en vérifiant les requêtes réseau, le DOM ou la base de code—puis énoncez les résultats de manière définitive.
Vérifiez avant de recommander : Confirmez que quelque chose n'est pas utilisé avant de suggérer sa suppression.
Quantifiez l'impact : Utilisez les économies estimées à partir des insights. Ne priorisez pas les modifications avec un impact de 0ms.
Ignorez les non-problèmes : Si les ressources de blocage de rendu ont un impact estimé de 0ms, notez-le mais ne recommandez pas d'action.
Soyez précis : Dites « compresser hero.png (450KB) en WebP » et non « optimiser les images ».
Priorisez impitoyablement : Un site avec un LCP de 200ms et un CLS de 0 est déjà excellent—dites-le.

Référence Rapide

Tâche	Appel d'Outil
Charger la page	`navigate_page(url: "...")`
Démarrer la trace	`performance_start_trace(autoStop: true, reload: true)`
Analyser l'insight	`performance_analyze_insight(insightSetId: "...", insightName: "...")`
Lister les requêtes	`list_network_requests(resourceTypes: ["Script", "Stylesheet", ...])`
Détails de la requête	`get_network_request(reqid: <id>)`
Snapshot d'accessibilité	`take_snapshot(verbose: true)`

Flux de Travail

Copiez cette checklist pour suivre la progression :

Progression de l'Audit :
- [ ] Phase 1 : Trace de performance (navigation + enregistrement)
- [ ] Phase 2 : Analyse Core Web Vitals (inclut les responsables de CLS)
- [ ] Phase 3 : Analyse réseau
- [ ] Phase 4 : Snapshot d'accessibilité
- [ ] Phase 5 : Analyse de la base de code (ignorer si site tiers)

Phase 1 : Trace de Performance

Naviguez vers l'URL cible :
```
navigate_page(url: "<target-url>")
```
Démarrez une trace de performance avec rechargement pour capturer les métriques de chargement à froid :
```
performance_start_trace(autoStop: true, reload: true)
```
Attendez la fin de la trace, puis récupérez les résultats.

Dépannage :

Si la trace renvoie vide ou échoue, vérifiez que la page s'est chargée correctement avec navigate_page d'abord
Si les noms d'insights ne correspondent pas, inspectez la réponse de la trace pour découvrir les insights disponibles

Phase 2 : Analyse Core Web Vitals

Utilisez performance_analyze_insight pour extraire les métriques clés.

Remarque : Les noms d'insights peuvent varier selon les versions de Chrome DevTools. Si un nom d'insight ne fonctionne pas, vérifiez le insightSetId de la réponse de trace pour découvrir les insights disponibles.

Noms d'insights courants :

Métrique	Nom de l'Insight	Quoi Chercher
LCP	`LCPBreakdown`	Temps jusqu'à la plus grande peinture du contenu ; répartition de TTFB, chargement des ressources, délai de rendu
CLS	`CLSCulprits`	Éléments causant des décalages de mise en page (images sans dimensions, contenu injecté, échanges de polices)
Blocage de Rendu	`RenderBlocking`	CSS/JS bloquant la première peinture
Latence du Document	`DocumentLatency`	Problèmes de temps de réponse du serveur
Dépendances Réseau	`NetworkRequestsDepGraph`	Chaînes de requêtes retardant les ressources critiques

Exemple :

performance_analyze_insight(insightSetId: "<id-from-trace>", insightName: "LCPBreakdown")

Seuils clés (bon/à améliorer/mauvais) :

TTFB : < 800ms / < 1.8s / > 1.8s
FCP : < 1.8s / < 3s / > 3s
LCP : < 2.5s / < 4s / > 4s
INP : < 200ms / < 500ms / > 500ms
TBT : < 200ms / < 600ms / > 600ms
CLS : < 0.1 / < 0.25 / > 0.25
Speed Index : < 3.4s / < 5.8s / > 5.8s

Phase 3 : Analyse Réseau

Listez toutes les requêtes réseau pour identifier les opportunités d'optimisation :

list_network_requests(resourceTypes: ["Script", "Stylesheet", "Document", "Font", "Image"])

Cherchez :

Ressources bloquant le rendu : JS/CSS dans <head> sans attributs async/defer/media
Chaînes réseau : Ressources découvertes tardivement car elles dépendent du chargement d'autres ressources en premier (par ex., importations CSS, polices chargées par JS)
Préchargements manquants : Ressources critiques (polices, images héros, scripts clés) non préchargées
Problèmes de mise en cache : En-têtes Cache-Control, ETag ou Last-Modified manquants ou faibles
Charges utiles volumineuses : Bundles JS/CSS non compressés ou surdimensionnés
Préconnexions inutilisées : Si signalées, vérifiez si DES requêtes sont allées à cette origine. Si zéro requête, c'est définitivement inutilisé—recommandez la suppression. Si des requêtes existent mais se sont chargées tardivement, la préconnexion peut être précieuse.

Pour les informations détaillées de la requête :

get_network_request(reqid: <id>)

Phase 4 : Snapshot d'Accessibilité

Prenez un snapshot de l'arborescence d'accessibilité :

take_snapshot(verbose: true)

Signalez les lacunes de haut niveau :

IDs ARIA manquants ou dupliqués
Éléments avec ratios de contraste insuffisants (vérifiez par rapport à WCAG AA : 4.5:1 pour le texte normal, 3:1 pour le texte large)
Pièges au focus ou indicateurs de focus manquants
Éléments interactifs sans noms accessibles

Phase 5 : Analyse de la Base de Code

Ignorer si vous auditez un site tiers sans accès à la base de code.

Analysez la base de code pour comprendre où des améliorations peuvent être apportées.

Détecter le Framework et le Bundler

Recherchez les fichiers de configuration pour identifier la pile :

Outil	Fichiers de Configuration
Webpack	`webpack.config.js`, `webpack.*.js`
Vite	`vite.config.js`, `vite.config.ts`
Rollup	`rollup.config.js`, `rollup.config.mjs`
esbuild	`esbuild.config.js`, scripts de build avec `esbuild`
Parcel	`.parcelrc`, `package.json` (champ parcel)
Next.js	`next.config.js`, `next.config.mjs`
Nuxt	`nuxt.config.js`, `nuxt.config.ts`
SvelteKit	`svelte.config.js`
Astro	`astro.config.mjs`

Vérifiez également package.json pour les dépendances du framework et les scripts de build.

Tree-Shaking et Code Mort

Webpack : Vérifiez mode: 'production', sideEffects dans package.json, optimisation usedExports
Vite/Rollup : Tree-shaking activé par défaut ; vérifiez les options treeshake
Cherchez : Fichiers barrel (index.js réexporte), grandes bibliothèques d'utilitaires importées en gros (lodash, moment)

JS/CSS Inutilisés

Vérifiez CSS-in-JS par rapport à l'extraction CSS statique
Cherchez la configuration PurgeCSS/UnCSS (configuration content de Tailwind)
Identifiez les importations dynamiques par rapport au chargement empressé

Polyfills

Vérifiez les cibles @babel/preset-env et le paramètre useBuiltIns
Cherchez les importations core-js (souvent surdimensionnées)
Vérifiez la configuration browserslist pour un ciblage trop large

Compression et Minification

Vérifiez la minification terser, esbuild ou swc
Cherchez la compression gzip/brotli dans la sortie de build ou la configuration du serveur
Vérifiez les cartes sources dans les builds de production (doivent être externes ou désactivées)

Format de Sortie

Présentez les résultats comme suit :

Résumé Core Web Vitals - Tableau avec métrique, valeur et notation (bon/à améliorer/mauvais)
Problèmes Principaux - Liste priorisée des problèmes avec impact estimé (haut/moyen/bas)
Recommandations - Corrections spécifiques et exploitables avec extraits de code ou modifications de configuration
Résultats de la Base de Code - Framework/bundler détectés, opportunités d'optimisation (omettre si pas d'accès à la base de code)