Przejdź do treści

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?

  • 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.

Przeglądarki

  🟧 Działa krócej niż rok   🟡 Działa krócej niż 2,5 roku

Chrome
Firefox
Edge
Opera
Safari		Poziom wsparcia
min. 2,5 roku
<link fetchpriority>101
2022-04-26		🟧 132
2024-10-29		101
2022-04-28		87
2022-05-17		🟡 17.2
2023-12-11		 60%
<script fetchpriority>101
2022-04-26		🟧 132
2024-10-29		101
2022-04-28		87
2022-05-17		🟡 17.2
2023-12-11		 60%

Komentarze #

  • Comandeer
    Comandeer

    16.02.2022 13:52
    Tak, ale to jest by design.
    Zobacz więcej

  • Gość
    Gość

    16.02.2022 13:29
    Nie działa atrybut autoplay
    Zobacz więcej

  • UszatySiemanko
    UszatySiemanko

    15.11.2021 11:13
    * poradnik dzięki 8) 8) 8) 8) 8) 8)
    Zobacz więcej

  • kiszuriwalilibori
    kiszuriwalilibori

    04.01.2018 19:57
    Czy tylko u mnie (firefox) Datalist działa w dziwny sposób? Nie wyświetla listy wyboru po wejściu, ale dopiero po wpisaniu znaku, i to nie każdego ale pierwszego, który jest zawarty w polach opcji. A jak nie ma tego znaku to nic nie wyświetla. I nie musi to być pierwszy znak, tylko jakikolwiek...
    Zobacz więcej

  • Michalski Bydgoszcz
    Michalski Bydgoszcz

    27.03.2017 15:36
    Aha dzięki pomogłeś, a z tym progress bar sobie podaruję wymyśle coś innego
    Zobacz więcej

  • Comandeer
    Comandeer

    27.03.2017 15:33
    Tylko w JS.
    Zobacz więcej

  • Michalski Bydgoszcz
    Michalski Bydgoszcz

    27.03.2017 15:32
    Aha dzięki ogarnąłem jeszcze musze ogarnąć to z <progress> czy jest to możliwe tylko w js czy może także w tym ulepszonym html5 ?
    Zobacz więcej

  • Michalski Bydgoszcz
    Michalski Bydgoszcz

    27.03.2017 15:28
    Więc czy muszę wpisać jakich kodeków używa plik lub/czy wystarczy podać format plików???
    Zobacz więcej

  • Comandeer
    Comandeer

    27.03.2017 15:24
    Tam, gdzie będzie iframe, tam będzie odtwarzacz z YT.
    Zobacz więcej

  • Michalski Bydgoszcz
    Michalski Bydgoszcz

    27.03.2017 15:23
    Dzięki musiałem coś przeoczyć w samouczku html 5 bo pierwszy raz spotykam się z i frame a może używałem jej poprostu do czego innego i nie pojąłem tego iż można to wykożystać w taki sposób.
    Jeśli dobrze pamiętam to wg. Twojego przykładu <i frame ustawia miejsce znajdowania się miniatury video...
    Zobacz więcej

Zobacz więcej komentarzy

Facebook