rel=preload

Значение атрибута <link> элемента rel позволяет объявлять запросы на получение данных в <head> HTML, указывая ресурсы, которые вашей странице понадобятся очень скоро, и которые вы хотите начать загружать в начале жизненного цикла страницы, до того, как основное средство рендеринга браузера начнёт свою работу. Это гарантирует, что они будут доступны раньше и с меньшей вероятностью заблокируют рендеринг страницы, улучшая производительность. Несмотря на то, что имя содержит термин «загрузка», оно не загружает и не выполняет скрипт, а только планирует его загрузку и кеширование с более высоким приоритетом.

Основные понятия

Чаще всего вы используете <link> для загрузки файла CSS для стилизации вашей страницы:

html

<link rel="stylesheet" href="styles/main.css" />

Однако здесь мы будем использовать значение rel для атрибута preload, что превращает <link> в предзагрузчик для любого ресурса, который нам нужен. Вам также необходимо указать:

Путь к ресурсу в атрибуте href.
Тип ресурса в атрибуте as.

Простой пример может выглядеть так (см. наш пример JS и CSS и живой пример):

html

<head>
  <meta charset="utf-8" />
  <title>JS and CSS preload example</title>

  <link rel="preload" href="style.css" as="style" />
  <link rel="preload" href="main.js" as="script" />

  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <h1>bouncing balls</h1>
  <canvas></canvas>

  <script src="main.js" defer></script>
</body>

Здесь мы предзагружаем наши файлы CSS и JavaScript, чтобы они были доступны сразу же, как только они потребуются для рендеринга страницы позже. Этот пример тривиален, так как браузер, вероятно, обнаруживает элементы <link rel="stylesheet"> и <script> в той же части HTML, что и предзагрузки, но преимущества заметнее, когда ресурсы обнаруживаются позже и являются более крупными. Например:

Ресурсы, на которые ссылаются внутри CSS, такие как шрифты или изображения.
Ресурсы, которые может запросить JavaScript, такие как импортированные скрипты.

preload также имеет другие преимущества. Использование as для указания типа контента, который необходимо предзагрузить, позволяет браузеру:

Сохранить в кэше для будущих запросов, повторно используя ресурс, если это возможно.
Применить соответствующую политику безопасности контента к ресурсу.
Установить правильные заголовки запроса Accept для него.

Какие типы контента можно предзагрузить?

Многие типы контента можно предзагрузить. Возможные значения атрибута as:

fetch: Ресурс, к которому можно получить доступ с помощью запроса fetch или XHR, например, двоичный файл ArrayBuffer, WebAssembly или файл JSON.
font: Файл шрифта.
image: Файл изображения.
script: Файл JavaScript.
style: Таблица стилей CSS.
track: Файл WebVTT.

Примечание: Предварительная загрузка font и fetch требует установки атрибута crossorigin; см. Запросы с поддержкой CORS ниже.

Примечание: Более подробная информация об этих значениях и веб-функциях, которые они ожидают получить, содержится в спецификации HTML — см. Тип ссылки «preload». Также обратите внимание, что полный список значений, которые может принимать атрибут as, регулируется спецификацией Fetch — см. пункты назначения запроса.

Включение MIME-типа

Элементы <link> могут принимать атрибут type, содержащий MIME-тип ресурса, на который ссылается элемент. Это особенно полезно при предзагрузке ресурсов — браузер будет использовать значение атрибута type для определения, поддерживает ли он этот ресурс, и загрузит его только в этом случае, проигнорировав в противном случае.

html

<head>
  <meta charset="utf-8" />
  <title>Image preload example</title>

  <link rel="preload" href="flower.avif" as="image" type="image/avif" />
</head>
<body>
  <picture>
    <source src="flower.avif" type="image/avif" />
    <source src="flower.webp" type="image/webp" />
    <img src="flower.jpg" />
  </picture>
</body>

Код в примере выше приводит к предзагрузке изображения image/avif только в поддерживающих браузерах — и для пользователей, у которых в браузере включена поддержка image/avif, заставляет изображение image/avif фактически использоваться (поскольку это первый указанный <source>). Это позволяет загрузить изображение, скорее всего, меньшего размера для пользователей, у которых в браузере включена поддержка image/avif.

Обратите внимание, что для пользователей, у которых в браузерах включена поддержка как image/avif, так и image/webp, если в этом коде также был указан элемент <link rel="preload" href="flower.webp" as="image" type="image/webp">, то оба изображения image/avif и image/webp были бы предзагружены — даже если только одно из них будет фактически использовано.

Поэтому предзагрузка для нескольких типов одного и того же ресурса не рекомендуется. Лучшей практикой является указание предзагрузки только для типа, который большинство ваших пользователей, вероятно, фактически будут использовать. Вот почему в примере выше нет предзагрузки для изображения image/webp.

Однако отсутствие предзагрузки не препятствует фактическому использованию изображения image/webp теми, кто его нуждается: для пользователей, у которых в браузерах нет поддержки image/avif, но есть поддержка image/webp, код в примере выше всё равно вызывает использование изображения image/webp — но без ненужной предзагрузки для большинства других пользователей.

Запросы с поддержкой CORS

При предзагрузке ресурсов, которые загружаются с включенной поддержкой CORS (например, fetch(), XMLHttpRequest или шрифты), необходимо обратить особое внимание на установку атрибута crossorigin на вашем элементе <link>. Этот атрибут должен соответствовать режиму CORS и подтверждения ресурсов, даже когда запрос не является межсайтовым.

Как упоминалось выше, одним из интересных случаев, где это применимо, являются файлы шрифтов. По различным причинам их необходимо загружать с использованием CORS в анонимном режиме (см. Требования к загрузке шрифтов).

