Optymalizacja wydajności dzięki wskazówkom dotyczącym zasobów

Opublikowany: 2022-03-10

Szybkie podsumowanie ↬ Wiele optymalizacji wydajności można przeprowadzić, gdy możemy przewidzieć, co użytkownicy mogą zrobić, zanim faktycznie to zrobią. Wskazówki dotyczące zasobów to prosty, ale skuteczny sposób, w jaki twórcy stron internetowych mogą pomóc przeglądarce pozostać o krok przed użytkownikiem i utrzymywać szybkie strony.

Nowoczesne przeglądarki internetowe wykorzystują różnego rodzaju techniki, aby poprawić wydajność wczytywania strony, zgadując, co użytkownik może zrobić w następnej kolejności. Przeglądarka niewiele jednak wie o naszej witrynie lub aplikacji jako całości, a najlepsze informacje na temat tego, co może zrobić użytkownik, pochodzą od nas, programisty.

Weźmy na przykład zawartość podzieloną na strony, taką jak album ze zdjęciami. Wiemy, że jeśli użytkownik ogląda zdjęcie w albumie, szansa, że kliknie link „Dalej”, aby wyświetlić w albumie następujące zdjęcie, jest dość wysoka. Przeglądarka jednak tak naprawdę nie wie, że ze wszystkich linków na stronie jest to ten, który użytkownik najchętniej kliknie. Dla przeglądarki wszystkie te linki mają taką samą wagę.

Co by było, gdyby przeglądarka w jakiś sposób wiedziała, dokąd zmierza użytkownik i mogłaby pobrać następną stronę z wyprzedzeniem, tak że po kliknięciu linku strona ładuje się znacznie, znacznie szybciej? To w zasadzie są wskazówki dotyczące zasobów. Umożliwiają programiście poinformowanie przeglądarki o tym, co może się wydarzyć w przyszłości , aby przeglądarka mogła to uwzględnić w swoich wyborach dotyczących sposobu ładowania zasobów.

Wszystkie te wskazówki dotyczące zasobów korzystają z atrybutu rel elementu <link> , który dobrze znasz w sekcji <head> dokumentów HTML. W tym artykule przyjrzymy się głównym typom wskazówek dotyczących zasobów oraz kiedy i gdzie możemy ich używać na naszych stronach. Na końcu przejdziemy od małych i subtelnych wskazówek do wielkich dział.

Więcej po skoku! Kontynuuj czytanie poniżej ↓

Wstępne pobieranie DNS

Wyszukiwanie DNS to proces przekształcania przyjaznej dla człowieka nazwy domeny, takiej jak example.com , na adres IP przyjazny dla komputera, taki jak 123.54.92.4 , który jest faktycznie potrzebny do pobrania zasobu.

Za każdym razem, gdy wpisujesz adres URL w pasku adresu przeglądarki, podążasz za linkiem na stronie, a nawet ładujesz zasób, taki jak obraz z innej domeny, przeglądarka musi wykonać wyszukiwanie DNS, aby znaleźć serwer, który przechowuje zasób, który mamy wymagany. W przypadku ruchliwej strony z dużą ilością zewnętrznych zasobów (takich jak witryna z wiadomościami z mnóstwem reklam i modułów śledzących) może być wymagane dziesiątki wyszukiwań DNS na stronę.

Przeglądarka buforuje wyniki tych wyszukiwań, ale mogą one działać wolno. Jedną z technik optymalizacji wydajności jest zmniejszenie liczby wyszukiwań DNS wymaganych przez organizowanie zasobów w mniejszej liczbie domen. Jeśli nie jest to możliwe, możesz ostrzec przeglądarkę o domenach, które będzie musiała wyszukać, korzystając ze wskazówki dotyczącej zasobów dns-prefetch .

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

Gdy przeglądarka napotka tę wskazówkę, może jak najszybciej rozpocząć rozpoznawanie nazwy domeny images.example.com , nawet jeśli nie wie jeszcze, w jaki sposób będzie używana. Pozwala to przeglądarce wyprzedzić grę i wykonywać więcej pracy równolegle, zmniejszając całkowity czas ładowania.

