Jak możemy pomóc przeglądarce przygotować się do ładowania zasobów?

Użyj dyrektyw preload: preconnect, dns-prefetch, preload, prefetch, prerender.

Dyrektywa	Opis	Przykład
preconnect	Ustanawia połączenie (wyszukiwanie DNS, handshake TCP, negocjacja TLS) z innym źródłem danych z wyprzedzeniem.	<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch	Wykonuje rozwiązywanie nazwy domeny z wyprzedzeniem.	<link rel="dns-prefetch" href="//api.example.com">
preload	Wstępnie żąda zasobów (JS, CSS, fontów) z wysokim priorytetem, nie blokując renderowania.	<link rel="preload" href="/styles.css" as="style">
prefetch	Żąda zasobów, które prawdopodobnie będą potrzebne w przyszłości (np. na następnej stronie).	<link rel="prefetch" href="/next_page.html">
prerender	Renderuje następną stronę w ukrytej zakładce z wyprzedzeniem.	<link rel="prerender" href="/upcoming_page.html">

Użyj atrybutu async lub defer w tagu <script>, aby ładować i wykonywać skrypty asynchronicznie, nie blokując parsowania HTML:

<script src="script.js" async></script>
<script src="another-script.js" defer></script>

Użyj atrybutu loading="lazy" dla obrazów i <iframe>, aby opóźnić ich ładowanie, gdy znajdą się w obszarze widoku:

<img src="image.jpg" loading="lazy" alt="Lazy loaded image">

Optymalizuj obrazy (kompresja, używanie nowoczesnych formatów jak WebP), fonty (podzbiory, formaty WOFF/WOFF2) i inne zasoby.

Minifikuj i kompresuj CSS, JavaScript i HTML.

Użyj Service Worker do cache'owania zasobów i zapewnienia dostępu offline.

Dziel duży kod JavaScript na mniejsze części (code splitting) i ładuj je na żądanie.

Użyj HTTP/2 i HTTP/3 dla bardziej efektywnego multiplexingu i kompresji nagłówków.

Ustaw odpowiednie nagłówki cache (Cache-Control, Expires) na serwerze.

Użyj <link rel="modulepreload"> do preloadowania modułów JavaScript ES.

<link rel="modulepreload" href="/dist/module.js">