Quali metodi puoi usare per accelerare il caricamento di un sito web?

Minimizzazione e raggruppamento di file CSS e JavaScript. Compressione delle immagini e utilizzo di formati moderni come WebP. Utilizzo del caricamento lazy (lazy loading) per immagini e video. Caching delle risorse lato client e server. Compressione GZIP per risorse testuali. Riduzione delle richieste HTTP. Utilizzo di CDN (Content Delivery Network). Ottimizzazione del percorso critico di rendering. Rimozione del codice non utilizzato. Utilizzo di Service Workers per accesso offline e caching.

// Esempio di lazy loading di un'immagine
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);
});

Confronto dei formati di immagine:

Formato	Uso tipico	Caratteristiche
JPEG	Fotografie	Compressione con perdita, ampia gamma di colori
PNG	Grafica con trasparenza, loghi	Compressione senza perdita, supporto per trasparenza
GIF	Immagini animate	Compressione senza perdita, supporto per animazioni
WebP	Fotografie e grafica	Compressione più efficiente (con e senza perdita), supporto per trasparenza e animazioni

/* Esempio di raggruppamento e minimizzazione di CSS */
body {
  font-family: sans-serif;
  /* font-size: 16px; */ /* Codice non utilizzato rimosso */
}

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

# Esempio di compressione GZIP in Nginx
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;