Предзагрузка ресурсов: preload, prefetch и preconnect

Прямой ответ

Директивы предзагрузки сообщают браузеру о ресурсах заранее, поэтому загрузка начинается до обнаружения ресурса в документе.

<!-- Ресурс текущей страницы с высоким приоритетом -->
<link rel="preload" href="/fonts/main.woff2" as="font"
      type="font/woff2" crossorigin>

<!-- Установка соединения с внешним источником -->
<link rel="preconnect" href="">

<!-- Ресурс, который может понадобиться дальше -->
<link rel="prefetch" href="/next-page.js">

Атрибут as указывает тип ресурса, поэтому браузер применяет корректный приоритет и правила обработки. О блокирующих ресурсах — в статье про render-blocking ресурсы.

Приоритет загрузки и установка соединения

Директивы предзагрузки различаются по влиянию на текущую страницу и на следующие переходы.

preload загружает ресурс с высоким приоритетом для текущей страницы. Применяется к ресурсам, которые обнаруживаются поздно, например шрифтам, указанным в стилях.

prefetch загружает ресурс с низким приоритетом в свободное время. Применяется к ресурсам следующего перехода, поэтому не конкурирует с загрузкой текущей страницы.

preconnect выполняет разрешение имени, согласование и установку соединения заранее, поэтому время на эти операции не добавляется к загрузке ресурса.

Практическое следствие: preload ускоряет текущую страницу, prefetch — следующий переход. Смешение назначений приводит к конкуренции за полосу пропускания.

Отдельный аспект — число установленных соединений. Каждая директива preconnect открывает соединение, которое удерживается некоторое время. Избыточное число соединений расходует ресурсы браузера и источника.

Три признака некорректной предзагрузки.

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

prefetch для ресурса текущей страницы. Загрузка выполняется с низким приоритетом, поэтому ресурс получается позже, чем требуется.

Избыточное число preconnect. Соединения с источниками, которые не используются, расходуют ресурсы.

О кэшировании загруженных ресурсов — в статье про кэширование браузера; о влиянии протокола на параллельную загрузку — в статье про HTTP/2 и HTTP/3.

Предзагрузка шрифта требует атрибута crossorigin, поскольку шрифты запрашиваются в режиме с проверкой источника.

Ограничения предзагрузки и влияние на полосу пропускания

Предзагрузка изменяет порядок получения ресурсов, поэтому избыточное применение снижает эффект.

Конкуренция за полосу пропускания. Ресурс, загруженный через preload с высоким приоритетом, конкурирует с ресурсами, обнаруженными в документе. Избыточная предзагрузка задерживает загрузку критичных ресурсов.

Ограничение числа одновременных запросов. Браузер ограничивает число соединений с источником, поэтому избыточная предзагрузка занимает соединения, требуемые для других ресурсов.

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

Практическое следствие: предзагрузка применяется к ресурсам, которые фактически используются на странице и обнаруживаются поздно.

Предзагрузка и кэширование ресурса

Загруженный через предзагрузку ресурс помещается в кэш, поэтому повторный запрос не выполняется.

Повторное использование. Ресурс, полученный заранее, используется при обнаружении в документе, поэтому второй запрос не выполняется.

Совпадение параметров. Ресурс запрашивается с теми же параметрами, что указаны в предзагрузке, поэтому при различии параметров загрузка выполняется повторно.

Практическое следствие: параметры предзагрузки должны совпадать с параметрами фактического запроса, иначе ресурс загружается дважды. О кэшировании — в статье про кэширование браузера.

Практика: настройка предзагрузки ресурсов

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

2. Используйте prefetch для ресурсов следующего перехода. Загрузка выполняется в свободное время, поэтому не конкурирует с текущей страницей.

3. Указывайте тип ресурса в preload. Атрибут as определяет приоритет и правила обработки ресурса.

4. Устанавливайте соединения с используемыми источниками. preconnect сокращает время на разрешение имени и согласование.

5. Ограничивайте число соединений. Избыточное число preconnect расходует ресурсы браузера и источника.

6. Проверяйте фактическое использование ресурса. Ресурс, загруженный через preload, но не применённый, конкурирует с нужными.

7. Проверяйте влияние на скорость страницы. Предзагрузка изменяет порядок загрузки, поэтому результат проверяется измерением.

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

1. Различайте текущую страницу и следующий переход. preload ускоряет текущую страницу, prefetch — следующий переход.
2. Учитывайте полосу пропускания. Избыточная предзагрузка конкурирует с загрузкой нужных ресурсов.
3. Проверяйте атрибут crossorigin для шрифтов. Шрифты запрашиваются в режиме с проверкой источника, поэтому атрибут обязателен.
4. Не предзагружайте все ресурсы. Предзагрузка применяется к ресурсам, обнаруживаемым поздно либо критичным для отрисовки.
5. Пересматривайте при изменении страницы. Изменение состава ресурсов делает прежний перечень предзагрузки неактуальным.

Практический сценарий: шрифт загружался с задержкой

Контекст: текст страницы кратковременно отображался резервным шрифтом, затем переключался на целевой.

1. Диагностика. Шрифт указывался в файле стилей, поэтому браузер обнаруживал его после загрузки и применения стилей. Загрузка шрифта начиналась поздно, поэтому переключение было заметным.
2. Причина. Шрифт не предзагружался, поэтому его загрузка начиналась после цепочки: документ, стили, применение правил. Время на разрешение имени и загрузку добавлялось к времени отрисовки текста.
3. Действия. (а) Добавили предзагрузку шрифта с указанием типа и атрибута crossorigin; (б) установили соединение с источником шрифта заранее, чтобы сократить время на разрешение имени; (в) проверили, что шрифт применяется сразу после загрузки, без повторного запроса; (г) измерили время отрисовки текста до и после изменения; (д) исключили из предзагрузки шрифты, которые не используются на странице.
4. Результат. Шрифт загружается заранее, поэтому переключение с резервного шрифта не заметно.

Вывод: шрифт, указанный в стилях, обнаруживается поздно, поэтому его загрузка добавляется к времени отрисовки. Предзагрузка с указанием типа сокращает задержку появления целевого шрифта.

FAQ

Чем preload отличается от prefetch? preload загружает ресурс текущей страницы с высоким приоритетом, prefetch — ресурс следующего перехода с низким приоритетом в свободное время.

Зачем нужен атрибут as в preload? Он указывает тип ресурса, поэтому браузер применяет корректный приоритет и правила обработки. Без атрибута ресурс может загружаться с неверным приоритетом.

Нужен ли crossorigin при предзагрузке шрифта? Да, шрифты запрашиваются в режиме с проверкой источника, поэтому без атрибута ресурс загружается повторно.

Сколько соединений preconnect допустимо? Ограничивается числом источников, которые фактически используются. Избыточные соединения расходуют ресурсы браузера и источника.

Источники: MDN preload, prefetch, preconnect — ссылки в шапке.