Давайте воспользуемся этим примером. Вы можете увидеть полный пример кода на GitHub (и живой пример):

html

<head>
  <meta charset="utf-8" />
  <title>Web font example</title>

  <link
    rel="preload"
    href="fonts/cicle_fina-webfont.woff2"
    as="font"
    type="font/woff2"
    crossorigin />
  <link
    rel="preload"
    href="fonts/zantroke-webfont.woff2"
    as="font"
    type="font/woff2"
    crossorigin />

  <link href="style.css" rel="stylesheet" />
</head>
<body>
  …
</body>

Мы не только предоставляем подсказки MIME-типа в атрибутах type, но и предоставляем атрибут crossorigin, чтобы убедиться, что режим CORS предзагрузки соответствует будущему запросу к ресурсу шрифта.

Включение медиа

Одним из замечательных свойств элементов <link> является их способность принимать атрибут media. Эти атрибуты могут принимать типы медиа или полноценные запросы медиа, что позволяет выполнять адаптивную предзагрузку!

Рассмотрим пример (см. его на GitHub — исходный код, живой пример):

html

<head>
  <meta charset="utf-8" />
  <title>Responsive preload example</title>

  <link
    rel="preload"
    href="bg-image-narrow.png"
    as="image"
    media="(max-width: 600px)" />
  <link
    rel="preload"
    href="bg-image-wide.png"
    as="image"
    media="(min-width: 601px)" />

  <link rel="stylesheet" href="main.css" />
</head>
<body>
  <header>
    <h1>My site</h1>
  </header>

  <script>
    const mediaQueryList = window.matchMedia("(max-width: 600px)");
    const header = document.querySelector("header");

    if (mediaQueryList.matches) {
      header.style.backgroundImage = "url(bg-image-narrow.png)";
    } else {
      header.style.backgroundImage = "url(bg-image-wide.png)";
    }
  </script>
</body>

Мы включаем атрибуты media в наши элементы <link>, чтобы предзагружать узкое изображение, если у пользователя узкий viewport, и широкое изображение, если у пользователя широкий viewport. Мы используем Window.matchMedia / MediaQueryList для этого (см. Тестирование запросов медиа для получения дополнительной информации).

Это значительно повышает вероятность того, что шрифт будет доступен для рендеринга страницы, сокращая время FOUT (внезапного отображения нестилизованного текста).

Это не должно ограничиваться изображениями или даже файлами одного типа — подумайте шире! Вы можете, например, предзагрузить и отобразить простую SVG-диаграмму, если пользователь находится на узком экране, где полоса пропускания и ЦП могут быть ограничены, или предзагрузить сложный кусок JavaScript, а затем использовать его для рендеринга интерактивной 3D-модели, если ресурсы пользователя более мощные.

Скрипты и предзагрузки

Примечание: Используйте <link rel="modulepreload"> вместо этого, если вы работаете с модулями JavaScript.

Еще одно приятное свойство этих предзагрузок заключается в том, что вы можете их выполнять с помощью скрипта. Например, здесь мы создаем экземпляр HTMLLinkElement, а затем присоединяем его к DOM:

const preloadLink = document.createElement("link");
preloadLink.href = "myscript.js";
preloadLink.rel = "preload";
preloadLink.as = "script";
document.head.appendChild(preloadLink);

Это означает, что браузер предзагрузит файл myscript.js, но не будет его использовать сразу. Чтобы использовать его, вы можете сделать так:

const preloadedScript = document.createElement("script");
preloadedScript.src = "myscript.js";
document.body.appendChild(preloadedScript);

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

Спецификации

Спецификация
Стандарт HTML # link-type-preload

Совместимость с браузерами

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`preload`	50	≤79	85 56–57 Отключено из-за различных проблем совместимости с веб-технологиями (например, ошибка 1405761).	37	11.1	50	85 56–57 Отключено из-за различных проблем совместимости с веб-технологиями (например, ошибка 1405761).	37	11.3	5.0	50
`as-fetch`	50	≤79	85 56–57 Отключено из-за различных проблем совместимости с веб-технологиями (например, ошибка 1405761).	37	11.1	50	85 56–57 Отключено из-за различных проблем совместимости с веб-технологиями (например, ошибка 1405761).	37	11.3	5.0	50
`as-font`	50	≤79	85 56–57 Отключено из-за различных проблем совместимости с веб-технологиями (например, ошибка 1405761).	37	11.1	50	85 56–57 Отключено из-за различных проблем совместимости с веб-технологиями (например, ошибка 1405761).	37	11.3	5.0	50
`as-image`	50	≤79	85 56–57 Отключено из-за различных проблем совместимости с веб-технологиями (например, ошибка 1405761).	37	11.1	50	85 56–57 Отключено из-за различных проблем совместимости с веб-технологиями (например, ошибка 1405761).	37	11.3	5.0	50
`as-script`	50	≤79	85 56–57 Отключено из-за различных проблем совместимости с веб-технологиями (например, ошибка 1405761).	37	11.1	50	85 56–57 Отключено из-за различных проблем совместимости с веб-технологиями (например, ошибка 1405761).	37	11.3	5.0	50
`as-style`	50	≤79	85 56–57 Отключено из-за различных проблем совместимости с веб-технологиями (например, ошибка 1405761).	37	11.1	50	85 56–57 Отключено из-за различных проблем совместимости с веб-технологиями (например, ошибка 1405761).	37	11.3	5.0	50
`as-track`	50	≤79	Нет	37	11.1	50	Нет	37	11.3	5.0	50

См. также

Спекулятивная загрузка для сравнения <link rel="preload"> и других аналогичных функций повышения производительности.
Preload: What Is It Good For? от Yoav Weiss

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload