Jakie metody optymalizacji strony znasz?

Minifikacja i kompresja zasobów:
- HTML, CSS, JavaScript: Usuwanie zbędnych spacji, komentarzy, łamania linii, skracanie nazw zmiennych.
- Obrazy: Optymalizacja formatów (WebP, AVIF), kompresja bez utraty jakości, użycie obrazów responsywnych.
Użycie CDN (Content Delivery Network): Rozmieszczanie statycznych zasobów na serwerach najbliższych użytkownikowi, co skraca opóźnienie.
Cache przeglądarki: Ustawianie odpowiednich nagłówków HTTP (Cache-Control, Expires) do cache’owania statycznych zasobów po stronie klienta.
Lazy Loading (leniwe ładowanie): Ładowanie obrazów, wideo i innych ciężkich zasobów dopiero gdy pojawią się w widocznym obszarze ekranu.
Asynchroniczne i opóźnione ładowanie JavaScript i CSS: Użycie atrybutów async i defer dla skryptów, które nie blokują wykonania, oraz asynchroniczne ładowanie CSS.
Optymalizacja krytycznego CSS: Osadzenie minimalnego zestawu CSS do renderowania pierwszego ekranu bezpośrednio w HTML <head>, reszta CSS ładowana asynchronicznie.
Zmniejszenie liczby zapytań HTTP:
- Łączenie plików CSS i JavaScript.
- Użycie sprite’ów dla małych obrazów.
Optymalizacja fontów:
- Użycie formatu WOFF2.
- Użycie font-display.
- Wstępne ładowanie krytycznych fontów.
Użycie renderowania po stronie serwera (SSR) lub generowania statycznych stron (SSG): Renderowanie części lub całości strony na serwerze przed wysłaniem do klienta, co poprawia czas do pierwszej treści i indeksację.
Optymalizacja obrazów:
- Odpowiednie rozmiary dla różnych urządzeń.
- Użycie <picture> i srcset.
- Kompresja z kontrolowaną utratą jakości.

Użycie Resource Hints (preconnect, prefetch, preload): Podpowiedzi dla przeglądarki o zasobach, które mogą być potrzebne wkrótce.

<!-- Połączenie z domeną przed żądaniem zasobu -->
<link rel="preconnect" href="https://example.com">
<!-- Wstępne ładowanie zasobu -->
<link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin>
<!-- Wstępne pobranie zasobu -->
<link rel="prefetch" href="/next-page.html">

Optymalizacja DOM: Minimalizacja głębokości drzewa DOM, unikanie kosztownych operacji odczytu/zapisu DOM w pętlach.
Optymalizacja renderowania (Layout, Paint, Composite): Unikanie wymuszonych ponownych obliczeń stylów i układów, używanie właściwości CSS, które nie powodują pełnego repaint (np. transform, opacity zamiast top, left).
Użycie Web Workers: Przenoszenie intensywnych obliczeń do oddzielnych wątków, aby nie blokować głównego wątku UI.
Progressywne ładowanie: Wyświetlanie treści w miarę jej ładowania.