Wspomagaj przeglądarce za pomocą wskazówek dotyczących zasobów

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.
Wizualizacja czasu połączenia widoczna w panelu sieci w Narzędziach deweloperskich w Chrome. Czasy w czerwonej ramce są związane z konfigurowaniem połączenia z serwerem z innych domen, co 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?

Otwiera połączenie z serwerem z innych domen, w tym wyszukiwanie DNS oraz połączenie i negocjowanie protokołu TLS, z wyprzedzeniem, kiedy przeglądarka w przeciwnym razie mogłaby go wykryć.
Dobrze!
Przeprowadza tylko wyszukiwanie DNS dla serwera z innych domen.
Spróbuj ponownie.

Co umożliwia interfejs Fetch Priority API?

Określ priorytet pobierania kodu HTML bieżącej strony.
Spróbuj ponownie.
Określ względny priorytet elementów <link>, <img> i <script>.
Dobrze!

Kiedy należy użyć wskazówki dotyczącej funkcji prefetch?

Wszystkie zasoby lub strony, których użytkownik może potrzebować, bez względu na to, czy będą potrzebne w przyszłości.
Spróbuj ponownie.
Gdy masz dużą pewność, że zasoby lub strony, które chcesz pobrać z wyprzedzeniem, są potrzebne użytkownikowi.
Dobrze!
Jeśli użytkownik nie określił wyraźnie, że preferuje ograniczenie użycia danych.
Dobrze!

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.