Оптимизация приоритета скриптов

Веб-функции: Приоритет загрузки

Браузеры назначают скриптам приоритеты по умолчанию в зависимости от того, где они находятся в документе и есть ли у них атрибуты async или defer. Используя fetchpriority, разработчики могут явно указать, что важные скрипты должны загружаться первыми, а второстепенные – не мешать им.

Рекомендации по внедрению

  1. Определите критически важные скрипты. Выясните, какие скрипты необходимы для работы основных функций страницы или начального взаимодействия с пользователем.
  2. Повысьте приоритет важных асинхронных скриптов. Для важных скриптов, загружаемых с помощью async или defer, добавьте атрибут fetchpriority="high", чтобы они обрабатывались в первую очередь на этапе обнаружения.
  3. Снизьте приоритет второстепенных скриптов. Для скриптов, которые не нужны сразу (например, аналитика, реклама или виджеты в нижней части страницы), добавьте fetchpriority="low" и убедитесь, что у них есть атрибут async, defer или module, чтобы избежать блокировки.
  4. Упорядочивайте скрипты, блокирующие синтаксический анализ. Используйте fetchpriority="low" для скриптов, блокирующих синтаксический анализ, в конце тела, чтобы они не конкурировали за пропускную способность с более важными ресурсами.

Пример кода

<!-- 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>

Рекомендации

  • ОБЯЗАТЕЛЬНО. Используйте fetchpriority="high" не более чем для одного-двух критически важных скриптов, чтобы избежать перегрузки сети и снижения приоритета.
  • РЕКОМЕНДУЕТСЯ использовать fetchpriority="high" для скриптов async, которые критически важны для показателя Interaction to Next Paint (INP).
  • РЕКОМЕНДУЕТСЯ снижать приоритет скриптов, которые не требуются для начального взаимодействия с пользователем, с помощью fetchpriority="low".
  • НЕ ИСПОЛЬЗУЙТЕ fetchpriority для каждого тега script. Этот атрибут нужен только для того, чтобы изменить эвристику браузера по умолчанию, если она неоптимальна.
  • НЕ ИСПОЛЬЗУЙТЕ устаревший атрибут importance. Вместо него теперь используется fetchpriority.

Резервная стратегия

Атрибут fetchpriority – это прогрессивное улучшение. Браузеры, которые не поддерживают этот атрибут, будут игнорировать его и использовать свою внутреннюю логику планирования без ошибок. Для базового использования не требуется явное определение функций или резервная логика.