Pourquoi la vitesse compte

Un site qui met plus de 3 secondes à charger perd 53% de ses visiteurs. Google pénalise les sites lents dans les résultats de recherche. Voici les optimisations concrètes qui font la plus grande différence.

1. Optimiser les images (le plus gros gain)

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

Choisir le bon format

Format	Utilisation	Taille
WebP	Photos, illustrations	25-35% plus léger que JPEG
JPEG	Photos (fallback)	Qualité 75-85% suffisante
PNG	Logos, icônes (transparence)	Plus lourd
SVG	Icônes, logos simples	Ultra léger, scalable
AVIF	Photos (nouveau)	50% plus léger que JPEG

Lazy loading (chargement différé)

<!-- L'image ne se charge que quand l'utilisateur scrolle jusqu'à elle -->
<img src="photo.webp" alt="Description" loading="lazy" width="800" height="600">

<!-- Toujours spécifier width et height pour éviter le décalage de mise en page -->

Images responsive avec srcset

<img 
    srcset="photo-400.webp 400w,
            photo-800.webp 800w,
            photo-1200.webp 1200w"
    sizes="(max-width: 600px) 400px,
           (max-width: 1000px) 800px,
           1200px"
    src="photo-800.webp"
    alt="Description"
    loading="lazy">

2. Minifier CSS et JavaScript

/* AVANT : style.css (2.4 Ko) */
.header {
    background-color: #ffffff;
    padding: 20px 40px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* APRÈS : style.min.css (120 octets) */
.header{background-color:#fff;padding:20px 40px;box-shadow:0 2px 10px rgba(0,0,0,.1)}

Outils gratuits :

CSS : cssnano ou clean-css
JavaScript : terser ou uglify-js
En ligne : cssminifier.com, javascript-minifier.com

3. Réduire les requêtes HTTP

<!-- ❌ Mauvais : 5 fichiers CSS = 5 requêtes -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="footer.css">
<link rel="stylesheet" href="responsive.css">

<!-- ✅ Bon : 1 fichier combiné = 1 requête -->
<link rel="stylesheet" href="style.min.css">

4. Préchargement des ressources critiques

<head>
    <!-- Précharger la police (évite le flash de texte) -->
    <link rel="preload" href="police.woff2" as="font" type="font/woff2" crossorigin>
    
    <!-- Préconnecter aux domaines tiers -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://cdn.example.com">
    
    <!-- CSS critique en inline (above the fold) -->
    <style>
        /* Styles pour ce qui est visible immédiatement */
        body { font-family: sans-serif; margin: 0; }
        .header { background: #fff; padding: 20px; }
    </style>
    
    <!-- Charger le reste du CSS en différé -->
    <link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
</head>

5. Mise en cache du navigateur

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

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

6. Optimisations JavaScript

<!-- ❌ Bloque le rendu de la page -->
<script src="app.js"></script>

<!-- ✅ defer : exécute après le parsing HTML -->
<script src="app.js" defer></script>

<!-- ✅ async : télécharge en parallèle (pour scripts indépendants) -->
<script src="analytics.js" async></script>

7. Tester vos performances

🔧 Outils gratuits indispensables

Google PageSpeed Insights : score de 0 à 100 + recommandations détaillées
GTmetrix : analyse complète avec waterfall des requêtes
Chrome DevTools (F12) : onglet Network pour voir chaque requête, onglet Lighthouse pour un audit
WebPageTest : test depuis différentes régions du monde

Checklist rapide d’optimisation

☐ Images en WebP avec lazy loading
☐ CSS et JS minifiés et combinés
☐ Compression GZIP activée
☐ Cache navigateur configuré
☐ Scripts avec defer ou async
☐ Polices préchargées en WOFF2
☐ CSS critique en inline
☐ Score PageSpeed > 90 sur mobile

Exercice pratique

🎯 Défi : Auditez et optimisez votre site

Testez votre site avec PageSpeed Insights et notez le score
Convertissez toutes les images en WebP et ajoutez loading="lazy"
Minifiez vos fichiers CSS et JS
Ajoutez les balises defer sur vos scripts
Retestez et comparez le nouveau score

Comment optimiser les performances de votre site web