Wstępne ładowanie, wstępne łączenie, wstępne pobieranie: popraw wydajność witryny dzięki wskazówkom dotyczącym zasobów

Nowoczesne przeglądarki internetowe wykorzystują różne techniki, aby poprawić ogólną wydajność Twojej witryny — od ustalania priorytetów najważniejszych zasobów i pobierania ich w pierwszej kolejności po zgadywanie, którą stronę użytkownik odwiedzi jako następną.

Jednak nie powinieneś polegać na przeglądarkach, tak zaawansowanych, jak mogą być, aby podejmować wszystkie decyzje dotyczące wydajności Twojej witryny.

Jako właściciel witryny jesteś osobą, która wie, które zasoby są najważniejsze i jaka jest rzeczywista podróż użytkownika po Twojej witrynie. Aby poprawić ogólną wydajność, postrzeganą prędkość i wrażenia użytkownika witryny, możesz wykorzystać tę wiedzę, aby przyspieszyć ładowanie stron przez przeglądarki.

Tu właśnie pojawiają się wskazówki dotyczące zasobów.

W kolejnych wierszach przyjrzymy się im i jak najlepiej wykorzystać ich zalety.

Zanurzmy się w to.

Jak działają przeglądarki (w skrócie)

Aby lepiej zrozumieć wskazówki dotyczące zasobów i ich zastosowanie, przyjrzyjmy się, jak przeglądarki faktycznie ładują zawartość.

Cały proces ładowania strony przez przeglądarkę moglibyśmy podzielić na trzy kroki:

• Nawiązywanie połączenia;
• Pobieranie, parsowanie i renderowanie kodu;
• Sprawienie, by strona była interaktywna;

W pierwszym etapie przeglądarka musi nawiązać połączenie z serwerem w celu pobrania zasobów. Obejmuje to wyszukiwanie nazwy domeny i rozwiązywanie jej na adres IP, konfigurowanie połączenia z serwerem i szyfrowanie połączenia ze względów bezpieczeństwa.

Gdy wszystko zostanie zrobione, przeglądarka może kontynuować pobieranie i analizowanie informacji, konstruowanie Object Model dokumentu (DOM) i CSS Object Model (CSSOM), a następnie renderowanie zawartości.

Ostatnią częścią jest uczynienie strony interaktywną. Wszystkie wyżej wymienione procesy odbywają się w głównym wątku. Kiedy więc główny wątek przeglądarki zakończy analizowanie, renderowanie i malowanie strony, nadszedł czas, aby zająć się odroczonymi plikami JavaScript, aby udostępnić stronę do przewijania, dotykania i innych interakcji.

Krótko mówiąc, jest to proces zakulisowy za każdym razem, gdy strona jest ładowana.

Zobaczmy, jak możesz pozytywnie wpłynąć na każdy z tych etapów, integrując wskazówki dotyczące zasobów.

Wskazówki dotyczące zasobów: Prefetch, Preconnect, Preload

Jak sama nazwa wskazuje, wskazówki dotyczące zasobów to wskazówki lub instrukcje, które informują przeglądarkę, jak powinna obsługiwać określone zasoby lub strony internetowe. Innymi słowy, ten zestaw instrukcji pomaga przeglądarce w ustalaniu priorytetów źródeł lub zasobów, które należy pobrać i wyrenderować.

Wszystkie wskazówki dotyczące zasobów używają atrybutu rel elementu link , który znajdziesz w nagłówku dokumentów HTML.

Zintegrowanie tych fragmentów kodu HTML ze swoją witryną pozwoli przeglądarce rozpocząć ładowanie wybranych plików wcześniej, niż gdyby przeglądarka je znalazła w normalnym toku ładowania strony.

A teraz, gdy podstawy są już za nami, przejdźmy do części, w której tu jesteś – omówienie wskazówek dotyczących zasobów, ich zalet i tego, kiedy z nich korzystać.

