Comment optimisez-vous les performances du site Web?

• Optimisation des images :
  • Utilisation de formats modernes comme WebP.
  • Compression d'images sans perte de qualité.
  • Lazy loading pour les images hors de la vue.
  • Images adaptatives utilisant <picture> ou srcset.
• Minification et compression des ressources :
  • Minification de HTML, CSS et JavaScript.
  • Compression Gzip ou Brotli pour les ressources textuelles.
• Mise en cache :
  • Mise en cache du navigateur avec les en-têtes HTTP (Cache-Control, Expires).
  • Mise en cache côté serveur.
  • Utilisation de Service Workers pour l'accès hors ligne et une mise en cache avancée.
• Optimisation du chemin critique de rendu :
  • Chargement différé du CSS et JavaScript non critiques.
  • Chargement asynchrone des scripts (async, defer).
  • CSS critique en ligne.
• Réduction du nombre de requêtes HTTP :
  • Fusion des fichiers CSS et JavaScript (avec précaution en HTTP/2).
  • Utilisation de sprites pour les petites icônes.
  • Incrustation de petites ressources (comme les polices ou SVGs) dans le CSS via data URIs.
• Optimisation des polices :
  • Utilisation de formats modernes de polices (WOFF2).
  • Placement des polices localement.
  • Préchargement des polices (preload).
  • Utilisation de font-display pour gérer l'affichage des polices pendant le chargement.
• Performance JavaScript :
  • Optimisation des algorithmes et des structures de données.
  • Réduction des opérations DOM.
  • Utilisation de la délégation d'événements.
  • Division du code (code splitting).
• Optimisation du rendu et du dessin :
  • Éviter les propriétés CSS coûteuses.
  • Utilisation de will-change.
  • Optimisation des animations et des transitions.
• Utilisation de CDN (Content Delivery Network).
• Optimisation du côté serveur :
  • Réponse rapide du serveur.
  • Optimisation des requêtes à la base de données.

// Exemple de chargement différé d'image
const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      delete img.dataset.src;
      observer.unobserve(img);
    }
  });
});

images.forEach(image => {
  observer.observe(image);
});

<!-- Exemple d'utilisation de async et defer pour les scripts -->
<script src="script1.js" async></script>
<script src="script2.js" defer></script>

/* Exemple d'utilisation de font-display */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* Permet au navigateur d'utiliser une police de secours pendant le chargement */
}