Więcej informacji na temat wskazówek dotyczących zasobów rel=preconnect i rel=dns-prefetch oraz korzystania z nich.
Zanim przeglądarka będzie mogła zażądać zasobu z serwera, musi najpierw nawiązać połączenie. Nawiązanie bezpiecznego połączenia obejmuje 3 kroki:
Wyszukaj nazwę domeny i znajdź adres IP.
Skonfiguruj połączenie z serwerem.
Ze względów bezpieczeństwa szyfruj połączenie.
W każdym z tych kroków przeglądarka wysyła fragment danych na serwer, a serwer odpowiada. Ta podróż, od punktu początkowego do docelowego i z powrotem, jest nazywana podróżą w obie strony.
W zależności od warunków sieciowych pojedyncza podróż w obie strony może zająć dużo czasu. Proces konfiguracji połączenia może obejmować do 3 przejazdów w obie strony, a w niezoptymalizowanych przypadkach – więcej.
Zajęcie się tymi kwestiami z wyprzedzeniem sprawia, że aplikacje działają znacznie szybciej. 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 usługą rel=preconnect
Nowoczesne przeglądarki starają się przewidzieć, jakie połączenia będą potrzebne na danej stronie, ale nie są w stanie dokładnie przewidzieć wszystkich połączeń. Dobra wiadomość jest taka, że możesz dać im wskazówkę (zasób 😉).
Dodanie rel=preconnect do <link> informuje przeglądarkę, że Twoja strona ma zamiar nawiązać połączenie z inną domeną i że chcesz jak najszybciej rozpocząć ten proces. Zasoby będą ładować się szybciej, ponieważ proces konfiguracji został już zakończony w momencie, gdy przeglądarka ich zażąda.
Wskazówki dotyczące zasobów mają swoją nazwę, ponieważ nie są one obowiązkowymi instrukcjami. Dostarczają one informacji o tym, co chcesz zrobić, ale ostatecznie to przeglądarka decyduje, czy je wykonać. Konfigurowanie i utrzymywanie otwartego połączenia to sporo pracy, więc w zależności od sytuacji przeglądarka może ignorować wskazówki dotyczące zasobów lub wykonywać je częściowo.
Aby poinformować przeglądarkę o swoich zamiarach, wystarczy dodać do strony tag <link>:
<link rel="preconnect" href="https://example.com">
Możesz skrócić czas wczytywania 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ą wydajność stron internetowych.
Przypadki użycia rel=preconnect
Wiem, skąd, ale nie wiesz, co pobierasz
Z powodu zależności opartych na wersjach czasami może okazać się, że wysyłasz żądanie zasobu z konkretnej sieci CDN, ale nie dokładna ścieżka do niego.
Innym typowym przypadkiem jest wczytywanie obrazów z sieci CDN z obrazami, gdzie dokładna ścieżka obrazu zależy od zapytań o multimedia lub sprawdzenia funkcji w czasie działania w przeglądarce użytkownika.
W takiej sytuacji, jeśli pobierany zasób jest ważny, warto zaoszczędzić jak najwięcej czasu przez wstępne łączenie się z serwerem. Przeglądarka nie pobierze pliku, dopóki strona o to nie poprosi, ale przynajmniej z wyprzedzeniem może obsłużyć problemy związane z połączeniem, dzięki czemu użytkownik nie będzie musiał czekać na kilka operacji w obie strony.
Strumieniowe przesyłanie multimediów
Innym przykładem, w którym możesz zaoszczędzić czas na etapie łączenia, ale niekoniecznie od razu rozpocząć pobieranie treści, jest przesyłanie multimediów z innego źródła.
W zależności od tego, jak strona obsługuje przesyłaną zawartość, być może warto poczekać, aż skrypty zostaną wczytane i będą gotowe do przetworzenia strumienia. Wstępne łączenie pozwala skrócić czas oczekiwania na pojedynczy lot w obie strony, gdy wszystko będzie gotowe do rozpoczęcia pobierania.
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>
Wcześniejsze łączenie jest skuteczne tylko w przypadku domen innych niż domena źródłowa, więc nie należy go używać 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, takie jak czcionki, są ładowane w trybie anonimowym. W przypadku tych 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.
Rozwiąż problem z nazwą domeny wcześniej w rel=dns-prefetch
Zapamiętujesz witryny po nazwach, ale serwery zapamiętują je na podstawie adresów IP. Dlatego właśnie istnieje system nazw domenowych (DNS). Przeglądarka używa systemu DNS do konwertowania nazwy witryny na adres IP. Ten proces, czyli rozpoznawanie nazwy domeny, to pierwszy krok na drodze do nawiązania połączenia.
Jeśli strona musi mieć połączenia z wieloma domenami zewnętrznymi, wcześniejsze łączenie ich wszystkich przynosi skutek odwrotny do zamierzonego. Wskazówka preconnect przydaje się tylko w przypadku najbardziej krytycznych połączeń. W pozostałych przypadkach 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 <head> dokumentu.
<link rel="dns-prefetch" href="http://example.com">
Obsługa przeglądarki dns-prefetch różni się nieco od jej preconnect , dlatego dns-prefetch może służyć jako kreacja zastępcza w przeglądarkach, które nie obsługują preconnect.
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">Aby bezpiecznie wdrożyć metodę kreacji zastępczych, użyj osobnych tagów link.
<link rel="preconnect dns-prefetch" href="http://example.com">Wdrożenie kreacji zastępczej
dns-prefetch w tym samym tagu <link> powoduje błąd w Safari, w wyniku którego usługa preconnect jest anulowana.
Wpływ na największe wyrenderowanie treści (LCP)
Używanie dns-prefetch i preconnect pozwala witrynom skrócić czas potrzebny na łączenie się z innym źródłem. Ostatecznym celem jest zminimalizowanie czasu wczytywania zasobu z innego źródła.
Jeśli chodzi o największe wyrenderowanie treści (LCP), lepiej jest, aby zasoby były od razu wykrywalne, ponieważ kandydaci LCP to kluczowe elementy interfejsu użytkownika. Wartość fetchpriority o wartości "high" w przypadku zasobów LCP może jeszcze bardziej poprawić ten wynik, sygnalizując znaczenie tego zasobu dla przeglądarki, co umożliwi jej wczesne pobranie.
Jeśli nie można zapewnić natychmiastowej wykrywalności zasobów LCP, link preload – wraz z wartością fetchpriority o wartości "high" – umożliwia przeglądarce jak najszybsze wczytanie zasobu.
Jeśli żadna z tych opcji nie jest dostępna, ponieważ dokładny zasób będzie znany dopiero na późniejszym etapie wczytywania strony, możesz użyć elementu preconnect w zasobach z innych domen, aby maksymalnie ograniczyć wpływ późnego wykrycia zasobu.
Poza tym preconnect kosztuje mniej niż preload pod względem wykorzystania przepustowości, ale i tak nie wiąże się z pewnym ryzykiem. Tak jak w przypadku nadmiernej liczby wskazówek preload, nadmierna liczba wskazówek preconnect w przypadku certyfikatów TLS w ogóle zmniejsza przepustowość. Uważaj, aby nie nawiązywać wstępnego połączenia ze zbyt dużą liczbą źródeł, ponieważ może to spowodować problemy z przepustowością.
Podsumowanie
Te 2 wskazówki dotyczące zasobów pomagają przyspieszyć działanie stron, gdy wiesz, że wkrótce pobierzesz coś z domeny firmy zewnętrznej, ale nie znasz dokładnego adresu URL tego zasobu. Przykładami są sieci CDN, które rozpowszechniają biblioteki JavaScript, obrazy lub czcionki. Pamiętaj o ograniczeniach – używaj pola preconnect tylko w przypadku najważniejszych zasobów, korzystaj z dns-prefetch w przypadku pozostałych zasobów i zawsze mierz wpływ zmian w świecie rzeczywistym.