ProHoster > Blog > administracja > Wstępne ładowanie, pobieranie wstępne i inne tagi

Wstępne ładowanie, pobieranie wstępne i inne tagi

Jest wiele sposobów na poprawę wydajności sieci. Jednym z nich jest wstępne ładowanie treści, które będą potrzebne później. Wstępne przetwarzanie CSS, wstępne renderowanie całej strony lub rozpoznawanie nazw domen. Robimy wszystko z wyprzedzeniem, a następnie natychmiast wyświetlamy wynik! Brzmi nieźle.

Jeszcze fajniejsze jest to, że można go bardzo prosto zaimplementować. Pięć tagów wydaj przeglądarce polecenie wykonania wstępnych działań:

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

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

<link rel="prerender" href="https://example.com/about.html" />


Wyjaśnijmy pokrótce, do czego służą i kiedy z nich korzystać.

ерейти к: preload · prefetch · połączenie wstępne · DNS-wstępne pobieranie · renderowanie wstępne

preload

<link rel= "preload"> informuje przeglądarkę, aby jak najszybciej załadowała i buforowała zasób (taki jak skrypt lub arkusz stylów). Jest to przydatne, gdy zasób jest potrzebny kilka sekund po załadowaniu strony, a chcesz przyspieszyć ten proces.

Przeglądarka nie robi nic 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="/pl/style.css" as="style" />

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

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

  • style dla arkuszy stylów,
  • script dla skryptów,
  • font dla czcionek,
  • fetch dla zasobów załadowanych przy użyciu fetch() lub XMLHttpRequest,
  • zobacz pełną listę na MDN.

Ważne jest, aby określić atrybut as – pomaga to przeglądarce prawidłowo ustalać priorytety i planować pobieranie.

Kiedy używać

Użyj wstępnego ładowania, gdy zasób będzie potrzebny w najbliższej przyszłości. Na przykład:

  • Niestandardowe czcionki z pliku zewnętrznego: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    Domyślnie comic-sans.woff2 rozpocznie się ładowanie dopiero po pobraniu i przeanalizowaniu index.css. Aby uniknąć tak długiego czekania, możesz pobrać czcionkę wcześniej, korzystając z niej <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Jeśli rozdzielisz swoje style według podejścia Krytyczny CSS na dwie części, krytyczną (do natychmiastowego renderowania) i niekrytyczną: 
    <style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

    Dzięki takiemu podejściu style niekrytyczne zaczną się ładować dopiero po uruchomieniu JavaScript, co może nastąpić kilka sekund po renderowaniu. Zamiast czekać, użyj JS <link rel= "preload">aby rozpocząć pobieranie wcześniej:

    <style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/pl/app/non-critical.css" as="style" />

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

Nie nadużywaj wstępnego ładowania. Jeśli załadujesz wszystko po kolei, strona nie przyspieszy magicznie, a wręcz przeciwnie, uniemożliwi przeglądarce prawidłowe zaplanowanie swojej pracy.

Nie mylić z pobieraniem wstępnym. Nie używaj <link rel= "preload">, jeśli nie potrzebujesz zasobu natychmiast po załadowaniu strony. Jeśli będziesz go później potrzebować, na przykład na następną stronę, użyj go <link rel= "prefetch">.

szczegóły

To jest wymagany tag do wykonania przez przeglądarkę (jeśli ją obsługuje), w przeciwieństwie do wszystkich innych tagów związane z wstępnym ładowaniem. Przeglądarka musi pobrać zasób określony w <link rel="preload">. W innych przypadkach może zignorować wstępne ładowanie, na przykład jeśli działa na wolnym łączu.

Priorytety. Przeglądarki zazwyczaj przypisują różne priorytety różnym zasobom (stylom, skryptom, czcionkom itp.), aby najpierw załadować najważniejsze zasoby. W tym przypadku przeglądarka określa priorytet na podstawie atrybutu as. W przeglądarce Chrome możesz spojrzeć pełna tabela priorytetów.

Wstępne ładowanie, pobieranie wstępne i inne tagi

prefetch

