Quelles méthodes pouvez-vous utiliser pour accélérer le chargement d'un site web?

Minimisation et regroupement des fichiers CSS et JavaScript. Compression des images et utilisation de formats modernes comme WebP. Utilisation du chargement différé (lazy loading) pour les images et vidéos. Mise en cache des ressources côté client et serveur. Compression GZIP pour les ressources textuelles. Réduction du nombre de requêtes HTTP. Utilisation d'un CDN (Content Delivery Network). Optimisation du chemin critique de rendu. Suppression du code inutilisé. Utilisation de Service Workers pour l'accès hors ligne et la mise en cache.

// Exemple de chargement différé d'une 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;
      observer.unobserve(img);
    }
  });
});

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

Comparaison des formats d'image :

Format	Utilisation typique	Caractéristiques
JPEG	Photographies	Compression avec perte, large gamme de couleurs
PNG	Graphiques avec transparence, logos	Compression sans perte, support de la transparence
GIF	Images animées	Compression sans perte, support de l'animation
WebP	Photographies et graphiques	Compression plus efficace (avec et sans perte), support de la transparence et de l'animation

/* Exemple de regroupement et de minimisation du CSS */
body {
  font-family: sans-serif;
  /* font-size: 16px; */ /* Code inutilisé supprimé */
}

h1 {
  color: #333;
  margin-bottom: 20px;
}

# Exemple de compression GZIP dans Nginx
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;