Dowiedz się więcej o wskazówkach dotyczących zasobów rel=preconnect i rel=dns-prefetch oraz o tym, jak z nich korzystać.
Zanim przeglądarka będzie mogła zażądać zasobu z serwera, musi nawiązać połączenie. Nawiązanie bezpiecznego połączenia składa się z 3 kroków:
Wyszukaj nazwę domeny i ustaw ją jako adres IP.
Skonfiguruj połączenie z serwerem.
Szyfrowanie połączenia dla bezpieczeństwa.
W każdym z tych kroków przeglądarka wysyła dane do serwera, a serwer wysyła odpowiedź. Podróż ta od miejsca wylotu do celu podróży i z powrotem jest nazywana podróżą w obie strony.
W zależności od warunków sieci, pojedyncza trasa w obie strony może zająć dużo czasu. Proces konfiguracji połączenia może się składać z maksymalnie 3 przebiegów w obie strony – a więcej w przypadkach niezoptymalizowanych.
Zrobienie tego z wyprzedzeniem znacznie przyspiesza działanie aplikacji. Z tego posta dowiesz się, jak to zrobić, korzystając z 2 wskazówek dotyczących zasobów: <link rel=preconnect> i <link rel=dns-prefetch>.
Nawiązuj wcześniejsze kontakty z firmą rel=preconnect
Nowoczesne przeglądarki starają się jak najlepiej przewidzieć, jakie połączenia będą potrzebne na stronie, ale nie są w stanie przewidywać ich wszystkich. Dobra wiadomość jest taka, że możesz dać im 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ą swoją nazwę, ponieważ nie są instrukcjami obowiązkowymi. Zawierają one informacje o zamierzonych działaniach, ale ostatecznie to przeglądarka decyduje, czy je uruchomić. Skonfigurowanie i utrzymanie otwartego połączenia wymaga dużo pracy, więc w zależności od sytuacji przeglądarka może zignorować wskazówki dotyczące zasobów lub częściowo je wykonać.
Aby poinformować przeglądarkę o swoich zamiarach, wystarczy dodać do strony tag <link>:
<link rel="preconnect" href="https://example.com">
Możesz przyspieszyć wczytywanie o 100–500 ms, nawiązując wcześniejsze 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ą wydajność strony internetowej.
Przypadki użycia rel=preconnect
Znajomość skąd, ale bez informacji o tym, co pobierasz
Z powodu zależności opartych na wersji może się zdarzyć, że będziesz żądać zasobu z konkretnej sieci CDN, ale nie będziesz znać jego dokładnej ścieżki.
Innym typowym przypadkiem jest wczytywanie obrazów z graficznej sieci CDN, w której dokładna ścieżka obrazu zależy od zapytań o multimedia lub sprawdzania funkcji środowiska wykonawczego w przeglądarce użytkownika.
Jeśli w takiej sytuacji zasób, który chcesz pobrać, jest istotny, warto zaoszczędzić czas przez wstępne połączenie z serwerem. Przeglądarka nie pobierze pliku, dopóki strona go nie zażąda, ale przynajmniej potrafi z wyprzedzeniem zająć się obsługą połączeń, dzięki czemu użytkownik nie będzie musiał czekać kilka razy w obie strony.
Strumieniowe odtwarzanie multimediów
Innym przykładem, w ramach którego możesz zaoszczędzić czas na etapie połączenia, ale niekoniecznie od razu zacząć pobieranie treści, możesz korzystać ze strumieniowego przesyłania 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. Wstępne połączenie pozwala skrócić czas oczekiwania do jednej podróży w obie strony, gdy wszystko jest gotowe do pobierania danych.
Jak zaimplementować 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, na przykład czcionki, są ładowane w trybie anonimowym. W tym przypadku musisz ustawić atrybut crossorigin z podpowiedź preconnect:
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
Jeśli pominiesz atrybut crossorigin, przeglądarka przeszuka tylko wyszukiwanie DNS.
Rozwiąż problem z nazwą domeny wcześniej za pomocą usługi rel=dns-prefetch
Możesz zapamiętać witryny po ich nazwach, ale serwery zapamiętują je po adresach IP. Właśnie dlatego istnieje system nazw domenowych (DNS). Przeglądarka używa DNS do konwertowania nazwy witryny na adres IP. Pierwszym krokiem na drodze do nawiązania połączenia jest rozpoznawanie nazwy domeny.
Jeśli strona musi nawiązać połączenia z wieloma domenami zewnętrznymi, wstępne połączenie wszystkich domen jest skutek odwrotne do zamierzonego. Wskazówka preconnect działa najlepiej tylko w przypadku najważniejszych połączeń. W pozostałych przypadkach skorzystaj z <link rel=dns-prefetch>, aby zaoszczędzić czas na pierwszym kroku, którym jest wyszukiwanie DNS, które zwykle trwa około 20–120 ms.
Rozpoznawanie nazw DNS inicjuje się podobnie jak preconnect: przez dodanie tagu <link> do <head> dokumentu.
<link rel="dns-prefetch" href="http://example.com">
Obsługa przeglądarek dns-prefetch różni się nieco od preconnect obsługi, więc dns-prefetch może służyć jako przeglądarka zastępcza 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 w tym samym tagu <link> powoduje błąd w Safari, polegający na anulowaniu ustawienia preconnect.
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. Najważniejsze jest, aby czas ładowania zasobu z innego źródła był jak najkrótszy.
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 zasobu dla przeglądarki, aby mogła pobrać go wcześnie.
Jeśli nie można zapewnić natychmiastowej widoczności zasobów LCP, link preload – także z wartością fetchpriority o wartości "high" – umożliwia jak najszybsze wczytanie zasobu przez przeglądarkę.
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.
Poza tym usługa preconnect jest tańsza niż preload pod względem wykorzystania przepustowości (ale wiąże się to z pewnym ryzykiem). Podobnie jak w przypadku nadmiarowych wskazówek preload, nadmiarowe wskazówki preconnect nadal wykorzystują przepustowość w przypadku certyfikatów TLS. Uważaj, aby nie połączyć się ze zbyt wieloma źródłami, ponieważ może to powodować rywalizację o przepustowość.
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, używaj preconnect tylko w przypadku najważniejszych zasobów, w pozostałych przypadkach polegaj na dns-prefetch, a w dalszym ciągu mierz rzeczywiste wyniki.