Dziękujemy za zainteresowanie konferencją Google I/O. Oglądanie treści na żądanie.

Ta strona została przetłumaczona przez Cloud Translation API.

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

W poprzednim module poświęconym optymalizacji wczytywania zasobów omówiliśmy różne np. CSS czy JavaScript, mogą wpłynąć na szybkość wczytywania możesz zoptymalizować je oraz ich wyświetlanie, aby przyspieszyć renderowanie strony. To doskonały moment, aby przejść do bardziej zaawansowanych kwestii. czyli ich szybsze wczytywanie przez przeglądarkę wskazówki dotyczące zasobów.

Wskazówki dotyczące zasobów mogą pomóc programistom zoptymalizować czas wczytywania strony, bo informują jak wczytywać zasoby i nadawać im priorytety. Początkowy zestaw zasobów wskazówki takie jak preconnect i dns-prefetch zostały wprowadzone jako pierwsze. Z czasem jednak preload i interfejs Fetch Priority API udostępniać dodatkowe możliwości.

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

Wskazówki dotyczące zasobów można określić w kodzie HTML – najczęściej na początku <head> – lub ustawić jako nagłówek HTTP. W ramach tego modułu Usługi preconnect, dns-prefetch i preload są obsługiwane, a także funkcji pobierania spekulacyjnego, które zapewnia prefetch.

`preconnect`

Wskazówka preconnect służy do nawiązania połączenia z innym punktem początkowym z: z których pochodzą kluczowe zasoby. Na przykład możesz hostować obrazy i zasoby w sieci CDN lub w innej domenie z innej domeny:

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

Korzystając z preconnect, należy spodziewać się, że przeglądarka planuje połączyć się z serwera z innej domeny już w najbliższej przyszłości, a przeglądarka należy otworzyć to połączenie jak najszybciej, najlepiej przed odebraniem Parser HTML lub skaner wstępnie wczytywany.

Jeśli masz na stronie dużą ilość zasobów z innych domen, używaj zasady preconnect które są najbardziej istotne w przypadku bieżącej strony.

Zrzut ekranu pokazujący czasy połączenia z zasobem w panelu sieci w Narzędziach deweloperskich w Chrome. Konfiguracja połączenia obejmuje czas przestoju, negocjacje serwera proxy, wyszukiwanie DNS, konfigurację połączenia i negocjacje TLS. — Wizualizacja czasów połączeń w panelu sieci Chrome Narzędzia deweloperskie. Czasy w czerwonym polu to czasy związane z konfiguracją z serwerem z innej domeny, dzięki czemu `preconnect` może przyspieszać nawiązywanie kontaktów zamiast i odkrywaniu zasobów z innych domen.

Typowy przypadek użycia czcionki preconnect to Google Fonts. Google Fonts poleca preconnect w domenie https://fonts.googleapis.com, która obsługuje deklaracje @font-face i domenę https://fonts.gstatic.com, która wyświetla 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 musi być pobrane za pomocą współdzielenia zasobów między serwerami z różnych domen (CORS). Jeśli korzystasz z metody Wskazówka preconnect, jeśli zasób pobierany ze punktu początkowego używa CORS, takie jak pliki czcionek, musisz dodać atrybut crossorigin do sekcji preconnect podpowiedź.

`dns-prefetch`

Chociaż wczesne otwieranie połączeń z serwerami z innych domen może znacznie skrócenie czasu początkowego wczytywania strony, może nie być uzasadnione lub niemożliwe nawiązywania połączeń z wieloma serwerami z innych domen jednocześnie. Jeśli się martwisz że możesz nadużywać funkcji preconnect. Wskazówka dotycząca znacznie mniej kosztownych zasobów to Wskazówka dns-prefetch.

