HTML5 - HTML
Wstępne ładowanie <link "preload" as>
W jaki sposób przyspieszyć ładowanie zewnętrznych zasobów (plików): zdjęć, filmów wideo, dźwięku audio, arkuszy stylów CSS, czcionek, skryptów?
<link rel="preload" as="rodzaj" type="typ" href="lokalizacja">
- rodzaj
- W zależności od języka, w którym wybrane zasoby zewnętrzne są używane, można podać następujące wartości:
- typ
- Odpowiedni typ MIME
- lokalizacja
- Ścieżka dostępu albo adres URL wskazujące na miejsce, skąd ma zostać załadowany zewnętrzny zasób
Domyślnie przeglądarki internetowe wczytują zasoby z zewnętrznych plików dopiero w momencie, kiedy ich znacznik pojawi się w kodzie źródłowym HTML strony. Oznacza to, że jeśli na samym dole strony znajduje się np. jakiś duży obrazek, może on nie zdążyć się załadować do momentu, kiedy użytkownik przewinie do niego okno przeglądarki. Język HTML5 wprowadził specjalny mechanizm, dzięki któremu można przyspieszyć wczytywanie zewnętrznych elementów potrzebnych do wyświetlenia strony poprzez załadowane ich z wyprzedzeniem, zanim przeglądarka faktycznie będzie ich potrzebować. W tym celu w nagłówku strony wystarczy wstawić znacznik LINK z odpowiednimi atrybutami rel="preload" i as="...".
Przykład <link "preload" as>
Ten obrazek zostanie załadowany z wyprzedzeniem, zanim będzie już potrzebny:
<head> <link rel="preload" as="image" type="image/jpeg" href="obrazek.jpg"> </head>
Pytania i odpowiedzi <link "preload" as>
Do czego służy wstępne ładowanie?
Wstępne ładowanie służy do przygotowania zasobów przed ich rzeczywistym użyciem, co pozwala na płynniejsze działanie aplikacji. Działa to poprzez wczytywanie zasobów, takich jak skrypty lub style, z wyprzedzeniem, aby były one dostępne, gdy będą potrzebne. Na przykład, aby wstępnie załadować skrypt, można użyć <link rel="preload" href="script.js" as="script">. Stosuje się je, gdy zasoby są kluczowe dla wydajności lub w czasie, gdy nie są jeszcze bezpośrednio używane, ale będą potrzebne wkrótce.
Jak działa wstępne ładowanie?
Wstępne ładowanie działa poprzez wczytywanie zasobów, takich jak pliki CSS, JavaScript lub obrazy, zanim zostaną one potrzebne przez stronę. Używa się do tego tagu <link rel="preload" href="resource.css" as="style"> lub innych mechanizmów, aby przeglądarka mogła załadować zasoby w tle, co zmniejsza czas ładowania strony, gdy zasoby stają się aktywne. Pozwala to na uniknięcie opóźnień w ładowaniu strony, poprawiając doświadczenie użytkownika.
Kiedy stosować wstępne ładowanie?
Wstępne ładowanie stosuje się, gdy chcemy poprawić wydajność aplikacji, zwłaszcza gdy wiemy, że dany zasób będzie potrzebny w niedalekiej przyszłości. Przykładowo, jeśli mamy stronę, która wymaga ciężkiego skryptu do działania, można użyć <link rel="preload" href="heavy-script.js" as="script"> w sekcji <head>, aby skrypt był gotowy, gdy będzie potrzebny. Wstępne ładowanie jest przydatne do zasobów krytycznych, które mogą wpłynąć na funkcjonalność lub wygląd strony.