Na czym to polega
Przeglądarki zazwyczaj pobierają zasoby (fonty, zdjęcia, skrypty) dopiero w momencie, gdy napotkają je podczas renderowania dokumentu. Użycie tagu <link rel="preload"> na samym początku dokumentu zmusza przeglądarkę do priorytetowego ładowania krytycznych elementów w tle.
Kiedy używać preloadu
- Kluczowe fonty: aby zapobiec tzw. FOUT (Flash of Unstyled Text) lub opóźnionemu wyświetlaniu tekstu.
- Obrazy Hero (LCP): przyspiesza ładowanie najważniejszej grafiki w pierwszej sekcji strony, co kluczowo poprawia wskaźnik LCP.
- Krytyczne style i skrypty: gdy są niezbędne do prawidłowego wyświetlenia interfejsu zanim załaduje się reszta witryny.
Typowe błędy
Nadużywanie preloading'u może zaszkodzić stronie bardziej, niż pomóc. Jeśli zadeklarujesz jako priorytetowe kilkanaście zasobów, będą one rywalizować o łącze z plikiem HTML, opóźniając ostateczny render całej witryny.