Site lent : comment diagnostiquer et corriger les problèmes de performance

Votre site est lent et vous ne savez pas par où commencer. C’est rarement une seule cause : images trop lourdes, hébergement sous-dimensionné, JavaScript mal chargé… les problèmes s’accumulent. Avant de toucher quoi que ce soit, il faut diagnostiquer. Ce guide vous emmène étape par étape vers un site rapide.

Un site lent, ce n’est pas qu’un problème technique :

• Vous perdez des visiteurs : plus de 50 % abandonnent une page qui met plus de 3 secondes à charger.
• Votre taux de rebond augmente et vos conversions chutent.
• Google vous pénalise : la vitesse est un facteur de classement officiel.

Je suis Sébastien Pelletier, développeur web freelance. La lenteur d’un site est l’un des problèmes que je rencontre le plus souvent chez mes clients, que ce soit sur des sites existants à optimiser ou des projets à refondre de zéro.

TL;DR — Vous voulez aller vite ?

1. Passez votre site sur PageSpeed Insights.
2. Corrigez en priorité les erreurs marquées en rouge dans le rapport, puis les orange.
3. Vérifiez votre Time To First Byte (TTFB) : sous 600 ms c’est correct, sous 200 ms c’est excellent. Si c’est trop élevé, activez un CDN (Cloudflare par exemple).
4. Si ça ne suffit pas, votre hébergement est probablement inadapté : serveur mutualisé surchargé, ressources insuffisantes par rapport à votre trafic.

Votre site est-il vraiment lent ? Éliminer les fausses pistes

Avant de plonger dans le diagnostic, assurez-vous que le problème vient bien de votre site et pas de votre connexion.

1. Testez d’abord deux ou trois sites à la réputation bien établie : leboncoin.fr ou sncf-connect.com par exemple. Si ces sites s’affichent normalement, votre connexion n’est pas en cause.
2. Pour en avoir le cœur net, tapez « test de vitesse internet » directement dans Google. L’outil intégré vous affiche votre débit montant et descendant en quelques secondes. Une connexion descendante inférieure à 5 Mb/s peut expliquer des lenteurs, peu importe l’état de votre site.

Si tout s’affiche correctement chez vous, le problème vient bien de votre site. On peut passer au diagnostic.

Diagnostiquer avec Google PageSpeed Insights

Comme vu dans le TL;DR, le premier réflexe est de passer votre URL sur Google PageSpeed Insights. C’est l’outil de Google, gratuit, fiable, et il couvre largement tout ce dont vous avez besoin pour identifier vos problèmes de performance.

Il existe des alternatives comme GTmetrix ou Lighthouse, mais PageSpeed Insights est plus que suffisant pour détecter l’essentiel des problèmes et prioriser vos corrections.

L’outil vous génère un score sur 100 et un rapport détaillé. Voici comment l’interpréter :

Score	Interprétation
90 à 100	✅ Excellent, votre site est rapide
50 à 89	⚠ Des améliorations sont nécessaires
0 à 49	❌ Problèmes importants, à traiter en priorité

Deux points importants à retenir : le rapport est disponible en version mobile et desktop. Concentrez-vous en priorité sur le mobile, Google indexe votre site en mobile-first depuis 2018.

Les Core Web Vitals : les métriques qui comptent pour Google

PageSpeed Insights met en avant trois métriques clés appelées Core Web Vitals. Ce sont les indicateurs que Google utilise pour évaluer l’expérience utilisateur de votre site et ils impactent directement votre positionnement.

Métrique	Ce qu’elle mesure	Objectif
LCP (Largest Contentful Paint)	Temps de chargement du plus grand élément visible	< 2,5 s
INP (Interaction to Next Paint)	Réactivité de la page aux interactions	< 200 ms
CLS (Cumulative Layout Shift)	Stabilité visuelle, les éléments qui bougent au chargement	< 0,1
FCP (First Contentful Paint)	Temps avant l’affichage du premier élément (texte, image)	< 1,8 s
TTFB (Time To First Byte)	Délai avant de recevoir le premier octet du serveur	< 600 ms

