Optimiser les performances frontend : techniques concrètes pour un site ultra-rapide

# Ou via npm pour automatiser
npm install -g lighthouse
lighthouse https://ton-site.com --view

// Installer la bibliothèque web-vitals
// npm install web-vitals

import { onCLS, onFID, onLCP } from 'web-vitals';

function envoyerVersAnalytics({ name, value, id }) {
  // Envoyer vers ton système d'analytics
  console.log(`${name}: ${value}ms (ID: ${id})`);

  // Exemple avec Google Analytics
  if (window.gtag) {
    gtag('event', name, {
      event_category: 'Web Vitals',
      value: Math.round(name === 'CLS' ? value * 1000 : value),
      event_label: id,
      non_interaction: true,
    });
  }
}

// Mesurer les Web Vitals
onCLS(envoyerVersAnalytics);
onFID(envoyerVersAnalytics);
onLCP(envoyerVersAnalytics);

<!-- Offrir plusieurs formats avec fallback -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" loading="lazy">
</picture>

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

<!-- Super simple et natif ! -->
<img src="image.jpg" alt="Description" loading="lazy">

<!-- Pour les iframes aussi -->
<iframe src="video.html" loading="lazy"></iframe>

// Lazy loading personnalisé avec Intersection Observer
class LazyImageLoader {
  constructor() {
    this.observer = new IntersectionObserver(
      (entries) => this.handleIntersection(entries),
      {
        rootMargin: '50px', // Charger 50px avant l'entrée dans le viewport
        threshold: 0.01
      }
    );

    this.init();
  }

  init() {
    const images = document.querySelectorAll('img[data-src]');
    images.forEach(img => this.observer.observe(img));
  }

  handleIntersection(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        this.loadImage(img);
        this.observer.unobserve(img);
      }
    });
  }

  loadImage(img) {
    const src = img.dataset.src;
    const srcset = img.dataset.srcset;

    // Créer une nouvelle image pour précharger
    const tempImg = new Image();

    tempImg.onload = () => {
      img.src = src;
      if (srcset) img.srcset = srcset;
      img.classList.add('loaded');
    };

    tempImg.src = src;
  }
}

// Utilisation
new LazyImageLoader();

<!-- HTML correspondant -->
<img 
  data-src="image-large.webp"
  data-srcset="image-400.webp 400w, image-800.webp 800w"
  src="placeholder-tiny.jpg"
  alt="Description"
  class="lazy-image"
>

<style>
.lazy-image {
  opacity: 0.5;
  filter: blur(5px);
  transition: opacity 0.3s, filter 0.3s;
}

.lazy-image.loaded {
  opacity: 1;
  filter: blur(0);
}
</style>

// Générer une version minuscule en base64 à intégrer dans le HTML
function genererLQIP(imagePath) {
  // À faire côté serveur ou en build time
  // Créer une version 20x20px en base64
}

<img 
  src="data:image/jpeg;base64,/9j/4AAQSkZJRg..." 
  data-src="image-full.jpg"
  alt="Description"
  style="background-image: url('data:image/jpeg;base64,...')"
>

// Charger un module seulement quand nécessaire
document.getElementById('btn-chart').addEventListener('click', async () => {
  // Le module n'est téléchargé qu'au clic
  const { Chart } = await import('./chart.js');
  const chart = new Chart();
  chart.render();
});

// Avec gestion d'erreur
async function chargerModule(modulePath) {
  try {
    const module = await import(modulePath);
    return module;
  } catch (error) {
    console.error(`Erreur lors du chargement de ${modulePath}:`, error);
    // Afficher un message à l'utilisateur
    afficherErreur('Impossible de charger ce module');
  }
}

// Avec un router simple
class Router {
  constructor() {
    this.routes = new Map();
  }

  addRoute(path, moduleLoader) {
    this.routes.set(path, moduleLoader);
  }

  async navigate(path) {
    const loader = this.routes.get(path);
    if (!loader) {
      console.error('Route non trouvée:', path);
      return;
    }

    // Afficher un loader
    this.showLoader();

    try {
      // Charger le module dynamiquement
      const module = await loader();
      const component = new module.default();
      component.render();
    } catch (error) {
      console.error('Erreur de navigation:', error);
    } finally {
      this.hideLoader();
    }
  }

  showLoader() {
    document.getElementById('loader').style.display = 'block';
  }

  hideLoader() {
    document.getElementById('loader').style.display = 'none';
  }
}

// Utilisation
const router = new Router();

router.addRoute('/accueil', () => import('./pages/accueil.js'));
router.addRoute('/profil', () => import('./pages/profil.js'));
router.addRoute('/dashboard', () => import('./pages/dashboard.js'));

// Navigation
document.querySelectorAll('[data-route]').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    const route = e.target.dataset.route;
    router.navigate(route);
  });
});

