Sekcja Możliwości w raporcie Lighthouse zawiera wszystkie kluczowe żądania, które nie nadają jeszcze priorytetu żądaniam pobierania za pomocą parametru <link rel=preconnect>:
Zgodność z przeglądarką
<link rel=preconnect> jest obsługiwany przez większość przeglądarek. Zobacz Zgodność z przeglądarką.
Przyspiesz wczytywanie stron dzięki wstępnemu połączeniu
Zastanów się nad dodaniem wskazówek dotyczących zasobów preconnect lub dns-prefetch, aby wczesne połączenia z ważnymi źródłami w innych domenach były możliwe.
dyrektywa <link rel="preconnect"> informuje przeglądarkę, że strona zamierza nawiązać połączenie z innym źródłem i że chcesz jak najszybciej rozpocząć ten proces.
Nawiązywanie połączeń często zajmuje dużo czasu w powolnych sieciach, zwłaszcza w przypadku bezpiecznych połączeń, ponieważ może obejmować wyszukiwania DNS, przekierowania i kilka wizyt w obie strony do serwera końcowego, który obsługuje żądania użytkownika.
Zajęcie się tym wszystkim z wyprzedzeniem może sprawić, że aplikacja będzie znacznie przyjemniejsza dla użytkownika bez negatywnego wpływu na wykorzystanie przepustowości. Większość czasu na nawiązanie połączenia jest poświęcana na czekanie, a nie na wymianę danych.
Aby poinformować przeglądarkę o zamiarach, wystarczy dodać do strony tag linku:
<link rel="preconnect" href="https://example.com">
Daje to przeglądarce informację, że strona chce połączyć się z example.com i stamtąd pobrać treści.
Pamiętaj, że chociaż usługa <link rel="preconnect"> jest dosyć tania, może nadal zajmować cenny czas procesora, zwłaszcza w przypadku bezpiecznych połączeń.
Jest to szczególnie niekorzystne, jeśli połączenie nie zostanie wykorzystane w ciągu 10 sekund, ponieważ przeglądarka je zamyka, co zmarnuje cały ten proces.
Ogólnie staraj się używać <link rel="preload">, ponieważ jest to bardziej kompleksowa zmiana w zakresie wydajności, ale nie zapominaj o <link rel="preconnect"> w przypadkach skrajnych, takich jak:
- Zastosowanie: sprawdzanie źródła, a nie zakres danych
- Przykład zastosowania: strumieniowe przesyłanie multimediów
<link rel="dns-prefetch"> to kolejny typ <link> powiązany z połączeniami.
Obsługuje tylko wyszukiwanie DNS, ale ma szerszą obsługę przeglądarek, więc może być dobrym rozwiązaniem zastępczym.
Korzystasz z niej dokładnie tak samo:
<link rel="dns-prefetch" href="https://example.com" />.
Wskazówki dotyczące stosu
Drupal
Użyj modułu obsługującego wskazówki dotyczące zasobów klienta użytkownika, aby móc instalować i konfigurować wskazówki wstępnego połączenia lub pobierania DNS z wyprzedzeniem.
Magento
Zmodyfikuj układ motywów i dodaj wskazówki dotyczące wstępnego połączenia lub pobierania DNS.