Preload: что это

Что такое <link rel=»preload»>?

<link rel=»preload»> — это HTML-тег, с помощью которого можно сообщить браузеру, какие ресурсы потребуется загрузить в ближайшее время, чтобы они были готовы к использованию при необходимости. Это помогает уменьшить задержки при отображении контента и ускоряет первую отрисовку страницы (First Paint, First Contentful Paint и т.п.).

🎯 Для чего используется preload?

Основные цели:

1. Ускорение загрузки критических ресурсов (например, шрифтов, изображений, CSS, JS).
2. Избежание задержек при загрузке ресурсов, которые браузер по умолчанию загружает позже.
3. Оптимизация пользовательского опыта (UX) за счёт более быстрого отображения видимого контента.

Пример сценария:

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

Общий синтаксис

<link rel=»preload» href=»URL» as=»тип» [crossorigin=»…»] [type=»MIME-тип»]>

Основные атрибуты:

Примеры настройки preload

1. Предзагрузка шрифта

<link rel=»preload» href=»/fonts/Roboto.woff2″ as=»font» type=»font/woff2″ crossorigin=»anonymous»>

2. Предзагрузка скрипта

<link rel=»preload» href=»/js/main.js» as=»script»>

3. Предзагрузка стилей

<link rel=»preload» href=»/css/critical.css» as=»style»>

4. Предзагрузка изображения

<link rel=»preload» href=»/images/hero.jpg» as=»image»>

⚠️ Особенности и рекомендации

1. Обязательное указание as

Без атрибута as preload не будет работать корректно, а ресурс может быть загружен повторно.

2. crossorigin для шрифтов и сторонних ресурсов

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

3. Не перегружайте preload

Если укажете слишком много ресурсов, браузер может начать загружать не самые важные — это даст обратный эффект.

4. Работает только на первой загрузке страницы

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

Использование с точки зрения SEO и Core Web Vitals

Google PageSpeed Insights и Lighthouse часто рекомендуют использовать preload для шрифтов и критичных скриптов/стилей, чтобы улучшить LCP (Largest Contentful Paint) и FID (First Input Delay).

Когда использовать <link rel=»preload»>?

🧩 Отличия от других <link rel=»…»>

Заключение

<link rel=»preload»> — это простой и мощный инструмент, который при правильной настройке помогает ускорить загрузку сайта и улучшить пользовательский опыт. Однако важно использовать его осознанно, отдавая приоритет самым критическим ресурсам.