// Précharger les modules qu'on va probablement utiliser
function prechargerModules(modulePaths) {
  modulePaths.forEach(path => {
    const link = document.createElement('link');
    link.rel = 'modulepreload';
    link.href = path;
    document.head.appendChild(link);
  });
}

// Précharger au survol
document.querySelectorAll('[data-preload]').forEach(element => {
  element.addEventListener('mouseenter', () => {
    const modulePath = element.dataset.preload;
    import(modulePath); // Commence le téléchargement
  }, { once: true });
});

<!-- Script bloquant (à éviter) -->
<script src="script.js"></script>

<!-- Async : télécharge en parallèle, exécute dès que prêt -->
<script src="analytics.js" async></script>

<!-- Defer : télécharge en parallèle, exécute après le parsing HTML -->
<script src="main.js" defer></script>

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

<head>
  <!-- DNS Prefetch : résoudre le DNS à l'avance -->
  <link rel="dns-prefetch" href="https://api.example.com">

  <!-- Preconnect : établir la connexion complète -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Prefetch : télécharger pour une navigation future -->
  <link rel="prefetch" href="/page-suivante.html">

  <!-- Preload : télécharger avec haute priorité -->
  <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="hero-image.webp" as="image">
</head>

// Précharger une image
function preloadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = url;
  });
}

// Précharger plusieurs ressources
async function preloadResources(urls) {
  const promises = urls.map(url => {
    if (url.endsWith('.jpg') || url.endsWith('.png') || url.endsWith('.webp')) {
      return preloadImage(url);
    }
    // Pour autres ressources
    return fetch(url);
  });

  try {
    await Promise.all(promises);
    console.log('Toutes les ressources préchargées');
  } catch (error) {
    console.error('Erreur de préchargement:', error);
  }
}

// Utilisation
preloadResources([
  '/images/hero.webp',
  '/images/product-1.webp',
  '/api/data.json'
]);

<!DOCTYPE html>
<html>
<head>
  <!-- CSS critique inline pour le contenu above-the-fold -->
  <style>
    /* Styles nécessaires au premier rendu */
    body { margin: 0; font-family: system-ui; }
    .hero { min-height: 100vh; background: #333; }
    .hero h1 { color: white; font-size: 3rem; }
  </style>

  <!-- Charger le reste du CSS de façon asynchrone -->
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>
<body>
  <!-- Contenu -->
</body>
</html>

// Avec PurgeCSS en build time
// purgecss.config.js
module.exports = {
  content: ['./src/**/*.html', './src/**/*.js'],
  css: ['./src/**/*.css'],
  safelist: ['active', 'open', 'show'], // Classes à garder
};

/* Utiliser les custom properties pour éviter la répétition */
:root {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  --spacing: 1rem;
}

.btn {
  background: var(--color-primary);
  padding: var(--spacing);
}

/* Utiliser les propriétés logiques pour RTL/LTR */
.container {
  margin-inline: auto; /* au lieu de margin-left et margin-right */
  padding-block: 2rem; /* au lieu de padding-top et padding-bottom */
}

/* Utiliser @layer pour organiser et réduire la spécificité */
@layer base, components, utilities;

@layer base {
  body { margin: 0; }
}

@layer components {
  .card { padding: 1rem; }
}

// Debounce : exécute après un délai sans appel
function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// Utilisation pour la recherche
const champRecherche = document.querySelector('#recherche');
const rechercherDebounced = debounce(async (query) => {
  const resultats = await fetch(`/api/search?q=${query}`);
  afficherResultats(resultats);
}, 300);

champRecherche.addEventListener('input', (e) => {
  rechercherDebounced(e.target.value);
});

// Throttle : exécute maximum une fois par intervalle
function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

// Utilisation pour le scroll
const handleScroll = throttle(() => {
  console.log('Scroll position:', window.scrollY);
  // Opérations coûteuses
}, 200);

window.addEventListener('scroll', handleScroll);

// ❌ Mauvais : provoque plusieurs reflows
function mauvaisExample() {
  const element = document.getElementById('box');
  element.style.width = '100px';  // Reflow
  element.style.height = '100px'; // Reflow
  element.style.padding = '10px'; // Reflow
}

// ✅ Bon : un seul reflow
function bonExample() {
  const element = document.getElementById('box');
  element.style.cssText = 'width: 100px; height: 100px; padding: 10px;';
}

// ✅ Encore mieux : utiliser des classes
function meilleureExample() {
  const element = document.getElementById('box');
  element.classList.add('box-large');
}

// ✅ Pour plusieurs éléments : DocumentFragment
function ajouterPlusieursElements(items) {
  const fragment = document.createDocumentFragment();

  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.text;
    fragment.appendChild(li);
  });

  // Un seul reflow
  document.getElementById('liste').appendChild(fragment);
}

// worker.js
self.addEventListener('message', (e) => {
  const { data } = e;

  // Calcul lourd
  const result = calculComplexe(data);

  // Renvoyer le résultat
  self.postMessage(result);
});