Visez le vert sur ces cinq métriques. Si l’une d’elles est en rouge, c’est votre priorité numéro un avant toute autre optimisation.

Mon site est en local, comment faire ?

Si votre site n’est pas encore en ligne, PageSpeed Insights ne peut pas l’analyser. Pas de panique, Chrome intègre directement l’outil Lighthouse qui fait exactement la même chose.

Voici comment procéder :

1. Installez Google Chrome si ce n’est pas déjà fait.
2. Ouvrez votre site en local dans Chrome.
3. Appuyez sur F12 (ou clic droit > Inspecter) pour ouvrir les outils développeur.
4. Cliquez sur l’onglet Lighthouse (si vous ne le voyez pas, cliquez sur les >> pour afficher les onglets cachés).
5. Sélectionnez Mobile ou Desktop selon ce que vous voulez analyser.
6. Cliquez sur Analyser la page.

Lighthouse génère le même type de rapport que PageSpeed Insights, avec un score et des recommandations détaillées. Pratique pour corriger vos problèmes avant même la mise en ligne.

Ces outils vous donnent une vision globale des problèmes de votre site. Ils peuvent sembler complexes si vous n’êtes pas développeur. La suite de ce guide reprend les problèmes les plus fréquents, dans l’ordre, avec les correctifs associés.

---

Optimisation des médias

Les images et vidéos sont dans la majorité des cas la première cause de lenteur. C’est aussi là où vous pouvez gagner le plus de performance rapidement, sans toucher à votre code.

Compresser et redimensionner vos images

La règle de base : chaque image doit peser moins de 100 ko. C’est souvent loin d’être le cas sur un site non optimisé.

Pour compresser vos images, deux outils gratuits suffisent :

• TinyPNG : simple, en ligne, efficace sur les PNG et JPEG.
• Squoosh : plus complet, permet de comparer la qualité avant/après et de choisir le format de sortie.

Pour voir le poids de vos images sans quitter votre navigateur, ouvrez les DevTools avec F12, allez dans l’onglet Réseau, rechargez la page et filtrez par Img. Vous voyez immédiatement quelles images sont trop lourdes.

Passer au format WebP (et AVIF)

Le format de vos images compte autant que leur compression.

Format	Caractéristiques
JPEG / PNG	Formats classiques, lourds
WebP	Jusqu’à 30 % plus léger que JPEG, supporté par tous les navigateurs modernes
AVIF	Encore plus récent, recommandé par PageSpeed depuis 2024, gains supplémentaires sur la compression

Si vous êtes sur WordPress, un plugin comme Imagify ou ShortPixel convertit automatiquement vos images au bon format. Si vous passez par un CDN, certains comme Cloudflare le font à la volée sans rien installer.

Adapter les images à la résolution d’écran

Charger une image de 3000 px sur un écran mobile de 400 px n’a aucun sens. Vous transférez des données inutiles et ralentissez le chargement pour rien.

La solution est les attributs HTML srcset et sizes qui permettent de servir une image différente selon la résolution de l’écran. Plus d’informations sur cet article, comment utiliser des images responsives en HTML.

Si vous utilisez un CMS, cette gestion est souvent automatique ou disponible via plugin.

Vidéos : ne pas les héberger en direct

Uploader une vidéo directement sur votre serveur est une mauvaise idée. Le fichier est lourd, le streaming n’est pas optimisé et votre serveur va souffrir.

Deux bonnes pratiques à adopter :

• Hébergez vos vidéos sur YouTube ou Vimeo et intégrez-les en iframe. Le chargement est géré par leurs serveurs, pas le vôtre.
• Si vous avez une vidéo en fond de page, utilisez un poster : une image statique s’affiche immédiatement pendant que la vidéo se charge en arrière-plan.

Évitez le format GIF

Le GIF est le pire format que vous puissiez utiliser pour une animation. Un GIF de quelques secondes peut facilement peser plusieurs mégaoctets. Une vidéo MP4 de la même animation sera 5 à 10 fois plus légère. Remplacez systématiquement vos GIF par des vidéos.

