Pięć wskazówek typu link rel wskazujących na szybkość pierwszego wyświetlenia treści
Użyj preconnect, preload, dns-prefetch, prefetch oraz modulepreload w nagłówku dokumentu, aby przygotować połączenia i ograniczyć zużycie zasobów, bez konieczności przepisywania aplikacji.
Źródła: 5 Types of link Tags to Optimize Frontend Performance!
Niewielka liczba starannie wybranych tagów <link> w nagłówku dokumentu może poprawić wskaźniki First Contentful Paint i Largest Contentful Paint, gdy już zastosowano inne optymalizacje. Nie zastępują one limitów liczby obrazów ani kluczowych elementów CSS; jedynie skłaniają przeglądarkę do wcześniejszego przetwarzania zapytań DNS, TLS oraz pobierania zasobów, które są istotne dla strony.
Pięć wartości atrybutu rel obejmuje najczęstsze przypadki użycia. Zwięzła demonstracja ich wszystkich wygląda następująco:
<link rel="preconnect" href="https://cdn.example.com">
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<link rel="dns-prefetch" href="https://google-analytics.com">
<link rel="prefetch" href="/js/dashboard.js" as="script">
<link rel="prefetch" href="/css/dashboard.css" as="style">
<link rel="prefetch" href="/dashboard" as="document">
<link rel="modulepreload" href="/js/app.js">
<link rel="modulepreload" href="/js/components.js">
Preconnect do ważnych domen
rel="preconnect" prosi przeglądarkę o wcześniejsze nawiązanie połączenia: wyszukiwanie w DNS, procedura TCP oraz handshake TLS dla hosta, który, jak sądzimy, zostanie szybko odwiedzony. Gdy późniejsze żądanie trafi do tego źródła w formie CDN lub API, handshake jest już zakończony, więc transfer rozpoczyna się szybciej.
Nie używaj tego często. Każde połączenie typu preconnect zajmuje zasoby sieciowe i procesor. Staraj się umieścić na stronie maksymalnie cztery takie połączenia, przeznaczone wyłącznie dla źródeł, których użycie jest prawie pewne na kluczowych ścieżkach przeglądania.
Rozpocznij pobieranie wcześniej dzięki preload
rel="preload" umieszcza określone pliki na szczycie kolejki pobierania, dzięki czemu nie blokują one dłużej procesu renderowania. Klasowym problemem są czcionki lub elementy graficzne odkrywane późno – parser znajduje je dopiero po przetworzeniu kodu CSS lub struktury strony, przez co strona pozostaje pusta do chwili ich przybycia. Deklarowanie tych plików za pomocą preload pozwala przeglądarce pobrać je natychmiast po przetworzeniu sekcji head.
Dla czcionek wymagane są zarówno as="font", jak i crossorigin. Jeśli pominiesz któryś z nich, przeglądarka może potraktować operację preload jako oddzielną prośbę od ostatecznego pobierania danych za pomocą @font-face, co skutkuje dwukrotnym pobraniem pliku. Sprawdź stronę MDN dotyczącą relacji linku preload, aby uzyskać pełny wykaz dozwolonych wartości as oraz powiązanych ograniczeń.
Sugestia dotycząca opcjonalnych źródeł za pomocą dns-prefetch
rel="dns-prefetch" jest lżejszą wersją techniki preconnect. Rozwiązuje ona jedynie nazwę hosta, pomijając pełną konfigurację TLS. Wybieraj preconnect dla CDN i API, których będziesz używać natychmiast; wybieraj dns-prefetch dla serwerów analitycznych lub drugorzędnych CDN, które mogą zostać załadowane później lub w ogóle nie. Taki podział pozwala zachować kosztowne procedury łączenia się z kluczowymi źródłami na rzecz tanich wyszukiwań nazw w pozostałych przypadkach.
Prefetch to, czego potrzebuje kolejna nawigacja
rel="prefetch" prosi przeglądarkę o pobieranie i przechowywanie zasobów w tle z niską priorytetowością. Przeglądarka i tak aktywnie cacheuje treści sama, ale funkcja prefetch jest przydatna, gdy znamy prawdopodobny następny krok użytkownika – na przykład skrypty i style strony konta po wejściu na stronę marketingową. Przedwczesne napełnienie tego cache’a sprawia, że dalsza nawigacja jest szybsza, bez konfliktu z kluczowymi elementami obecnej strony.
Zwiększ szybkość wykresów modułów ES za pomocą modulepreload
Współczesne interfejsy użytkownika są dostarczane jako moduły ES. Importowanie pliku main.js informuje jedynie przeglądarkę o tym konkretnym pliku; importy wewnętrzne, takie jak header.js czy link.js, są odkrywane dopiero po pobraniu i zinterpretowaniu odpowiedniego pliku nadrzędnego. Dlatego głębokie struktury danych przemieszczają się po sieci falami.
modulepreload przyspiesza proces odkrywania modułów, które już wiemy, że są ważne. Nie spłaszcza całej struktury – to zniweczyłoby zalety modularizacji – ale umożliwia wyraźne określenie kluczowych punktów wejścia:
<link rel="modulepreload" href="/js/app.js">
<link rel="modulepreload" href="/js/components.js">
Dzięki tym wskazówkom przeglądarka może natychmiast pobrać i przygotować pliki app.js oraz components.js, zamiast czekać, aż łańcuch importów je ujawni. Ta technika jest skromna, a nie spektakularna, ale stanowi praktyczne rozwiązanie, gdy narzędzia takie jak Lighthouse lub dane z pola testów pokazują opóźnienia w przetwarzaniu modułów.
Literatura pokrewna
- Kto powinien kontrolować behawior interfejsu? Wybór między HTML, CSS a JavaScript — Framework do decydowania, kiedy wbudowane funkcje HTML i CSS, takie jak dialogi, popovery, :has() oraz zapytania kontenerów, powinny zastąpić JavaScript, a kiedy nie.
- Stworzenie narzędzi dla rozwojowców skupionych na kliencie, które nie wymagają ślepego zaufania — KitDev Space przechowuje hashe, JWT oraz archiwa w przeglądarce, używa Bun tylko wtedy, gdy potrzebna jest obsługa funkcji natywnych lub międzyhostowych, oraz oznacza miejsce wykonywania każdego narzędzia specjalnymi znakami.