Optymalizacja priorytetu skryptu

Funkcje internetowe: Priorytet pobierania

Przeglądarki przypisują skryptom domyślne priorytety na podstawie ich miejsca w dokumencie oraz tego, czy mają atrybuty takie jak async lub defer. Użycie komponentu fetchpriority daje deweloperom pełną kontrolę nad tym, aby najważniejsze skrypty wczytywały się jako pierwsze, a mniej istotne nie przeszkadzały.

Jak to zrobić?

  1. Zidentyfikuj skrypty o kluczowym znaczeniu: określ, które skrypty są niezbędne do działania głównej funkcjonalności strony lub do początkowej interakcji użytkownika.
  2. Zwiększanie priorytetu krytycznych skryptów asynchronicznych: w przypadku krytycznych skryptów wczytywanych za pomocą async lub defer dodaj atrybut fetchpriority="high", aby zapewnić im priorytet podczas fazy wykrywania.
  3. Zmniejsz priorytet nieistotnych skryptów: w przypadku skryptów, które nie są potrzebne od razu (np. analityka, reklamy lub widżety w części strony widocznej po przewinięciu), dodaj fetchpriority="low" i upewnij się, że mają atrybut async, defer lub module, aby uniknąć blokowania.
  4. Uporządkuj skrypty blokujące parser: użyj fetchpriority="low" w skryptach blokujących parser na końcu treści, aby zapobiec ich konkurowaniu o przepustowość z bardziej krytycznymi zasobami.

Przykładowy kod

<!-- Elevate the priority of the critical app logic -->
<script src="/js/app.js" async fetchpriority="high"></script>

<!-- Deprioritize non-essential tracking scripts -->
<script src="/js/tracker.js" async fetchpriority="low"></script>

<!-- Deprioritize late-body scripts to favor critical images or CSS -->
<script src="/js/legacy-widgets.js" fetchpriority="low"></script>

Sprawdzone metody

  • OBOWIĄZKOWO: używaj fetchpriority="high" tylko w przypadku maksymalnie 1–2 krytycznych skryptów, aby uniknąć rywalizacji o zasoby sieciowe i osłabienia priorytetu.
  • UŻYWAJ fetchpriority="high" specjalnie do skryptów async, które są kluczowe dla interakcji do kolejnego wyrenderowania (INP).
  • ZMNIEJSZ priorytet skryptów, które nie są wymagane do początkowego wyświetlenia strony, za pomocą fetchpriority="low".
  • NIE używaj atrybutu fetchpriority w każdym tagu skryptu. Powinien on być używany tylko do zmiany domyślnej heurystyki przeglądarki, gdy wiadomo, że jest ona nieoptymalna.
  • NIE używaj wycofanego atrybutu importance. Został on zastąpiony przez fetchpriority.

Strategia zastępcza

Atrybut fetchpriority to progresywne ulepszanie. Przeglądarki, które nie obsługują tego atrybutu, zignorują go i będą używać wewnętrznej logiki planowania bez błędów. W przypadku podstawowego użycia nie jest wymagane jawne wykrywanie funkcji ani logika kreacji zastępczej.