Comment réduire le temps de chargement d'une page ?

Actions à fort impact

1. Optimiser les images (Impact : ⭐⭐⭐⭐⭐)

Les images représentent souvent 50-80% du poids d’une page.

Action	Gain potentiel
Compression (TinyPNG, Squoosh)	-50 à -80%
Format WebP	-25 à -35% vs JPEG
Dimensions adaptées	Variable
Lazy loading	-30% temps initial

Outils :

• Squoosh.app (gratuit, en ligne)
• TinyPNG (gratuit)
• ImageOptim (Mac)

2. Utiliser un CDN (Impact : ⭐⭐⭐⭐)

Un CDN (Content Delivery Network) distribue vos fichiers depuis des serveurs proches de l’utilisateur.

CDN	Prix	Facilité
Cloudflare	Gratuit	⭐⭐⭐⭐⭐
Fastly	Payant	⭐⭐⭐
AWS CloudFront	À l’usage	⭐⭐
Bunny CDN	Très abordable	⭐⭐⭐⭐

Gain : -30 à -50% du temps de chargement

3. Activer le cache navigateur (Impact : ⭐⭐⭐⭐)

Permet aux visiteurs récurrents de charger le site instantanément.

# .htaccess
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

4. Minifier CSS/JS (Impact : ⭐⭐⭐)

Supprime les espaces, commentaires et caractères inutiles.

Avant	Après	Gain
100 KB CSS	70 KB	-30%
300 KB JS	180 KB	-40%

Outils :

• Webpack, Vite (build tools)
• CSS Minifier
• JavaScript Minifier

5. Activer la compression Gzip/Brotli (Impact : ⭐⭐⭐⭐)

Compresse les fichiers texte (HTML, CSS, JS) côté serveur.

# .htaccess
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>

Gain : -60 à -80% sur les fichiers texte

Actions supplémentaires

6. Lazy loading

Chargez les images seulement quand elles entrent dans le viewport.

<img src="image.jpg" loading="lazy" alt="Description">

7. Preload des ressources critiques

<link rel="preload" href="font.woff2" as="font" crossorigin>
<link rel="preload" href="hero.webp" as="image">

8. Réduire les requêtes HTTP

Problème	Solution
Trop de fichiers CSS	Combiner en 1 fichier
Trop de fichiers JS	Bundler (Webpack)
Icônes individuelles	Sprite CSS ou SVG inline
Fonts multiples	Limiter à 2 fonts

9. Optimiser les fonts

<!-- Preload la font critique -->
<link rel="preload" href="font.woff2" as="font" crossorigin>

<!-- Font-display swap -->
<style>
  @font-face {
    font-family: 'MaFont';
    src: url('font.woff2') format('woff2');
    font-display: swap;
  }
</style>

10. Différer le JavaScript non-critique

<script src="analytics.js" defer></script>
<script src="chatbot.js" async></script>

Checklist par priorité

Aujourd’hui (5 minutes)

• Compresser les 5 plus grosses images
• Activer lazy loading (loading="lazy")

Cette semaine (2 heures)

• Configurer Cloudflare CDN (gratuit)
• Activer Gzip
• Minifier CSS/JS

Ce mois (1 jour)

• Convertir images en WebP
• Optimiser les fonts
• Audit complet PageSpeed

Outils de diagnostic

Outil	Usage
PageSpeed Insights	Diagnostic + suggestions
GTmetrix	Waterfall détaillé
WebPageTest	Tests multi-locations
Chrome DevTools > Network	Voir chaque requête
Chrome DevTools > Lighthouse	Audit complet

Résultats attendus

Situation	Avant	Après optimisation
Site WordPress moyen	8s	2-3s
E-commerce Shopify	4s	1.5-2s
Landing page	3s	< 1s