Poradniki Programowanie Przeglądarki internetowe

rel=”preload” – czyli jak wczytać szybciej zasoby na stronie

Pinterest LinkedIn Tumblr

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!

Od ponad 5 lat dzielę się swoją wiedzą na temat elektroniki użytkowej. Tworzę poradniki technologiczne rozwiązujące realne problemy napotykane podczas użytkowania sprzętu. Recenzuję elektronikę taką jak routery, audio, smartfony, laptopy itp.

Skomentuj