Pobieranie wstępne

link rel=prefetch to wskazówka dotycząca zasobów o niskim priorytecie, która umożliwia przeglądarce pobieranie zasobów, które mogą być potrzebne później i przechowywanie ich w pamięci podręcznej przeglądarki.

Ponieważ pobieranie wstępne ma bardzo niski priorytet, nie używaj tej wskazówki w przypadku plików o dużym znaczeniu .

Jednym ze świetnych przypadków użycia jest wykorzystanie pobierania wstępnego w celu skrócenia czasu ładowania kolejnych stron. Na przykład możesz zastosować dyrektywę prefetch podczas uwierzytelniania użytkownika. W ten sposób możesz wykorzystać czas potrzebny im na wprowadzenie swoich poświadczeń w celu wstępnego załadowania zasobów potrzebnych dla strony, którą zobaczą w następnej kolejności.

Przewidując kroki użytkowników w witrynie i wstępnie pobierając zasoby, możesz poprawić wskaźniki, takie jak First Contentful Paint i Time to Interactive. Coś, co zrobił Netflix i skrócił swój czas na interaktywność o 30%.

Wszystko, o czym wspomnieliśmy do tej pory, dotyczy pobierania z wyprzedzeniem, znanego również jako pobieranie z wyprzedzeniem łącza. Ale istnieją dwa inne rodzaje pobierania z wyprzedzeniem, które są równie ważne i musimy wspomnieć:

1. Wstępne pobieranie DNS
Przeglądarka musi przeprowadzić wyszukiwanie DNS, aby przekonwertować nazwę hosta (adres URL) na adres IP przed połączeniem się z hostem (serwerem pochodzenia).

Chociaż zwykle zajmuje to tylko milisekundy, jeśli witryna ładuje pliki z nazwy domeny innej firmy, co robi większość witryn, przeglądarka musi przeprowadzić wyszukiwanie DNS dla każdej domeny. Niektóre witryny (np. serwisy informacyjne) wykorzystują dużo zasobów zewnętrznych, co oznacza, że ​​na stronę mogą być wymagane dziesiątki wyszukiwań DNS.

W takich przypadkach użycie wskazówki dns-prefetch może zaoszczędzić kilka milisekund, ponieważ instrukcja nakazuje przeglądarce natychmiastowe uruchomienie tego procesu, a nie w przypadku wykrycia takiej potrzeby później w procesie ładowania.

Jak zasugerowano w Web Almanac 2021, dobrą praktyką jest połączenie dns-prefetch z podpowiedzią preconnect w celu uzyskania optymalnych wyników. Możesz zobaczyć dlaczego w sekcji, w której mówimy o preconnect .

2. Prerenderowanie
Wstępne renderowanie jest bardzo podobne do wstępnego pobierania, ponieważ optymalizuje zasoby, do których użytkownik może przejść dalej. Różnica polega na tym, że prerender faktycznie renderuje całą stronę zamiast określonych zasobów.

Wstępne połączenie

Podobnie jak dns-prefetch , dyrektywa preconnect pomaga przeglądarce nawiązać wczesne połączenia przed wysłaniem początkowego żądania do serwera.

Jednak wskazówka dotycząca połączenia wstępnego idzie o krok dalej. Chociaż wykonuje wyszukiwania DNS, obejmuje również negocjacje TLS i uzgadnianie TCP. To z kolei eliminuje opóźnienia w obie strony i oszczędza jeszcze więcej czasu.

Ale tu pojawia się pytanie:

Jeśli preconnect robi wszystko, co dns-prefetch , a powyżej, po co miałbym używać dns-prefetch ?

W większości przypadków preconnect jest preferowaną opcją do dns-prefetch , ale problem polega na tym, że preconnect nie jest obsługiwany przez niektóre przeglądarki:

Źródło: caniuse.com

