Plan d'Optimisation des Performances Mobile

Score Actuel

Métriques Problématiques (Mobile)

Métrique Valeur Actuelle Cible
First Contentful Paint (FCP) 4.2s < 1.8s
Largest Contentful Paint (LCP) 5.6s < 2.5s
Speed Index 4.8s < 3.0s
Total Blocking Time 0ms ✅
Cumulative Layout Shift 0 ✅

Analyse des Problèmes

1. Ressources Bloquant le Rendu (3,330ms de délai estimé)

1.1 Fichier CSS Principal

1.2 Google Fonts

Optimisations Priorisées

Priorité 1: Optimisation des Polices (Impact: Élevé | Complexité: Faible)

1.1 Réduire les poids de polices chargés

État actuel:

Lato:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i
Open+Sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i
Indie+Flower:100,100i,200,200i...
Oswald:100,100i,200,200i...

Poids réellement utilisés (basé sur l'analyse du CSS):

Recommandation:

<!-- Remplacer la ligne actuelle par -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">

Économie estimée: ~600-900ms sur le chargement des polices

1.2 Supprimer les polices non utilisées

1.3 Charger les polices de manière asynchrone

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&family=Open+Sans:wght@400;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet"></noscript>

Priorité 2: Optimisation du CSS (Impact: Très Élevé | Complexité: Moyenne)

2.1 Extraction des @font-face inutiles

Le fichier styles.css contient des déclarations @font-face pour:

Action: Supprimer ces @font-face du CSS car les polices sont déjà chargées via Google Fonts.

2.2 Chargement asynchrone du CSS principal

<!-- Remplacer -->
<link rel="stylesheet" href="/assets/css/styles.css">

<!-- Par -->
<link rel="preload" href="/assets/css/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/assets/css/styles.css"></noscript>

Note: Nécessite d'ajouter les styles critiques en inline dans le <head>.

2.3 Extraction du CSS critique

Les styles suivants doivent être en ligne dans le <head> pour le rendu initial:

2.4 Nettoyage du CSS inutilisé (Optionnel - Plus complexe)

Classes WordPress/Avada potentiellement inutilisées:

Outil recommandé: PurgeCSS avec configuration pour conserver les classes dynamiques.

Priorité 3: Optimisation des Images (Impact: Moyen | Complexité: Faible)

3.1 Images de fond du hero

Fichier: assets/images/hero.jpg (225KB)

Recommandations:

<link rel="preload" href="/assets/images/hero.jpg" as="image" fetchpriority="high">

3.2 Images des pages de service

Plusieurs images dépassent 400KB:

Recommandation: Conversion WebP + compression

Priorité 4: Configuration Cloudflare Pages (Impact: Faible | Complexité: Faible)

4.1 Headers de cache optimisés

Le fichier _headers est configuré pour Netlify. Pour Cloudflare Pages:

Option A: Renommer en _headers (supporté par Cloudflare) Option B: Utiliser _redirects avec les headers Cloudflare

/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

/assets/*
  Cache-Control: public, max-age=31536000, immutable

/assets/css/*
  Content-Type: text/css; charset=utf-8

/*.html
  Cache-Control: public, max-age=0, must-revalidate

4.2 Activer les optimisations Cloudflare

Dans le dashboard Cloudflare:

Priorité 5: Optimisations Avancées (Impact: Variable | Complexité: Élevée)

5.1 Critical CSS automatisé

Intégrer un plugin Eleventy pour extraire automatiquement le CSS critique:

// .eleventy.js
const critical = require('critical');

eleventyConfig.addTransform('critical', async (content, outputPath) => {
  if (outputPath.endsWith('.html')) {
    return await critical.generate({
      base: '_site/',
      html: content,
      inline: true,
      dimensions: [{ width: 375, height: 667 }] // Mobile
    });
  }
  return content;
});

5.2 Préchargement des ressources critiques

<head>
  <!-- DNS prefetch pour les domaines externes -->
  <link rel="dns-prefetch" href="https://fonts.googleapis.com">
  <link rel="dns-prefetch" href="https://fonts.gstatic.com">
  <link rel="dns-prefetch" href="https://formspree.io">
  
  <!-- Preconnect pour les ressources critiques -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>

Résumé des Actions par Ordre d'Impact

# Action Impact estimé FCP Impact estimé LCP Effort
1 Réduire les poids de polices -750ms -900ms Faible
2 Charger polices en asynchrone -300ms -400ms Faible
3 Supprimer @font-face du CSS -200ms -300ms Faible
4 Charger CSS en asynchrone -1500ms -1800ms Moyen
5 Extraction CSS critique -500ms -600ms Moyen
6 Preload image hero -200ms -400ms Faible
7 Conversion WebP images - -200ms Moyen

Checklist d'Implémentation

Phase 1: Polices (Quick Wins)

Phase 2: CSS

Phase 3: Images

Phase 4: Configuration

Phase 5: Validation

Notes Techniques

Polices réellement utilisées

Police Poids Usage
Raleway 500 Titres h1, h2, h3
Open Sans 400, 700 Corps de texte, paragraphes
Montserrat 400 Barres de progression (about)

Classes CSS essentielles à conserver

Outils recommandés