Come ottimizza le prestazioni del sito?

• Ottimizzazione delle immagini:
  • Uso di formati moderni come WebP.
  • Compressione delle immagini senza perdita di qualità.
  • Lazy loading per immagini fuori dalla vista.
  • Immagini adattive usando <picture> o srcset.
• Minificazione e compressione delle risorse:
  • Minificazione di HTML, CSS e JavaScript.
  • Compressione Gzip o Brotli per risorse di testo.
• Caching:
  • Caching del browser con intestazioni HTTP (Cache-Control, Expires).
  • Caching lato server.
  • Uso di Service Workers per accesso offline e caching avanzato.
• Ottimizzazione del percorso critico di rendering:
  • Caricamento differito di CSS e JavaScript non critici.
  • Caricamento asincrono di script (async, defer).
  • CSS critico inline.
• Riduzione delle richieste HTTP:
  • Unione di file CSS e JavaScript (con cautela in HTTP/2).
  • Uso di sprite per le piccole icone.
  • Iniezione di risorse piccole (come font o SVG) nel CSS usando data URIs.
• Ottimizzazione dei font:
  • Uso di formati moderni di font (WOFF2).
  • Posizionamento locale dei font.
  • Precaricamento dei font (preload).
  • Uso di font-display per gestire la visualizzazione dei font durante il caricamento.
• Performance di JavaScript:
  • Ottimizzazione di algoritmi e strutture dati.
  • Riduzione delle operazioni DOM.
  • Uso di delega degli eventi.
  • Divisione del codice (code splitting).
• Ottimizzazione del rendering e del disegno:
  • Evitare proprietà CSS costose.
  • Uso di will-change.
  • Ottimizzazione di animazioni e transizioni.
• Uso di CDN (Content Delivery Network).
• Ottimizzazione lato server:
  • Risposta rapida del server.
  • Ottimizzazione delle query al database.

// Esempio di caricamento differito di 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;
      delete img.dataset.src;
      observer.unobserve(img);
    }
  });
});

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

<!-- Esempio di uso di async e defer per gli script -->
<script src="script1.js" async></script>
<script src="script2.js" defer></script>

/* Esempio di uso di font-display */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* Permette al browser di usare un font di riserva mentre il principale si carica */
}