Aller au contenu principal

SEO & Performance

5 erreurs de performance qui plombent votre site vitrine (et comment les corriger)

5 erreurs de performance courantes sur les sites de PME : images, fonts, JS, CLS, hébergement. Solutions concrètes pour atteindre Lighthouse 95+.

Vous avez investi dans un site vitrine pro. Vous l'avez optimisé SEO. Vous avez écrit du contenu de qualité. Et pourtant, votre Lighthouse score reste sous 90. Pire : il bloque vos conversions et votre référencement.

Voici les 5 erreurs perf qu'on rencontre systématiquement sur les sites de PME, et comment les corriger sans tout réécrire.

1. Images non optimisées (la première cause)

C'est le poste #1 de poids sur 90 % des sites qu'on audite.

Le problème

Le client (ou l'agence précédente) upload des photos directement depuis l'iPhone : des JPG de 4 Mo qui font 2 secondes à charger sur 4G.

La solution

  • Convertir en WebP (50 % de poids en moins, qualité identique)
  • Servir des variantes responsive : -480w, -800w, -1200w via <picture srcset>
  • loading="lazy" sur tout sauf le hero LCP
  • width et height explicites pour éviter les layout shifts

2. Fonts qui bloquent le rendu

Le problème

Charger 4 weights différents de Google Fonts via CDN bloque le first paint de 800ms.

La solution

  • Self-host les fonts via @fontsource (pas de connexion externe)
  • font-display: swap pour afficher du texte fallback en attendant
  • Précharger uniquement les fonts critiques (typo H1 + body 400)
  • Subset latin uniquement si vous n'avez pas besoin du grec/cyrillique

3. JavaScript bundle trop gros

Le problème

Une homepage qui charge 800 KB de JS pour... afficher 3 cards et un formulaire.

La solution

  • Astro ou Eleventy pour les sites vitrines (zéro JS par défaut)
  • React/Vue uniquement sur les composants vraiment interactifs (client:visible)
  • Code-splitting agressif
  • Tree-shaking des libs lourdes

4. CLS (Cumulative Layout Shift)

Le problème

Le contenu saute pendant le chargement. Frustrant pour l'utilisateur, pénalisant pour Core Web Vitals.

La solution

  • width/height sur toutes les images
  • Espace réservé pour les iframes et embeds
  • Pas de bannière qui apparaît après le LCP
  • Cookie consent : position: fixed; bottom: 0 au lieu d'un overlay qui pousse le contenu

5. Hébergement low-cost

Le problème

OVH mutualisé à 3€/mois → TTFB de 1.2s, pas de HTTP/2, pas de Brotli.

La solution

  • VPS Hetzner ou Scaleway (à partir de 6€/mois) avec Caddy ou Nginx
  • HTTP/2 + Brotli activés
  • Cache CDN (Cloudflare gratuit suffit)
  • TLS 1.3

Mesurer correctement

Lighthouse en local n'est pas représentatif. Toujours tester en conditions réelles : 4G simulée, CPU 4× slowdown, Chrome incognito.

Outils recommandés :

  • PageSpeed Insights (data CrUX réelle)
  • WebPageTest pour analyse fine
  • Calibre pour monitoring continu

Résultat attendu

Sur un site vitrine bien optimisé :

  • Performance : 95+
  • Accessibilité : 95+
  • Best Practices : 100
  • SEO : 100

C'est ce qu'on garantit comme base sur tous nos sites Miraphi.