Dobrą rzeczą jest to, że możesz ich używać razem, aby jak najlepiej je wykorzystać. Możesz skorzystać z preconnect w przeglądarkach, które je obsługują, korzystając z opcji dns-prefetch :

Według Google:

W 2019 roku Chrome zdołał ulepszyć swój Time To Interactive o prawie 1 s, łącząc się z ważnymi źródłami.

Wstępne ładowanie

Zanim wyjaśnimy, jak działa dyrektywa preload , musimy coś wyjaśnić.

Chociaż wstępne ładowanie jest regularnie wymieniane jako „Wskazówka dotycząca zasobów”, tak nie jest. Wstępne ładowanie jest pobieraniem deklaratywnym i jest obowiązkowe dla przeglądarek , dzięki czemu jest bardziej poleceniem niż podpowiedzią.

Biorąc to pod uwagę, wstępne ładowanie jest używane, aby zmusić przeglądarkę do pobrania zasobu wcześniej, niż przeglądarka go wykryje, ponieważ jest to kluczowe dla strony.

Dyrektywa preload działa najlepiej w przypadku zasobów, które są częścią krytycznej ścieżki renderowania, ale nie są łatwo wykrywane przez przeglądarkę. Na przykład czcionki, CSS lub krytyczny JavaScript.

Kolejną różnicą w stosunku do wskazówek dns-prefetch i preconnect jest to, że chociaż potrzebne są tylko atrybuty rel i href , wstępne ładowanie jest bardziej skomplikowane. Musisz dodać atrybut as , który wskazuje typ zawartości zasobu, który chcesz wstępnie załadować.

Według Addy Osmani, menedżera ds. inżynierii w Google, podanie atrybutu jako atrybutu podczas wstępnego ładowania jest obowiązkowe:

Oto pełna lista wartości as , które możesz określić:

Dołączenie atrybutu as pomaga przeglądarce ustawić priorytet wstępnie pobranego zasobu zgodnie z jego typem i określić, czy zasób już istnieje w pamięci podręcznej.

Zapoznaj się z dokumentem Chrome Resources Priority and Scheduling, aby dowiedzieć się więcej o ustalaniu priorytetów różnych typów zasobów.

W przypadku niektórych zasobów, takich jak czcionki, musisz również dołączyć atrybut crossorigin .

Atrybut crossorigin ustawia tryb żądania na żądanie HTTP CORS. CORS (Cross-Origin Resource Sharing) to mechanizm, który umożliwia serwerowi wskazanie dowolnego źródła innego niż własne, z którego przeglądarka powinna umożliwiać ładowanie zasobów. Nie zagłębimy się w to głębiej, ponieważ nie jest to tematem tego artykułu, ale możesz znaleźć więcej informacji tutaj.

Podobnie jak w przypadku atrybutu as, wstępne ładowanie czcionek bez crossorigin spowoduje podwójne pobranie. Oto kolejny fragment artykułu Addy Osmani na ten temat:

Więcej wskazówek dotyczących zasobów, więcej problemów

Czytając wszystko do tej pory, możesz zacząć myśleć, że użycie jak największej liczby wskazówek dotyczących zasobów spowoduje, że przeglądarki błyskawicznie załadują Twoje strony.

Niestety tak nie jest.

Oto niektóre z niepowodzeń, które należy wziąć pod uwagę podczas integrowania wskazówek dotyczących zasobów:

1. Wstępne pobieranie może zwiększyć zużycie danych

Chociaż pobieranie wstępne ustawia niski priorytet pobierania, nie oznacza to, że jest nieszkodliwe. Jego użycie może zwiększyć zużycie danych w Twojej witrynie, co może stwarzać problemy zarówno dla Ciebie (zwiększony ruch na Twoim serwerze), jak i Twoich użytkowników (niepotrzebne nadmierne zużycie zasobów). Ponadto możesz w końcu załadować dodatkowe bajty, które ostatecznie mogą nie zostać użyte. Więc zastanów się dwa razy, zanim to zintegrujesz.

