Site lent : diagnostic avec DevTools, PageSpeed et MySQL
Outils web

Site lent : diagnostic avec DevTools, PageSpeed et MySQL

Diagnostiquer un site lent couche par couche : PageSpeed Insights, DevTools, Lighthouse 13, TTFB, Server-Timing, Xdebug, requêtes MySQL lentes et CDN.

Mis à jour le 1er novembre 2026. Ajouts : panneau Performance de Chrome, audits de Lighthouse 13, décomposition du TTFB, Server-Timing, Xdebug 3, journal MySQL et statuts de cache Cloudflare. Les libellés incertains ont été vérifiés ou retirés.

Un site lent l’est à cause du navigateur (images, scripts, CSS), du serveur, de la base de données ou du réseau. Chaque outil n’éclaire qu’une couche : l’ordre d’utilisation compte autant que les outils. Cette méthode vaut pour tout site. Les corrections propres à chaque CMS sont dans Core Web Vitals WordPress et Core Web Vitals PrestaShop.

L’ordre de diagnostic

ÉtapeOutilQuestion poséeSi oui
1PageSpeed InsightsLes visiteurs réels ont-ils un problème, et sur quelle métrique ?passer à 2
2DevTools, panneau PerformanceQuel élément ou quelle interaction est lent ?passer à 3 si le HTML arrive tard
3curl, onglet RéseauLe TTFB du HTML est-il élevé ?passer à 4
4Server-Timing, profileur PHPLe temps se perd-il dans le code ?corriger le code ou le plugin
5Journal des requêtes lentesLe temps se perd-il en base ?index, requête, cache
6CDNLes visiteurs lointains sont-ils seuls touchés ?mettre en cache au plus près

Refaites la mesure après chaque modification, dans les mêmes conditions.

Étape 1 : PageSpeed Insights

PageSpeed Insights (PSI) affiche deux types de données. Lisez d’abord la partie haute.

Les seuils des Core Web Vitals, évalués au 75e percentile :

MétriqueBonMauvais
LCP (affichage du contenu principal)≤ 2,5 s> 4 s
INP (réactivité aux interactions)≤ 200 ms> 500 ms
CLS (stabilité visuelle)≤ 0,1> 0,25

CrUX ne collecte ni Chrome sur iOS, ni les autres navigateurs comme Edge. Une page n’y figure que si elle est indexable (code 200, pas de noindex) et assez visitée. Le rapport « Signaux Web essentiels » de la Search Console utilise les mêmes données : voir le guide Google Search Console 2026.

Étape 2 : le panneau Performance des DevTools

Le panneau Performance de Chrome affiche dès son ouverture le LCP et le CLS locaux, puis l’INP si vous interagissez. Il peut charger les données terrain de CrUX pour comparaison.

Réglages à faire avant de mesurer :

Pour le LCP, enregistrez un chargement de la page : le panneau désigne l’élément LCP et décompose son délai. web.dev donne une répartition indicative pour les quatre parties :

Partie du LCPPart indicativeCause typique si elle déborde
TTFBenviron 40 %serveur, cache, base de données
Délai de chargement de la ressourcemoins de 10 %image découverte tard, loading="lazy" sur l’image LCP
Durée de chargement de la ressourceenviron 40 %image trop lourde ou mal dimensionnée
Délai de rendu de l’élémentmoins de 10 %CSS ou JavaScript bloquant, police tardive

Pour l’INP, enregistrez une interaction (menu, filtre, ajout au panier) et cherchez les tâches de plus de 50 ms. La pile d’appels indique le fichier responsable.

Lighthouse 13 : lire les nouveaux audits

Lighthouse 13, publié le 10 octobre 2025, a remplacé de nombreux audits par des « insights », comme dans le panneau Performance. Le calcul du score n’a pas changé. Si vous exploitez le JSON, utilisez les nouveaux identifiants :

Nouvel auditRemplace
lcp-discovery-insightprioritize-lcp-image, lcp-lazy-loaded
lcp-phases-insightlargest-contentful-paint-element
document-latency-insightserver-response-time, redirects, uses-text-compression
render-blocking-insightrender-blocking-resources
image-delivery-insightmodern-image-formats, uses-optimized-images, uses-responsive-images
cls-culprits-insightlayout-shifts, unsized-images, non-composited-animations

Lighthouse ne mesure pas l’INP : il utilise le Total Blocking Time (TBT) comme indicateur de substitution. En ligne de commande, Lighthouse 13 demande Node 22.19 ou plus récent :

npx lighthouse https://www.exemple.fr/ --only-categories=performance --output=json --output-path=./rapport.json

Le score varie d’un passage à l’autre : comparez plusieurs exécutions.

Étape 3 : le TTFB

Le TTFB (Time To First Byte) est le délai entre la requête et le premier octet de la réponse. web.dev le juge bon jusqu’à 0,8 s et mauvais au-delà de 1,8 s. Ce n’est pas un Core Web Vital, mais il fait partie du LCP.

curl permet de le décomposer :

curl -o /dev/null -s -w "DNS : %{time_namelookup}\nTCP : %{time_connect}\nTLS : %{time_appconnect}\nTTFB : %{time_starttransfer}\nTotal : %{time_total}\n" https://www.exemple.fr/

Sous Windows PowerShell, appelez curl.exe pour éviter l’alias vers Invoke-WebRequest. Les valeurs sont cumulées. L’écart entre TTFB et TLS correspond surtout au temps de génération côté serveur.

ConstatCouche en cause
TTFB élevé sur le HTML, fichiers statiques rapidesserveur : PHP, base, absence de cache de page
TTFB correct, LCP élevénavigateur : image, CSS, JavaScript, police
TTFB élevé seulement depuis l’étrangerréseau : distance, un CDN peut aider