<link rel= "prefetch"> prosi przeglądarkę o pobranie i buforowanie zasobu (takiego jak skrypt lub arkusz stylów) w tle. Ładowanie odbywa się z niskim priorytetem, więc nie zakłóca ważniejszych zasobów. Jest to przydatne, jeśli zasób jest potrzebny na następnej stronie i chcesz go wcześniej zapisać w pamięci podręcznej.

Tutaj także przeglądarka po załadowaniu nie robi nic z zasobem. 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="prefetch" href="/pl/style.css" as="style" />

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

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

  • style dla arkuszy stylów,
  • script dla skryptów,
  • font dla czcionek,
  • fetch dla zasobów załadowanych przy użyciu fetch() lub XMLHttpRequest,
  • zobacz pełną listę na MDN.

Ważne jest, aby określić atrybut as - pomaga to przeglądarce prawidłowo ustalać priorytety i planować pobieranie.

Kiedy używać

Aby załadować zasoby z innych stron, jeśli potrzebujesz zasobu z innej strony i chcesz go wstępnie załadować, aby przyspieszyć renderowanie tej strony. Na przykład:

  • Masz sklep internetowy i 40% użytkowników opuszcza stronę główną, aby przejść do strony produktu. Używać <link rel= "prefetch">, ładowanie plików CSS i JS w celu renderowania stron produktów.
  • Masz aplikację jednostronicową, a różne strony ładują różne pakiety. Gdy użytkownik odwiedza stronę, mogą zostać wstępnie załadowane pakiety dla wszystkich stron, do których prowadzi.

Jest prawdopodobne, że tego tagu można bezpiecznie używać w dowolnym zakresie.. Przeglądarki zwykle planują pobieranie wstępne z najniższym priorytetem, więc nikomu to nie przeszkadza. Pamiętaj tylko, że pochłania to ruch użytkowników, co może kosztować.

Nie na pilne prośby. Nie używaj <link rel= "prefetch">, gdy zasób jest potrzebny w ciągu kilku sekund. W tym przypadku użyj <link rel= "preload">.

szczegóły

Opcjonalny znacznik. Przeglądarka nie ma obowiązku stosowania się do tej instrukcji, może ją zignorować np. w przypadku wolnego połączenia.

Priorytet w Chrome. W Chrome <link rel= "prefetch"> zwykle wykonywane z minimalnym priorytetem (patrz pełna tabela priorytetów), czyli po załadowaniu wszystkiego innego.

połączenie wstępne

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

Przeglądarka musi nawiązać połączenie, jeśli pobiera jakiekolwiek zasoby z nowej domeny strony trzeciej. Na przykład, jeśli ładuje czcionki Google, czcionki React z CDN lub żąda odpowiedzi JSON z serwera API.

Nawiązanie nowego połączenia trwa zwykle kilkaset milisekund. Robi się to raz, ale i tak wymaga czasu. Jeśli wcześniej nawiązałeś połączenie, zaoszczędzisz czas i szybciej pobierzesz zasoby z tej domeny.

składnia

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

