Tak wiele sposobów na poprawę wydajności sieci. Jednym z nich jest wstępne ładowanie zawartości, która będzie potrzebna później. Prefetching CSS, wstępne renderowanie całej strony lub rozwiązywanie nazw domen. Robimy wszystko z wyprzedzeniem, aby następnie natychmiast pokazać wynik! Brzmi świetnie.

Jeszcze lepsze jest to, że jest to bardzo proste do zrealizowania. Pięć tagów daje przeglądarkom polecenie wykonania wstępnych czynności:

Krótko omówimy, co robią i kiedy ich używać.

Przejdź do: preload · prefetch · preconnect · dns-prefetch · prerender

preload

<link rel= "preload"> mówi przeglądarkom, aby załadowały i zbuforowały zasób (np. skrypt lub arkusz stylów) tak szybko, jak to możliwe. Jest to przydatne, gdy zasób będzie potrzebny w ciągu kilku sekund po załadowaniu strony i chcesz przyspieszyć proces.

Przeglądarka nic nie robi z zasobem po załadowaniu. Skrypty nie są wykonywane, arkusze stylów nie są stosowane. Zasób jest po prostu buforowany i natychmiast udostępniany na żądanie.

Składnia

<link rel="preload" href="/style.css" as="style" />

href wskazuje na zasób, który chcesz pobrać.

as może to być cokolwiek, co można pobrać w przeglądarce:

style dla arkuszy stylów,
script dla skryptów,
font dla czcionek,
fetch dla zasobów ładowanych przy pomocy fetch() lub XMLHttpRequest,
pełna lista zob. na MDN.

Ważne, aby wskazać atrybut as – to pomaga przeglądarkom prawidłowo ustawić priorytety oraz planować ładowanie.

Kiedy używać

Używaj wstępnego ładowania, gdy zasób będzie potrzebny w najbliższym czasie. Na przykład:

