Aller au contenu
Patrick Junod Patrick Junod

Checklist complète d'optimisation de site web (2025)

Tu viens de terminer ton site et tu veux t'assurer qu'il tourne à pleine vitesse ? Cette checklist couvre tous les aspects d'optimisation : frontend, backend, serveur, SEO et monitoring.

•
Programmation Site Internet
Retour au blog

🎨 Frontend & Assets

Images

  • [ ] Lazy loading activé sur toutes les images (sauf hero/above-the-fold)

    • HTML: <img loading="lazy">

  • [ ] Format WebP pour toutes les images (avec fallback JPEG/PNG)

    <picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

  • [ ] Dimensions adaptées : pas d'image 4K pour une vignette 200px

    • Créer plusieurs tailles (thumbnail, medium, large)

    • Utiliser srcset pour responsive images

  • [ ] Compression optimale : 80-85% de qualité suffit largement

    • Outils: TinyPNG, ImageOptim, Squoosh

  • [ ] Alt text présent sur toutes les images (SEO + accessibilité)

  • [ ] Pas d'images dans le CSS pour le contenu (utiliser <img> à la place)

CSS

  • [ ] CSS critique inline dans le <head> (styles above-the-fold uniquement)

  • [ ] CSS non-critique chargé en async

    <link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">

  • [ ] Minification activée (Vite, Webpack, Laravel Mix)

  • [ ] Purge du CSS non utilisé

    • Tailwind: automatique avec purge

    • Autres: PurgeCSS, UnCSS

  • [ ] Pas de @import dans le CSS (cause du render blocking)

  • [ ] Variables CSS au lieu de multiples déclarations répétées

JavaScript

  • [ ] Scripts en defer ou async (sauf si absolument nécessaire)

    <script src="app.js" defer></script>

  • [ ] Minification + uglification en production

  • [ ] Code splitting : séparer vendor/app en chunks différents

  • [ ] Suppression des console.log() en production

  • [ ] Pas de jQuery si pas nécessaire (vanilla JS ou Alpine.js)

  • [ ] Bundle analyzer utilisé pour repérer le code mort

    • Webpack Bundle Analyzer

    • Vite Rollup Plugin Visualizer

Fonts

  • [ ] Fonts en WOFF2 (format le plus léger)

  • [ ] Preload des fonts critiques

    <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

  • [ ] font-display: swap pour éviter le FOIT (Flash of Invisible Text)

    @font-face {
  font-family: 'MaFont';
  font-display: swap;
}

  • [ ] Maximum 2-3 fonts différentes sur le site

  • [ ] Subset des fonts : ne charger que les caractères utilisés

Général Frontend

  • [ ] Lighthouse score 90+ (mobile et desktop)

  • [ ] Core Web Vitals optimisés :

    • LCP (Largest Contentful Paint) < 2.5s

    • FID (First Input Delay) < 100ms

    • CLS (Cumulative Layout Shift) < 0.1

  • [ ] Pas de layout shifts : réserver l'espace pour images/ads

  • [ ] Favicon présent (16x16, 32x32, 180x180 pour Apple)

⚙️ Backend & Code

Cache

  • [ ] OPcache activé sur le serveur (PHP)

    opcache.enable=1
opcache.memory_consumption=256

  • [ ] Config/routes/views en cache (Laravel)

    php artisan config:cache
php artisan route:cache
php artisan view:cache

  • [ ] Cache applicatif configuré (Redis, Memcached ou File)

  • [ ] Cache HTTP : headers Cache-Control et ETag présents

    Cache-Control: public, max-age=31536000

  • [ ] Cache de requêtes BDD pour données peu changeantes

    Cache::remember('products', 3600, fn() => Product::all());

Base de données

  • [ ] Indexes sur les colonnes fréquemment requêtées

    $table->index('user_id');
$table->index(['status', 'created_at']);

  • [ ] Eager Loading partout (éviter le problème N+1)

    Product::with('category', 'images')->get(); // ✅

  • [ ] Pagination sur les listes longues (éviter ->all())

  • [ ] Query optimization : seulement les colonnes nécessaires

    User::select('id', 'name', 'email')->get(); // ✅

  • [ ] Pas de logique dans les boucles Blade (faire les calculs dans le contrôleur)

  • [ ] Database pooling activé si fort traffic