Zgodnie ze swoją nazwą usługa dns-prefetch nie nawiązuje połączenia z innymi domenami serwera, ale przeprowadza wyszukiwanie DNS z wyprzedzeniem. DNS wyszukiwanie ma miejsce, gdy nazwa domeny zostanie rozpoznana jako jej bazowy adres IP. Warstwy pamięci podręcznych DNS na poziomie urządzenia i sieci pomagają sprawić, że zwykle jest bardzo szybki, ale wciąż 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, a ze względu na względnie niewielki koszt W niektórych przypadkach może być bardziej odpowiednim narzędziem niż preconnect. W być może warto wykorzystać wskazówkę dotyczącą zasobów w przypadku linków, przejść do innych witryn, które według Ciebie mogą być interesujące dla użytkownika. Jednym z takich narzędzi jest dnstradamus, które robi to automatycznie za pomocą JavaScriptu. i używa interfejsu Intersection Observer API do wstawienia w obiekcie wskazówek dns-prefetch kodu HTML bieżącej strony, gdy linki do innych witryn są przewijane do sekcji widoczny obszar.

`preload`

Dyrektywa preload służy do zainicjowania wczesnego żądania dotyczącego zasobu wymagane do renderowania strony:

<link rel="preload" href="/lcp-image.jpg" as="image">

Dyrektywy preload powinny być ograniczone do odkrytych późno zasobów krytycznych. Najczęściej używane są pliki czcionek oraz pliki CSS pobierane przez @import lub zasoby CSS background-image, które prawdopodobnie będą największe Kandydaci do wyrenderowania treści (LCP). W takich przypadkach pliki te nie są wykryte przez skaner wstępnego wczytywania, gdy do zasobu odwołuje się plik zewnętrzny i zasobami Google Cloud.

Uwaga: jeśli używasz preload do pobierz obraz określony przez element <img> o różnej wartości na podstawie obszaru widocznego dla użytkownika, pamiętaj o dodaniu parametru imagesrcset do podpowiedzi preload, aby pobrać prawidłowe zdjęcie w bieżącym widocznym obszarze. Wyklucz też src dzięki czemu przeglądarki, które nie obsługują elastycznego wstępnego wczytywania, nie będą pobierać z obrazu zastępczego.

Podobnie jak preconnect, dyrektywa preload wymaga crossorigin , jeśli wstępnie wczytujesz zasób CORS, taki jak czcionki. Jeśli nie dodasz atrybut crossorigin – lub dodaj go w przypadku żądań innych niż CORS – wtedy zasób zostanie pobrany dwukrotnie przez przeglądarkę, zmarnując przepustowość, na inne zasoby.

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

. Ważne: zasób określony w Dyrektywa preload jest pobierana dwukrotnie, jeśli as w elemencie <link> dyrektywy brakuje atrybutu. Listę wartości atrybutów as znajdziesz w Dokumentacja w MDN na temat wartości atrybutów as.

W poprzednim fragmencie kodu HTML przeglądarka otrzymuje instrukcje, by wstępnie wczytać /font.woff2 przy użyciu żądania CORS – nawet jeśli /font.woff2 znajduje się w tej samej domenie.

Uwaga: dyrektywa preload jest bardzo potężną optymalizację wydajności, którą można nadużywać. Zasoby pobrane za pomocą dyrektywy preload są skutecznie pobierane z wysokim priorytetem, a w przypadku ich nadużywania – preload może spowodować rywalizację o przepustowość łącza w sposób negatywnie wpływający na szybkość wczytywania stron.

`prefetch`

Ważne: to bardzo ogólne objaśnienie prefetch wskazówka na temat zasobu. W związku z tym ta sekcja nie jest analizowana na temat niektórych kwestii i kompromisów, które należy rozważyć podczas używania aplikacji. W dalszej części tego kursu dowiesz się więcej o tym, prefetching i zasoby potrzebne w najbliższej przyszłości o niskim priorytecie, a także prefetching stron w celu przyspieszenia nawigacji w przyszłości.

Dyrektywa prefetch służy do inicjowania żądań o niskim priorytecie dla żądania zasób, który może zostać użyty w przyszłości:

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

Dyrektywa ma zasadniczo ten sam format co dyrektywa preload, ale tylko Atrybut rel elementu <link> używa wartości "prefetch". W odróżnieniu od dyrektywy preload jednak element prefetch jest w dużej mierze spekulacyjny inicjujesz pobieranie zasobu na potrzeby przyszłej nawigacji, które może lub może się nie pojawić.

