1

EcoIndex = f(DOM, Requêtes, Poids)

1
2
3
4
5

- Navigateur : Chrome en navigation privée (pas d'extensions)
- Extensions : Toutes désactivées sauf outils de mesure
- Cache : Vidé entre chaque test
- Réseau : Connexion stable ou throttling défini (3G, 4G)
- Répétitions : Minimum 3 mesures, prendre la médiane

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

1. Ouvrir la page en navigation privée (Ctrl+Shift+N)
2. Vider le cache (Ctrl+Shift+Suppr → Vider les données)
3. Ouvrir les DevTools (F12)
4. Onglet Network : Cocher "Disable cache"
5. Recharger la page (Ctrl+Shift+R)
6. Lancer GreenIT Analysis
7. Lancer Lighthouse (Performance + Accessibilité + SEO)
8. Noter les résultats dans le tableau
9. Répéter 2 fois de plus, garder la médiane
10. Passer à la page suivante

1

Score EcoIndex moyen = Σ (EcoIndex × Trafic) / Σ Trafic

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

        IMPACT ÉLEVÉ
              │
    ┌─────────┼─────────┐
    │ QUICK   │ PROJETS │
    │ WINS    │ MAJEURS │
    │ Faire   │ Planifier│
    │ en 1er  │          │
────┼─────────┼─────────┼──── EFFORT
    │ À       │ À       │
    │ ÉVITER  │ DISCUTER│
    │         │          │
    └─────────┼─────────┘
              │
        IMPACT FAIBLE

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

┌─────────────────────────────────────────────────────┐
│ EcoIndex: 67/100 (B)                                │
├─────────────────────────────────────────────────────┤
│ Empreinte environnementale :                        │
│ • 1.42 gCO2e par visite                             │
│ • 2.13 cl d'eau par visite                          │
├─────────────────────────────────────────────────────┤
│ Métriques :                                         │
│ • Taille de la page : 892 Ko                        │
│ • Nombre de requêtes : 34                           │
│ • Éléments DOM : 1247                               │
├─────────────────────────────────────────────────────┤
│ Bonnes pratiques : 67% (15/22)                      │
│ ✓ Compression activée                               │
│ ✓ Cache navigateur configuré                        │
│ ✗ Images non optimisées (3 images > 100Ko)         │
│ ✗ JavaScript externe trop lourd                     │
└─────────────────────────────────────────────────────┘

1
2
3
4
5
6
7
8
9

Categories :
☑ Performance
☑ Accessibility
☑ Best Practices
☑ SEO

Device : Mobile (plus contraignant et représentatif)
Throttling : Simulated throttling (recommended)
Clear storage : ☑ (pour simuler un premier accès)

1
2
3
4
5
6

Test Location : Paris, France (ou proche de vos utilisateurs)
Browser : Chrome
Connection : 4G (pour simuler mobile réaliste)
Number of Tests : 3 (pour obtenir une médiane fiable)
☑ First View and Repeat View
☑ Capture Video

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

# .github/workflows/eco-check.yml
name: Eco-conception Check

on:
  pull_request:
    branches: [main]
  push:
    branches: [main]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install dependencies
        run: npm ci

      - name: Build site
        run: npm run build

      - name: Start server
        run: npm run preview &

      - name: Wait for server
        run: npx wait-on http://localhost:4173

      - name: Run Lighthouse CI
        uses: treosh/lighthouse-ci-action@v10
        with:
          urls: |
            http://localhost:4173/
            http://localhost:4173/contact/
          configPath: ./lighthouserc.json
          uploadArtifacts: true

  ecoindex:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Python
        uses: actions/setup-python@v5
        with:
          python-version: '3.11'

      - name: Install EcoIndex CLI
        run: pip install ecoindex-cli

      - name: Build and serve
        run: |
          npm ci
          npm run build
          npm run preview &
          sleep 10

      - name: Run EcoIndex
        run: |
          ecoindex analyze \
            --url http://localhost:4173/ \
            --url http://localhost:4173/contact/ \
            --export json \
            --output ecoindex-results.json

      - name: Check EcoIndex threshold
        run: |
          MIN_SCORE=50

          for score in $(cat ecoindex-results.json | jq '.[].score'); do
            if (( $(echo "$score < $MIN_SCORE" | bc -l) )); then
              echo "::error::EcoIndex score too low: $score (min: $MIN_SCORE)"
              exit 1
            fi
          done

          echo "All pages pass EcoIndex threshold"

      - name: Upload results
        uses: actions/upload-artifact@v4
        with:
          name: ecoindex-results
          path: ecoindex-results.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// lighthouserc.json
{
  "ci": {
    "collect": {
      "numberOfRuns": 3
    },
    "assert": {
      "assertions": {
        "categories:performance": ["error", {"minScore": 0.7}],
        "categories:accessibility": ["error", {"minScore": 0.9}],
        "resource-summary:document:size": ["error", {"maxNumericValue": 100000}],
        "resource-summary:total:size": ["error", {"maxNumericValue": 500000}],
        "resource-summary:third-party:count": ["warn", {"maxNumericValue": 5}]
      }
    }
  }
}

1
2
3

Version 1.0 : 3 features → Simple, rapide, maintenable
Version 2.0 : 8 features → Complexe, ralentit
Version 3.0 : 16 features → Ingérable, très lent

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

-- Exemple de requête pour analyser l'usage des fonctionnalités
SELECT
  feature_name,
  COUNT(DISTINCT user_id) as unique_users,
  COUNT(*) as total_uses,
  COUNT(*) / 30 as daily_average
FROM feature_usage
WHERE created_at > NOW() - INTERVAL '30 days'
GROUP BY feature_name
ORDER BY unique_users DESC;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

:root {
  /* Palette restreinte : 3 couleurs fonctionnelles + neutres */
  --color-primary: #2563eb;    /* Action principale */
  --color-secondary: #64748b;  /* Éléments secondaires */
  --color-accent: #10b981;     /* Validation, succès */
  --color-text: #1e293b;       /* Texte principal */
  --color-text-light: #64748b; /* Texte secondaire */
  --color-background: #ffffff;
  --color-surface: #f8fafc;

  /* Échelle typographique limitée (5 tailles max) */
  --text-xs: 0.75rem;    /* 12px - Mentions légales */
  --text-sm: 0.875rem;   /* 14px - Texte secondaire */
  --text-base: 1rem;     /* 16px - Texte courant */
  --text-lg: 1.25rem;    /* 20px - Sous-titres */
  --text-xl: 1.5rem;     /* 24px - Titres de section */
  --text-2xl: 2rem;      /* 32px - Titre principal */

  /* Espacements cohérents (système de 4px) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 1rem;     /* 16px */
  --space-4: 1.5rem;   /* 24px */
  --space-5: 2rem;     /* 32px */
  --space-6: 3rem;     /* 48px */

  /* Une seule font family */
  --font-family: system-ui, -apple-system, sans-serif;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

AVANT : 3 pages                 APRÈS : 1 page
─────────────────              ─────────────────
Page 1: Choix sujet            Formulaire complet
        ↓                      avec validation inline
Page 2: Formulaire             et confirmation
        ↓                      sans rechargement
Page 3: Confirmation

3 chargements                  1 chargement
~1,5 Mo transférés             ~200 Ko transférés

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Structure
☐ HTML sémantique (header, nav, main, article, footer)
☐ Hiérarchie des titres respectée (h1 → h2 → h3, sans saut)
☐ Landmarks ARIA si nécessaire

Médias
☐ Images avec attribut alt pertinent (ou alt="" si décoratif)
☐ Vidéos avec sous-titres ou transcription
☐ Pas de lecture automatique

Contraste et lisibilité
☐ Contraste texte/fond ≥ 4.5:1 (AA) ou 7:1 (AAA)
☐ Taille de police ≥ 16px
☐ Interligne ≥ 1.5

Interaction
☐ Zone de clic ≥ 44×44px sur mobile
☐ Focus visible au clavier
☐ Pas de piège au clavier

Formulaires
☐ Labels explicites associés aux champs
☐ Messages d'erreur clairs et contextuels
☐ Indication des champs obligatoires

1

DevTools (F12) → Network → Filter: Images → Sort by Size

1
2
3
4
5
6
7
8
9

L'image est-elle un logo, une icône ou une illustration simple ?
├── OUI → Utiliser SVG
└── NON → L'image nécessite-t-elle de la transparence ?
    ├── OUI → Utiliser WebP (fallback PNG)
    └── NON → L'image est-elle une photo ?
        ├── OUI → Utiliser WebP (fallback JPEG)
        └── NON → L'image est-elle une animation ?
            ├── OUI → Utiliser une vidéo MP4/WebM
            └── NON → Utiliser WebP

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

# Convertir en WebP avec cwebp
cwebp -q 75 image.jpg -o image.webp

# Convertir en AVIF avec avifenc
avifenc --min 20 --max 40 image.jpg image.avif

# Optimiser JPEG avec jpegoptim
jpegoptim --max=80 --strip-all image.jpg

# Optimiser PNG avec pngquant
pngquant --quality=60-80 --output image-opt.png image.png

# Optimiser SVG avec svgo
svgo input.svg -o output.svg

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

// scripts/optimize-images.js
const sharp = require('sharp');
const glob = require('glob');
const path = require('path');
const fs = require('fs');

const CONFIG = {
  quality: { webp: 75, avif: 50, jpeg: 80 },
  sizes: [400, 800, 1200, 1600]
};

async function optimizeImages() {
  const files = glob.sync('src/images/**/*.{jpg,jpeg,png}');

  for (const file of files) {
    const filename = path.basename(file, path.extname(file));
    const outputDir = path.dirname(file).replace('src/', 'dist/');

    // Créer le dossier de sortie
    fs.mkdirSync(outputDir, { recursive: true });

    for (const width of CONFIG.sizes) {
      // WebP
      await sharp(file)
        .resize(width)
        .webp({ quality: CONFIG.quality.webp })
        .toFile(`${outputDir}/${filename}-${width}.webp`);

      // AVIF
      await sharp(file)
        .resize(width)
        .avif({ quality: CONFIG.quality.avif })
        .toFile(`${outputDir}/${filename}-${width}.avif`);

      // JPEG fallback
      await sharp(file)
        .resize(width)
        .jpeg({ quality: CONFIG.quality.jpeg, mozjpeg: true })
        .toFile(`${outputDir}/${filename}-${width}.jpg`);
    }

    console.log(`✓ ${filename} optimized`);
  }
}

optimizeImages();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<img
  src="image-800.jpg"
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1200.jpg 1200w,
    image-1600.jpg 1600w
  "
  sizes="
    (max-width: 640px) 100vw,
    (max-width: 1024px) 50vw,
    800px
  "
  alt="Description de l'image"
  width="800"
  height="600"
  loading="lazy"
  decoding="async"
>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<picture>
  <!-- AVIF : meilleure compression, support croissant -->
  <source
    type="image/avif"
    srcset="
      image-400.avif 400w,
      image-800.avif 800w,
      image-1200.avif 1200w
    "
    sizes="(max-width: 640px) 100vw, 50vw"
  >

  <!-- WebP : excellent support -->
  <source
    type="image/webp"
    srcset="
      image-400.webp 400w,
      image-800.webp 800w,
      image-1200.webp 1200w
    "
    sizes="(max-width: 640px) 100vw, 50vw"
  >

  <!-- JPEG : fallback universel -->
  <img
    src="image-800.jpg"
    srcset="
      image-400.jpg 400w,
      image-800.jpg 800w,
      image-1200.jpg 1200w
    "
    sizes="(max-width: 640px) 100vw, 50vw"
    alt="Description de l'image"
    width="800"
    height="600"
    loading="lazy"
    decoding="async"
  >
</picture>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<!-- Images below the fold : lazy -->
<img
  src="photo.jpg"
  alt="Description"
  width="800"
  height="600"
  loading="lazy"
  decoding="async"
>

<!-- Images above the fold : eager (ou omettre loading) -->
<img
  src="hero.jpg"
  alt="Hero"
  width="1200"
  height="600"
  loading="eager"
  fetchpriority="high"
>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<!-- MAUVAIS : autoplay avec téléchargement automatique -->
<video autoplay src="video.mp4"></video>

<!-- ACCEPTABLE : autoplay muet pour background très court -->
<video autoplay muted loop playsinline poster="poster.jpg">
  <source src="bg.webm" type="video/webm">
  <source src="bg.mp4" type="video/mp4">
</video>

<!-- RECOMMANDÉ : lecture manuelle -->
<video controls preload="none" poster="thumbnail.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

1
2
3
4
5
6
7
8
9

<!-- Ne pas précharger -->
<video preload="none" poster="poster.jpg" controls>
  <source src="video.mp4" type="video/mp4">
</video>

<!-- Précharger seulement les métadonnées -->
<video preload="metadata" poster="poster.jpg" controls>
  <source src="video.mp4" type="video/mp4">
</video>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

# H.264 optimisé (compatible partout)
ffmpeg -i input.mp4 \
  -c:v libx264 -crf 28 -preset slow \
  -c:a aac -b:a 128k \
  -movflags +faststart \
  output.mp4

# VP9/WebM (meilleure compression)
ffmpeg -i input.mp4 \
  -c:v libvpx-vp9 -crf 35 -b:v 0 \
  -c:a libopus -b:a 96k \
  output.webm

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# Convertir GIF en MP4
ffmpeg -i animation.gif \
  -movflags +faststart \
  -pix_fmt yuv420p \
  -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" \
  animation.mp4

# Convertir GIF en WebM
ffmpeg -i animation.gif \
  -c:v libvpx-vp9 -crf 40 -b:v 0 \
  animation.webm

1
2
3
4
5
6
7

<!-- Remplacer un GIF par une vidéo -->
<video autoplay loop muted playsinline>
  <source src="animation.webm" type="video/webm">
  <source src="animation.mp4" type="video/mp4">
  <!-- Fallback pour navigateurs très anciens -->
  <img src="animation.gif" alt="Animation">
</video>

1
2

# Avec SVGO
svgo input.svg -o output.svg --config svgo.config.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// svgo.config.js
module.exports = {
  plugins: [
    'removeDoctype',
    'removeXMLProcInst',
    'removeComments',
    'removeMetadata',
    'removeTitle',
    'removeDesc',
    'removeUselessDefs',
    'removeEditorsNSData',
    'removeEmptyAttrs',
    'removeHiddenElems',
    'removeEmptyContainers',
    'cleanupEnableBackground',
    'convertStyleToAttrs',
    'convertColors',
    'convertPathData',
    'convertTransform',
    'removeUnknownsAndDefaults',
    'removeNonInheritableGroupAttrs',
    'removeUselessStrokeAndFill',
    'removeUnusedNS',
    'cleanupNumericValues',
    'moveGroupAttrsToElems',
    'collapseGroups',
    'mergePaths',
  ]
};

1
2
3
4
5

<svg width="24" height="24" viewBox="0 0 24 24"
     fill="none" stroke="currentColor" stroke-width="2">
  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
  <polyline points="9 22 9 12 15 12 15 22"/>
</svg>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<!-- icons.svg (chargé une fois, mis en cache) -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
    <polyline points="9 22 9 12 15 12 15 22"/>
  </symbol>
  <symbol id="icon-user" viewBox="0 0 24 24">
    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
    <circle cx="12" cy="7" r="4"/>
  </symbol>
  <!-- ... autres icônes -->
</svg>

<!-- Utilisation -->
<svg class="icon" aria-hidden="true">
  <use href="/icons.svg#icon-home"/>
</svg>

1
2
3
4
5
6

.icon {
  width: 1.5rem;
  height: 1.5rem;
  stroke: currentColor;
  fill: none;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Titre de la page | Site</title>
  <meta name="description" content="Description concise de la page">

  <!-- Preconnect aux domaines critiques -->
  <link rel="preconnect" href="https://fonts.googleapis.com">

  <!-- CSS critique inline -->
  <style>
    /* Critical CSS : ce qui est nécessaire pour l'above the fold */
  </style>

  <!-- CSS non critique en différé -->
  <link rel="preload" href="/css/main.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/css/main.css"></noscript>
</head>
<body>
  <a href="#main-content" class="skip-link">Aller au contenu</a>

  <header>
    <nav aria-label="Navigation principale">
      <!-- Menu de navigation -->
    </nav>
  </header>

  <main id="main-content">
    <article>
      <h1>Titre principal (un seul h1 par page)</h1>
      <!-- Contenu principal -->
    </article>
  </main>

  <footer>
    <!-- Pied de page -->
  </footer>

  <!-- JavaScript en fin de body avec defer -->
  <script src="/js/main.js" defer></script>
</body>
</html>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<!-- AVANT : "div-itis" (abus de divs) -->
<div class="container">
  <div class="wrapper">
    <div class="inner">
      <div class="content">
        <div class="text-wrapper">
          <span class="text">Texte</span>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- APRÈS : structure minimale -->
<div class="container">
  <p>Texte</p>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!-- AVANT : wrappers inutiles -->
<ul class="products-wrapper">
  <li class="product-item-wrapper">
    <div class="product-card-container">
      <div class="product-image-wrapper">
        <img src="..." alt="...">
      </div>
      <div class="product-info-wrapper">
        <h3 class="product-title-wrapper">
          <span class="product-title">Produit</span>
        </h3>
      </div>
    </div>
  </li>
</ul>

<!-- APRÈS : structure plate -->
<ul class="products">
  <li class="product">
    <img src="..." alt="...">
    <h3>Produit</h3>
  </li>
</ul>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

/* AVANT : 4 propriétés */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* APRÈS : 2 propriétés */
.center {
  display: grid;
  place-items: center;
}

1
2
3
4
5

/* MAUVAIS : sélecteur très spécifique (lent à évaluer) */
body div.container ul.navigation li.item a.link:hover span.text { }

/* BON : classe directe (rapide) */
.nav-link:hover .text { }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* AVANT : 4 déclarations */
.element {
  margin-top: 1rem;
  margin-right: 2rem;
  margin-bottom: 1rem;
  margin-left: 2rem;
}

/* APRÈS : 1 déclaration */
.element {
  margin: 1rem 2rem;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<head>
  <!-- CSS critique inline (< 14 Ko idéalement) -->
  <style>
    /* Reset minimal */
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.5; }

    /* Header */
    .header { display: flex; justify-content: space-between; padding: 1rem; }

    /* Hero (si above the fold) */
    .hero { padding: 3rem 1rem; text-align: center; }
    .hero h1 { font-size: 2.5rem; margin: 0 0 1rem; }
  </style>

  <!-- CSS complet chargé de façon non-bloquante -->
  <link rel="preload" href="/css/main.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/css/main.css"></noscript>
</head>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// postcss.config.js
module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: [
        './src/**/*.html',
        './src/**/*.js',
        './src/**/*.vue',
        './src/**/*.jsx',
      ],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
      safelist: {
        standard: [/^is-/, /^has-/, /^js-/],
        deep: [/^modal/, /^tooltip/],
      }
    }),
    require('cssnano')({
      preset: ['default', {
        discardComments: { removeAll: true },
      }]
    })
  ]
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// MAUVAIS : importe tout lodash (~70 Ko)
import _ from 'lodash';
const result = _.get(obj, 'path.to.value');

// BON : importe seulement get (~2 Ko)
import get from 'lodash/get';
const result = get(obj, 'path.to.value');

// ENCORE MIEUX : vanilla JS (0 Ko)
const result = obj?.path?.to?.value;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// Chargement immédiat (dans le bundle principal)
import HeavyComponent from './HeavyComponent';

// Chargement dynamique (bundle séparé, chargé quand nécessaire)
const HeavyComponent = () => import('./HeavyComponent');

// Avec React.lazy
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

// Utilisation avec Suspense
<Suspense fallback={<Loading />}>
  <HeavyComponent />
</Suspense>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// jQuery (90 Ko de dépendance)
$('.btn').on('click', function() {
  $(this).addClass('active');
  $.ajax({ url: '/api/data', success: handleData });
});

// Vanilla JS (0 Ko de dépendance)
document.querySelectorAll('.btn').forEach(btn => {
  btn.addEventListener('click', () => {
    btn.classList.add('active');
    fetch('/api/data')
      .then(res => res.json())
      .then(handleData);
  });
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!-- Script critique : defer (exécuté après le parsing HTML) -->
<script src="/js/main.js" defer></script>

<!-- Script non critique : async (téléchargé en parallèle, exécuté dès que prêt) -->
<script src="/js/analytics.js" async></script>

<!-- Précharger le JS critique -->
<link rel="preload" href="/js/main.js" as="script">

<!-- Module type (defer par défaut) -->
<script type="module" src="/js/app.js"></script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

Complexité de l'application
       │
       │  Site statique/        Application         Application
       │  Blog/Vitrine          interactive         complexe
       │                        (e-commerce)        (SaaS)
       ▼
  ─────┼───────────────────┼───────────────────┼───────────────
       │                   │                   │
       │  Hugo, 11ty       │  Astro, Preact    │  React, Vue
       │  ou HTML statique │  Alpine.js        │  avec prudence
       │                   │                   │
       │  0 JS client      │  JS minimal       │  Bundle optimisé

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

BUILD TIME                         RUNTIME
┌──────────────┐                  ┌──────────────┐
│   Sources    │                  │     CDN      │
│  (Markdown,  │    Build         │  (HTML, CSS, │
│   Data)      │ ─────────────►   │   JS, Images)│
└──────────────┘                  └──────────────┘
                                         │
       Pas de serveur                    │
       d'application !                   ▼
                                  ┌──────────────┐
                                  │ Utilisateurs │
                                  └──────────────┘

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Configuration par type de ressource :

┌────────────────────┬───────────────────────┬─────────────────────┐
│ Type de ressource  │ Cache-Control         │ Raison              │
├────────────────────┼───────────────────────┼─────────────────────┤
│ HTML               │ no-cache              │ Vérifier à chaque   │
│                    │                       │ fois (rapide si     │
│                    │                       │ 304 Not Modified)   │
├────────────────────┼───────────────────────┼─────────────────────┤
│ CSS/JS (hashés)    │ max-age=31536000,     │ Hash change si      │
│ ex: main.a1b2c3.js │ immutable             │ contenu modifié     │
├────────────────────┼───────────────────────┼─────────────────────┤
│ Images             │ max-age=31536000      │ Rarement modifiées  │
├────────────────────┼───────────────────────┼─────────────────────┤
│ Fonts              │ max-age=31536000,     │ Ne changent jamais  │
│                    │ immutable             │                     │
├────────────────────┼───────────────────────┼─────────────────────┤
│ API dynamique      │ no-store              │ Temps réel          │
├────────────────────┼───────────────────────┼─────────────────────┤
│ API semi-statique  │ max-age=300,          │ Données changeant   │
│                    │ stale-while-revalidate│ peu fréquemment     │
│                    │ =3600                 │                     │
└────────────────────┴───────────────────────┴─────────────────────┘

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

# Cache assets statiques
location ~* \.(css|js)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
    add_header Vary "Accept-Encoding";
}

location ~* \.(jpg|jpeg|png|gif|webp|avif|svg|ico)$ {
    expires 1y;
    add_header Cache-Control "public";
}

location ~* \.(woff|woff2|ttf|eot)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

# HTML : toujours vérifier
location ~* \.html$ {
    add_header Cache-Control "no-cache";
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

# Python avec cache mémoire LRU
from functools import lru_cache
from typing import Optional

@lru_cache(maxsize=1000)
def get_product_details(product_id: int) -> Optional[dict]:
    """Récupère les détails d'un produit (mis en cache)."""
    return db.query("SELECT * FROM products WHERE id = %s", product_id)

# Invalidation si nécessaire
def update_product(product_id: int, data: dict):
    db.update("UPDATE products SET ... WHERE id = %s", product_id)
    get_product_details.cache_clear()  # Invalide tout le cache
    # Ou plus finement avec un cache externe (Redis)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// Node.js avec Redis
const Redis = require('ioredis');
const redis = new Redis();

async function getCachedData(key, fetchFn, ttl = 3600) {
  // Essayer le cache
  const cached = await redis.get(key);
  if (cached) {
    return JSON.parse(cached);
  }

  // Sinon, récupérer et mettre en cache
  const data = await fetchFn();
  await redis.setex(key, ttl, JSON.stringify(data));
  return data;
}

// Utilisation
const products = await getCachedData(
  'products:featured',
  () => db.query('SELECT * FROM products WHERE featured = true'),
  300  // 5 minutes
);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# Gzip
gzip on;
gzip_vary on;
gzip_min_length 1000;
gzip_comp_level 6;
gzip_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/json
    application/javascript
    application/xml
    application/xml+rss
    image/svg+xml;

# Brotli (si module installé)
brotli on;
brotli_comp_level 6;
brotli_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/json
    application/javascript
    application/xml
    image/svg+xml;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

-- MAUVAIS : SELECT *
SELECT * FROM products;

-- BON : Colonnes nécessaires uniquement
SELECT id, name, price, image_url FROM products;

-- MAUVAIS : Pas de limite
SELECT * FROM products WHERE category_id = 5;

-- BON : Pagination
SELECT id, name, price
FROM products
WHERE category_id = 5
ORDER BY created_at DESC
LIMIT 20 OFFSET 0;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

-- Identifier les requêtes lentes
EXPLAIN ANALYZE
SELECT * FROM products WHERE category_id = 5 AND price < 100;

-- Créer un index approprié
CREATE INDEX idx_products_category_price
ON products(category_id, price);

-- Vérifier l'utilisation de l'index
EXPLAIN ANALYZE
SELECT * FROM products WHERE category_id = 5 AND price < 100;
-- Devrait afficher "Index Scan" au lieu de "Seq Scan"

1
2
3
4
5
6
7
8
9

# MAUVAIS : N+1 queries (1 requête + N requêtes)
orders = Order.objects.all()  # 1 requête
for order in orders:
    print(order.customer.name)  # N requêtes !

# BON : Eager loading (1 ou 2 requêtes)
orders = Order.objects.select_related('customer').all()
for order in orders:
    print(order.customer.name)  # Déjà chargé !

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// API REST avec pagination
app.get('/api/products', async (req, res) => {
  const page = Math.max(1, parseInt(req.query.page) || 1);
  const limit = Math.min(parseInt(req.query.limit) || 20, 100);
  const offset = (page - 1) * limit;

  const [products, countResult] = await Promise.all([
    db.query('SELECT id, name, price FROM products LIMIT ? OFFSET ?', [limit, offset]),
    db.query('SELECT COUNT(*) as total FROM products')
  ]);

  res.json({
    data: products,
    pagination: {
      page,
      limit,
      total: countResult[0].total,
      pages: Math.ceil(countResult[0].total / limit),
      hasMore: page * limit < countResult[0].total
    }
  });
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// Permettre le filtrage pour réduire les données transférées
app.get('/api/products', async (req, res) => {
  let query = 'SELECT id, name, price FROM products WHERE 1=1';
  const params = [];

  // Filtres
  if (req.query.category) {
    query += ' AND category_id = ?';
    params.push(req.query.category);
  }

  if (req.query.min_price) {
    query += ' AND price >= ?';
    params.push(parseFloat(req.query.min_price));
  }

  if (req.query.max_price) {
    query += ' AND price <= ?';
    params.push(parseFloat(req.query.max_price));
  }

  // Sparse fieldsets (sélection des champs)
  if (req.query.fields) {
    const allowedFields = ['id', 'name', 'price', 'description', 'image'];
    const requestedFields = req.query.fields.split(',')
      .filter(f => allowedFields.includes(f));
    if (requestedFields.length > 0) {
      query = query.replace('id, name, price', requestedFields.join(', '));
    }
  }

  // Pagination...
});

1
2
3
4
5
6
7

PUE = Énergie totale du data center / Énergie des équipements IT

PUE = 1.0 : Parfait (théorique)
PUE < 1.2 : Excellent (hyperscalers, data centers récents)
PUE < 1.4 : Bon
PUE < 1.6 : Moyen
PUE > 1.6 : À améliorer

1
2
3
4
5

CUE = kg CO2 émis / kWh d'énergie IT

CUE = 0 : 100% énergie renouvelable
CUE < 0.2 : Excellent
CUE > 0.5 : À améliorer