href wskazuje nazwę domeny, dla której chcesz określić adres IP. Można określić z przedrostkiem (https://domain.com) lub bez niego (//domain.com).

Kiedy używać

Użyj dla domen, które będą wkrótce potrzebne aby pobrać stamtąd ważny styl, skrypt lub obraz, ale nie znasz jeszcze adresu URL zasobu. Na przykład:

  • Twoja aplikacja jest hostowana na my-app.com i wysyła żądania AJAX do api.my-app.com: Nie znasz z góry konkretnych zapytań, ponieważ są one tworzone dynamicznie z JS. Tutaj całkiem właściwe jest użycie tagu do wstępnego połączenia z domeną.
  • Twoja aplikacja jest hostowana na my-app.com i korzysta z czcionek Google. Pobiera się je w dwóch etapach: najpierw pobierany jest plik CSS z domeny fonts.googleapis.com, wówczas ten plik żąda czcionek za pomocą fonts.gstatic.com. Nie możesz wiedzieć, z jakiego konkretnego pliku czcionki pochodzą fonts.gstatic.com będziesz potrzebować do momentu załadowania pliku CSS, dlatego możemy wcześniej nawiązać jedynie wstępne połączenie.

Użyj tego tagu, aby przyspieszyć skrypt lub styl strony trzeciej ze względu na wcześniej nawiązane połączenie.

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

szczegóły

Opcjonalny znacznik. Przeglądarka nie ma obowiązku stosowania się do tej instrukcji i może ją zignorować, np. jeśli nawiązano już wiele połączeń lub w innym przypadku.

Co obejmuje proces łączenia?. Aby połączyć się z każdą witryną, przeglądarka musi wykonać następujące czynności:

  • Rozdzielczość DNS. Znajdź adres IP serwera (216.58.215.78) dla określonej nazwy domeny (google.com).
  • Uścisk dłoni TCP. Wymiana pakietów (klient → serwer → klient) w celu zainicjowania połączenia TCP z serwerem.
  • Uzgadnianie TLS (tylko witryny HTTPS). Dwie rundy wymiany pakietów (klient → serwer → klient → serwer → klient) w celu zainicjowania bezpiecznej sesji TLS.

Uwaga: HTTP/3 ulepszy i przyspieszy mechanizm uzgadniania, ale do tego jeszcze daleko.

DNS-wstępne pobieranie

<link rel= "dns-prefetch"> prosi przeglądarkę o wcześniejsze rozpoznanie DNS domeny, jeśli będziesz się z nią wkrótce łączyć i chcesz przyspieszyć początkowe połączenie.

Przeglądarka musi określić adres IP domeny, jeśli będzie pobierać jakiekolwiek zasoby z nowej domeny strony trzeciej. Na przykład ładowanie czcionek Google, czcionek React z CDN lub żądanie odpowiedzi JSON z serwera API.

Dla każdej nowej domeny rozpoznawanie rekordów DNS trwa zwykle około 20–120 ms. Wpływa to jedynie na załadowanie pierwszego zasobu z danej domeny, ale i tak wprowadza opóźnienie. Jeśli wcześniej wykonamy rozpoznawanie DNS, zaoszczędzimy czas i szybciej załadujemy zasób.

składnia

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

href wskazuje nazwę domeny, dla której chcesz ustawić adres IP. Można określić z przedrostkiem (https://domain.com) lub bez niego (//domain.com).

Kiedy używać

Użyj dla domen, które będą wkrótce potrzebne aby pobrać stamtąd zasoby, o których przeglądarka nie wie wcześniej. Na przykład:

  • Twoja aplikacja jest hostowana na my-app.com i wysyła żądania AJAX do api.my-app.com: Nie znasz z góry konkretnych zapytań, ponieważ są one tworzone dynamicznie z JS. Tutaj całkiem właściwe jest użycie tagu do wstępnego połączenia z domeną.
  • Twoja aplikacja jest hostowana na my-app.comi korzysta z czcionek Google. Pobiera się je w dwóch etapach: najpierw pobierany jest plik CSS z domeny fonts.googleapis.com, wówczas ten plik żąda czcionek za pomocą fonts.gstatic.com. Nie możesz wiedzieć, z jakiego konkretnego pliku czcionki pochodzą fonts.gstatic.com będziesz go potrzebować do czasu załadowania pliku CSS, dlatego możemy z wyprzedzeniem nawiązać jedynie wstępne połączenie.

Użyj tego tagu, aby przyspieszyć skrypt lub styl strony trzeciej ze względu na wcześniej nawiązane połączenie.

Proszę zwrócić uwagę na podobne cechy do <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Zwykle nie ma sensu używać ich razem dla jednej domeny: <link rel= "preconnect"> już zawiera <link rel= "dns-prefetch"/> i wiele więcej. Można to uzasadnić w dwóch przypadkach:

  • Czy chcesz obsługiwać starsze przeglądarki?. <link rel= "dns-prefetch" /> wspierany przez od IE10 i Safari 5. <link rel= "preconnect"> był przez jakiś czas obsługiwany w przeglądarkach Chrome i Firefox, ale został dodany do Safari dopiero w wersji 11.1 i nadal nie jest obsługiwany w IE/Edge. Jeśli potrzebujesz obsługi tych przeglądarek, użyj <link rel= "dns-prefetch" /> jako opcja kopii zapasowej dla <link rel= "preconnect">.
  • Chcesz przyspieszyć połączenia do więcej niż 4-6 domen. Etykietka <link rel= "preconnect"> Nie zaleca się używania więcej niż 4-6 domen, ponieważ ustanowienie i utrzymanie połączenia jest kosztowną operacją. <link rel= "dns-prefetch" /> zużywa mniej zasobów, więc używaj go w razie potrzeby.

szczegóły

Opcjonalny znacznik. Przeglądarka nie musi postępować zgodnie z tą instrukcją, dlatego może nie wykonać rozpoznawania DNS, jeśli na przykład na stronie znajduje się wiele takich tagów lub w innym przypadku.

Co to jest DNS. Każdy serwer w Internecie ma unikalny adres IP, który wygląda następująco 216.58.215.78. Nazwę witryny wpisuje się zazwyczaj w pasek adresu przeglądarki (np. google.com), a serwery DNS (Domain Name System) dopasowują go do adresu IP serwera (216.58.215.78).

Aby określić adres IP, przeglądarka musi wysłać zapytanie do serwera DNS. Łączenie z nową domeną strony trzeciej zajmuje 20–120 ms.

DNS jest buforowany, choć niezbyt niezawodny. Niektóre systemy operacyjne i przeglądarki buforują zapytania DNS: pozwoli to zaoszczędzić czas w przypadku powtarzających się zapytań, ale nie można polegać na buforowaniu. Na Linuksie zwykle w ogóle nie działa. Chrome ma pamięć podręczną DNS, ale działa ona tylko przez minutę. System Windows buforuje odpowiedzi DNS przez pięć dni.

renderowanie wstępne

<link rel= "prerender"> prosi przeglądarkę o pobranie adresu URL i wyświetlenie go w niewidocznej karcie. Gdy użytkownik kliknie w link, strona powinna zostać wyświetlona natychmiast. Jest to przydatne, jeśli masz pewność, że użytkownik odwiedzi daną stronę i chcesz przyspieszyć jej wyświetlenie.

Pomimo (lub z powodu) wyjątkowej skuteczności tego tagu, w 2019 r <link rel= "prerender"> słabo obsługiwane w głównych przeglądarkach. Zobacz więcej szczegółów. niżej.

składnia

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

href wskazuje adres URL, który chcesz rozpocząć renderowanie w tle.

Kiedy używać

Kiedy masz naprawdę pewność, ż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 wtedy <link rel= "prerender"> na stronie A pomoże bardzo szybko wyświetlić stronę B.

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

szczegóły

Opcjonalny znacznik. Przeglądarka nie musi przestrzegać tej instrukcji i może ją zignorować, na przykład w przypadku wolnego połączenia lub braku wystarczającej ilości wolnej pamięci.

Aby zaoszczędzić pamięć Chrome nie wykonuje pełnego renderowaniaI tylko wstępnie załaduj NoState. Oznacza to, że Chrome ładuje stronę i wszystkie jej zasoby, ale nie renderuje ani nie wykonuje kodu JavaScript.

Firefox i Safari w ogóle nie obsługują tego tagu. Nie narusza to specyfikacji, ponieważ przeglądarki nie muszą przestrzegać tej instrukcji; ale i tak smutno. Błąd implementacyjny Firefox jest otwarty od siedmiu lat. Istnieją doniesienia, że ​​Safari również nie obsługuje tego tagu.

Streszczenie

Używać:

  • <link rel= "preload"> - gdy potrzebujesz zasobu w kilka sekund
  • <link rel= "prefetch"> - kiedy potrzebujesz 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"> - podobnie, gdy wiesz, że wkrótce będziesz potrzebował zasobu, ale nie znasz jeszcze jego pełnego adresu URL (dla starszych przeglądarek)
  • <link rel= "prerender"> — gdy masz pewność, że użytkownicy odwiedzą daną stronę, a chcesz przyspieszyć jej wyświetlanie

Źródło: www.habr.com

Dodaj komentarz