Kiedy powinienem używać `dns-prefetch` ?

Użyj dns-prefetch , gdy Twoja strona korzysta z zasobów z innej domeny, aby dać przeglądarce przewagę. Obsługa przeglądarek jest naprawdę świetna, ale jeśli przeglądarka jej nie obsługuje, nie dzieje się nic złego — pobieranie z wyprzedzeniem po prostu się nie dzieje.

Nie pobieraj z wyprzedzeniem żadnych domen, których nie używasz, a jeśli chcesz pobrać z wyprzedzeniem dużą liczbę domen, lepiej przyjrzyj się, dlaczego wszystkie te domeny są potrzebne i czy można coś zrobić, aby zmniejszyć ich liczbę.

Łączenie wstępne

Jednym z kroków od wstępnego pobierania DNS jest wstępne nawiązanie połączenia z serwerem. Nawiązanie połączenia z serwerem, na którym znajduje się zasób, obejmuje kilka kroków:

wyszukiwanie DNS (jak właśnie omówiliśmy);
Uzgadnianie TCP
Krótka „rozmowa” między przeglądarką a serwerem w celu nawiązania połączenia.
Negocjacja TLS w witrynach HTTPS
Sprawdza to, czy informacje o certyfikacie są ważne i poprawne dla połączenia.

Zwykle dzieje się to raz na serwer i zajmuje cenny czas — zwłaszcza jeśli serwer jest bardzo oddalony od przeglądarki, a opóźnienie sieci jest duże. (W tym przypadku globalnie dystrybuowane sieci CDN naprawdę pomagają!) W ten sam sposób, w jaki pobieranie DNS z wyprzedzeniem może pomóc przeglądarce wyprzedzić grę, zanim zobaczy, co nadchodzi, wstępne połączenie z serwerem może zapewnić, że gdy przeglądarka dotrze do części strony, na której potrzebny jest zasób, powolna praca nawiązywania połączenia już się odbyła, a linia jest otwarta i gotowa do pracy.

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

Kiedy należy korzystać `preconnect` ?

Ponownie, obsługa przeglądarek jest silna i nie zaszkodzi, jeśli przeglądarka nie obsługuje wstępnego łączenia — wynik będzie taki sam, jak wcześniej. Rozważ użycie preconnect, gdy masz pewność, że będziesz uzyskiwać dostęp do zasobu i chcesz iść dalej.

Uważaj, aby nie połączyć się wstępnie, a następnie nie używać połączenia, ponieważ spowoduje to spowolnienie działania strony i zablokowanie niewielkiej ilości zasobów na serwerze, z którym się łączysz.

Wstępne pobieranie następnej strony

Dwie wskazówki, które do tej pory omówiliśmy, dotyczą głównie zasobów na ładowanej stronie. Mogą być przydatne, aby pomóc przeglądarce wyprzedzić na przykład obrazy, skrypty lub czcionki. Kolejne kilka wskazówek dotyczy bardziej nawigacji i przewidywania, dokąd użytkownik może przejść po aktualnie ładowanej stronie.

Pierwszym z nich jest pobieranie z wyprzedzeniem, a jego tag linku może wyglądać tak:

 <link rel="prefetch" href="https://example.com/news/?page=2" as="document">

To informuje przeglądarkę, że może kontynuować i pobrać stronę w tle, aby była gotowa do pracy na żądanie. Jest tu trochę hazardu, ponieważ musisz uprzedzić, dokąd według Ciebie nawiguje użytkownik. Zrób to dobrze, a następna strona może się ładować bardzo szybko. Zrób to źle, a zmarnujesz czas i zasoby na pobranie czegoś, co nie będzie używane. Jeśli użytkownik korzysta z połączenia taryfowego, takiego jak ograniczony abonament na telefon komórkowy, w rzeczywistości możesz go kosztować prawdziwe pieniądze.