function calculComplexe(data) {
  // Opération intensive
  let result = 0;
  for (let i = 0; i < 1000000; i++) {
    result += Math.sqrt(i) * data;
  }
  return result;
}

// main.js
const worker = new Worker('worker.js');

worker.addEventListener('message', (e) => {
  console.log('Résultat du worker:', e.data);
  afficherResultat(e.data);
});

worker.addEventListener('error', (error) => {
  console.error('Erreur dans le worker:', error);
});

// Lancer le calcul
function lancerCalcul(data) {
  worker.postMessage(data);
  // Le thread principal reste réactif !
}

document.getElementById('btn-calcul').addEventListener('click', () => {
  lancerCalcul(42);
});

// service-worker.js
const CACHE_NAME = 'mon-site-v1';
const urlsToCache = [
  '/',
  '/styles.css',
  '/script.js',
  '/logo.png'
];

// Installation : mettre en cache les ressources
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

// Activation : nettoyer les anciens caches
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheName !== CACHE_NAME) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

// Fetch : servir depuis le cache avec fallback
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // Cache hit - retourner la réponse
        if (response) {
          return response;
        }

        // Sinon, faire la requête réseau
        return fetch(event.request).then(response => {
          // Vérifier si c'est une réponse valide
          if (!response || response.status !== 200 || response.type !== 'basic') {
            return response;
          }

          // Cloner la réponse
          const responseToCache = response.clone();

          // Ajouter au cache
          caches.open(CACHE_NAME)
            .then(cache => {
              cache.put(event.request, responseToCache);
            });

          return response;
        });
      })
  );
});

// main.js - Enregistrer le service worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('Service Worker enregistré:', registration);
      })
      .catch(error => {
        console.error('Erreur d\'enregistrement:', error);
      });
  });
}

// Cache First (pour les assets statiques)
async function cacheFirst(request) {
  const cache = await caches.open(CACHE_NAME);
  const cached = await cache.match(request);
  return cached || fetch(request);
}

// Network First (pour les données dynamiques)
async function networkFirst(request) {
  try {
    const response = await fetch(request);
    const cache = await caches.open(CACHE_NAME);
    cache.put(request, response.clone());
    return response;
  } catch (error) {
    const cached = await caches.match(request);
    return cached || new Response('Offline');
  }
}

// Stale While Revalidate (meilleur des deux mondes)
async function staleWhileRevalidate(request) {
  const cache = await caches.open(CACHE_NAME);
  const cached = await cache.match(request);

  const fetchPromise = fetch(request).then(response => {
    cache.put(request, response.clone());
    return response;
  });

  return cached || fetchPromise;
}

# Avec webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer

# webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

// ❌ Mauvais : importe toute la bibliothèque
import _ from 'lodash';
const result = _.debounce(func, 300);

// ✅ Bon : importe seulement ce qui est nécessaire
import debounce from 'lodash/debounce';
const result = debounce(func, 300);

// ✅ Encore mieux : utilise une alternative plus légère
import debounce from 'lodash-es/debounce'; // Version ES modules

// Au lieu de Moment.js (300KB) → Day.js (2KB)
// import moment from 'moment';
import dayjs from 'dayjs';

const date = dayjs().format('DD/MM/YYYY');

// Au lieu de Lodash complet → Lodash-es + tree-shaking
// Ou utiliser les méthodes natives quand c'est possible
const unique = [...new Set(array)]; // Au lieu de _.uniq(array)
const values = Object.values(obj);  // Au lieu de _.values(obj)

@font-face {
  font-family: 'MaPolice';
  src: url('police.woff2') format('woff2');
  font-display: swap; /* Affiche le texte immédiatement avec une font système */
  /* Autres options : block, fallback, optional */
}

/* Variable fonts pour réduire le nombre de fichiers */
@font-face {
  font-family: 'InterVariable';
  src: url('inter-variable.woff2') format('woff2');
  font-weight: 100 900; /* Toutes les graisses dans un fichier */
  font-display: swap;
}

<head>
  <link 
    rel="preload" 
    href="/fonts/inter-variable.woff2" 
    as="font" 
    type="font/woff2" 
    crossorigin
  >
</head>

/* Charger seulement les caractères nécessaires */
@font-face {
  font-family: 'MaPolice';
  src: url('police-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153; /* Latin de base */
}

// Performance Observer pour surveiller les métriques
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(`${entry.name}: ${entry.duration}ms`);

    // Envoyer vers ton système de monitoring
    envoyerMetrique({
      nom: entry.name,
      duree: entry.duration,
      type: entry.entryType
    });
  }
});

observer.observe({ 
  entryTypes: ['measure', 'navigation', 'resource', 'paint'] 
});

// Mesurer des opérations personnalisées
performance.mark('debut-operation');
// ... opération coûteuse ...
performance.mark('fin-operation');
performance.measure('duree-operation', 'debut-operation', 'fin-operation');