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

W ostatnim module o optymalizacji wczytywania zasobów dowiedzieliśmy się, jak różne zasoby strony, takie jak CSS i JavaScript, mogą wpływać na szybkość wczytywania strony oraz jak można je zoptymalizować i dostarczać, aby przyspieszyć renderowanie strony. To idealny moment, aby przejść do bardziej zaawansowanego aspektu wczytywania zasobów, który polega na przyspieszaniu ich wczytywania przez przeglądarkę za pomocą wskazówek dotyczących zasobów.

Wskazówki dotyczące zasobów mogą pomóc deweloperom jeszcze bardziej zoptymalizować czas wczytywania strony, informując przeglądarkę, jak wczytywać zasoby i ustalać ich priorytety. Początkowy zestaw wskazówek dotyczących zasobów, takich jak preconnect i dns-prefetch, został wprowadzony jako pierwszy. Z czasem jednak pojawiły się preload i interfejs Fetch Priority API, które zapewniają dodatkowe możliwości.

Wskazówki dotyczące zasobów instruują przeglądarkę, aby z wyprzedzeniem wykonywała określone działania, które mogą poprawić wydajność wczytywania. Wskazówki dotyczące zasobów mogą wykonywać działania takie jak wczesne wyszukiwanie DNS, wcześniejsze łączenie się z serwerami, a nawet pobieranie zasobów, zanim przeglądarka zwykle je wykryje.

Wskazówki dotyczące zasobów można określić w kodzie HTML – najczęściej na początku elementu <head> – lub ustawić jako nagłówek HTTP. W tym module omówimy preconnect, dns-prefetch i preload, a także spekulacyjne pobieranie danych, które zapewnia prefetch.

preconnect

Wskazówka preconnect służy do nawiązania połączenia z innym źródłem, z którego pobierasz ważne zasoby. Możesz na przykład hostować obrazy lub zasoby w sieci CDN lub w innej domenie:

<link rel="preconnect" href="https://example.com">

Używając preconnect, zakładasz, że przeglądarka planuje w najbliższej przyszłości połączyć się z określonym serwerem z innej domeny i że powinna otworzyć to połączenie jak najszybciej, najlepiej przed czekaniem na parser HTML lub skaner wstępnego wczytywania.

Jeśli na stronie masz dużą liczbę zasobów z innych domen, użyj preconnect w przypadku tych zasobów, które są najważniejsze dla bieżącej strony.

Zrzut ekranu przedstawiający czasy połączenia z zasobem w panelu sieciowym Narzędzi deweloperskich w Chrome. Konfiguracja połączenia obejmuje czas oczekiwania, negocjacje z serwerem proxy, wyszukiwanie DNS, konfigurację połączenia i negocjacje TLS.
Wizualizacja czasów połączeń widoczna w panelu sieciowym Narzędzi deweloperskich w Chrome. Czasy w czerwonym polu dotyczą nawiązywania połączenia z serwerem z innego źródła. Możesz preconnectskrócić ten czas, nawiązując połączenia wcześniej, a nie w momencie wykrycia zasobu z innego źródła.

Typowym zastosowaniem preconnect są Czcionki Google. Google Fonts zaleca preconnect do domeny, która obsługuje deklaracje @font-face, oraz do domeny, która obsługuje pliki czcionek https://fonts.gstatic.com.https://fonts.googleapis.com

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Atrybut crossorigin służy do określania, czy zasób musi być pobierany przy użyciu współdzielenia zasobów pomiędzy serwerami z różnych domen (CORS). Jeśli używasz wskazówki preconnect, a pobierany z serwera źródłowego zasób korzysta z CORS (np. pliki czcionek), musisz dodać atrybut crossorigin do wskazówki preconnect.

dns-prefetch

Wczesne otwieranie połączeń z serwerami z innych domen może znacznie skrócić czas początkowego wczytywania strony, ale nawiązywanie połączeń z wieloma serwerami z innych domen jednocześnie może być nierozsądne lub niemożliwe. Jeśli obawiasz się, że możesz nadużywać preconnect, znacznie tańszą wskazówką dotyczącą zasobów jest wskazówka dns-prefetch.

Zgodnie z nazwą dns-prefetch nie nawiązuje połączenia z serwerem z innego źródła, ale z wyprzedzeniem przeprowadza dla niego wyszukiwanie DNS. Wyszukiwanie DNS następuje, gdy nazwa domeny jest rozpoznawana jako jej podstawowy adres IP. Warstwy pamięci podręcznej DNS na poziomie urządzenia i sieci sprawiają, że jest to zwykle szybki proces, ale nadal zajmuje trochę czasu.

<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">