Faites plusieurs mesures, page en cache et hors cache. Les journaux du serveur aident à repérer les pics : voir analyser les logs Nginx avec un script. Sans terminal, utilisez notre vérificateur d’état du serveur et un vérificateur de taille de page.

Étape 4 : Server-Timing et profileur PHP

Server-Timing

L’en-tête Server-Timing envoie au navigateur des durées mesurées par le serveur. Chrome les affiche dans l’onglet Réseau, sous « Timing ». Il indique si le temps se perd en base ou dans le code :

<?php
$debut = hrtime(true);

$t0 = hrtime(true);
// ... requêtes SQL de la page ...
$db = (hrtime(true) - $t0) / 1e6;

// ... reste du traitement, avant tout envoi de HTML ...
$total = (hrtime(true) - $debut) / 1e6;

header(sprintf('Server-Timing: db;dur=%.1f;desc="Base", app;dur=%.1f', $db, $total));

Les durées sont en millisecondes, et l’en-tête doit partir avant le HTML. Il expose votre infrastructure : réservez-le à la préproduction ou aux administrateurs.

Xdebug 3 en mode profilage

Xdebug enregistre le temps passé dans chaque fonction PHP. Réservez-le à la préproduction : il ralentit l’exécution. Configuration dans php.ini :

xdebug.mode=profile
xdebug.output_dir=/tmp/xdebug
xdebug.start_with_request=trigger

Avec trigger, le profil n’est produit que si la requête porte XDEBUG_TRIGGER (paramètre GET, POST ou cookie) :

curl -s -o /dev/null "https://preprod.exemple.fr/?XDEBUG_TRIGGER=1"

Les fichiers commencent par cachegrind.out.. Ouvrez-les avec KCacheGrind (Linux), QCacheGrind (Windows et macOS) ou Webgrind. QCacheGrind ne lit pas les fichiers compressés : ajoutez xdebug.use_compression=false.

Pour lire le profil :

Les hooks des plugins et des modules apparaissent dans ces appels. PrestaShop a aussi son propre outil de debug.

Étape 5 : le journal des requêtes lentes MySQL

Si le temps se perd en base, le journal des requêtes lentes est le point de départ le plus direct. Variables utiles, d’après la documentation de MySQL 8.4 :

VariableRôle
slow_query_logactive (1) ou désactive (0) le journal
long_query_timedurée minimale en secondes, 10 par défaut, précision à la microseconde
slow_query_log_filechemin du fichier
log_queries_not_using_indexesjournalise aussi les requêtes sans index, désactivé par défaut
SET GLOBAL slow_query_log = 1;
SET GLOBAL long_query_time = 0.5;
SHOW VARIABLES LIKE 'slow_query_log_file';

Ces commandes demandent des droits d’administration et sont perdues au redémarrage. Sur un mutualisé, passez par l’interface de l’hébergeur.

Pour synthétiser le journal :

mysqldumpslow -s t -t 10 /var/lib/mysql/serveur-slow.log

pt-query-digest, de Percona Toolkit, produit une analyse plus détaillée. Placez ensuite EXPLAIN devant la requête suspecte. Une valeur ALL dans la colonne type signale un parcours complet de la table. Comparez le plan avant et après un index, qui ralentit aussi les écritures. Si la requête vient d’un plugin ou d’un module, ne modifiez pas le cœur du CMS. Sur PrestaShop, voir aussi configurer PHP, MySQL et MariaDB.

Étape 6 : le CDN

Un CDN sert des copies de vos fichiers depuis des serveurs proches du visiteur. Il aide quand la distance est en cause. Il ne règle rien pour :

Pour vérifier le cache, lisez l’en-tête de statut deux fois de suite :

curl -sI https://www.exemple.fr/wp-content/uploads/image.webp | grep -i cf-cache-status

Chez Cloudflare, les valeurs principales sont :

StatutSignification
HITservi depuis le cache
MISScachable, mais absent du cache : servi par l’origine
BYPASSréponse de l’origine jugée non cachable
DYNAMICjugé non éligible au cache dès la requête

Cloudflare ne met pas le HTML en cache par défaut : elle renvoie DYNAMIC sans règle de cache. Si vous en créez une, excluez les pages personnalisées.

Questions fréquentes

Ces outils conviennent-ils à WordPress et PrestaShop ?

Oui. Les outils du navigateur analysent n’importe quelle page. Server-Timing, Xdebug et le journal MySQL demandent un accès au serveur ou à une préproduction.

Pourquoi PageSpeed Insights n’affiche-t-il pas de données terrain ?

L’URL et l’origine n’ont pas assez de visites éligibles, ou la page n’est pas indexable. Mesurez alors vos visiteurs avec la bibliothèque JavaScript web-vitals (onLCP, onINP, onCLS).

Faut-il être développeur pour faire ce diagnostic ?

Pour les étapes 1 à 3, non : elles suffisent à situer la couche en cause. Pour le profilage PHP et l’analyse SQL, transmettez vos mesures à un développeur ou à votre hébergeur.

La vitesse a-t-elle un impact sur le référencement ?

Google indique que les Core Web Vitals sont utilisés par ses systèmes de classement, sans garantie de position. La pertinence du contenu reste déterminante.

Sources

Agence web PrestaShop & WordPress

Agence web spécialisée PrestaShop et WordPress : création, maintenance, sécurité, performance et référencement. Nos tutoriels sont issus de nos interventions sur de vraies boutiques.

L'agence Genisoft → LinkedIn →