Exemple avec cette conversion en mp4, qui nous permet de gagner 84% sur la taille de départ du gif. (719.63 ko à 107 ko)

Lazy loading : ne chargez que ce qui est visible

Tout ce qui se trouve en dessous de la zone visible au chargement (sous le LCP) n’a pas besoin d’être chargé immédiatement. C’est valable pour vos images, vidéos et iframes.Le principe est simple : les éléments se chargent uniquement quand l’utilisateur scrolle jusqu’à eux. Résultat, la page s’affiche plus vite et vous ne gaspillez pas de bande passante.

Sur WordPress, le plugin gratuit LazyLoad développé par l’équipe de WP Rocket gère ça automatiquement en quelques clics.

Optimisation du JavaScript et du CSS

Les fichiers JS et CSS mal gérés sont une cause fréquente de lenteur. Contrairement aux images, le problème est souvent invisible : le site semble normal mais le navigateur bloque en arrière-plan avant d’afficher quoi que ce soit.

Minifier vos fichiers JS et CSS

Un fichier JS ou CSS non minifié contient des espaces, des commentaires, des sauts de ligne. Tout ça est utile pour le développeur, inutile pour le navigateur et ça alourdit vos fichiers.

La minification supprime tout ce qui est superflu sans changer le comportement du code. Les outils de référence :

• UglifyJS pour le JavaScript
• CSSNano pour le CSS
• Sur WordPress, un plugin comme WP Rocket ou Autoptimize s’en charge automatiquement.

Ne charger le JS que là où il est nécessaire

Un slider JavaScript chargé sur toutes vos pages alors qu’il n’apparaît que sur la homepage, c’est du poids inutile sur chaque page de votre site.

Deux bonnes pratiques :

• Chargez vos scripts uniquement sur les pages qui en ont besoin.
• Utilisez les attributs defer ou async sur vos balises <script> pour ne pas bloquer l’affichage de la page pendant le chargement du JS.

Réduire le nombre de requêtes simultanées

Le navigateur ne peut pas charger un nombre illimité de ressources en parallèle. Appeler 50 petits fichiers JS et CSS est moins efficace qu’appeler un ou deux fichiers bien consolidés.

HTTP/2 et HTTP/3 atténuent ce problème mais ne le suppriment pas. La consolidation reste une bonne pratique.

Déboguer un JS qui bloque ou boucle

Votre page freeze ? L’onglet ne répond plus ? C’est souvent un script JavaScript qui part en boucle infinie ou qui effectue trop d’opérations en peu de temps.

Pour identifier le coupable, ouvrez les DevTools avec F12 et allez dans l’onglet Performance. Lancez un enregistrement, reproduisez le problème et cherchez les longues barres rouges ou jaunes : elles indiquent les scripts qui monopolisent le navigateur.

Temps de réponse serveur trop élevé (TTFB)

Le Time To First Byte (TTFB) mesure le délai entre la requête du navigateur et le premier octet reçu de votre serveur. C’est l’un des indicateurs les plus importants : un TTFB élevé ralentit tout le reste, peu importe la qualité de vos autres optimisations.

Cible : sous 600 ms. Sous 200 ms c’est excellent.

Mettre en place un cache serveur

Sans cache, chaque visite de votre site déclenche une chaîne d’opérations : appel à la base de données, génération de la page, envoi au navigateur. C’est long et gourmand en ressources.

Avec un cache, la page est générée une seule fois et stockée sous forme de fichier HTML statique. Les visites suivantes reçoivent directement ce fichier. Résultat : un gain de 2 à 5x sur le temps de réponse.

Sur WordPress, deux options :

• WP Rocket : payant, simple à configurer, la référence.
• W3 Total Cache : beaucoup de fonctionnalités disponibles en gratuit.

Activer la compression Gzip / Brotli

La compression réduit le poids de vos fichiers HTML, CSS et JS de 60 à 80 % avant de les envoyer au navigateur. C’est transparent pour l’utilisateur et le gain est immédiat.

