Wcześniej połącz się z wymaganymi źródłami

W sekcji Możliwości raportu Lighthouse znajdziesz listę wszystkich kluczowych żądań, które nie mają jeszcze priorytetu żądań pobierania: <link rel=preconnect>:

Zrzut ekranu z audytem Lighthouse dotyczącym łączenia się z wymaganymi źródłami

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:

<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”.

Zasoby