HTML5 - HTML
Priorytet ładowania <img fetchpriority, link fetchpriority, script fetchpriority>
Jak zapewnić szybsze ładowanie krytycznych zasobów (obrazków, arkuszy stylów, skryptów) osadzonych na stronie?
(interpretuje: Chrome 101)
- Obrazek:
<img src="lokalizacja" fetchpriority="priorytet">
- Zewnętrzny zasób:
<link href="lokalizacja" fetchpriority="priorytet">
- Zewnętrzny skrypt JavaScript:
<script src="lokalizacja" fetchpriority="priorytet"></script>
- lokalizacja
- Ścieżka dostępu albo adres URL wskazujące na miejsce, skąd ma zostać załadowany zewnętrzny zasób
- priorytet
- Należy wybrać jedną z następujących wartości:
- high - wskazany zasób załaduje się wcześniej względem innych tego samego rodzaju.
- low - wskazany zasób załaduje się później względem innych tego samego rodzaju.
- auto - wartość domyślna
Na stronie internetowej możemy osadzić wiele zasobów ładowanych z zewnętrznych plików - takich jak: obrazki, skrypty czy arkusze stylów. Aby przyspieszyć proces wczytywania takich elementów, mogą być one ładowane równocześnie. Przeglądarka jednak nie wie, które z nich w każdej spośród tych grup są ważniejsze, a które mniej ważne. W konsekwencji elementy kluczowe dla działania strony mogą zostać załadowane na samym końcu, przez co użytkownik będzie musiał dłużej na nie poczekać. Na szczęście w pewnym stopniu możemy sterować kolejnością ładowania zewnętrznych zasobów przy pomocy tzw. priorytetu przypisując do żądanego elementu atrybut fetchpriority="...".
Pytania i odpowiedzi <img fetchpriority, link "preload" as fetchpriority>
Co to jest fetchpriority?
Atrybut fetchpriority w HTML jest używany do określenia priorytetu pobierania zasobów, takich jak obrazki, przez przeglądarkę. Pozwala to na kontrolowanie, które zasoby powinny być ładowane z większym priorytetem w celu poprawy wydajności strony. Atrybut ten może przyjmować wartości takie jak high, low, lub auto.
Jak dodać fetchpriority="high"?
Aby dodać fetchpriority="high", należy umieścić ten atrybut w tagu <img>, <link> lub <script> dla zasobów, które mają mieć wysoki priorytet pobierania. Na przykład: <img src="image.jpg" fetchpriority="high"> lub <link rel="preload" as="style" href="style.css" fetchpriority="high">. To zapewni, że przeglądarka pobierze te zasoby z wyższym priorytetem.