Code & Architecture

  • [ ] PHP 8.2+ installé (performances x2 vs PHP 7.4)

  • [ ] Composer autoload optimisé

    composer dump-autoload --optimize --classmap-authoritative

  • [ ] Pas de dd() ou dump() oubliés en production

  • [ ] Jobs en queue pour tâches longues (emails, exports)

    SendEmailJob::dispatch($user);

  • [ ] Rate limiting configuré sur les endpoints sensibles

  • [ ] Logs rotatifs configurés (pas de fichier log de 5 GB)

🖥️ Serveur & Infrastructure

Configuration Serveur

  • [ ] HTTP/2 ou HTTP/3 activé

    listen 443 ssl http2;

  • [ ] Gzip/Brotli compression activée

    gzip on;
gzip_types text/css application/javascript;

  • [ ] Keep-Alive activé pour réutiliser les connexions TCP

    keepalive_timeout 65;

  • [ ] PHP-FPM bien configuré

    pm = dynamic
pm.max_children = 50
pm.start_servers = 10
pm.min_spare_servers = 5
pm.max_spare_servers = 20

  • [ ] Memory limit adapté au besoin (PHP)

    memory_limit = 256M

  • [ ] Max execution time optimisé

    max_execution_time = 30

Ressources & Dimensionnement

  • [ ] RAM suffisante pour ton traffic

    • Site vitrine < 1000 visites/jour : 1-2 GB

    • Site moyen 1000-10000 visites/jour : 2-4 GB

    • Site fort traffic > 10000 visites/jour : 4-8 GB+

  • [ ] CPU adapté au type de site

    • Site statique/vitrine : 1-2 vCPU

    • Application web dynamique : 2-4 vCPU

    • E-commerce/SaaS : 4+ vCPU

  • [ ] SSD au lieu de HDD (x10-20 plus rapide)

  • [ ] Monitoring des ressources configuré

    • Alerte si RAM > 80%

    • Alerte si CPU > 80% pendant 5min+

    • Alerte si disque > 85%

Localisation & Réseau

  • [ ] Serveur géographiquement proche de ta cible

    • Cible Suisse → serveur Zurich, Genève ou Lausanne

    • Cible Europe → serveur Amsterdam, Frankfurt, Paris

    • Cible mondiale → CDN obligatoire

  • [ ] CDN configuré si audience internationale

    • Cloudflare (gratuit)

    • BunnyCDN (payant, performant)

    • AWS CloudFront (enterprise)

  • [ ] Latence réseau < 50ms depuis ta zone cible

    • Test avec ping et traceroute

  • [ ] DNS rapide (Cloudflare DNS, Google DNS)

    • Temps de résolution DNS < 20ms

