Sekcja Możliwości w raporcie Lighthouse zawiera listę wszystkich kluczowych żądań
które jeszcze nie nadają priorytetu żądaniam pobierania za pomocą interfejsu <link rel=preconnect>:
Zgodność z przeglądarką
<link rel=preconnect> działa w większości przeglądarek. Zobacz
Zgodność z przeglądarką
Przyspiesz wczytywanie stron dzięki wstępnemu połączeniu
Rozważ dodanie wskazówek dotyczących zasobów preconnect lub dns-prefetch
w celu nawiązania wczesnych połączeń z ważnymi źródłami w innych witrynach.
<link rel="preconnect"> informuje przeglądarkę, że strona
nawiązanie połączenia z innym punktem początkowym,
i chcesz, aby cały proces rozpoczął się jak najszybciej.
Nawiązywanie połączeń w wolnych sieciach często zajmuje dużo czasu, zwłaszcza w zakresie bezpiecznych połączeń, które mogą wiązać się z wyszukiwaniami DNS. przekierowania oraz kilka transferów w obie strony do serwera, który obsługuje żądania użytkownika.
Zrobienie tego z wyprzedzeniem sprawi, że aplikacja będzie działać jeszcze szybciej bez negatywnego wpływu na wykorzystanie przepustowości. Większość czasu na nawiązanie połączenia to czekanie, a nie wymiana danych.
Aby poinformować przeglądarkę o swoich zamiarach, wystarczy dodać tag linku do strony:
<link rel="preconnect" href="https://example.com">
Informuje to przeglądarkę, że strona
aby połączyć się z example.com i stamtąd pobierać treści.
Pamiętaj, że chociaż usługa <link rel="preconnect"> jest całkiem tania,
może to jednak zajmować cenny czas procesora, zwłaszcza w przypadku bezpiecznych połączeń.
Jest to szczególnie niewłaściwe, jeśli nie użyjesz połączenia w ciągu 10 sekund,
po zamknięciu przeglądarki, co zmarnuje cały czas pracy nad połączeniem.
Ogólnie rzecz biorąc,
spróbuj użyć aplikacji <link rel="preload">,
ponieważ jest to bardziej kompleksowa zmiana w skuteczności,
ale zachowaj <link rel="preconnect"> na pasku narzędzi w przypadkach skrajnych, takich jak:
- Przypadek użycia: informacje o tym, skąd pobierane są dane, ale nie o tym, co pobierasz
- Zastosowanie: strumieniowe odtwarzanie multimediów
<link rel="dns-prefetch"> to kolejny typ elementu <link> związany z połączeniami.
Ta funkcja obsługuje tylko wyszukiwanie DNS,
ale obsługuje też przeglądarki na większą skalę, więc może służyć jako dobre rozwiązanie zastępcze.
Korzystasz z niej dokładnie w taki sam sposób:
<link rel="dns-prefetch" href="https://example.com" />.
Wskazówki dotyczące stosu
Drupal
Używaj modułu obsługującego wskazówki dotyczące zasobów klienta użytkownika. Dzięki temu możesz zainstalować i skonfigurować wskazówki dotyczące wstępnego połączenia lub pobierania z wyprzedzeniem danych DNS.
Magento
Modyfikowanie układu motywów i dodaj wskazówki dotyczące wstępnego połączenia lub pobierania z wyprzedzeniem DNS.