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 może poprosić o zasób z serwera, musi nawiązać połączenie. Nawiązywanie bezpiecznego połączenia obejmuje 3 kroki:
Wyszukaj nazwę domeny i przetłumacz ją na adres IP.
Skonfiguruj połączenie z serwerem.
Zaszyfruj połączenie w celu zapewnienia bezpieczeństwa.
Na każdym z tych etapów przeglądarka wysyła część danych do serwera, a serwer zwraca odpowiedź. Ta podróż z miejsca wyjazdu do miejsca docelowego i z powrotem nazywana jest podróżą w obie strony.
W zależności od warunków w sieci pojedynczy przejazd w obie strony może zająć sporo czasu. Proces konfiguracji połączenia może wymagać do 3 przesyłania danych w obie strony, a w niezoptymalizowanych przypadkach nawet więcej.
Zrobienie tego z wyprzedzeniem znacznie przyspiesza działanie aplikacji. Z tego artykułu dowiesz się, jak to zrobić za pomocą 2 wskazówek dotyczących zasobów: <link rel=preconnect> i <link rel=dns-prefetch>.
Nawiązywanie wczesnych połączeń z rel=preconnect
Współczesne przeglądarki starają się przewidywać, których połączeń będzie potrzebować dana strona, ale nie mogą przewidzieć ich wszystkich. Dobra wiadomość jest taka, że możesz podać mu wskazówkę (zasób 😉).
Dodanie atrybutu rel=preconnect do domeny <link> informuje przeglądarkę, że strona chce połączyć się z inną domeną i że chcesz jak najszybciej rozpocząć proces. Zasoby będą ładować się szybciej, ponieważ proces konfiguracji został już zakończony, zanim przeglądarka poprosi o ich udostępnienie.
Wskazówki dotyczące zasobów mają taką nazwę, ponieważ nie są to instrukcje. Zawierają one informacje o zamierzonych działaniach, ale ostatecznie to przeglądarka decyduje, czy je uruchomić. Konfigurowanie i utrzymywanie otwartego połączenia wymaga dużo pracy, więc 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 Twoich zamiarach jest tak proste, jak dodanie tagu <link> do strony:
<link rel="preconnect" href="https://example.com">
Czas wczytywania możesz skrócić o 100–500 ms, nawiązując wczesne połączenia z ważnymi źródłami w innych domenach. Te liczby mogą wydawać się niewielkie, ale mają wpływ na to, jak użytkownicy postrzegają działanie strony internetowej.
Przypadki użycia rel=preconnect
wiesz, skąd, ale nie co pobierasz;
Z powodu zależności wersji może się zdarzyć, że wiesz, że będziesz wysyłać żądanie zasobu z określonego CDN, ale nie znasz dokładnej ścieżki do niego.
Innym częstym przypadkiem jest wczytywanie obrazów z CDN obrazów, gdzie dokładna ścieżka obrazu zależy od zapytań dotyczących multimediów lub kontroli funkcji w czasie wykonywania w przeglądarce użytkownika.
W takich sytuacjach, gdy zasób, który chcesz pobrać, jest ważny, warto zaoszczędzić jak najwięcej czasu, nawiązując połączenie z serwerem z wyprzedzeniem. Przeglądarka nie pobierze pliku, dopóki strona go nie poprosi, ale może wcześniej obsłużyć aspekty związane z połączeniem, dzięki czemu użytkownik nie musi czekać na kilka prób.
Strumieniowe przesyłanie multimediów
Innym przykładem, w którym możesz zaoszczędzić trochę czasu na etapie nawiązywania połączenia, ale niekoniecznie od razu rozpoczynać pobieranie treści, jest streaming multimediów z innego źródła.
W zależności od tego, jak Twoja strona obsługuje treści przesyłane strumieniowo, możesz poczekać, aż skrypty zostaną wczytane i będą gotowe do przetworzenia strumienia. Dzięki temu czas oczekiwania na pobieranie danych zostanie skrócony do 1 przesyłania w obie strony.
Jak wdrożyć rel=preconnect
Jednym ze sposobów zainicjowania preconnect jest dodanie tagu <link> do <head> dokumentu.
<head>
<link rel="preconnect" href="https://example.com">
</head>
Wstępne łączenie jest skuteczne tylko w przypadku domen innych niż domena źródłowa, więc nie używaj go w swojej witrynie.
Możesz też zainicjować wstępne połączenie za pomocą nagłówka HTTP Link:
Link: <https://example.com/>; rel=preconnect
Niektóre typy zasobów, np. czcionki, są wczytywane w trybie anonimowym. W przypadku tych atrybutów musisz ustawić atrybut crossorigin z podpowiedzią preconnect:
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
Jeśli pominiesz atrybut crossorigin, przeglądarka przeprowadzi tylko wyszukiwanie DNS.
Wczesna analiza nazwy domeny za pomocą rel=dns-prefetch
Pamiętasz strony po nazwach, ale serwery pamiętają je po adresach IP. Dlatego istnieje system nazw domenowych (DNS). Przeglądarka używa DNS do konwertowania nazwy witryny na adres IP. Ten proces, czyli rozpatrywanie nazwy domeny, jest pierwszym krokiem na drodze do nawiązania połączenia.
Jeśli strona musi nawiązywać połączenia z wieloma domenami innych firm, wstępne połączenie wszystkich z nich nie przyniesie oczekiwanych rezultatów. Wskazówka preconnect jest najbardziej przydatna w przypadku najważniejszych połączeń. W pozostałych przypadkach użyj <link rel=dns-prefetch>, aby zaoszczędzić czas na pierwszym etapie, czyli wyszukiwaniu DNS, które zwykle zajmuje około 20–120 ms.
Rozpoznawanie nazw DNS jest inicjowane podobnie jak w zasadzie preconnect: przez dodanie tagu <link> do sekcji <head> dokumentu.
<link rel="dns-prefetch" href="http://example.com">
Obsługa dns-prefetch w przeglądarkach różni się nieco od obsługi preconnect, więc dns-prefetch może służyć jako opcja zapasowa w przypadku 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 w ramach tego samego tagu <link> powoduje błąd w Safari, w którym preconnect zostaje anulowany.
Wpływ na największe wyrenderowanie treści (LCP)
Użycie reguł dns-prefetch i preconnect pozwala witrynom skrócić czas potrzebny na nawiązywanie połączenia z innym źródłem. Ostatecznym celem jest zminimalizowanie czasu ładowania zasobu z innego źródła.
W przypadku największego wyrenderowania treści lepiej zadbać o to, aby zasoby były od razu wykrywalne, ponieważ kandydaci LCP stanowią kluczowy element wrażeń użytkownika. Wartość fetchpriority wynosząca "high" w zasobach LCP może jeszcze bardziej poprawić tę sytuację, ponieważ sygnalizuje znaczenie danego zasobu dla przeglądarki, aby mogła pobrać go wcześnie.
Jeśli nie można zapewnić natychmiastowej wykrywalności komponentów LCP, link preload (również z wartością fetchpriority "high") umożliwia przeglądarce jak najszybsze załadowanie zasobu.
Jeśli żadna z tych opcji nie jest dostępna – ponieważ dokładny zasób będzie znany dopiero później podczas wczytywania strony – możesz użyć polecenia preconnect w przypadku zasobów z innych domen, aby maksymalnie ograniczyć wpływ późnego wykrywania zasobu.
Dodatkowo preconnect jest tańszy niż preload pod względem wykorzystania przepustowości, ale nadal wiąże się z pewnymi zagrożeniami. Podobnie jak w przypadku nadmiernych podpowiedzi preload, nadmierne podpowiedzi preconnect nadal zużywają przepustowość w przypadku certyfikatów TLS. Pamiętaj, aby nie nawiązywać połączeń wstępnych z zbyt dużą liczbą źródeł, ponieważ może to spowodować konflikt przepustowości.
Podsumowanie
Te 2 wskazówki dotyczące zasobów są pomocne, gdy wiesz, że wkrótce pobierzesz coś z domeny innej firmy, ale nie znasz dokładnego adresu URL takiego zasobu. Są to na przykład sieci CDN rozpowszechniające biblioteki, obrazy lub czcionki JavaScript. Pamiętaj o ograniczeniach i używaj preconnect tylko do najważniejszych zasobów. Pozostałe zasoby korzystaj z dns-prefetch. Zawsze sprawdzaj wpływ na rzeczywiste wyniki.