Kiedy ma miejsce pobieranie z wyprzedzeniem, przeglądarka wyszukuje DNS i nawiązuje połączenie z serwerem, które widzieliśmy w poprzednich dwóch rodzajach podpowiedzi, ale potem idzie o krok dalej i faktycznie żąda i pobiera pliki. Jednak w tym momencie zatrzymuje się, a pliki nie są analizowane ani wykonywane i nie są w żaden sposób stosowane do bieżącej strony. Są po prostu proszone i trzymane w gotowości.

Możesz myśleć o pobieraniu wstępnym jako o dodaniu pliku do pamięci podręcznej przeglądarki. Zamiast wychodzić na serwer i pobierać go, gdy użytkownik kliknie łącze, plik można wyciągnąć z pamięci i wykorzystać znacznie szybciej.

Atrybut `as`

W powyższym przykładzie widać, że ustawiamy atrybut as na as="document" . Jest to opcjonalny atrybut, który informuje przeglądarkę, że to, co pobieramy, powinno być traktowane jako dokument (tj. strona internetowa). Dzięki temu przeglądarka może ustawić ten sam rodzaj nagłówków żądań i zasad bezpieczeństwa, jak gdybyśmy właśnie kliknęli łącze do nowej strony.

Istnieje wiele możliwych wartości atrybutu as poprzez umożliwienie przeglądarce obsługi różnych typów pobierania z wyprzedzeniem.

Wartość `as`	Rodzaj zasobu
`audio`	Pliki dźwiękowe i muzyczne
`video`	Wideo
`Track`	Ścieżki wideo lub audio WebVTT
`script`	Pliki JavaScript
`style`	Arkusze stylów CSS
`font`	Czcionki internetowe
`image`	Zdjęcia
`fetch`	Żądania XHR i Fetch API
`worker`	Pracownicy sieciowi
`embed`	Multimedia `<embed>` prośby
`object`	Żądania multimediów `<object>`
`document`	strony internetowe

Różne wartości, których można użyć do określenia typów zasobów za pomocą atrybutu as .

Kiedy należy używać `prefetch` ?

Znowu prefetch ma świetną obsługę przeglądarek. Powinieneś go używać, gdy masz rozsądną pewność, że użytkownik może śledzić Twoją witrynę, jeśli uważasz, że przyspieszenie nawigacji pozytywnie wpłynie na wrażenia użytkownika. Należy to porównać z ryzykiem zmarnowania zasobów poprzez prawdopodobnie pobranie zasobu, który nie jest następnie używany.

Prerenderowanie następnej strony

W przypadku prefetch widzieliśmy, jak przeglądarka może pobierać pliki w tle gotowe do użycia, ale zauważyliśmy również, że w tym momencie nic więcej z nimi nie zrobiono. Prerenderowanie idzie o krok dalej i wykonuje pliki, wykonując prawie całą pracę wymaganą do wyświetlenia strony, z wyjątkiem faktycznego jej wyświetlania.

Może to obejmować analizowanie zasobu pod kątem dowolnych zasobów podrzędnych , takich jak pliki JavaScript i obrazy, a także ich wstępne pobieranie.

 <link rel="prerender" href="https://example.com/news/?page=2">

To naprawdę może sprawić, że następna strona ładuje się natychmiast, z taką szybkością ładowania, jaką możesz zobaczyć po naciśnięciu przycisku Wstecz w przeglądarce. Jednak tutaj ryzyko jest jeszcze większe, ponieważ nie tylko spędzasz czas na żądaniu i pobieraniu plików, ale także na ich wykonywaniu wraz z dowolnym JavaScriptem i tym podobnym. Może to spowodować zużycie pamięci i procesora (a tym samym baterii), z których użytkownik nie odczuje korzyści, jeśli w końcu nie zażąda strony.

Kiedy należy używać `prerender` ?

