Jak optymalizujesz wydajność strony internetowej?

• Optymalizacja obrazów:
  • Użycie nowoczesnych formatów, takich jak WebP.
  • Kompresja obrazów bez utraty jakości.
  • Lazy loading dla obrazów poza widocznym obszarem.
  • Obrazy adaptacyjne z użyciem <picture> lub srcset.
• Minifikacja i kompresja zasobów:
  • Minifikacja HTML, CSS i JavaScript.
  • Kompresja Gzip lub Brotli dla zasobów tekstowych.
• Pamięć podręczna:
  • Pamięć podręczna przeglądarki z użyciem nagłówków HTTP (Cache-Control, Expires).
  • Pamięć podręczna po stronie serwera.
  • Użycie Service Workers dla dostępu offline i bardziej zaawansowanej pamięci podręcznej.
• Optymalizacja krytycznej ścieżki renderowania:
  • Opóźnione ładowanie niekrytycznych CSS i JavaScript.
  • Asynchroniczne ładowanie skryptów (async, defer).
  • Inline krytycznego CSS.
• Zmniejszenie liczby zapytań HTTP:
  • Łączenie plików CSS i JavaScript (z ostrożnością w HTTP/2).
  • Użycie sprite'ów dla małych ikon.
  • Osadzanie małych zasobów (np. fontów lub SVG) w CSS za pomocą data URIs.
• Optymalizacja fontów:
  • Użycie nowoczesnych formatów fontów (WOFF2).
  • Umieszczenie fontów lokalnie.
  • Wstępne ładowanie fontów (preload).
  • Użycie font-display do zarządzania wyświetlaniem fontów podczas ładowania.
• Wydajność JavaScript:
  • Optymalizacja algorytmów i struktur danych.
  • Zmniejszenie liczby operacji DOM.
  • Użycie delegacji zdarzeń.
  • Podział kodu (code splitting).
• Optymalizacja renderowania i rysowania:
  • Unikanie kosztownych właściwości CSS.
  • Użycie will-change.
  • Optymalizacja animacji i przejść.
• Użycie CDN (Content Delivery Network).
• Optymalizacja po stronie serwera:
  • Szybka odpowiedź serwera.
  • Optymalizacja zapytań do bazy danych.

// Przykład lazy loading 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;
      delete img.dataset.src;
      observer.unobserve(img);
    }
  });
});

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

<!-- Przykład użycia async i defer dla skryptów -->
<script src="script1.js" async></script>
<script src="script2.js" defer></script>

/* Przykład użycia font-display */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* Pozwala na użycie fontu zapasowego podczas ładowania głównego */
}