W ostatnim czasie w jednym projekcie miałem za zadanie usprawnić działanie strony. Musiałem poprawić metryki Core Web Vitals. Wiązało się to ze sporym rozeznaniem w temacie, testami i analizą strony. Jedną z rzeczy, która pomogła osiągnąć ten sukces był tytułowy rel="preload".
Jak działa rel="preload"?
Zanim przejdziemy do szczegółów, to dowiedzmy się jak na prawdę działa ten atrybut, bo programiści mają problem ze zrozumiem tego.
Wartość wstępnego ładowania (ang. preload) atrybutu rel w elemencie <link> umożliwia zadeklarowanie konkretnych zasobów naszej które będą potrzebne do wyświetlenia (ang. render) naszej strony. Dzięki temu są one dostępne nieco wcześniej i rzadziej blokują renderowanie strony, a to pozytywniej wpływa na wydajność. Mimo, że nazwa zawiera ładowanie (ang. load), to nic nie jest ładowanie i wykonywane przez przeglądarkę. To co dzieje się na prawdę, to planowanie pobierania i buforowania z wyższym priorytetem.
W praktyce należy samemu wybrać odpowiednie pliki do szybszego załadowania. Nie tutaj ogólnej zasady.
Klasyczne użycie elementu <link> wygląda następująco:
<link rel="stylesheet" href="main.css" />
Teraz zamienimy powyższy kawałek kodu w taki sposób, by używał rel="preload". Aby wykorzystać maksymalnie jego możliwości musimy dodatkowo zdefiniować następujące atrybuty:
- Ścieżkę do zasobu za pomocą atrybutu
href. - Typ zasobu za pomocą atrybutu
as.
W praktyce będzie to wyglądało tak:
<link rel="preload" href="style.css" as="style" /> <link rel="preload" href="main.js" as="script" />
Myślę, że powyższy kod jest w miarę czytelny i zrozumiały. Pliki style.css i main.js będziemy ładować szybciej odpowiednio jako arkusz stylów oraz skrypt.
preload ma również inne zalety. Użycie as w celu określenia rodzaju treści, które mają być wstępnie załadowane, pozwala przeglądarce:
- Dokładniej ustalić priorytety ładowania zasobów.
- Przechowywać w pamięci podręcznej dany zasób w razie przyszłych żądań.
- Zastosować odpowiednią politykę bezpieczeństwa treści (ang. Content Security Policy) dla zasobu.
- Ustawić dla niego prawidłowe nagłówki żądania
Accept.
Jak widzimy powyżej, im bardziej opiszemy zasób, by szybciej przeglądarka go przetworzy i wykorzysta.
Jaki typy plików mogą być wcześniej ładowanie (ang. preloaded)?
audio: Pliki z muzyką, których normalnie użyjesz w elemencie<audio>.document: Dokument HTML który może zostać osadzony w<frame>lub<iframe>.embed: Zasób do osadzenia w elemencie<embed>.fetch: Zasób, do którego można uzyskać dostęp za pomocąfetce, np. plik JSON.font: Plik z czcionką.image: Obrazek.object: Zasób do osadzenia w elemencie<object>.script: Plik JavaScript.style: Arkusz stylów CSS.track: Plik WebVTT.worker: Plik JavaScript z web workerem lub shared workered.video: Plik wideo, który będzie osadzony w<video>.
Ile można przyspieszyć stronę dodać odpowiednie rel="preload"?
To jest bardzo dobre, a zarazem trudne, pytanie. Wszystko zależy od wielkości projektów i jego złożoności. Bazując na swoim doświadczeniu i projektach jakie realizowałem, to śmiało mogę podać, że można przyspieszyć stronę od 100 ms do nawet 2 sekund!
