Wstępnie wczytuj najważniejsze zasoby, aby przyspieszyć wczytywanie

Houssein Djirdeh
Jeremy Wagner
Milica Mihajlija

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 programista znasz już wszystkie zasoby potrzebne dla strony oraz to, które z nich są najważniejsze. Możesz wykorzystać tę wiedzę, aby z wyprzedzeniem poprosić o kluczowe zasoby i przyspieszyć proces wczytywania. Z tego posta dowiesz się, jak to zrobić dzięki <link rel="preload">.

Jak działa wstępne wczytywanie

Wstępne wczytywanie najlepiej sprawdza się w przypadku zasobów zwykle wykrywanych z opóźnieniem przez przeglądarkę.

Zrzut ekranu przedstawiający panel Sieć w Narzędziach deweloperskich w Chrome.
W tym przykładzie czcionka Pacifico jest zdefiniowana w arkuszu stylów za pomocą reguły @font-face. Przeglądarka wczytuje plik czcionki dopiero po zakończeniu pobierania i analizy 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.

Zrzut ekranu przedstawiający panel Sieć w Narzędziach deweloperskich w Chrome po zastosowaniu wstępnego wczytywania.
W tym przykładzie czcionka Pacifico jest wstępnie wczytywana, więc pobieranie przebiega równolegle z arkuszem stylów.

Krytyczny łańcuch żądań reprezentuje kolejność zasobów, które są traktowane priorytetowo i pobierane przez przeglądarkę. Lighthouse identyfikuje komponenty na trzecim poziomie łańcucha jako takie, które zostały wykryte późno. Aby określić zasoby do wstępnego wczytania, możesz użyć kontroli Wstępne wczytywanie kluczowych żądań.

Audyt żądań kluczy wstępnego wczytywania w Lighthouse.

Aby wstępnie wczytywać zasoby, dodaj tag <link> z atrybutem rel="preload" w nagłówku dokumentu HTML:

<link rel="preload" as="script" href="critical.js">

