W sekcji Możliwości raportu Lighthouse znajdziesz listę wszystkich kluczowych żądań, które nie mają jeszcze priorytetu żądań pobierania: <link rel=preconnect>:
Zgodność z przeglądarką
<link rel=preconnect> jest obsługiwana w większości przeglądarek. Zobacz Zgodność z przeglądarką.
Przyspieszanie wczytywania stron dzięki funkcji preconnect
Rozważ dodanie wskazówek preconnect lub dns-prefetch, aby wcześniej nawiązać połączenia z ważnymi źródłami w innych domenach.
<link rel="preconnect"> informuje przeglądarkę, że Twoja strona zamierza nawiązać połączenie z innym źródłem i że chcesz, aby proces rozpoczął się jak najszybciej.
Nawiązywanie połączeń często zajmuje dużo czasu w wolnych sieciach, szczególnie w przypadku połączeń bezpiecznych, ponieważ może wymagać wyszukiwania w systemie DNS, przekierowań i kilku połączeń z serwerem końcowym, który obsługuje żądanie użytkownika.
Zadbanie o to z wyprzedzeniem może sprawić, że aplikacja będzie się wydawać użytkownikowi szybsza, a jednocześnie nie wpłynie to negatywnie na wykorzystanie przepustowości. Większość czasu na nawiązanie połączenia jest poświęcana na oczekiwanie, a nie na wymianę 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 zamierza połączyć się z usługą example.com i stamtąd będzie pobierać treści.
Pamiętaj, że chociaż usługa <link rel="preconnect"> jest dość tania, może w przyszłości zajmować cenny czas pracy procesora, zwłaszcza w przypadku bezpiecznych połączeń.
Jest to szczególnie niekorzystne, jeśli połączenie nie zostanie użyte w ciągu 10 sekund, ponieważ przeglądarka je zamknie, co spowoduje utratę wszystkich wcześniejszych wyników.
Ogólnie zalecamy używanie <link rel="preload">, ponieważ jest to bardziej kompleksowe rozwiązanie, ale <link rel="preconnect"> może się przydać w przypadku szczególnych sytuacji, takich jak:
- Przypadek użycia: informacje o tym, skąd pobierane są dane, ale nie o tym, co pobierasz
- Przykład zastosowania: strumieniowanie multimediów
<link rel="dns-prefetch"> to inny typ <link> związany z połączeniami.
Obsługuje tylko wyszukiwanie DNS, ale ma większą obsługę przeglądarek, 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
Wskazówki zasobów Preconnect lub dns-prefetch można dodać, instalując i konfigurując moduł obsługujący wskazówki zasobów klienta użytkownika.
Magento
Zmodyfikuj układ motywów i dodaj wskazówki „preconnect” lub „dns-prefetch”.