Resource hints to małe instrukcje <link> w <head> strony, którymi mówisz przeglądarce, które zasoby ma potraktować wcześnie. Trzy najważniejsze to rel="preconnect" (nawiązuje z wyprzedzeniem połączenie – DNS, TCP, TLS – z domeną zewnętrzną), rel="dns-prefetch" (rozwiązuje z wyprzedzeniem tylko nazwę DNS, tani fallback dla starszych przeglądarek) oraz rel="preload" (pobiera konkretny plik z wysokim priorytetem, zanim przeglądarka odkryje go w dokumencie). Zastosowane poprawnie skracają Largest Contentful Paint (LCP) często o 100 do 400 ms, ponieważ najważniejszy obraz i fonty nie wiszą już na końcu łańcucha ładowania. Zastosowane błędnie lub zbyt hojnie szkodzą jednak: każdy preload konkuruje o pasmo, a zbyt wiele hintów opóźnia właśnie te zasoby, które mają być szybkie. Ten poradnik pokazuje, kiedy i jak celowo ustawiać hinty w WordPressie.
Trzy hinty w skrócie
| Hint | Co robi | Do czego |
|---|---|---|
preconnect | z wyprzedzeniem nawiązuje DNS + TCP + TLS z domeną zewnętrzną | host fontów, CDN, analytics – domeny, z których ładuje się wcześnie |
dns-prefetch | tylko rozwiązanie DNS z wyprzedzeniem | tani fallback i dla domen potrzebnych nieco później |
preload | natychmiast ładuje konkretny plik z wysokim priorytetem | obraz LCP, krytyczne web fonty, krytyczny CSS |
Krok 1: Zidentyfikuj krytyczne zasoby
Otwórz Chrome DevTools, zakładkę Network, przeładuj stronę i spójrz na diagram wodospadowy. Określ:
- Element LCP: zwykle duży obraz hero na górze. W zakładce Performance lub w Lighthouse jest oznaczony jako "Largest Contentful Paint element".
- Fonty niezbędne dla widocznego tekstu (późno ładowane fonty powodują "Flash of Unstyled Text").
- Domeny zewnętrzne, z których ładuje się wcześnie (Google Fonts, CDN obrazów, host ikon).
Tylko te nieliczne zasoby otrzymują hint, nie każdy plik.
Krok 2: Preconnect dla domen zewnętrznych
Jeśli strona osadza zasoby z innej domeny, dzięki preconnect oszczędzasz nawiązywanie połączenia. Przykład dla hosta fontów lub CDN:
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="https://cdn.example.com">Atrybut crossorigin jest przy fontach i innych anonimowo ładowanych zasobach obowiązkowy, w przeciwnym razie nawiązane z wyprzedzeniem połączenie nie zostanie ponownie użyte. dns-prefetch poniżej służy jako fallback dla przeglądarek bez obsługi preconnect.
Uwaga o Google Fonts: Najszybciej jest osadzić Google Fonts lokalnie i całkowicie zrezygnować z domeny zewnętrznej. Jeśli to niemożliwe, pomaga preconnect do fonts.gstatic.com.
Krok 3: Preload dla obrazu LCP i fontów
Preload obrazu LCP
<link rel="preload" as="image"
href="/wp-content/uploads/2026/07/hero.avif"
type="image/avif"
fetchpriority="high">Alternatywnie – i często elegancko – ustaw fetchpriority="high" bezpośrednio na tagu <img> obrazu hero i usuń dla tego obrazu lazy loading, zamiast używać osobnego preload.
Preload fontu
<link rel="preload" as="font" type="font/woff2"
href="/wp-content/themes/mein-theme/fonts/inter.woff2"
crossorigin>Przy fontach crossorigin jest konieczny nawet przy tej samej domenie, ponieważ fonty są zawsze ładowane anonimowo.
Wdrożenie w WordPressie
Wariant A: przez functions.php
Dodaj hinty przez hook wp_head (w functions.php motywu potomnego):
add_action( 'wp_head', function () {
?>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="font" type="font/woff2"
href="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/fonts/inter.woff2"
crossorigin>
<?php
}, 1 ); // Priorytet 1 = mozliwie wczesnie w headWariant B: przez filtr resource_hints
Dla preconnect i dns-prefetch WordPress oferuje oficjalny filtr wp_resource_hints:
add_filter( 'wp_resource_hints', function ( $hints, $relation_type ) {
if ( 'preconnect' === $relation_type ) {
$hints[] = array(
'href' => 'https://fonts.gstatic.com',
'crossorigin' => 'anonymous',
);
}
return $hints;
}, 10, 2 );Wariant C: przez wtyczkę
Wtyczki optymalizacyjne, takie jak WP Rocket, Perfmatters lub FlyingPress, oferują pola, w których można wpisać adresy URL preload i preconnect, bez kodu.
Jak mierzę efekt?
- Uruchom Lighthouse (Chrome DevTools, zakładka Lighthouse) przed zmianą i po niej oraz porównaj wartość LCP.
- W zakładce Network sprawdź, że obraz LCP i fonty startują teraz wcześniej w łańcuchu (priorytet "High").
- PageSpeed Insights nie powinien już wyświetlać diagnozy "Largest Contentful Paint image was lazily loaded" ani "Preconnect to required origins".
Częste błędy
- Zbyt wiele preloadów: Gdy wszystko jest preloadowane, nic nie jest już priorytetowe. Ogranicz się do 1–2 obrazów i 1–2 fontów.
- Preload bez użycia: Zasób załadowany przez preload, ale nieużyty w ciągu kilku sekund, generuje w konsoli ostrzeżenie "was preloaded but not used" i marnuje pasmo.
- Zapomniany crossorigin: Gdy brakuje go przy fontach, przeglądarka pobiera plik dwa razy (raz anonimowo przez preload, raz standardowo).
- Preconnect do zbyt wielu domen: Każde otwarte połączenie kosztuje zasoby. Więcej niż 4–6 preconnectów rzadko ma sens.
- Błędna wartość
as:as="image",as="font",as="style"muszą pasować do typu zasobu, w przeciwnym razie preload jest ignorowany.
Częste pytania (FAQ)
Jaka jest różnica między preload a preconnect?
preconnect nawiązuje z wyprzedzeniem połączenie (DNS, TCP, TLS) z domeną zewnętrzną, ale nie ładuje jeszcze pliku. preload pobiera konkretny plik z wysokim priorytetem, zanim przeglądarka odkryje go w dokumencie. preconnect stosuje się dla hostów fontów lub CDN, a preload dla obrazu LCP i krytycznych fontów.
Dlaczego fonty przy preload potrzebują atrybutu crossorigin?
Fonty są zawsze ładowane przez przeglądarkę anonimowo (w trybie CORS), także z własnej domeny. Gdy przy preload brakuje atrybutu crossorigin, wcześniej załadowane żądanie nie pasuje do późniejszego żądania fontu i przeglądarka pobiera plik dwa razy. Dlatego crossorigin przy preload as="font" jest zawsze konieczny.
Ile zasobów powinienem preloadować?
Jak najmniej. Gdy wszystko jest preloadowane, nic nie jest już priorytetowe, a hinty spowalniają właśnie te zasoby, które mają być szybkie. Ogranicz się do 1 lub 2 obrazów i 1 lub 2 fontów oraz maksymalnie 4 do 6 preconnectów.
Co oznacza ostrzeżenie konsoli "preloaded but not used"?
To ostrzeżenie pojawia się, gdy zasób załadowany przez preload nie zostanie użyty na stronie w ciągu kilku sekund. Preload marnuje wtedy pasmo. Sprawdź, czy wartość as (image, font, style) jest poprawna i czy preloadowany URL dokładnie pokrywa się z później używanym URL.
Jak InspectWP pomaga przy resource hints?
InspectWP rejestruje obecne w <head> zasoby <link> oraz osadzone domeny zewnętrzne i fonty. Raport pokazuje, które zewnętrzne hosty są kontaktowane wcześnie i gdzie ładowane są fonty firm trzecich, dobre punkty wyjścia, by celowo zastosować preconnect lub lokalny hosting.