Przeglądarka zapisuje w pamięci podręcznej wstępnie załadowane zasoby, dzięki czemu są one dostępne od razu, gdy są potrzebne. (nie wykonuje 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 dokument preload jest wymagany przez przeglądarkę. Współczesne przeglądarki całkiem dobrze radzą sobie z priorytetowym traktowaniem zasobów, dlatego używaj usługi preload oszczędnie i wczytuj wcześniej tylko najbardziej kluczowe zasoby.

Nieużywane wstępne załadowania powodują wyświetlenie w Chrome ostrzeżenia w Konsoli Play, około 3 sekundy po zdarzeniu load.

Ostrzeżenie w konsoli Narzędzi deweloperskich w Chrome dotyczące nieużywanych wstępnie wczytanych zasobów.

Przykłady zastosowań

Wstępne wczytywanie zasobów zdefiniowanych w CSS

Czcionki zdefiniowane za pomocą reguł @font-face lub obrazy tła zdefiniowane w plikach CSS są wykrywane dopiero po pobraniu i przeanalizowaniu tych plików przez przeglądarkę. Wstępne wczytywanie tych zasobów daje pewność, że zostaną pobrane jeszcze 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. Kluczowy kod CSS wymagany do wyrenderowania części strony widocznej na ekranie jest wbudowany w <head> dokumentu, a niekrytyczny kod CSS jest zwykle leniwy ładowany przez kod JavaScript. Oczekiwanie na wykonanie kodu JavaScript przed wczytaniem niekrytycznego kodu CSS może spowodować opóźnienia w renderowaniu, gdy użytkownicy przewijają. Dlatego warto wcześniej użyć funkcji <link rel="preload">, by rozpocząć pobieranie.

Wstępne wczytywanie plików JavaScript

Przeglądarki nie uruchamiają wstępnie wczytywanych 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, gdy podzielisz pakiety JavaScript i wczytujesz wstępnie tylko te fragmenty o znaczeniu krytycznym.

Jak zaimplementować atrybut 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 wstępnie pobranego zasobu zgodnie z jego typem, ustawić odpowiednie nagłówki i ustalić, czy zasób istnieje już w pamięci podręcznej. Akceptowane wartości tego atrybutu to script, style, font, image i inne.

Niektóre typy zasobów, na przykład czcionki, są ładowane 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 korzystają z wartości atrybutu type, aby mieć pewność, że zasoby zostaną wstępnie wczytane 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 wczytywać dowolne zasoby za pomocą nagłówka HTTP Link:

Link: </css/style.css>; rel="preload"; as="style"

Zaletą określenia 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 korzyści.

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 przypadku pakietu webpack w wersji 4.6.0 lub nowszej obsługiwane jest wstępne ładowanie za pomocą magicznych komentarzy wewnątrz import():

import(_/* webpackPreload: true */_ "CriticalChunk")

Jeśli używasz starszej wersji pakietu internetowego, użyj wtyczki innej firmy, na przykład preload-webpack-plugin.

Wpływ wstępnego wczytywania 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 poprawić skuteczność, dlatego należy ich używać, gdy tylko jest taka możliwość, aby szybciej dostarczyć użytkownikowi ważne informacje.

Musisz jednak zachować ostrożność podczas wstępnego wczytywania i innych optymalizacji. W szczególności unikaj wstępnego wczytywania zbyt wielu zasobów. Jeśli priorytety mają zbyt wiele zasobów, w rzeczywistości żaden z nich nie jest. Efekty nadmiernego wstępnego wczytywania będą szczególnie szkodliwe w przypadku wolniejszych sieci, w których rywalizacja o przepustowość jest bardziej zauważalna.

Zamiast tego skoncentruj się na kilku wartościowych zasobach, które mogą okazać się przydatne dzięki dobrze rozmieszczonemu wstępnemu załadowaniu. Podczas wstępnego wczytywania czcionek pamiętaj, aby używać ich w formacie WOFF 2.0, aby maksymalnie skrócić czas wczytywania zasobów. Ponieważ WOFF 2.0 doskonale obsługuje przeglądarki, używanie starszych formatów, takich jak WOFF 1.0 czy TrueType (TTF), opóźni LCP, jeśli kandydat LCP jest węzłem tekstowym.

W przypadku LCP i JavaScriptu warto upewnić się, że wysyłasz pełne znaczniki z serwera, by skaner wstępnego wczytywania przeglądarki działał prawidłowo. Jeśli wyświetlasz znaczniki w całości oparte na języku JavaScript i nie możesz wysyłać kodu HTML renderowanego przez serwer, warto zajrzeć w miejsce, w którym skaner wstępnego wczytywania nie może tego zrobić. W przeciwnym razie napotkasz zasoby, które w innym przypadku byłyby wykrywalne dopiero po zakończeniu wczytywania i wykonania JavaScriptu.

Skumulowane przesunięcie układu (CLS)

Skumulowane przesunięcie układu (CLS) jest szczególnie ważnym wskaźnikiem w przypadku czcionek internetowych. 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ć wahania układu związane z czcionkami internetowymi, weź pod uwagę te strategie:

  1. Wstępnie wczytuj czcionki, używając domyślnej wartości block dla tekstu font-display. To delikatna równowaga. Blokowanie wyświetlania czcionek bez funkcji zastępczej może być uznawane za problem związany z wrażeniami użytkownika. Z jednej strony wczytywanie czcionek za pomocą funkcji font-display: block; eliminuje przesunięcia związane z czcionkami internetowymi. Z drugiej strony chcesz, aby te czcionki internetowe wczytywały się jak najszybciej, jeśli są istotne dla wygody użytkowników. Dobrym rozwiązaniem może być połączenie wstępnego wczytywania z funkcją font-display: block;.
  2. Wstępnie wczytuj czcionki, używając wartości fallback dla atrybutu font-display. fallback to kompromis między swap a block, ponieważ ma bardzo krótki okres blokowania.
  3. W przypadku font-display bez wstępnego wczytywania użyj wartości optional. Jeśli czcionka internetowa nie ma znaczenia dla wygody użytkowników, ale jest wykorzystywana do renderowania znacznej części tekstu na stronie, rozważ użycie wartości optional. W nieodpowiednich warunkach optional będzie wyświetlać tekst na stronie przy użyciu czcionki zastępczej, a jednocześnie wczytywać czcionkę w tle, aby umożliwić nawigację podczas następnej nawigacji. Efektem netto w tych warunkach jest ulepszony CLS, ponieważ czcionki systemowe będą renderowane natychmiast, a kolejne wczytania strony będą wczytywały czcionkę od razu bez przesunięć układu.

CLS jest trudnym wskaźnikiem do optymalizacji w przypadku czcionek internetowych. Jak zawsze, eksperymentuj w laboratorium, ale zaufaj danym zdobytym, aby ustalić, czy strategie wczytywania czcionek poprawiają CLS, czy je pogarszają.

Od interakcji do kolejnego wyrenderowania (INP)

Interakcja przed kolejnym wyrenderowaniem to wartość, która określa czas reakcji na dane wejściowe użytkownika. Ponieważ największy udział w interaktywności w internecie 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 znakomita optymalizacja, która zmniejsza ilość kodu JavaScript ładowanego podczas uruchamiania, ale interakcje mogą być opóźnione, jeśli JavaScript jest wczytywany już na początku. 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 wczytywanie kodu JavaScript wymaganego do weryfikacji treści formularza, gdy dowolne z pól w formularzu jest zaznaczone.

Podsumowanie

Aby przyspieszyć wczytywanie, wczytuj wstępnie ważne zasoby, które przeglądarka wykryje z opóźnieniem. Wstępne wczytanie wszystkich informacji przyniesie efekt przeciwny do zamierzonego, dlatego używaj funkcji preload oszczędnie i zmierz jej wpływ w świecie rzeczywistym.