Gdy otwierasz stronę internetową, przeglądarka wysyła żądanie dokumentu HTML z serwera, analizuje jego zawartość i przesyła osobne żądania dotyczące wszystkich zasobów, do których się odwołuje. 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 oznacza, że chcesz pobrać go wcześniej, niż przeglądarka mogłaby go wykryć, ponieważ wiesz, że jest on ważny dla bieżącej strony.
Łańcuch żądań krytycznych przedstawia kolejność zasobów, które są pobierane przez przeglądarkę z uwzględnieniem priorytetów. 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 według uznania 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ępnie 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 używasz krytycznego kodu CSS, podziel kod CSS na dwie 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ą JavaScript. 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
Ponieważ przeglądarki nie wykonują wstępnie załadowanych plików, wstępny odczyt jest przydatny do oddzielenia pobierania od wykonania, co może poprawić wskaźniki takie jak Czas do interakcji. 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 atrybutów musisz ustawić atrybut crossorigin na preload:
<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>
Elementy <link> obsługują też atrybut type, który zawiera typ MIME powiązanego zasobu. Przeglądarki używają wartości atrybutu type, aby upewnić się, że zasoby są wstępnie wczytywane tylko wtedy, gdy ich typ pliku jest obsługiwany. Jeśli przeglądarka nie obsługuje określonego typu zasobu, zignoruje parametr <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ą webpack
Jeśli używasz narzędzia do tworzenia pakietów modułów, które tworzy pliki kompilacji aplikacji, sprawdź, czy obsługuje ono 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 skuteczna optymalizacja wydajności, która wpływa na szybkość wczytywania. Takie optymalizacje mogą powodować zmiany w podstawowych wskaźnikach internetowych witryny. Warto o tym pamiętać.
Największe wyrenderowanie treści (LCP)
Wstępne wczytywanie ma duży wpływ na największe wyrenderowanie treści (LCP) w przypadku czcionek i obrazów, ponieważ zarówno obrazy, jak i węzły tekstowe mogą być kandydatami na LCP. Obrazy w centrum uwagi i duże fragmenty tekstu renderowane za pomocą czcionek internetowych mogą znacznie skorzystać z dobrze umieszczonego podpowiedzi wstępnego wczytania. Należy go wykorzystać, gdy istnieje możliwość szybszego dostarczenia tych ważnych treści użytkownikowi.
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 wczytywania będą szczególnie niekorzystne w przypadku wolniejszych sieci, w których rywalizacja 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)
Kumulowana zmiana układu (CLS) to szczególnie ważny wskaźnik w przypadku czcionek internetowych. CLS ma duży wpływ na czcionki internetowe, które do zarządzania wczytywaniem czcionek używają właściwości font-display CSS. 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. Zablokowanie wyświetlania czcionek bez alternatywy może być uznane za problem związany z wygodą użytkowników. Z jednej strony wczytywanie czcionek za pomocąfont-display: block;eliminuje przesunięcia układu 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 przypadku tych warunków efektem netto jest lepszy wskaźnik CLS, ponieważ czcionki systemowe będą renderowane natychmiast, a przy kolejnych wczytaniach 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 z pola, aby określić, czy Twoje strategie ładowania czcionek poprawiają czy pogarszają CLS.
Interakcja do kolejnego wyrenderowania (INP)
Czas od interakcji do kolejnego wyrenderowania to dane, które mierzą responsywność na dane wprowadzane przez użytkownika. Większość interakcji w internecie jest obsługiwana przez JavaScript, więc wstępne wczytywanie kodu JavaScript, który obsługuje ważne interakcje, może pomóc w utrzymaniu niższego 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ść.
Uważnie rozważ też sposób dzielenia 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 sprawdzić intencję użytkownika i przed rozpoczęciem interakcji wstrzyknąć do pamięci podręcznej niezbędne fragmenty kodu JavaScript. Przykładem może być wstępne wczytanie kodu JavaScript wymaganego do sprawdzania zawartości formularza, gdy użytkownik kliknie dowolne pole formularza.
Podsumowanie
Aby zwiększyć szybkość strony, przeładuj ważne zasoby, które są wykrywane przez przeglądarkę późno. Wczytywanie wszystkiego z zapasu nie przyniesie oczekiwanych rezultatów, dlatego używaj preload oszczędnie i mierz wpływ na podstawie rzeczywistych danych.