La configuration se fait côté serveur. Voici un exemple pour gzip sur Nginx :

gzip on;
gzip_types text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/richtext text/plain text/xsd text/xsl text/xml image/bmp application/java application/msword application/vnd.ms-fontobject application/x-msdownload image/x-icon application/json application/vnd.ms-access video/webm application/vnd.ms-project application/x-font-otf application/vnd.ms-opentype application/vnd.oasis.opendocument.database application/vnd.oasis.opendocument.chart application/vnd.oasis.opendocument.formula application/vnd.oasis.opendocument.graphics application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.text audio/ogg application/pdf application/vnd.ms-powerpoint image/svg+xml application/x-shockwave-flash image/tiff application/x-font-ttf audio/wav application/vnd.ms-write application/font-woff application/font-woff2 application/vnd.ms-excel;

Si vous n’avez pas accès à la configuration serveur, un plugin comme WP Rocket / W3 Total Cache peut l’activer côté WordPress.

Utiliser un CDN

Un CDN (Content Delivery Network) héberge vos assets statiques (images, CSS, JS) sur des serveurs répartis géographiquement. Un visiteur à Marseille sera servi depuis un serveur proche, pas depuis votre serveur à Paris ou à Strasbourg.

Cloudflare est la référence, et sa version gratuite est largement suffisante pour débuter. En bonus : protection DDoS et mise en cache automatique de vos assets statiques.

Votre hébergement est-il adapté ?

Un hébergement mutualisé saturé peut afficher un TTFB élevé même si votre site est parfaitement optimisé. Vous partagez les ressources du serveur avec des dizaines ou centaines d’autres sites.

Vérifiez côté hébergeur vos statistiques CPU et RAM. Si vous êtes régulièrement dans le rouge, il est temps de passer sur un VPS ou un hébergement cloud.

Si vous avez accès à un VPS, vous pouvez surveiller vos ressources en temps réel avec la commande :

top

Elle affiche la consommation CPU et mémoire de chaque processus. Si votre serveur est constamment à 90 % de CPU ou que votre mémoire est saturée, il est peut-être temps de penser à changer d’hébergement.

Plugins et base de données : les coupables oubliés

Cette section concerne uniquement les sites qui utilisent un CMS comme WordPress, Drupal ou Joomla. Si vous avez un site développé sur mesure, vous pouvez passer à la conclusion.

Identifier un plugin qui ralentit tout

Un plugin mal codé peut à lui seul plomber les performances de votre site : requêtes SQL inutiles, CSS et JS chargés sur toutes les pages, appels externes à chaque chargement.

Pour identifier le coupable, la méthode est simple : désactiver les plugins un par un et mesurer l’impact sur PageSpeed après chaque désactivation.

Important : faites cette manipulation uniquement sur un environnement de test. Désactiver un plugin en production peut casser des fonctionnalités de votre site et impacter vos visiteurs. Dupliquez votre site sur un environnement local ou de staging avant de commencer.

Optimiser et nettoyer la base de données

Au fil du temps, votre base de données accumule des données inutiles qui alourdissent chaque requête :

• Les révisions d’articles WordPress : chaque sauvegarde crée une nouvelle entrée en base.
• Les tables orphelines laissées par des plugins désinstallés.
• Les transients expirés : des données temporaires qui ne sont jamais nettoyées automatiquement.

Le plugin Advanced Database Cleaner permet d’identifier et supprimer tout ça en quelques clics.

Là encore, faites une sauvegarde complète de votre base de données avant tout nettoyage.

Conclusion

Un site lent se règle rarement en un seul geste. La méthode est toujours la même : mesurer, identifier, corriger dans le bon ordre.

Commencez par le serveur : un mauvais TTFB plombe tout le reste. Passez ensuite aux médias : images trop lourdes, mauvais format, pas de lazy loading. Terminez par le code : JS et CSS mal optimisés, trop de plugins, base de données jamais nettoyée.

Et gardez toujours le mobile comme priorité. C’est sur mobile que Google vous évalue en premier.

---