Wskazówki zasobów (resource hints) to tagi <link>, które informują przeglądarkę o potrzebie wczesnego pobrania lub nawiązania połączenia z zasobami, optymalizując wydajność ładowania. Każda z nich służy różnym potrzebom związanym z czasowaniem i priorytetem.
preload — "Potrzebuję tego dla bieżącej strony, pobierz to teraz z wysokim priorytetem." Dla krytycznych zasobów odkrywanych przez parser zbyt późno: czcionek, obrazów bohaterskich, zasobów przywoływanych przez CSS. Wymaga atrybutu as, aby przeglądarka ustawiła prawidłowy priorytet/nagłówki.
preconnect — "Połączę się z tą domeną niedługo; wykonaj wyszukiwanie DNS + TCP + uścisk dłoni TLS teraz." Oszczędza rundy przed pierwszym żądaniem do strony trzeciej (API, host czcionek, CDN). Używaj dla kilku krytycznych domen.
dns-prefetch — lżejsza wersja preconnect: tylko rozpoznanie DNS. Dobre rozwiązanie rezerwowe / dla wielu domen.
prefetch — "Prawdopodobnie będę potrzebować tego do następnej nawigacji; pobierz to z niskim priorytetem, gdy przeglądarka jest bezczynna." Do potencjalnie następnych stron/zasobów. Buforowane na przyszłość, nie dla bieżącej strony.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
Czcionki są odkrywane late (przeglądarka musi najpierw sparsować CSS), więc ich wstępne załadowanie unika opóźnień związanych z niewidocznym tekstem.
Wstępne załadowanie wszystkiego uderza w cel — konkuruje z naprawdę krytycznymi zasobami o przepustowość. Dodawaj wskazówki tylko dla kilku najważniejszych zasobów.
Wskazówki zasobów zmniejszają opóźnienia na ścieżce krytycznej: preconnect eliminuje opóźnienie uścisku dłoni dla stron trzecich, preload nadaje priorytet zasobom odkrytym zbyt późno (czcionkom, obrazowi LCP), a prefetch sprawia, że następna nawigacja jest błyskawiczna.
Gdy są używane mądrze, znacząco poprawiają Core Web Vitals.