Sekcja Możliwości w raporcie Lighthouse zawiera listę wszystkich kluczowych żądań, które nie nadają jeszcze priorytetu żądaniom pobierania z użyciem <link rel=preconnect>:
Zgodność z przeglądarką
<link rel=preconnect> jest obsługiwany w większości przeglądarek. Zobacz sekcję Zgodność z przeglądarką.
Zwiększanie szybkości wczytywania stron za pomocą wstępnego nawiązywania połączenia
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 przypadku wolnych sieci, zwłaszcza jeśli chodzi o połączenia bezpieczne, ponieważ może obejmować wyszukiwanie DNS, przekierowania i kilka podróży w obie strony do serwera końcowego, który obsługuje żądanie użytkownika.
Zajęcie się tym wszystkim z wyprzedzeniem może sprawić, że aplikacja będzie działać znacznie szybciej, bez negatywnego wpływu na wykorzystanie przepustowości. Większość czasu potrzebnego na nawiązanie połączenia jest poświęcana na oczekiwanie, a nie na wymianę danych.
Aby poinformować przeglądarkę o swoich intencjach, wystarczy dodać do strony tag linku:
<link rel="preconnect" href="https://example.com">
Dzięki temu przeglądarka wie, że strona zamierza połączyć się z domeną example.com i pobrać z niej treści.
Pamiętaj, że chociaż <link rel="preconnect"> jest dość tanie, może zajmować cenny czas procesora, zwłaszcza w przypadku bezpiecznych połączeń.
Jest to szczególnie niekorzystne, jeśli połączenie nie jest używane w ciągu 10 sekund, ponieważ przeglądarka je zamyka, marnując całą pracę wykonaną na początku połączenia.
Ogólnie staraj się używać <link rel="preload">, ponieważ jest to bardziej kompleksowe narzędzie do optymalizacji wydajności, ale w wyjątkowych przypadkach, takich jak:<link rel="preconnect">
- Przypadek użycia: wiesz, skąd pobierasz dane, ale nie wiesz, co pobierasz
- Przypadek użycia: strumieniowanie multimediów
<link rel="dns-prefetch"> to kolejny typ <link> związany z połączeniami.
Obsługuje tylko wyszukiwanie DNS, ale jest obsługiwana przez więcej przeglądarek, więc może być dobrym rozwiązaniem zapasowym.
Używasz go w dokładnie ten sam sposób:
<link rel="dns-prefetch" href="https://example.com" />.
Wskazówki dotyczące konkretnych stosów
Drupal
Wskazówki „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 motywu i dodaj wskazówki dotyczące zasobów „preconnect” lub „dns-prefetch”.