Sécurité Serveur

  • [ ] HTTPS activé avec certificat SSL valide (Let's Encrypt gratuit)

  • [ ] HTTPS redirect : forcer www ou non-www

    return 301 https://www.example.com$request_uri;

  • [ ] Firewall configuré (UFW, iptables, ou firewall hébergeur)

    • Ports 80/443 ouverts

    • Port 22 (SSH) limité à IP spécifiques

  • [ ] SSH par clé au lieu de password

  • [ ] Fail2ban installé contre brute-force

  • [ ] Backups automatiques quotidiens

    • Code + base de données

    • Rétention 7-30 jours minimum

    • Testés régulièrement (restore test)

🔍 SEO & Métadonnées

Balises essentielles

  • [ ] Title unique sur chaque page (50-60 caractères)

    <title>Développeur Web à Neuchâtel | Patrick Junod</title>

  • [ ] Meta description sur chaque page (150-160 caractères)

    <meta name="description" content="Description accrocheuse...">

  • [ ] Balise H1 unique par page (avec mot-clé principal)

  • [ ] Structure H1 > H2 > H3 logique et hiérarchique

  • [ ] Open Graph tags pour réseaux sociaux

    <meta property="og:title" content="Titre">
<meta property="og:description" content="Description">
<meta property="og:image" content="image.jpg">

  • [ ] Twitter Card tags configurés

Fichiers techniques

  • [ ] Sitemap XML généré et soumis à Google Search Console

    https://example.com/sitemap.xml

  • [ ] Robots.txt présent et correct

    User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xml

  • [ ] Canonical tags sur les pages avec contenu dupliqué

    <link rel="canonical" href="https://example.com/page">

  • [ ] hreflang tags si site multilingue

    <link rel="alternate" hreflang="fr" href="https://example.com/fr/">
<link rel="alternate" hreflang="de" href="https://example.com/de/">

Contenu & Structure

  • [ ] URLs propres et descriptives

    • ✅ /services/developpement-web

    • ❌ /page?id=123

  • [ ] URLs en minuscules avec tirets (pas d'underscores)

  • [ ] Pas de contenu dupliqué (canonicals ou redirects)

  • [ ] Temps de lecture > 1 minute sur les pages importantes (Google aime le contenu riche)

  • [ ] Images optimisées pour SEO (alt, nom de fichier descriptif)

  • [ ] Liens internes stratégiques (maillage interne)

📊 Monitoring & Analytics

Outils de mesure

  • [ ] Google Analytics 4 installé

    <!-- Google tag (gtag.js) -->

  • [ ] Google Search Console configuré et vérifié

  • [ ] PageSpeed Insights score > 90 (mobile et desktop)

  • [ ] GTmetrix ou WebPageTest utilisé pour analyse détaillée

  • [ ] Uptime monitoring configuré

    • Pingdom, UptimeRobot, ou StatusCake

    • Alerte si site down > 2 minutes

Performance Monitoring

  • [ ] Temps de réponse serveur (TTFB) < 200ms

  • [ ] Temps de chargement total < 3 secondes

  • [ ] Nombre de requêtes HTTP < 50

  • [ ] Poids total page < 2 MB

  • [ ] Surveillance des erreurs

    • Sentry, Bugsnag, ou logs applicatifs

    • Alertes sur erreurs 500

Analytics & Business

  • [ ] Objectifs de conversion définis dans Analytics

  • [ ] Événements trackés (clics, formulaires, téléchargements)

  • [ ] Heatmap installée (Hotjar, Crazy Egg) pour comprendre le comportement

  • [ ] A/B testing possible si nécessaire (Google Optimize, VWO)

♿ Accessibilité

  • [ ] Contraste couleurs suffisant (WCAG AA minimum)

    • Texte normal : ratio 4.5:1

    • Texte large : ratio 3:1

  • [ ] Navigation clavier fonctionnelle (Tab, Enter, Espace)

  • [ ] Focus visible sur les éléments interactifs

  • [ ] Alt text sur toutes les images (déjà mentionné)

  • [ ] Labels sur tous les champs de formulaire

  • [ ] Test WAVE ou Lighthouse Accessibility > 90

📱 Responsive & Mobile

  • [ ] Mobile-first design (design pensé mobile d'abord)

  • [ ] Viewport meta tag présent

    <meta name="viewport" content="width=device-width, initial-scale=1">

  • [ ] Touch targets suffisamment grands (44x44px minimum)

  • [ ] Pas de hover obligatoire pour actions importantes

  • [ ] Testé sur vrais devices (iOS Safari, Android Chrome)

  • [ ] Pas de pop-ups intrusifs sur mobile (pénalité Google)

🧪 Tests & Qualité

Tests de code

  • [ ] Pas d'erreurs console (JavaScript)

  • [ ] Pas d'erreurs PHP en production (logs clean)

  • [ ] Code validé (HTML Validator, CSS Validator)

  • [ ] Tests automatisés pour fonctionnalités critiques (optionnel)

Tests navigateurs

  • [ ] Chrome (80% du marché)

  • [ ] Safari (iOS + macOS)

  • [ ] Firefox

  • [ ] Edge

  • [ ] Mobile Safari (iOS)

  • [ ] Chrome Mobile (Android)

Tests de charge

  • [ ] Site testé sous charge si fort traffic attendu

    • Apache JMeter

    • k6

    • Loader.io

  • [ ] Pas de crash avec 100+ utilisateurs simultanés

🚀 Déploiement & Maintenance

  • [ ] Process de déploiement automatisé (CI/CD)

    • GitHub Actions, GitLab CI, Deployer

  • [ ] Environnements séparés (dev, staging, production)

  • [ ] Variables d'environnement sécurisées (pas de credentials en dur)

  • [ ] Rollback rapide possible en cas de problème

  • [ ] Changelog maintenu pour tracking des modifications

  • [ ] Plan de maintenance défini (mises à jour mensuelles)

  • [ ] Documentation technique à jour

Ressources utiles

Outils de test :

Compression images :

CDN :

Monitoring :

Besoin d'aide pour optimiser ton site ? Contacte-moi, je peux t'aider à identifier les quick wins et les optimisations prioritaires pour ton projet.

Bon courage !