Po otwarciu strony internetowej przeglądarka wysyła do serwera żądanie udostępnienia dokumentu HTML, analizuje jego zawartość i przesyła osobne żądania dotyczące wszystkich przywołanych zasobów. Jako deweloper wiesz już, jakich zasobów potrzebuje Twoja strona i które z nich są najważniejsze. Dzięki tej wiedzy możesz z wyprzedzeniem poprosić o kluczowe zasoby i przyspieszyć proces wczytywania. Z tego artykułu dowiesz się, jak to zrobić za pomocą <link rel="preload">.
Jak działa wstępny wczytywanie
Wstępne wczytywanie najlepiej nadaje się do zasobów, które przeglądarka zwykle odkrywa późno.
@font-face. Przeglądarka wczytuje plik czcionki dopiero po zakończeniu pobierania i analizowania arkusza stylów.Wstępne wczytywanie określonego zasobu jest jednoznaczne z informacją przeglądarki, że ma pobrać go szybciej, niż byłaby rozpoznawana w innym przypadku. Masz pewność, że jest on ważny w przypadku bieżącej strony.
Łańcuch żądań krytycznych przedstawia kolejność zasobów, które są priorytetowo pobierane przez przeglądarkę. Lighthouse identyfikuje zasoby na trzecim poziomie tego łańcucha jako późno wykryte. Aby określić, które zasoby wstępnie wczytać, możesz użyć audytu Wstępnie wczytywanie żądań kluczy.
Zasoby możesz wstępnie wczytać, dodając do nagłówka dokumentu HTML tag <link> z wartością rel="preload":
<link rel="preload" as="script" href="critical.js">
Przeglądarka przechowuje w pamięci podręcznej załadowane zasoby, aby były dostępne od razu, gdy zajdzie taka potrzeba. (nie uruchamia skryptów ani nie stosuje arkuszy stylów).
Wskazówki dotyczące zasobów, np. preconnect i prefetch, są wykonywane zgodnie z potrzebami przeglądarki. Z kolei preload jest wymagane w przypadku przeglądarki. Nowoczesne przeglądarki dobrze radzą sobie z przydzielaniem priorytetów zasobom, dlatego ważne jest, aby używać preload oszczędnie i wstępnie wczytywać tylko najważniejsze zasoby.
Niewykorzystane wstępnie załadowane zasoby powodują wyświetlenie ostrzeżenia w konsoli Chrome około 3 sekund po zdarzeniu load.
Przypadki użycia
Wczytywanie wstępne zasobów zdefiniowanych w CSS
Czcionki zdefiniowane za pomocą reguł @font-face lub obrazy tła zdefiniowane w plikach CSS nie są wykrywane, dopóki przeglądarka nie pobierze i nie przeanalizuje tych plików. Wstępne wczytywanie tych zasobów zapewnia, że są one pobierane przed pobraniem plików CSS.
Wstępne wczytywanie plików CSS
Jeśli stosujesz krytyczne podejście do CSS, dzielisz go na 2 części. Krytyczny kod CSS wymagany do renderowania treści widocznych na ekranie bez przewijania jest wbudowany w <head> dokumentu, a mniej istotny kod CSS jest zwykle ładowany z opóźnieniem za pomocą JavaScriptu. Oczekiwanie na wykonanie kodu JavaScript przed załadowaniem niekrytycznego kodu CSS może powodować opóźnienia w renderowaniu podczas przewijania przez użytkowników, dlatego warto użyć atrybutu <link rel="preload">, aby szybciej rozpocząć pobieranie.
Wstępne wczytywanie plików JavaScript
Przeglądarki nie uruchamiają wstępnie wczytanych plików, dlatego wstępne wczytywanie jest przydatne w odróżnieniu pobierania od wykonania, co może poprawić dane takie jak Czas do pełnej interaktywności. Wstępne wczytywanie działa najlepiej, jeśli podzielisz pakiety JavaScriptu i wstępnie wczytasz tylko najważniejsze fragmenty.
Jak zaimplementować rel=preload
Najprostszym sposobem implementacji preload jest dodanie tagu <link> do <head> dokumentu:
<head>
<link rel="preload" as="script" href="critical.js">
</head>
Podanie atrybutu as pomaga przeglądarce ustawić priorytet zasobu pobieranego z poziomu pamięci podręcznej zgodnie z jego typem, ustawić odpowiednie nagłówki i określić, czy zasób znajduje się już w pamięci podręcznej. Akceptowane wartości tego atrybutu to script, style, font, image i inne.
Niektóre typy zasobów, np. czcionki, są wczytywane w trybie anonimowym. W przypadku tych podmiotów musisz ustawić atrybut crossorigin za pomocą preload:
<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>
Elementy <link> akceptują też atrybut type, który zawiera typ MIME połączonego zasobu. Przeglądarki używają wartości atrybutu type, aby upewnić się, że zasoby są wstępnie ładowane tylko wtedy, gdy ich typ pliku jest obsługiwany. Jeśli przeglądarka nie obsługuje podanego typu zasobu, zignoruje <link rel="preload">.
Możesz też wstępnie wczytać dowolny typ zasobu za pomocą nagłówka HTTP Link:
Link: </css/style.css>; rel="preload"; as="style"
Zaletą podania wartości preload w nagłówku HTTP jest to, że przeglądarka nie musi analizować dokumentu, aby go wykryć, co w niektórych przypadkach może przynieść niewielkie ulepszenia.
Wstępne wczytywanie modułów JavaScript za pomocą pakietu internetowego
Jeśli korzystasz z pakietu modułów, który tworzy pliki kompilacji aplikacji, sprawdź, czy obsługuje on wstrzykiwanie tagów wstępnego wczytywania. W wersji webpack 4.6.0 lub nowszej wstępne wczytywanie jest obsługiwane za pomocą magicznych komentarzy w pliku import():
import(_/* webpackPreload: true */_ "CriticalChunk")
Jeśli używasz starszej wersji webpack, użyj wtyczki innej firmy, takiej jak preload-webpack-plugin.
Wpływ wstępnego ładowania na podstawowe wskaźniki internetowe
Wstępne wczytywanie to zaawansowana optymalizacja wydajności, która ma wpływ na szybkość wczytywania. Takie optymalizacje mogą spowodować zmiany w podstawowych wskaźnikach internetowych witryny, dlatego warto o nich pamiętać.
Największe wyrenderowanie treści (LCP)
Wstępne wczytywanie ma bardzo duży wpływ na największe wyrenderowanie treści (LCP), jeśli chodzi o czcionki i obrazy, ponieważ zarówno obrazy, jak i węzły tekstowe mogą być kandydatami LCP. Odpowiednio rozmieszczona podpowiedź wczytywania wstępnego i duże fragmenty tekstu renderowane za pomocą czcionek internetowych może znacznie zwiększyć szanse na korzyści. Należy ich używać, gdy tylko jest taka możliwość, aby szybciej dostarczyć użytkownikowi ważne informacje.
Należy jednak zachować ostrożność w przypadku wstępnego wczytywania i innych optymalizacji. Unikaj zwłaszcza wczytywania zbyt wielu zasobów. Jeśli priorytety mają zbyt wiele zasobów, żadne z nich nie będą miały priorytetu. Skutki nadmiernego korzystania z wskazówek dotyczących wstępnego ładowania będą szczególnie niekorzystne w przypadku wolniejszych sieci, w których konkurencja o przepustowość będzie bardziej widoczna.
Zamiast tego skup się na kilku zasobach o wysokiej wartości, które według Ciebie będą korzystać z dobrze umieszczonego wstępnego wczytania. Podczas wstępnego wczytywania czcionek upewnij się, że są one wyświetlane w formacie WOFF 2.0, aby zminimalizować czas wczytywania zasobów. Format WOFF 2.0 jest bardzo dobrze obsługiwany przez przeglądarki, więc używanie starszych formatów, takich jak WOFF 1.0 czy TrueType (TTF), opóźnia czas LCP, jeśli kandydat na LCP jest węzłem tekstowym.
W przypadku LCP i JavaScript musisz mieć pewność, że wysyłasz pełny znacznik z serwera, aby skaner wstępnego ładowania przeglądarki działał prawidłowo. Jeśli wyświetlasz treści, które do renderowania znaczników korzystają wyłącznie z JavaScriptu i nie możesz wysyłać kodu HTML renderowanego na serwerze, warto skorzystać z możliwości, których nie obsługuje skaner wstępnego wczytywania przeglądarki, i wstępnie wczytać zasoby, które w innej sytuacji byłyby dostępne dopiero po zakończeniu wczytywania i wykonywywania kodu JavaScriptu.
Skumulowane przesunięcie układu (CLS)
Skumulowane przesunięcie układu (CLS) jest szczególnie ważnym wskaźnikiem w przypadku czcionek internetowych, a CLS w znacznym stopniu współdziała z czcionkami internetowymi, które używają właściwości CSS font-display do zarządzania sposobem wczytywania czcionek. Aby zminimalizować zmiany układu związane z czcionką internetową, zastosuj te strategie:
- Wstępnie wczytaj czcionki, używając domyślnej wartości
blockdlafont-display. To jest delikatna równowaga. Blokowanie wyświetlania czcionek bez stosowania kreacji zastępczych może być uznane za problem związany z wrażeniami użytkownika. Z jednej strony ładowanie czcionek za pomocą funkcjifont-display: block;eliminuje przesunięcia związane z czcionkami internetowymi. Z drugiej strony, jeśli czcionki internetowe są kluczowe dla wygody użytkowników, warto, aby były wczytane jak najszybciej. Połączenie wstępnego wczytania zfont-display: block;może być akceptowalnym kompromisem. - Wstępnie wczytaj czcionki, używając wartości
fallbackdla atrybutufont-display.fallbackto kompromis międzyswapablock, ponieważ ma bardzo krótki okres blokowania. - Użyj wartości
optionaldla atrybutufont-displaybez wstępnego wczytania. Jeśli czcionka internetowa nie jest kluczowa dla wygody użytkowników, ale jest używana do renderowania znacznej ilości tekstu na stronie, rozważ użycie wartościoptional. W niesprzyjających warunkachoptionalwyświetli tekst strony w czcionce zastępczej, a w tle będzie wczytywać czcionkę na potrzeby następnej nawigacji. W takich warunkach efektem netto jest lepszy wskaźnik CLS, ponieważ czcionki systemowe będą renderowane natychmiast, a przy kolejnych wczytywaniach strony czcionka będzie wczytywana natychmiast bez zmian układu.
W przypadku czcionek internetowych CLS jest trudnym do optymalizacji wskaźnikiem. Jak zawsze, eksperymentuj w laboratorium, ale zaufaj danym zdobytym, aby ustalić, czy strategie wczytywania czcionek poprawiają CLS, czy je pogarszają.
Interakcja do kolejnego wyrenderowania (INP)
Czas od interakcji do kolejnego wyrenderowania to dane, które wskazują, jak szybko strona reaguje na dane wprowadzane przez użytkownika. Ponieważ największy udział w interaktywności stron internetowych jest sterowany kodem JavaScript, wstępne wczytywanie kodu JavaScript, który jest podstawą ważnych interakcji, może pomóc w utrzymaniu niższego wskaźnika INP strony. Pamiętaj jednak, że wstępne wczytywanie zbyt dużej ilości kodu JavaScript podczas uruchamiania może mieć niezamierzone negatywne konsekwencje, jeśli zbyt wiele zasobów będzie rywalizować o przepustowość.
Zwróć też uwagę na sposób podziału kodu. Dzielenie kodu to świetna optymalizacja, która pozwala zmniejszyć ilość wczytywanego podczas uruchamiania kodu JavaScript, ale interakcje mogą być opóźnione, jeśli polegają na kodzie JavaScript wczytywanym na początku interakcji. Aby to zrekompensować, musisz zbadać intencje użytkownika i wstrzyknąć wstępne załadowanie niezbędnych fragmentów kodu JavaScript, zanim dojdzie do interakcji. Przykładem może być wstępne wczytanie kodu JavaScript wymaganego do weryfikacji zawartości formularza, gdy użytkownik kliknie dowolne pole formularza.
Podsumowanie
Aby przyspieszyć wczytywanie, wczytuj wstępnie ważne zasoby, które przeglądarka wykryje z opóźnieniem. Wczytywanie wszystkiego z zapasu nie przyniesie oczekiwanych rezultatów, dlatego używaj preload oszczędnie i mierz wpływ w rzeczywistych warunkach.