W poprzednim module poświęconym optymalizacji wczytywania zasobów omówiliśmy, jak różne zasoby strony, takie jak CSS i JavaScript, mogą wpływać na szybkość jej wczytywania oraz jak można je zoptymalizować, aby przyspieszyć renderowanie strony. To odpowiedni moment, aby przejść do bardziej zaawansowanego aspektu ładowania zasobów, w którym trzeba pomóc przeglądarce w szybszym ładowaniu ich za pomocą wskazówek dotyczących zasobów.
Wskazówki dotyczące zasobów mogą pomóc programistom w dalszej optymalizacji czasu wczytywania strony, informując przeglądarkę, jak ma się wczytywać zasoby i nadawać im priorytety. Początkowy zestaw wskazówek dotyczących zasobów, takich jak preconnect
i dns-prefetch
, został wprowadzony w pierwszej kolejności.
Z czasem jednak funkcje preload
i Fetch Priority API zapewniły dodatkowe możliwości.
Wskazówki dotyczące zasobów informują przeglądarkę, aby wykonała z wyprzedzeniem określone działania, które mogą poprawić wydajność ładowania. Dzięki wskazówkom dotyczącym zasobów można wykonywać takie działania jak wczesne wyszukiwania DNS, łączenie się z serwerami z wyprzedzeniem, a nawet pobieranie zasobów, zanim przeglądarka je w zwykły sposób wykryje.
Wskazówki dotyczące zasobów można określać w kodzie HTML – najczęściej na początku elementu <head>
– lub ustawić jako nagłówek HTTP. W zakresie tego modułu omawiamy preconnect
, dns-prefetch
i preload
, a także sposoby pobierania spekulacyjnego dostępne w prefetch
.
preconnect
Wskazówka preconnect
służy do nawiązywania połączenia z innym źródłem, z którego pobierasz zasoby krytyczne. Możesz np. przechowywać obrazy lub zasoby
w sieci CDN lub innej w innych domenach:
<link rel="preconnect" href="https://example.com">
Korzystając z dyrektywy preconnect
, spodziewasz się, że w najbliższej przyszłości przeglądarka planuje połączyć się z określonym serwerem z innych domen oraz że przeglądarka powinna otworzyć to połączenie jak najszybciej, najlepiej przed czekaniem na to, że zrobi to parser HTML lub skaner wstępnego wczytywania.
Jeśli na stronie masz dużą ilość zasobów z innych domen, użyj preconnect
w przypadku tych zasobów, które są najbardziej newralgiczne dla bieżącej strony.
![Zrzut ekranu z czasem połączenia dla zasobu w panelu sieci w Narzędziach deweloperskich w Chrome. Konfiguracja połączenia obejmuje czas oczekiwania, negocjacje z serwerem proxy, wyszukiwanie DNS, konfigurację połączenia i negocjacje TLS.](https://web.dev/static/learn/performance/resource-hints/image/fig-1.png?authuser=7&hl=pl)
preconnect
może złagodzić, nawiązując połączenia wcześniej, a nie w momencie wykrycia zasobu z innych domen.
Częstym przypadkiem użycia preconnect
są Google Fonts. Google Fonts zaleca wysłanie żądania preconnect
do domeny https://fonts.googleapis.com
, która obsługuje deklaracje @font-face
, oraz domeny https://fonts.gstatic.com
, która obsługuje pliki czcionek.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Atrybut crossorigin
służy do wskazywania, czy zasób należy pobrać za pomocą funkcji Udostępnianie zasobów w różnych źródłach (CORS). Jeśli korzystasz ze wskazówki preconnect
, a zasób pobierany ze źródła używa CORS, np. plików czcionek, musisz do niej dodać atrybut crossorigin
.preconnect
dns-prefetch
Chociaż szybkie otwarcie połączeń z serwerami z innych domen może znacznie skrócić początkowy czas wczytywania strony, nawiązywanie połączeń z wieloma serwerami z innych domen jednocześnie może być niewykonalne lub niemożliwe. Jeśli obawiasz się, że nadużywasz usługi preconnect
, możesz skorzystać z tańszej podpowiedzi dotyczącej zasobów dns-prefetch
.
Jak sama nazwa wskazuje, dns-prefetch
nie nawiązuje połączenia z serwerem z innej domeny, a jedynie z wyprzedzeniem przeprowadza wyszukiwanie DNS dla serwera. Wyszukiwanie DNS ma miejsce, gdy nazwa domeny jest rozpoznawana na jej bazowy adres IP.
Chociaż warstwy pamięci podręcznych DNS na poziomie urządzenia i sieci pomagają zwiększyć szybkość działania, to nadal zajmuje to trochę czasu.
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
Wyszukiwanie DNS jest dość niedrogie i ze względu na stosunkowo niewielki koszt może w niektórych przypadkach być lepszym narzędziem niż preconnect
. Szczególnie warto korzystać z takich wskazówek w przypadku linków prowadzących do innych witryn, z których według Ciebie użytkownik może skorzystać. Jednym z takich narzędzi jest dnstradamus, które robi to automatycznie za pomocą JavaScriptu i wykorzystuje Intersection Observer API do wstawiania wskazówek dns-prefetch
w kodzie HTML bieżącej strony, gdy linki do innych stron wyświetlają się w widoku użytkownika.
preload
Dyrektywa preload
służy do inicjowania wczesnego żądania zasobu wymaganego do renderowania strony:
<link rel="preload" href="/lcp-image.jpg" as="image">
Dyrektywy preload
powinny być ograniczone do zasobów krytycznych, które zostały wykryte później.
Typowe przypadki użycia to pliki czcionek, pliki CSS pobierane za pomocą deklaracji @import
lub zasoby CSS background-image
, które prawdopodobnie są największym kandydatem do wyrenderowania treści (LCP). W takich przypadkach skaner wstępnego wczytywania nie wykryje tych plików, ponieważ do zasobu odwołują się zasoby zewnętrzne.
Podobnie jak preconnect
, dyrektywa preload
wymaga atrybutu crossorigin
, jeśli wstępnie wczytujesz zasób CORS, np. czcionki. Jeśli nie dodasz atrybutu crossorigin
– ani nie dodasz go w przypadku żądań innych niż CORS, przeglądarka dwukrotnie pobierze zasób, co zużywa przepustowość, którą można byłoby lepiej wykorzystać na inne zasoby.
<link rel="preload" href="/font.woff2" as="font" crossorigin>
W poprzednim fragmencie HTML przeglądarka jest informowana, że ma wstępnie wczytać żądanie /font.woff2
przy użyciu żądania CORS, nawet jeśli /font.woff2
znajduje się w tej samej domenie.
prefetch
Dyrektywa prefetch
służy do inicjowania żądania o niskim priorytecie dotyczące zasobu, który może być używany w przyszłych nawigacji:
<link rel="prefetch" href="/next-page.css" as="style">
Ta dyrektywa jest w dużej mierze zgodna z tym samym formatem co dyrektywa preload
. Tylko atrybut rel
elementu <link>
używa wartości "prefetch"
.
Jednak w przeciwieństwie do dyrektywy preload
prefetch
działa głównie spekulacyjnym, ponieważ inicjujesz pobieranie zasobu na potrzeby przyszłej nawigacji, co może się jednak nie udać.
W pewnych sytuacjach dyrektywa prefetch
może być przydatna – jeśli np. określisz wzorzec przeglądania witryny przez większość użytkowników, atrybut prefetch
stanowiący newralgiczne źródło renderowania tych stron może skrócić czas wczytywania tych stron.
Interfejs Fetch Priority API
Możesz zwiększyć priorytet zasobu Fetch Priority API
za pomocą atrybutu fetchpriority
. Możesz używać tego atrybutu z elementami <link>
, <img>
i <script>
.
<div class="gallery">
<div class="poster">
<img src="img/poster-1.jpg" fetchpriority="high">
</div>
<div class="thumbnails">
<img src="img/thumbnail-2.jpg" fetchpriority="low">
<img src="img/thumbnail-3.jpg" fetchpriority="low">
<img src="img/thumbnail-4.jpg" fetchpriority="low">
</div>
</div>
Domyślnie obrazy są pobierane z niższym priorytetem. Jeśli po zastosowaniu układu obraz znajdzie się w początkowym widocznym obszarze, priorytet zostanie podniesiony do Wysoki. W poprzednim fragmencie HTML fetchpriority
natychmiast informuje przeglądarkę, że ma pobrać większy obraz LCP o priorytecie Wysoki, a mniej ważne obrazy miniatur są pobierane z niższym.
Nowoczesne przeglądarki wczytują zasoby w dwóch etapach. Pierwsza faza jest zarezerwowana dla zasobów krytycznych i kończy się po pobraniu i wykonaniu wszystkich skryptów blokujących. Na tym etapie pobieranie zasobów o niskim priorytecie może być opóźnione. Używając żądania fetchpriority="high"
, możesz zwiększyć priorytet zasobu, umożliwiając przeglądarce jego pobieranie w pierwszej fazie.
Wersje demonstracyjne wskazówek dotyczących zasobów
Sprawdź swoją wiedzę
Do czego służy wskazówka dotycząca zasobu preconnect
?
Co umożliwia interfejs Fetch Priority API?
<link>
, <img>
i <script>
.
Kiedy należy użyć wskazówki dotyczącej funkcji prefetch
?
Następny krok: skuteczność obrazów
Teraz chyba już pewnie czujesz się pewnie, jeśli orientujesz się w ogólnych kwestiach związanych z wydajnością w odniesieniu do kodu HTML strony, elementu <head>
i wskazówek dotyczących zasobów. Istnieją jednak dodatkowe optymalizacje specyficzne dla różnych typów zasobów często wczytywanych przez strony. W następnym module omówimy wydajność obrazów, z której dowiesz się, jak przyspieszyć wczytywanie obrazów w witrynie, niezależnie od urządzenia użytkownika.