HTTP 103 Early Hints информационный ответ может быть отправлен сервером, пока он еще подготавливает ответ, и содержать подсказки о сайтах и ресурсах, на которые, как ожидает сервер, будет ссылаться окончательный ответ. Это позволяет браузеру заранее установить соединение с сайтами или начать предварительную загрузку ресурсов еще до того, как сервер подготовит и отправит окончательный ответ. Клиент загружает предварительно загружаемые ресурсы, указанные в ранних подсказках, сразу после их получения.

Ответ с ранними подсказками в первую очередь предназначен для использования с заголовком Link, который указывает загружаемые ресурсы. Он также может содержать заголовок Content-Security-Policy, который применяется при обработке ранней подсказки.

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

Синтаксис

103 Early Hints

Примеры

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

Следующий ответ с ранней подсказкой 103 показывает, как сервер сообщает клиенту, что ему может понадобиться заранее установить соединение с определенным источником (https://cdn.example.com). Как и атрибут rel=preconnect в HTML, это подсказка о том, что странице, вероятно, понадобятся ресурсы с источника целевого ресурса и что браузер может повысить удобство работы пользователя, заранее установив соединение с этим источником.

103 Early Hint
Link: <https://cdn.example.com>; rel=preconnect, <https://cdn.example.com>; rel=preconnect; crossorigin

В этом примере предварительно устанавливается соединение с https://cdn.example.com дважды:

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

Ресурсы, защищенные CORS, необходимо загружать через полностью отдельное соединение. Если вам нужен только один тип ресурсов с источника, достаточно установить предварительное соединение один раз.

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

200 OK
Content-Type: text/html

<!doctype html>
...
<link rel="preload" href="https://cdn.example.com/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>
...
<img src="https://cdn.example.com/images/image.jpg" alt="">
...

Пример предварительной загрузки

Следующий ответ с ранней подсказкой 103 указывает, что окончательному ответу может потребоваться таблица стилей style.css.

103 Early Hint
Link: </style.css>; rel=preload; as=style

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

200 OK
Content-Type: text/html

<!doctype html>
...
<link rel="stylesheet" rel="preload" href="style.css" />
...

Ответ с ранней подсказкой и CSP

В следующем примере показан тот же ответ с ранней подсказкой, но с включенным заголовком Content-Security-Policy.

103 Early Hint
Content-Security-Policy: style-src: self;
Link: </style.css>; rel=preload; as=style

Ранний ответ ограничивает предварительную загрузку тем же источником, что и у запроса. Таблица стилей будет предварительно загружена, если источник совпадает.

Как показано ниже, в окончательном ответе может быть задана CSP none. Таблица стилей уже была предварительно загружена, но при отображении страницы использоваться не будет.

200 OK
Content-Security-Policy: style-src: none;
Content-Type: text/html

<!doctype html>
...
<link rel="stylesheet" rel="preload" href="style.css" />
...

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

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

См. также

• Link
• Межсайтовый обмен ресурсами (CORS)
• Политика безопасности содержимого (CSP)
• rel="preconnect" (атрибут <link>)
• rel="preload" (атрибут <link>)
• fetchpriority (атрибут <link>)
• Обновление Early Hints: как Cloudflare, Google и Shopify вместе создают более быстрый Интернет для всех из блога Cloudflare