Welke methoden kunt u gebruiken om de laadtijd van een website te versnellen?

Minimalisatie en samenvoeging van CSS- en JavaScript-bestanden. Compressie van afbeeldingen en gebruik van moderne formaten zoals WebP. Gebruik van lazy loading voor afbeeldingen en video's. Caching van bronnen aan de client- en serverzijde. GZIP-compressie voor tekstuele bronnen. Minimaliseren van HTTP-verzoeken. Gebruik van een CDN (Content Delivery Network). Optimalisatie van de kritieke renderpad. Verwijdering van ongebruikte code. Gebruik van Service Workers voor offline toegang en caching.

// Voorbeeld van lazy loading van een afbeelding
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);
});

Vergelijking van afbeeldingsformaten:

Formaat	Typisch gebruik	Kenmerken
JPEG	Foto's	Verliesgebaseerde compressie, breed kleurenbereik
PNG	Grafieken met transparantie, logo's	Verliesvrije compressie, ondersteuning voor transparantie
GIF	Geanimeerde afbeeldingen	Verliesvrije compressie, ondersteuning voor animatie
WebP	Foto's en grafieken	Efficiëntere compressie (met en zonder verlies), ondersteuning voor transparantie en animatie

/* Voorbeeld van samenvoegen en minimaliseren van CSS */
body {
  font-family: sans-serif;
  /* font-size: 16px; */ /* Niet-gebruikte code verwijderd */
}

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

# Voorbeeld van GZIP-compressie in Nginx
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;