Preload to mechanizm, który mówi przeglądarce: “ten zasób będzie potrzebny na tej stronie, zacznij go pobierać teraz.” Działa zanim parser HTML natrafi na dany plik w trakcie normalnego przetwarzania kodu.
Co to jest preload
Preload to dyrektywa przeglądarki z grupy resource hintów. Wymusza pobranie wskazanego zasobu z wysokim priorytetem, zanim przeglądarka w naturalny sposób odkryje jego potrzebę podczas parsowania HTML i CSS.
Stosuje się go wyłącznie do zasobów krytycznych dla bieżącej podstrony — nie do zasobów, które mogą być potrzebne “może kiedyś” lub na innej stronie.
Preload a prefetch — kluczowa różnica
Te dwa mechanizmy działają odmiennie i służą innym celom.
Preload nakazuje przeglądarce pobranie zasobu z wysokim priorytetem, bo będzie potrzebny na tej samej stronie, natychmiast.
Prefetch wskazuje zasoby do pobrania z niskim priorytetem — “na zapas”, na potrzeby przyszłych nawigacji użytkownika.
Artykuł Prefetch w WordPress omawia prefetch, DNS prefetch, preconnect i prerender. Jeśli szukasz informacji o tych pokrewnych mechanizmach, zacznij tam.
Kiedy używać preloadu
Preload sprawdza się w kilku konkretnych sytuacjach.
Fonty. Jeśli motyw używa niestandardowych fontów, przeglądarka odkrywa ich potrzebę dopiero po przetworzeniu pliku CSS. Preload pozwala pobrać je wcześniej, eliminując miganie tekstu podczas ładowania strony (FOIT/FOUT).
Obraz hero (LCP). Główny obraz strony — baner, zdjęcie w nagłówku albo grafika tła — jest często elementem LCP. Preload może skrócić czas Largest Contentful Paint (LCP), szczególnie wtedy, gdy przeglądarka odkrywa ten obraz późno: przez plik CSS, skrypt JavaScript albo bardziej złożony układ szablonu. Jeśli obraz LCP znajduje się od razu w początkowym HTML jako zwykły tag <img>, zysk z preloadu może być mniejszy.
Skrypty krytyczne. Skrypty blokujące renderowanie, które muszą być dostępne jak najwcześniej — choć w praktyce zwykle lepszą techniką jest defer lub async.
Wymagane atrybuty
Atrybut as
Każdy tag preload musi zawierać atrybut as określający typ zasobu:
<link rel="preload" href="/fonts/moj-font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/images/hero.jpg" as="image">
Bez atrybutu as przeglądarka nie może prawidłowo ustalić priorytetu pobierania ani obsłużyć cache dla danego zasobu.
Atrybut crossorigin dla fontów
Fonty preloadowane bez atrybutu crossorigin spowodują, że przeglądarka pobierze ten sam font dwukrotnie — raz z preloadu, drugi raz przy napotkaniu deklaracji @font-face w CSS. Atrybut jest wymagany nawet przy fontach hostowanych na tej samej domenie.
Jak dodać preload w WordPress
Przez wtyczki optymalizacyjne — WP Rocket, Perfmatters — które mają opcję preloadowania fontów i wykrywania obrazu LCP. To najwygodniejsza metoda.
Można też dodać preload ręcznie przez filtr PHP wp_head w pliku functions.php lub child theme:
add_action( 'wp_head', function() {
echo '<link rel="preload" href="/wp-content/themes/motyw/fonts/pismo.woff2" as="font" type="font/woff2" crossorigin>';
} );
Lub bezpośrednio w pliku header.php motywu, przed zamknięciem sekcji <head>.
Czego unikać
Preload wszystkich zasobów. Dodanie preloadu do wielu zasobów jednocześnie przynosi odwrotny skutek. Konkurujące zapytania blokują pasmo sieciowe — zamiast przyspieszyć ładowanie kluczowych elementów, opóźniają je wzajemnie.
Preload obrazów below the fold. Obrazy poniżej linii zagięcia powinny być ładowane z opóźnieniem (lazy load), nie wcześniej. Preload jest zarezerwowany dla elementów krytycznych dla pierwszego widoku.
W praktyce warto preloadować maksymalnie kilka zasobów: główny font i ewentualnie obraz hero. Więcej zasobów rzadko poprawia wyniki.
Krytyczny CSS jest powiązaną techniką, która wpływa na to samo okno ładowania: Krytyczny CSS w WordPress.
Preload a LCP
Preload obrazu LCP może być bardzo skuteczną optymalizacją, ale nie powinien być stosowany automatycznie dla każdego dużego obrazu. Największy sens ma wtedy, gdy najważniejszy obraz strony jest potrzebny w pierwszym widoku, ale przeglądarka odkrywa go z opóźnieniem — na przykład jako tło CSS, obraz w sliderze albo zasób dodawany przez skrypt.
Google PageSpeed Insights często sugeruje tę optymalizację, gdy wykryje, że obraz LCP jest odkrywany późno. W prostych przypadkach, gdy obraz LCP znajduje się bezpośrednio w HTML jako standardowy tag <img>, czasem wystarczy poprawne ustawienie priorytetu ładowania, np. przez fetchpriority="high".
Aby sprawdzić, czy preload działa, otwórz zakładkę Network w Chrome DevTools i posortuj zasoby według czasu inicjalizacji. Preloadowany zasób powinien być pobierany jako jeden z pierwszych i nie powinien dublować się z tym samym zasobem pobieranym później normalną ścieżką.