Skip to content

optimize-script-priority.md

Latest commit

 

History

History
37 lines (25 loc) · 4.2 KB

optimize-script-priority.md

File metadata and controls

37 lines (25 loc) · 4.2 KB
Raw

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

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

Реализация

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

Пример кода

<!-- Повышаем приоритет критичной логики приложения -->
<script src="/js/app.js" async fetchpriority="high"></script>

<!-- Понижаем приоритет скриптов трекинга -->
<script src="/js/tracker.js" async fetchpriority="low"></script>

<!-- Понижаем приоритет блокирующих парсинг скриптов ради критичных изображений или CSS -->
<script src="/js/legacy-widgets.js" fetchpriority="low"></script>

Лучшие практики

  • Используйте fetchpriority="high" только для 1-2 критичных скриптов во избежание сетевых конфликтов и снижения приоритета.
  • Используйте fetchpriority="high" для async скриптов, которые важны для взаимодействия до следующей отрисовки (INP).
  • Понижайте приоритет скриптов, которые не влияют на начальный опыт пользователя, с помощью fetchpriority="low".
  • Не используйте fetchpriority для каждого скрипта; этот атрибут предназначен для изменения дефолтной эвристики браузера в случаях, когда она не является оптимальной.
  • Не используйте устаревший атрибут importance. Он был заменен fetchpriority и не поддерживается ни одним браузером.

Поддержка и страховка

Атрибут fetchpriority поддерживается всеми основными браузерами с 29.10.2024.

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