prefetch może okazać się korzystne, jeśli na przykład określić sposób, w jaki użytkownicy odwiedzają Twoją witrynę, prefetch dla zasobów o znaczeniu krytycznym wobec renderowania na tych przyszłych stronach, może pomóc w skracają czas ich wczytywania.

Uwaga: ze względu na spekulacyjny charakter prefetch, jej użycie ma potencjalne wady. użyte do pobrania zasobu mogą stać się nieużywane, jeśli użytkownik nie przejdzie do sekcji która na koniec będzie potrzebować pobranego z wyprzedzeniem zasobu. Polegaj na statystykach lub innych źródeł danych o wzorcach użytkowania witryny, aby zdecydować, czy użycie usługi prefetch to dobry pomysł. Możesz też użyć Save-Data wskazówka dotycząca rezygnacji z pobierania z wyprzedzeniem w przypadku użytkowników, którzy określiliśmy preferencję dotyczącą mniejszego wykorzystania danych.

Interfejs Fetch Priority API

Możesz użyć atrybutu Fetch Priority API dla: fetchpriority, umożliwia zwiększenie priorytetu zasobu. Możesz użyć tego atrybutu w: <link>, elementów <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>

. Ważne: atrybut fetchpriority jest zwłaszcza, skuteczne, gdy jest używane na potrzeby obrazu LCP strony. Zwiększenie priorytetu obrazu LCP, stosując ten atrybut, możesz poprawić LCP strony przy niewielkim wysiłku.

Domyślnie pobierane są zdjęcia z niższym priorytetem. Po układzie, jeśli znajdzie się w początkowym widoku, priorytet zostanie zwiększony do Wysoki priorytet. W poprzednim fragmencie kodu HTML fragment fetchpriority natychmiast informuje przeglądarkę, że ma pobrać większy obraz LCP o wysokim priorytecie, a mniej ważne miniatury są pobierane z niższym priorytetem.

Nowoczesne przeglądarki wczytują zasoby dwuetapowo. Pierwszy etap jest zarezerwowany dla zasobów krytycznych i kończy się po pobraniu wszystkich skryptów blokujących oraz . Na tym etapie zasoby o niskim priorytecie mogą być opóźnione z pobieranie. Używając funkcji fetchpriority="high", możesz zwiększyć priorytet co umożliwi przeglądarce pobranie go w pierwszej fazie.

Wersje demonstracyjne wskazówek dotyczących zasobów

Sprawdź swoją wiedzę

Co robi wskazówka dotycząca zasobu preconnect?

Otwiera połączenie z serwerem z innej domeny, w tym wyszukiwanie DNS. a także połączenia i negocjacje TLS, zanim przeglądarka w innych przypadkach.

Dobrze!

Przeprowadza tylko wyszukiwanie DNS dla serwera z innej domeny.

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 dla aplikacji <link>, elementów <img> i <script>.

Dobrze!

Kiedy należy użyć podpowiedzi prefetch?

Wszystkie zasoby lub strony, których może potrzebować użytkownik, niezależnie od tego, czy nie że naprawdę będą potrzebować ich w przyszłości.

Spróbuj ponownie.

Jeśli masz wysoką pewność, że zasoby lub strony które chcesz pobrać z wyprzedzeniem.

Dobrze!

Jeśli użytkownik nie wyraził jednoznacznie zgody na ograniczenie ilości danych i ich wykorzystaniu.

Dobrze!

Następny krok: skuteczność obrazów

Chyba już pewnie zaczynasz być pewny swojej wiedzy ogólnych kwestii dotyczących wydajności w przypadku kodu HTML stron. <head> elementów i zasobów. Istnieją jednak dodatkowe optymalizacje, które odnoszą się do różnych typów zasobów, które są często wczytywane przez strony. Kolejny krok, wydajność obrazów omówimy w następnym module. Pomoże Ci to uzyskać że obrazy w Twojej witrynie wczytują się tak szybko, jak to możliwe, niezależnie od na urządzeniu użytkownika.