Niestandardowe czcionki z zewnętrznego pliku:
```
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
Domyślnie comic-sans.woff2 rozpocznie ładowanie dopiero po załadowaniu i przeanalizowaniu. index.cssAby nie czekać tak długo, można załadować czcionkę wcześniej za pomocą <link rel= "preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
Jeśli dzielisz swoje style zgodnie z podejściem Critical CSS na dwie części, krytyczną (do natychmiastowego renderowania) i niekrytyczną:
```
/* Zintegrowane krytyczne style */
```
Przy takim podejściu style niekrytyczne będą ładowane tylko po uruchomieniu JavaScript, co może nastąpić kilka sekund po renderowaniu. Zamiast czekać na JS, użyj <link rel= "preload">, aby rozpocząć ładowanie wcześniej:
```
/* Wbudowane style krytyczne */
```

Nie nadużywaj preładowania. Jeśli będziesz ładować wszystko, strona nie przyspieszy magicznie, wręcz przeciwnie, może to przeszkodzić przeglądarce w odpowiednim planowaniu pracy.

Nie myl z prefetchem. Nie używaj <link rel= "preload">, jeśli nie potrzebujesz zasobu zaraz po załadowaniu strony. Jeśli będzie potrzebny później, na przykład na następnej stronie, użyj <link rel= "prefetch">.

Szczegóły

To obowiązkowy tag do wykonania przez przeglądarkę (jeśli go obsługuje), w przeciwieństwie do wszystkich innych tagów , związanych z wcześniejszym ładowaniem. Przeglądarka musi załadować zasób wskazany w <link rel="preload">. W innych przypadkach może zignorować wcześniejsze ładowanie, na przykład jeśli działa na wolnym połączeniu.

Priorytety. Różnym zasobom (style, skrypty, czcionki itp.) przeglądarki zazwyczaj przypisują różne priorytety, aby najpierw ładować najważniejsze zasoby. W tym przypadku przeglądarka określa priorytet na podstawie atrybutu as. W przypadku przeglądarki Chrome możesz zobaczyć pełną tabelę priorytetów.

prefetch

<link rel= "prefetch"> prosi przeglądarkę, aby załadowała i zbuforowała zasób (na przykład skrypt lub arkusz stylów) w tle. Ładowanie odbywa się z niższym priorytetem, dlatego nie przeszkadza w ważniejszych zasobach. Jest to przydatne, jeśli zasób będzie potrzebny na następnej stronie, a chcesz go zbuforować z wyprzedzeniem.

Tutaj również przeglądarka nic nie robi z zasobem po załadowaniu. Skrypty nie są wykonywane, arkusze stylów nie są stosowane. Zasób po prostu jest buforowany i natychmiast udostępniany na żądanie.

Składnia

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

href wskazuje na zasób, który chcesz pobrać.

as może to być cokolwiek, co można pobrać w przeglądarce:

style dla arkuszy stylów,
script dla skryptów,
font dla czcionek,
fetch dla zasobów ładowanych przy pomocy fetch() lub XMLHttpRequest,
pełna lista zob. na MDN.

Ważne, aby wskazać atrybut as — to pomaga przeglądarce poprawnie ustawić priorytety i planować ładowanie.

Kiedy używać

Aby załadować zasoby z innych stron, jeśli potrzebujesz zasobu z innej strony i chcesz go wcześniej załadować, aby później przyspieszyć renderowanie tej strony. Na przykład:

Masz sklep internetowy, a 40% użytkowników wychodzi z głównej strony na stronę produktu. Użyj <link rel= "prefetch">, ładując pliki CSS i JS do renderowania stron z produktem.
Masz aplikację jednostronicową, a różne strony ładują różne pakiety. Gdy użytkownik odwiedza jakąś stronę, można wstępnie załadować pakiety dla wszystkich stron, do których ta strona się odwołuje.

Prawdopodobnie ten tag można bezpiecznie używać w każdej ilości. Przeglądarki zazwyczaj planują prefetch z najniższym priorytetem, więc nikomu to nie przeszkadza. Zaledwie pamiętaj, że wykorzystuje to ruch użytkownika, który może kosztować pieniądze.

Nie dla pilnych zapytań. Nie używaj <link rel= "prefetch">, kiedy zasób będzie potrzebny za kilka sekund. W takim przypadku zastosuj <link rel= "preload">.

Szczegóły

Opcjonalny tag. Przeglądarka nie ma obowiązku stosować tej instrukcji, może ją zignorować, na przykład na wolnym połączeniu.

Priorytet w Chrome. W Chrome <link rel= "prefetch"> zazwyczaj działa z minimalnym priorytetem (patrz pełną tabelę priorytetów), to znaczy po załadowaniu wszystkiego innego.

preconnect

<link rel= "preconnect"> prosi przeglądarkę o wcześniejsze połączenie z domeną, gdy chcesz przyspieszyć ustanowienie połączenia w przyszłości.

Przeglądarka powinna nawiązać połączenie, jeśli pobiera jakieś zasoby z nowej zewnętrznej domeny. Na przykład, jeśli ładuje czcionki Google Fonts, React z CDN lub żąda odpowiedzi JSON z serwera API.

Ustanowienie nowego połączenia zazwyczaj trwa kilka setek milisekund. Jest to robione raz, ale wciąż zajmuje czas. Jeśli nawiązałeś połączenie wcześniej, zaoszczędzisz czas i szybciej załadujesz zasoby z tej domeny.

Składnia

<link rel= "preconnect" href="https://api.my-app.com" />

href określa nazwę domeny, dla której należy ustalić adres IP. Można podać z prefiksem (https://domain.com) lub bez niego (//domain.com).

Kiedy używać

Użyj dla domen, które wkrótce będą potrzebne do załadowania stamtąd ważnego stylu, skryptu lub obrazu, ale jeszcze nie znasz adresu URL zasobu. Na przykład:

Twoja aplikacja jest hostowana na my-app.com i wykonuje zapytania AJAX do api.my-app.com: nie znasz z góry konkretnych zapytań, ponieważ są one wykonywane dynamicznie z JS. Tutaj całkowicie uzasadnione jest użycie tagu do wstępnego połączenia z domeną.
Twoja aplikacja jest hostowana na my-app.com i używa czcionek Google Fonts. Są one ładowane w dwóch etapach: najpierw ładowany jest plik CSS z domeny fonts.googleapis.com, następnie ten plik żąda czcionek z fonts.gstatic.com. Nie możesz wiedzieć, jakie konkretne pliki czcionek z fonts.gstatic.com będziesz potrzebować, dopóki nie załadujesz pliku CSS, dlatego wcześniej możemy tylko ustanowić wstępne połączenie.

Użyj tego tagu, aby nieco przyspieszyć jakiś zewnętrzny skrypt lub styl. dzięki wstępnemu ustanowieniu połączenia.

Nie nadużywaj.Ustanowienie i utrzymanie połączenia jest kosztowną operacją zarówno dla klienta, jak i dla serwera. Używaj tego tagu maksymalnie dla 4-6 domen.

Szczegóły

Opcjonalny tagPrzeglądarka nie jest zobowiązana do przestrzegania tej instrukcji i może ją zignorować, na przykład, jeśli już zostało ustanowionych wiele połączeń lub w jakimś innym przypadku.

Co obejmuje proces łączenia.Aby połączyć się z każdą stroną, przeglądarka musi wykonać następujące kroki:

Rozwiązywanie DNS.Znalezienie adresu IP serwera (216.58.215.78) dla podanej nazwy domeny (google.com).
Uścisk ręki TCP.Wymiana pakietów (klient → serwer → klient), aby zainicjować połączenie TCP z serwerem.
Uścisk ręki TLS (tylko dla stron HTTPS).Dwa cykle wymiany pakietów (klient → serwer → klient → serwer → klient), aby zainicjować bezpieczną sesję TLS.

Uwaga: HTTP/3 poprawi i przyspieszy mechanizm uścisku ręki, ale jest jeszcze daleko.

dns-prefetch

<link rel= "dns-prefetch"> prosi przeglądarkę o wcześniejsze rozwiązanie DNS dla domeny, jeśli wkrótce się do niej połączysz i chcesz przyspieszyć początkowe połączenie.

Przeglądarka powinna określić adres IP domeny, jeśli ma pobrać jakieś zasoby z nowej zewnętrznej domeny. Na przykład, ładować czcionki Google Fonts, React z CDN lub żądać odpowiedzi JSON z serwera API.

Dla każdej nowej domeny rozwiązywanie wpisu DNS zazwyczaj zajmuje około 20-120 ms. Wpływa to tylko na załadunek pierwszego zasobu z tej domeny, ale i tak stanowi opóźnienie. Jeśli rozwiążemy DNS wcześniej, zaoszczędzimy czas i szybciej załadujemy zasób.

Składnia

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href wskazuje na nazwę domeny, dla której należy ustalić adres IP. Można to podać z prefiksem (https://domain.com) lub bez niego (//domain.com).

Kiedy używać

Użyj dla domen, które wkrótce będą potrzebne do pobierania stamtąd zasobów, o których przeglądarka nie wie z góry. Na przykład:

Twoja aplikacja jest hostowana na my-app.com i wykonuje zapytania AJAX do api.my-app.com: nie znasz z góry konkretnych zapytań, ponieważ są one wykonywane dynamicznie z JS. Tutaj całkowicie uzasadnione jest użycie tagu do wstępnego połączenia z domeną.
Twoja aplikacja jest hostowana na my-app.com, i używa czcionek Google Fonts. Ładowane są w dwóch etapach: najpierw ładowany jest plik CSS z domeny. fonts.googleapis.com, następnie ten plik żąda czcionek z fonts.gstatic.com. Nie możesz wiedzieć, jakie konkretne pliki czcionek z fonts.gstatic.com będziesz potrzebować, dopóki nie załadujesz pliku CSS, dlatego wcześniej możemy tylko ustanowić wstępne połączenie.

Użyj tego tagu, aby nieco przyspieszyć jakiś zewnętrzny skrypt lub styl. dzięki wstępnemu ustanowieniu połączenia.

Zwróć uwagę na podobne właściwości w <link rel= "dns-prefetch"/> i <link rel= "preconnect">. Używanie ich razem dla jednej domeny zazwyczaj nie ma sensu: <link rel= "preconnect"> już zawiera <link rel= "dns-prefetch"/> i wiele innych. Można to uzasadnić w dwóch przypadkach:

Chcesz wspierać stare przeglądarki. <link rel= "dns-prefetch" /> jest wspierana zaczynając od IE10 i Safari 5. <link rel= "preconnect"> przez pewien czas był wspierany w Chrome i Firefox, ale dodano go do Safari dopiero w wersji 11.1 i wciąż nie jest wspierany w IE/Edge. Jeśli musisz wspierać te przeglądarki, użyj <link rel= "dns-prefetch" /> jako alternatywy dla <link rel= "preconnect">.

Chcesz przyspieszyć połączenie z więcej niż 4-6 domenami. Tag <link rel= "preconnect"> nie jest zalecany do używania z więcej niż 4-6 domenami, ponieważ ustanowienie i utrzymanie połączenia to kosztowna operacja. <link rel= "dns-prefetch" /> zużywa mniej zasobów, więc w razie potrzeby używaj go.

Szczegóły

Opcjonalny tag. Przeglądarka nie jest zobowiązana do przestrzegania tej instrukcji, więc może nie wykonać rozwiązywania DNS, na przykład, jeśli na stronie jest dużo takich tagów lub w jakimś innym przypadku.

Czym jest DNS. Każdemu serwerowi w internecie odpowiada unikalny adres IP, który wygląda jak 216.58.215.78. W pasku adresu przeglądarki zazwyczaj wprowadza się nazwę witryny (na przykład, google.com), a serwery DNS (Domain Name System) przypisują ją do adresu IP serwera (216.58.215.78).

Aby określić adres IP, przeglądarka musi wykonać zapytanie do serwera DNS. Zajmuje to 20-120 ms przy łączeniu się z nową zewnętrzną domeną.

DNS jest buforowany, choć niezbyt niezawodnie. Niektóre systemy operacyjne i przeglądarki buforują zapytania DNS: oszczędzi to czas podczas kolejnych zapytań, ale nie można polegać na buforowaniu. W systemie Linux zazwyczaj w ogóle nie działa. Chrome ma bufor DNS, ale żyje tylko przez minutę. Windows buforuje odpowiedzi DNS przez pięć dni.

prerender

<link rel= "prerender"> prosi przeglądarkę o załadowanie adresu URL i wyświetlenie go na niewidocznej karcie. Kiedy użytkownik kliknie na link, strona powinna wyświetlić się natychmiast. To przydatne, jeśli jesteś pewien, że użytkownik odwiedzi określoną stronę i chcesz przyspieszyć jej wyświetlanie.

Mimo wyjątkowej efektywności tego tagu (lub z jej powodu), w 2019 roku <link rel= "prerender"> jest słabo wspierany przez główne przeglądarki. Więcej szczegółów w poniżej.

Składnia

<link rel="prerender" href="https://my-app.com/pricing" />

href wskazuje na adres URL, dla którego chcesz uruchomić renderowanie w tle.

Kiedy używać

Gdy jesteś naprawdę pewny, że użytkownik przejdzie na określoną stronę. Jeśli masz "tunel", przez który 70% odwiedzających stronę A przechodzi na stronę B, to <link rel= "prerender"> na stronie A bardzo szybko wyświetli stronę B.

Nie nadużywaj.. Wstępne renderowanie jest bardzo kosztowne pod względem ruchu i pamięci. Nie używaj <link rel= "prerender"> więcej niż dla jednej strony.

Szczegóły

Opcjonalny tag. Przeglądarka nie jest zobowiązana do przestrzegania tej instrukcji i może ją zignorować, na przykład przy wolnym połączeniu lub niewystarczającej ilości dostępnej pamięci.

Aby oszczędzić pamięć, Chrome nie wykonuje pełnego renderowania,, a tylko wstępne ładowanie NoState.. Oznacza to, że Chrome ładuje stronę i wszystkie jej zasoby, ale nie renderuje jej ani nie wykonuje JavaScriptu.

Firefox i Safari w ogóle nie obsługują tego tagu. Nie narusza to specyfikacji, ponieważ przeglądarki nie są zobowiązane do wykonywania tej instrukcji; ale i tak jest to przykre. Błąd implementacji w Firefox był otwarty przez siedem lat. Są doniesienia, że Safari również nie obsługuje tego tagu..

Podsumowanie

Użyj:

<link rel= "preload"> — gdy będziesz potrzebować zasobu za kilka sekund,
<link rel= "prefetch"> — gdy będziesz potrzebować zasobu na następnej stronie,
<link rel= "preconnect"> — gdy wiesz, że wkrótce będziesz potrzebować zasobu, ale nie znasz jeszcze jego pełnego adresu URL,
<link rel= "dns-prefetch"> — analogicznie, gdy wiesz, że wkrótce będziesz potrzebować zasobu, ale nie znasz jeszcze jego pełnego adresu URL (dla starych przeglądarek),
<link rel= "prerender"> — gdy masz pewność, że użytkownicy przejdą na określoną stronę i chcesz przyspieszyć jej wyświetlanie.

Źródło: habr.com