Wyszukiwanie DNS jest stosunkowo niedrogie, więc ze względu na niewielki koszt może być w niektórych przypadkach bardziej odpowiednim narzędziem niż preconnect. W szczególności może to być przydatna wskazówka dotycząca zasobów w przypadku linków, które prowadzą do innych witryn, do których użytkownik prawdopodobnie przejdzie. dnstradamus to jedno z narzędzi, które robi to automatycznie za pomocą JavaScriptu i używa Intersection Observer API do wstrzykiwania wskazówek dns-prefetch do kodu HTML bieżącej strony, gdy linki do innych witryn są przewijane do widocznego obszaru 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 krytycznych zasobów wykrytych na późniejszym etapie. Najczęstsze przypadki użycia to pliki czcionek, pliki CSS pobierane za pomocą deklaracji @importlub zasoby CSS background-image, które prawdopodobnie będą kandydatami do największego wyrenderowania treści (LCP). W takich przypadkach skaner wstępnego wczytywania nie wykryje tych plików, ponieważ zasób jest przywoływany w zasobach zewnętrznych.

Podobnie jak w przypadku dyrektywy preconnect, dyrektywa preload wymaga atrybutu crossorigin, jeśli wstępnie wczytujesz zasób CORS, np. czcionki. Jeśli nie dodasz atrybutu crossorigin lub dodasz go w przypadku żądań innych niż CORS, zasób zostanie pobrany przez przeglądarkę 2 razy, co spowoduje zmarnowanie przepustowości, którą można było lepiej wykorzystać w przypadku innych zasobów.

<link rel="preload" href="/font.woff2" as="font" crossorigin>

W powyższym fragmencie kodu HTML przeglądarka otrzymuje instrukcję wstępnego wczytania /font.woff2 za pomocą żą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ącego zasobu, który prawdopodobnie będzie używany w przyszłości:

<link rel="prefetch" href="/next-page.css" as="style">

Ta dyrektywa ma w dużej mierze taki sam format jak dyrektywa preload, z tą różnicą, że atrybut rel elementu <link> ma wartość "prefetch". W przeciwieństwie do dyrektywy preload dyrektywa prefetch ma charakter spekulacyjny, ponieważ inicjujesz pobieranie zasobu na potrzeby przyszłej nawigacji, która może, ale nie musi nastąpić.

W niektórych przypadkach prefetch może być przydatne, np. jeśli w witrynie zidentyfikujesz ścieżkę użytkownika, którą większość użytkowników pokonuje do końca. W takiej sytuacji prefetch w przypadku zasobu krytycznego dla renderowania tych przyszłych stron może pomóc skrócić czas ich wczytywania.

Fetch Priority API

Możesz użyć Fetch Priority API za pomocą atrybutu fetchpriority, aby zwiększyć priorytet zasobu. 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 wygenerowaniu układu obraz znajduje się w początkowym widocznym obszarze, priorytet jest zwiększany do wysokiego. W poprzednim fragmencie kodu HTML fetchpriority natychmiast informuje przeglądarkę, że ma pobrać większy obraz LCP z priorytetem wysokim, a mniej ważne miniatury są pobierane z niższym priorytetem.

Nowoczesne przeglądarki wczytują zasoby w 2 fazach. Pierwsza faza jest zarezerwowana dla zasobów krytycznych i kończy się, gdy wszystkie skrypty blokujące zostaną pobrane i wykonane. Na tym etapie pobieranie zasobów o priorytecie Niski może być opóźnione. Używając fetchpriority="high", możesz zwiększyć priorytet zasobu, umożliwiając przeglądarce pobranie go w pierwszej fazie.

Wersje demonstracyjne wskazówek dotyczących zasobów

Sprawdź swoją wiedzę

Do czego służy wskazówka dotycząca zasobów preconnect?

Wykonuje tylko wyszukiwanie DNS serwera z innej domeny.
Otwiera połączenie z serwerem z innej domeny, w tym wyszukiwanie DNS, a także negocjacje połączenia i TLS, zanim przeglądarka mogłaby je wykryć.

Co umożliwia interfejs Fetch Priority API?

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

Kiedy należy używać prefetch podpowiedzi?

jeśli użytkownik nie określił wyraźnie preferencji dotyczących ograniczenia wykorzystania danych;
Gdy masz dużą pewność, że zasoby lub strony, które chcesz wstępnie pobrać, będą potrzebne użytkownikowi.
W przypadku wszystkich zasobów lub stron, których użytkownik może potrzebować, niezależnie od tego, czy w przyszłości rzeczywiście będą mu potrzebne.

Dalej: skuteczność obrazu

Pewnie masz już sporą wiedzę o ogólnych kwestiach związanych ze skutecznością w przypadku kodu HTML strony, elementu <head> i wskazówek dotyczących zasobów. Istnieją jednak dodatkowe optymalizacje, które są specyficzne dla różnych typów zasobów, które strony zwykle wczytują. W następnym module omówimy wydajność obrazów. Pomoże Ci on sprawić, aby obrazy na Twojej stronie wczytywały się tak szybko, jak to możliwe, niezależnie od urządzenia użytkownika.