rel="preload" значение атрибута HTML

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

Основы

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

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

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

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

Например, это может выглядеть так (см. исходный код примера с JS и CSS, а также его работающую версию):

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

Указание типа MIME

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

<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 также можно посмотреть в действии:

<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 доступны исходный код и работающий пример):

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

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

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

  <script>
    const mediaQueryList = window.matchMedia("(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>, чтобы при узкой области просмотра предварительно загружалось узкое изображение, а при широкой — более широкое. Для этого используется Window.matchMedia / MediaQueryList (подробнее см. раздел Проверка медиавыражений).

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

Этот приём не ограничивается изображениями или даже файлами одного типа — мыслите шире! Например, если пользователь использует узкий экран, где пропускная способность сети и возможности процессора могут быть ограничены, можно предварительно загрузить упрощённую схему в формате SVG. Или же предварительно загрузить сложный фрагмент 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);

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

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

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

См. также

• Спекулятивная загрузка — сравнение <link rel="preload"> с другими похожими способами повышения производительности.
• Предварительная загрузка: для чего она нужна? — Йоав Вайс