Jakie metody możesz użyć, aby przyspieszyć ładowanie strony internetowej?

Minimalizacja i łączenie plików CSS i JavaScript. Kompresja obrazów i użycie nowoczesnych formatów, takich jak WebP. Użycie ładowania leniwego (lazy loading) dla obrazów i wideo. Buforowanie zasobów po stronie klienta i serwera. Kompresja GZIP dla zasobów tekstowych. Minimalizacja zapytań HTTP. Użycie CDN (Content Delivery Network). Optymalizacja krytycznej ścieżki renderowania. Usuwanie nieużywanego kodu. Użycie Service Workers do dostępu offline i buforowania.

// Przykład leniwego ładowania obrazu
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);
});

Porównanie formatów obrazów:

Format	Typowe zastosowanie	Cechy
JPEG	Zdjęcia	Kompresja stratna, szeroki zakres kolorów
PNG	Grafika z przezroczystością, logotypy	Kompresja bezstratna, obsługa przezroczystości
GIF	Obrazy animowane	Kompresja bezstratna, obsługa animacji
WebP	Zdjęcia i grafika	Bardziej wydajna kompresja (z stratą i bez), obsługa przezroczystości i animacji

/* Przykład łączenia i minimalizacji CSS */
body {
  font-family: sans-serif;
  /* font-size: 16px; */ /* Usunięto nieużywany kod */
}

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

# Przykład kompresji GZIP w Nginx
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;