Пять указателей rel в ссылках, ускоряющих первую отрисовку содержимого.

Несколько тщательно подобранных тегов <link> в разделе заголовка документа могут улучшить показатели First Contentful Paint и Largest Contentful Paint после того, как уже были применены другие оптимизации. Они не заменяют ограничения на количество изображений или обработку критически важного CSS; они побуждают браузер раньше выполнять операции DNS, TLS и загрузку ресурсов, которые, по вашим предположениям, имеют большое значение.

Пять значений атрибута rel покрывают наиболее распространённые случаи. Компактная демонстрация всех из них выглядит следующим образом:

<link rel="preconnect" href="https://cdn.example.com">
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<link rel="dns-prefetch" href="https://google-analytics.com">

<link rel="prefetch" href="/js/dashboard.js" as="script">
<link rel="prefetch" href="/css/dashboard.css" as="style">
<link rel="prefetch" href="/dashboard" as="document">

<link rel="modulepreload" href="/js/app.js">
<link rel="modulepreload" href="/js/components.js">

Предварительное подключение к важным доменам

rel="preconnect" просит браузер заранее установить соединение: выполнить поиск в DNS, установить TCP-соединение и провести процедуру TLS-handshake для хоста, к которому, по вашим предположениям, страница скоро обратится. Когда позже поступает запрос к этому CDN или источнику API, процедура handshake уже завершена, поэтому передача данных начинается раньше.

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

Начните загрузку раньше с помощью preload

rel="preload" повышает приоритет определенных файлов в очереди загрузки, чтобы они не мешали отрисовке страницы так долго. Классической проблемой являются шрифты или важные ресурсы, обнаруживаемые слишком поздно: парсер находит их только после обработки CSS или макета, в результате чего страница остается пустой до их прибытия. Указание этих файлов с помощью preload позволяет браузеру загрузить их сразу после обработки раздела head.

Для шрифтов требуются как параметр as="font", так и атрибут crossorigin. Если пропустить хотя бы один из них, браузер может рассматривать операцию preload как отдельный запрос, отличный от последующего запроса к @font-face, в результате чего файл будет загружен дважды. Посмотрите страницу MDN, посвящённую связи type="preload", чтобы ознакомиться с полным списком допустимых значений параметра as и связанными ограничениями.

Предварительная загрузка из опциональных источников с dns-prefetch

rel="dns-prefetch" — это более простая версия технологии preconnect. Она разрешает только имя хоста, пропуская полную настройку TLS. Используйте preconnect для CDN и API, которые вы будете использовать сразу; используйте dns-prefetch для хостов аналитики или вспомогательных CDN, которые могут загрузиться позже или вообще не загрузиться. Такой подход позволяет сохранять дорогостоящие процедуры установления соединения с критически важными источниками и использовать дешёвые поиски имён хостов для остальных.

Предварительная загрузка того, что нужно при следующем переходе

rel="prefetch" просит браузер загружать и кэшировать ресурсы в фоновом режиме с низким приоритетом. Браузер и так активно кэширует контент сам по себе, но функция prefetch полезна тогда, когда вы знаете, какой шаг сделает пользователь дальше — например, скрипты и стили страницы учетной записи после перехода на маркетинговую страницу. Загрузка этих ресурсов заранее делает последующую навигацию более быстрой, не мешая обработке критически важных элементов текущей страницы.

Ускорение графиков ES-модулей с помощью modulepreload

Современные фронтенды поставляются в виде ES-модулей. Импорт файла main.js сообщает браузеру лишь о существовании этого файла; вложенные импорты, такие как header.js или link.js, обнаруживаются только после того, как загружается и парсится каждый родительский файл. Поэтому сложные структуры данных передаются по сети пакетами.

modulepreload ускоряет загрузку модулей, о которых вы уже знаете, что они важны. Он не приводит в порядок всю структуру — это бы сорвало принцип модульности — но позволяет явно указать ключевые точки входа:

<link rel="modulepreload" href="/js/app.js">
<link rel="modulepreload" href="/js/components.js">

Благодаря этим указаниям браузер может сразу же загрузить и подготовить app.js и components.js, вместо того чтобы ждать, пока цепочка импортов их обнаружит. Этот метод действует незаметно, без особых эффектов, но представляет собой практический инструмент, когда инструменты вроде Lighthouse или данные с поля тестирования показывают задержки в работе модулей.