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

Веб-функции: Приоритет загрузки <link rel="preload">

Предварительная загрузка ресурсов с помощью <link rel="preload"> сообщает браузеру, что ресурс скоро понадобится. Однако предварительно загруженные ресурсы наследуют приоритет по умолчанию для своего типа. Для изображений он низкий. Используя fetchpriority, вы можете уточнить этот относительный приоритет, в частности, обеспечив предварительную загрузку изображений с высоким приоритетом, что позволит им запускаться раньше и использовать больше ресурсов пропускной способности.

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

  1. Определите, какие ресурсы нужно загружать заранее. Найдите ресурсы, которые браузер не обнаруживает на раннем этапе (например, заставки видео или фоновые изображения в CSS), но которые важны для внешнего вида страницы.
  2. Повысьте приоритет предзагрузки важных изображений. Для изображения LCP или других важных изображений, которым по умолчанию не присвоен приоритет, используйте <link rel="preload" fetchpriority="high">, чтобы они загружались раньше других. Обратите внимание, что шрифты по умолчанию имеют высокий приоритет.
  3. Снизьте приоритет некритичных предзагрузок. Для ресурсов, которые не являются критичными для начального рендеринга (например, фоновое видео или второстепенные шрифты), используйте <link rel="preload" fetchpriority="low">.
  4. Учитывайте типы ресурсов. Обратите внимание, что у разных типов as по умолчанию разные приоритеты. При необходимости используйте fetchpriority, чтобы переопределить эти значения.

Пример кода

<!-- Elevate priority for a video poster image that acts as the LCP candidate -->
<link rel="preload" href="/images/video-poster.jpg" as="image" fetchpriority="high">

<!-- Elevate priority for a critical LCP image that is hidden in CSS -->
<link rel="preload" href="/images/hero-background.jpg" as="image" fetchpriority="high">

<!-- Deprioritize a secondary font to avoid network contention -->
<link rel="preload" href="/fonts/secondary-font.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin>

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

  • ОБЯЗАТЕЛЬНО. Используйте fetchpriority="high" не более чем для 1–2 критически важных предварительных загрузок изображений, чтобы избежать перегрузки сети и снижения приоритета.
  • ОБЯЗАТЕЛЬНО. Используйте fetchpriority="high" для изображений, которые относятся к Largest Contentful Paint (LCP).
  • РЕКОМЕНДУЕТСЯ. Ограничьте общее количество предварительно загружаемых элементов на странице до двух изображений и двух-трех основных шрифтов, чтобы не перегружать пропускную способность.
  • РЕКОМЕНДУЕТСЯ использовать fetchpriority="low" для предварительной загрузки, которую браузер должен начать как можно раньше, но не за счет критически важных ресурсов (особенно некритичных шрифтов).
  • Правильно указывайте атрибут as, чтобы предварительная загрузка работала.
  • РЕКОМЕНДУЕТСЯ сделать так, чтобы критически важные ресурсы (например, изображения LCP) можно было найти в HTML-коде с помощью тегов <img>, а не полагаться на предварительную загрузку фоновых изображений.
  • РЕКОМЕНДУЕТСЯ убедиться, что у предварительно загруженных шрифтов всегда есть атрибут crossorigin (даже если они находятся в том же источнике).
  • НЕ ИСПОЛЬЗУЙТЕ устаревший атрибут importance. Вместо него теперь используется fetchpriority.

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

Атрибут fetchpriority в теге <link rel="preload"> используется для прогрессивного улучшения. Браузеры, которые не поддерживают этот атрибут, будут предварительно загружать ресурс, используя приоритет по умолчанию для этого типа ресурса. Чтобы обеспечить совместимость, всегда указывайте правильные атрибуты as и type.