2. Prerender może powodować marnowanie przepustowości

Ryzyko związane z prerenderowaniem jest nawet większe niż pobieranie z wyprzedzeniem , ponieważ pobierasz całe strony z wyprzedzeniem. Sprawia to, że wskazówka jest obciążona zasobami i może powodować marnowanie przepustowości, zwłaszcza na urządzeniach mobilnych. A najgorsze jest to, że użytkownicy mogą nawet nie zobaczyć efektu podpowiedzi, jeśli nie zażądają strony.

3. Wstępne połączenie może prowadzić do dodatkowego wykorzystania procesora

Chociaż preconnect jest wskazówką o niskim priorytecie, nadal może negatywnie wpłynąć na wydajność Twojej witryny. Jeśli nawiązane połączenie nie jest używane szybko (w ciągu 10 sekund w przeglądarce Chrome), dyrektywa preconnect dodaje tylko dodatkowe użycie procesora i zostanie automatycznie zamknięta przez przeglądarkę. Ponadto należy oszczędnie korzystać z preconnect , ponieważ rozmiar certyfikatów szyfrowania wynosi około 3 KB, co konkurowałoby z przepustowością dla innych ważnych zasobów.

4. Wstępne ładowanie zastępuje priorytety ustawione przez analizator przeglądarki

preload to potężna instrukcja, ponieważ umożliwia natychmiastowe pobranie zasobu przez przeglądarkę. Jednak nowoczesne przeglądarki internetowe całkiem dobrze radzą sobie z priorytetyzacją zasobów, więc nadmierne użycie wstępnego ładowania może prowadzić do negatywnych wyników. Na przykład, jeśli dodasz dyrektywę wstępnego ładowania pasującą do asynchronicznego adresu URL zasobu, przeglądarka pobierze go szybciej, więc przeanalizuje go szybciej, niwelując efekt atrybutu asynchronicznego, przerywając główny wątek na bardzo wczesnym etapie ładowania strony.

Podsumowanie

W tym artykule omówiliśmy wiele zagadnień, więc zróbmy krótkie podsumowanie najważniejszych punktów:

• dns-prefetch i preconnect są używane do ustalania priorytetów nazw domen (np. https://example.com).
• Wstępne pobieranie i wstępne ładowanie służą do ustalania priorytetów ładowania zasobów. Wstępne pobieranie służy do skrócenia czasu ładowania kolejnych stron, jednak wstępne ładowanie działa najlepiej w przypadku krytycznych zasobów bieżącej strony.
• prerender odwołuje się do całej strony (np. blog.html).
• prefetch , prerender i preconnect to wskazówki dotyczące zasobów, które są wykonywane zgodnie z potrzebami przeglądarki. Dyrektywa preload to polecenie, które jest obowiązkowe dla przeglądarek.
• Używając preload , nie zapomnij podać atrybutów as i crossorigin , aby uniknąć podwójnego pobierania.
• Chociaż wskazówki dotyczące zasobów są instrukcjami o niskim priorytecie, nadal stanowią zagrożenie dla wydajności witryny. Używaj ich z umiarem i tylko wtedy, gdy jest to konieczne.
• preload to potężna dyrektywa, która może przesłonić priorytety analizatora przeglądarki. Nie zapominaj, że nowoczesne przeglądarki całkiem nieźle radzą sobie z ustalaniem priorytetów zasobów, więc używaj oszczędnie „wskazówki” wstępnego ładowania.

Wykorzystaj nowo zdobytą wiedzę na temat wskazówek dotyczących zasobów, aby przyspieszyć dostarczanie treści i zasobów oraz poprawić ogólną wydajność witryny. I nie zapomnij przetestować swojej witryny w świecie rzeczywistym (skup się na danych terenowych) za każdym razem, gdy wprowadzasz zmianę.