Dowiedz się więcej o wskazówkach dotyczących zasobów rel=preconnect i rel=dns-prefetch oraz o tym, jak ich używać.
Zanim przeglądarka będzie mogła poprosić serwer o zasób, musi nawiązać połączenie. Nawiązanie bezpiecznego połączenia obejmuje 3 kroki:
Wyszukanie nazwy domeny i jej rozpoznanie jako adresu IP.
Ustanowienie połączenia z serwerem.
Szyfrowanie połączenia w celu zapewnienia bezpieczeństwa.
W każdym z tych kroków przeglądarka wysyła do serwera fragment danych, a serwer odsyła odpowiedź. Ta podróż ze źródła do miejsca docelowego i z powrotem nazywa się podróżą w obie strony.
W zależności od warunków sieci pojedyncza podróż w obie strony może zająć sporo czasu. Proces konfiguracji połączenia może obejmować do 3 rund, a w przypadkach nieoptymalnych – nawet więcej.
Jeśli zadbasz o to z wyprzedzeniem, aplikacje będą działać znacznie szybciej. Z tego posta dowiesz się, jak to osiągnąć za pomocą 2 wskazówek dotyczących zasobów: <link rel=preconnect> i <link rel=dns-prefetch>.
Wcześniejsze nawiązywanie połączeń za pomocą rel=preconnect
Nowoczesne przeglądarki starają się przewidzieć, jakie połączenia będą potrzebne stronie, ale nie mogą ich wszystkich przewidzieć. Dobra wiadomość jest taka, że możesz im dać wskazówkę (dotyczącą zasobu 😉).
Dodanie rel=preconnect do elementu <link> informuje przeglądarkę, że Twoja strona zamierza nawiązać połączenie z inną domeną i że chcesz, aby proces ten rozpoczął się jak najszybciej. Zasoby będą się ładować szybciej, ponieważ proces konfiguracji został już zakończony, zanim przeglądarka poprosi o nie.
Wskazówki dotyczące zasobów mają swoją nazwę, ponieważ nie są obowiązkowymi instrukcjami. Zawierają informacje o tym, co chcesz zrobić, ale to przeglądarka decyduje, czy je wykonać. Konfigurowanie i utrzymywanie otwartego połączenia wymaga dużo pracy, dlatego przeglądarka może zignorować wskazówki dotyczące zasobów lub wykonać je częściowo w zależności od sytuacji.
Poinformowanie przeglądarki o swoich zamiarach jest tak proste, jak dodanie tagu <link> do strony:
<link rel="preconnect" href="https://example.com">
Możesz skrócić czas wczytywania o 100–500 ms, nawiązując wcześniejsze połączenia z ważnymi źródłami zewnętrznymi. Te liczby mogą się wydawać małe, ale mają wpływ na to, jak użytkownicy postrzegają wydajność strony internetowej.
Przypadki użycia rel=preconnect
Wiesz skąd, ale nie co pobierasz
Ze względu na zależności z numerami wersji czasami zdarza się, że wiesz, że będziesz prosić o zasób z określonej sieci CDN, ale nie znasz dokładnej ścieżki do niego.
Innym częstym przypadkiem jest ładowanie obrazów z sieci CDN, w której dokładna ścieżka do obrazu zależy od zapytań o media lub sprawdzania funkcji w czasie działania w przeglądarce użytkownika.
W takich sytuacjach, jeśli pobierany zasób jest ważny, warto zaoszczędzić jak najwięcej czasu, nawiązując wcześniejsze połączenie z serwerem. Przeglądarka nie pobierze pliku, dopóki strona nie poprosi o niego, ale przynajmniej może z wyprzedzeniem zająć się aspektami połączenia, oszczędzając użytkownikowi czekania na kilka rund.
Przesyłanie strumieniowe multimediów
Innym przykładem, w którym możesz zaoszczędzić trochę czasu w fazie połączenia, ale niekoniecznie od razu rozpocząć pobieranie treści, jest przesyłanie strumieniowe multimediów z innego źródła.
W zależności od tego, jak strona obsługuje przesyłane strumieniowo treści, możesz poczekać, aż skrypty się załadują i będą gotowe do przetworzenia strumienia. Wcześniejsze połączenie pomaga skrócić czas oczekiwania do jednej rundy, gdy będziesz gotowy(-a) do rozpoczęcia pobierania.
Jak wdrożyć rel=preconnect
Jednym ze sposobów zainicjowania preconnect jest dodanie tagu <link> do sekcji <head> dokumentu.
<head>
<link rel="preconnect" href="https://example.com">
</head>
Wcześniejsze połączenie jest skuteczne tylko w przypadku domen innych niż domena źródłowa, dlatego nie należy go używać w przypadku swojej witryny.
Możesz też zainicjować wcześniejsze połączenie za pomocą Link nagłówka HTTP:
Link: <https://example.com/>; rel=preconnect
Niektóre typy zasobów, np. czcionki, są ładowane w trybie anonimowym. W przypadku tych zasobów musisz ustawić atrybut crossorigin ze wskazówką preconnect:
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
Jeśli pominiesz atrybut crossorigin, przeglądarka wykona tylko wyszukiwanie DNS.
Wcześniejsze rozpoznawanie nazwy domeny za pomocą rel=dns-prefetch
Witryny zapamiętujesz po nazwach, ale serwery – po adresach IP. Dlatego istnieje system nazw domenowych (DNS). Przeglądarka używa DNS do konwertowania nazwy witryny na adres IP. Ten proces – rozpoznawanie nazwy domeny – jest pierwszym krokiem w nawiązywaniu połączenia.
Jeśli strona musi nawiązać połączenie z wieloma domenami zewnętrznymi, wcześniejsze połączenie z nimi wszystkimi jest nieproduktywne. Wskazówka preconnect najlepiej sprawdza się w przypadku najważniejszych połączeń. W przypadku pozostałych użyj <link rel=dns-prefetch>, aby zaoszczędzić czas na pierwszym kroku, czyli wyszukiwaniu DNS, które zwykle trwa około 20–120 ms.
Rozpoznawanie nazw DNS jest inicjowane podobnie jak preconnect: przez dodanie tagu <link> do sekcji <head> dokumentu.
<link rel="dns-prefetch" href="http://example.com">
Obsługa dns-prefetch w przeglądarce nieco różni się od obsługi preconnect support, dlatego dns-prefetch może służyć jako rezerwa dla przeglądarek, które nie obsługują preconnect.
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">
<link rel="preconnect dns-prefetch" href="http://example.com">
dns-prefetch rezerwy w tym samym tagu <link> powoduje błąd w Safari, w którym preconnect zostaje anulowane.
Wpływ na największe wyrenderowanie treści (LCP)
Używanie dns-prefetch i preconnect pozwala witrynom skrócić czas potrzebny na połączenie się z innym źródłem. Ostatecznym celem jest jak największe skrócenie czasu ładowania zasobu z innego źródła.
W przypadku największego wyrenderowania treści (LCP) lepiej, aby zasoby były od razu wykrywalne, ponieważ kandydaci do LCP są kluczowymi elementami wrażeń użytkownika. Wartość fetchpriority równa "high" w przypadku zasobów LCP może dodatkowo poprawić ten wynik, sygnalizując przeglądarce znaczenie tego zasobu, aby mogła go pobrać wcześniej.
Jeśli nie można sprawić, aby zasoby LCP były od razu wykrywalne, link preload – również z wartością fetchpriority równą "high" – nadal umożliwia przeglądarce jak najszybsze załadowanie zasobu.
Jeśli żadna z tych opcji nie jest dostępna – ponieważ dokładny zasób nie będzie znany aż do późniejszego etapu wczytywania strony – możesz użyć preconnect w przypadku zasobów z innych źródeł, aby jak najbardziej ograniczyć wpływ późnego wykrycia zasobu.
Ponadto preconnect jest mniej kosztowne niż preload pod względem wykorzystania przepustowości, ale nadal nie jest wolne od ryzyka. Podobnie jak w przypadku nadmiernych wskazówek preload, nadmierne wskazówki preconnect nadal zużywają przepustowość w przypadku certyfikatów protokołu TLS. Uważaj, aby nie nawiązywać wcześniejszego połączenia z zbyt wieloma źródłami, ponieważ może to spowodować konflikt przepustowości.
Podsumowanie
Te 2 wskazówki dotyczące zasobów pomagają zwiększyć szybkość strony, gdy wiesz, że wkrótce pobierzesz coś z domeny zewnętrznej, ale nie znasz dokładnego adresu URL zasobu. Przykładem mogą być sieci CDN, które rozpowszechniają biblioteki JavaScript, obrazy lub czcionki. Pamiętaj o ograniczeniach, używaj preconnect tylko w przypadku najważniejszych zasobów, w pozostałych przypadkach korzystaj z dns-prefetch i zawsze mierz wpływ w rzeczywistych warunkach.