Wsparcie przeglądarki dla prerender jest obecnie bardzo ograniczone, a tak naprawdę tylko Chrome i stary IE (nie Edge) oferują obsługę tej opcji. Może to ograniczyć jego użyteczność, chyba że celujesz w Chrome. Znowu jest to przypadek „bez szkody, nie faul”, ponieważ użytkownik nie zobaczy korzyści, ale nie spowoduje to żadnych problemów, jeśli nie.

Umieszczanie wskazówek dotyczących zasobów

Widzieliśmy już, jak wskazówki dotyczące zasobów mogą być używane w <head> dokumentu HTML za pomocą tagu <link> . To prawdopodobnie najwygodniejszy sposób na zrobienie tego, ale możesz to samo osiągnąć za pomocą nagłówka Link: HTTP.

Na przykład, aby pobrać z wyprzedzeniem z nagłówkiem HTTP:

 Link: <https://example.com/logo.png>; rel=prefetch; as=image;

Możesz także użyć JavaScript do dynamicznego stosowania wskazówek dotyczących zasobów, być może w odpowiedzi na interakcję. Aby użyć przykładu z dokumentu specyfikacji W3C:

 var hint = document.createElement("link"); hint.rel = "prefetch"; hint.as = "document"; hint.href = "/article/part3.html"; document.head.appendChild(hint);

Otwiera to kilka interesujących możliwości, ponieważ potencjalnie łatwiej jest przewidzieć, dokąd użytkownik może przejść dalej, na podstawie tego, jak wchodzi w interakcję ze stroną.

Rzeczy do zapamiętania

Przyjrzeliśmy się czterem coraz bardziej agresywnym sposobom wstępnego ładowania zasobów, od najlżejszego rozwiązania problemu DNS po renderowanie całej strony gotowej do pracy w tle. Ważne jest, aby pamiętać, że te wskazówki są właśnie tym; podpowiadają, w jaki sposób przeglądarka może zoptymalizować wydajność . Nie są dyrektywami. Przeglądarka może uwzględnić nasze sugestie i wykorzystać swój najlepszy osąd przy podejmowaniu decyzji, jak odpowiedzieć.

Może to oznaczać, że na zajętym lub przeciążonym urządzeniu przeglądarka w ogóle nie próbuje reagować na podpowiedzi. Jeśli przeglądarka wie, że korzysta z połączenia taryfowego, może na przykład pobrać z wyprzedzeniem DNS, ale nie całe zasoby. Jeśli brakuje pamięci, przeglądarka może ponownie uznać, że nie warto pobierać następnej strony, dopóki bieżąca nie zostanie zwolniona.

W rzeczywistości w przeglądarce na komputerze prawdopodobnie wszystkie wskazówki będą przestrzegane zgodnie z sugestiami dewelopera, ale należy pamiętać, że w każdym przypadku zależy to od przeglądarki.

Znaczenie konserwacji

Jeśli pracujesz z siecią przez ponad kilka lat, wiesz, że jeśli coś na stronie jest niewidoczne, często może zostać pominięte. Dobrym tego przykładem są ukryte metadane (takie jak opisy stron). Jeśli osoby opiekujące się witryną nie mogą łatwo zobaczyć danych, mogą one łatwo zostać zaniedbane i nieaktualne.

To jest prawdziwe ryzyko w przypadku wskazówek dotyczących zasobów. Ponieważ kod jest ukryty i praktycznie niewykrywalny w użyciu, bardzo łatwo byłoby zmienić stronę, a wszelkie wskazówki dotyczące zasobów nie byłyby aktualizowane. Konsekwencją powiedzmy, że pobieranie z wyprzedzeniem strony, której nie używasz, oznacza, że narzędzia, które wdrożyłeś w celu poprawy wydajności Twojej witryny, aktywnie ją szkodzą. Tak więc posiadanie dobrych procedur w celu aktualizowania wskazówek dotyczących zasobów staje się naprawdę ważne.

Zasoby

„Specyfikacja wskazówek dotyczących zasobów”, W3C
„Przyspiesz nawigację na następnej stronie dzięki pobieraniu wstępnemu”, Addy Osmani