Preload, prefetch i preconnect
Informowanie przeglądarki o konieczności wcześniejszego pobrania kluczowych zasobów
Preload, prefetch i preconnect to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Po co wskazówki dotyczące zasobów?
Nowoczesne przeglądarki wykrywają zasoby dopiero podczas analizowania kodu HTML. Wskazówki dotyczące zasobów (atrybuty rel elementu link w <head>) pozwalają poinformować przeglądarkę: „Wkrótce będę tego potrzebować” — dzięki temu żądanie sieciowe rozpoczyna się wcześniej, niż byłoby to możliwe przy zwykłym wykrywaniu zasobu.
preload ładuje natychmiast
<link rel="preload" as="..." href="..."> nakazuje przeglądarce natychmiast pobrać zasób z priorytetem odpowiednim dla wartości as. Należy używać go w przypadku zasobów, których strona na pewno będzie potrzebować: głównych obrazów, krytycznych czcionek i kodu JavaScript dla danej trasy.
<link rel="preload" as="font" type="font/woff2" href="/inter.woff2" crossorigin>Atrybut as
Zawsze należy ustawiać as — określa on priorytet żądania, nagłówek Accept oraz egzekwowanie CSP. Typowe wartości to: "script", "style", "font", "image" i "fetch". Bez as przeglądarki ignorują preload i zapisują ostrzeżenie.
crossorigin w przypadku czcionek
Wstępne ładowanie czcionek wymaga crossorigin, nawet gdy czcionka pochodzi z tego samego źródła. Bez tego przeglądarka pobiera czcionkę w trybie CORS podczas właściwego użycia, ale w trybie anonimowym podczas preload, co prowadzi do podwójnego pobrania — jest to subtelny i częsty błąd wydajności.
prefetch ładuje później
<link rel="prefetch" href="..."> sygnalizuje, że zasób będzie potrzebny podczas przyszłej nawigacji. Przeglądarka pobiera go z najniższym priorytetem w czasie bezczynności, a następnie zapisuje w pamięci podręcznej, dzięki czemu następna strona jest wyświetlana natychmiast.
<link rel="prefetch" href="/next-page.html">preconnect przygotowuje połączenia
<link rel="preconnect" href="https://api.example.com"> nakazuje przeglądarce wykonać wyszukiwanie DNS oraz uzgadnianie TCP i TLS z zewnętrznym źródłem, zanim nadejdzie pierwsze żądanie. Należy używać go w przypadku hostów API i sieci CDN, z którymi strona będzie się łączyć.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>dns-prefetch to lżejszy odpowiednik
<link rel="dns-prefetch"> wykonuje tylko wyszukiwanie DNS, więc jest tańszy niż preconnect. Należy używać go w przypadku wielu hostów firm trzecich, gdy nie można sobie pozwolić na pełne preconnect dla każdego z nich; preconnect należy stosować w przypadku kilku najważniejszych źródeł.
Należy ograniczać liczbę wskazówek
Zbyt wiele preload konkuruje o tę samą przepustowość i spowalnia stronę. preload należy stosować wyłącznie w przypadku zasobów blokujących krytyczną ścieżkę renderowania — zwykle jednego głównego obrazu i jednej lub dwóch krytycznych czcionek. Wszystkie pozostałe zasoby mogą być wykrywane normalnie.
modulepreload w przypadku modułów ES
<link rel="modulepreload" href="/app.js"> wstępnie ładuje nie tylko plik modułu, ale także całe drzewo jego zależności. Eliminuje to kaskadowy wodospad pobierania typowy dla natywnych modułów ES, w których każde importowanie czeka na przeanalizowanie poprzedniego.
Pomiar wpływu
Należy użyć kolumny Initiator w panelu Network, aby potwierdzić, że zasoby oznaczone jako preload rzeczywiście zostały pobrane wcześniej, oraz audytu „Preconnect to required origins” w Lighthouse, aby wykryć niewykorzystane możliwości. Usunięcie wolnego, ale nieużywanego preload często daje taki sam efekt jak dodanie właściwego.
Specyfika poszczególnych wskazówek
preload wyświetla ostrzeżenie w konsoli, jeśli zasób nie zostanie użyty w ciągu około 3 sekund. prefetch może zostać anulowany przez przeglądarkę przy przeciążeniu sieci lub pamięci. Połączenia preconnect są zamykane po około 10 sekundach bezczynności — należy używać go w przypadku zasobów, które wkrótce zostaną zażądane.
Sprawdzenie wiedzy
Co robi preconnect, czego nie robi dns-prefetch?
Podsumowanie
preload pobiera teraz krytyczne zasoby (z użyciem as i, gdy jest to konieczne, crossorigin). prefetch zapisuje w pamięci podręcznej zasoby prawdopodobnie potrzebne podczas następnej nawigacji, wykorzystując czas bezczynności. preconnect (TCP+TLS) i dns-prefetch (tylko DNS) przygotowują połączenia z zewnętrznymi źródłami. modulepreload rozszerza preload o drzewo zależności modułu ES. Należy używać tych mechanizmów oszczędnie i mierzyć ich wpływ.
Często zadawane pytania
Czy lekcja „Preload, prefetch i preconnect” jest bezpłatna?
Tak — pełny tekst „Preload, prefetch i preconnect” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Preload, prefetch i preconnect”?
Informowanie przeglądarki o konieczności wcześniejszego pobrania kluczowych zasobów Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Preload, prefetch i preconnect”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Atrybuty async i defer
- Preload, prefetch i preconnect
- Leniwe ładowanie obrazów — loading=lazy
- Wskazówki dotyczące zasobów — modulepreload