Ускоренная загрузка страниц за счет времени на размышление сервера с помощью Early Hints

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

Kenji Baheux

Barry Pollard

Опубликовано: 23 июня 2022 г., Последнее обновление: 10 июля 2026 г.

Что такое «Предварительные подсказки»?

Со временем веб-сайты стали гораздо сложнее. Поэтому неудивительно, что серверу приходится выполнять нетривиальную работу (например, получать доступ к базам данных или CDN-сетям, обращающимся к исходному серверу) для генерации HTML-кода запрошенной страницы. К сожалению, это «время ожидания сервера» приводит к дополнительной задержке перед тем, как браузер сможет начать отрисовку страницы. Фактически, соединение остается в режиме ожидания до тех пор, пока сервер не подготовит ответ.

Early Hints — это код состояния HTTP ( 103 Early Hints ), используемый для отправки предварительного HTTP-ответа перед окончательным ответом. Это позволяет серверу отправлять браузеру подсказки о критически важных подресурсах (например, таблицах стилей для страницы, критически важном JavaScript) или источниках, которые, вероятно, будут использоваться страницей, пока сервер занят генерацией основного ресурса. Браузер может использовать эти подсказки для прогрева соединений и запроса подресурсов, ожидая основного ресурса. Другими словами, Early Hints помогает браузеру воспользоваться таким «временем ожидания сервера», выполняя некоторую работу заранее, тем самым ускоряя загрузку страницы.

В некоторых случаях улучшение производительности при отображении самого большого объема контента может составлять от нескольких сотен миллисекунд, как показали исследования Shopify и Cloudflare , до секунды, как видно на этом сравнении «до» и «после»:

Как использовать функцию «Предварительные подсказки»

Первый шаг к эффективному использованию ранних подсказок — определение наиболее популярных целевых страниц, то есть страниц, с которых пользователи обычно начинают свой визит на ваш сайт. Это может быть главная страница или популярные страницы со списками товаров, если к вам часто заходят пользователи с других сайтов. Эти точки входа важнее других страниц, потому что полезность ранних подсказок снижается по мере перемещения пользователя по сайту (то есть, браузер с большей вероятностью получит все необходимые подресурсы при втором или третьем последующем посещении). Также всегда полезно произвести хорошее первое впечатление!

Теперь, когда у вас есть этот приоритезированный список целевых страниц, следующим шагом является определение того, какие источники или подресурсы хорошо подходят для подсказок preconnect или preload . Как правило, это источники и подресурсы, которые вносят наибольший вклад в ключевые пользовательские показатели, такие как «Наибольший объем отрисовки контента » или «Первая отрисовка контента» . Более конкретно, ищите блокирующие отрисовку подресурсы, такие как синхронный JavaScript, таблицы стилей или даже веб-шрифты. Аналогично, ищите источники, которые содержат подресурсы, вносящие значительный вклад в ключевые пользовательские показатели.

Также обратите внимание, что если ваши основные ресурсы уже используют preconnect или preload , вы можете рассмотреть эти источники или ресурсы в качестве кандидатов для Early Hints. Подробнее см. в разделе «Как оптимизировать LCP» . Однако наивное копирование директив preconnect и preload из HTML в Early Hints может быть неоптимальным .

При использовании этих функций в HTML обычно требуется preconnect или preload ресурсов, которые сканер предварительной загрузки не обнаружит в HTML — например, шрифтов или фоновых изображений, которые в противном случае были бы обнаружены позже. Для функций ранних подсказок у вас не будет HTML-кода, поэтому вместо этого может потребоваться preconnect к важным доменам или preload важных ресурсов, которые в противном случае были бы обнаружены на ранних этапах HTML — например, предварительная загрузка main.css или app.js Кроме того, не все браузеры поддерживают preload для функций ранних подсказок — см. раздел «Поддержка браузеров» .

Второй шаг заключается в минимизации риска использования ранних подсказок (Early Hints) для ресурсов или источников, которые могут быть устаревшими или больше не использоваться основным ресурсом. Например, ресурсы, которые часто обновляются и версионируются (например, example.com/css/main.fa231e9c.css ), могут быть не лучшим выбором. Следует отметить, что эта проблема не является специфичной для ранних подсказок, она применима к любой preload или preconnect где бы они ни присутствовали. Такие детали лучше всего решать с помощью автоматизации или шаблонизации (например, ручной процесс с большей вероятностью приведет к несоответствию хешей или URL-адресов версий между preload и фактическим HTML-тегом, использующим ресурс).

В качестве примера рассмотрим следующий алгоритм действий:

GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]

Сервер прогнозирует необходимость использования main.abcd100.css и предлагает предварительно загрузить его с помощью функции Early Hints:

103 Early Hints
Link: </main.abcd100.css>; rel=preload; as=style
[...]

Через несколько мгновений отображается веб-страница, включая связанный CSS-код. К сожалению, этот CSS-ресурс часто обновляется, и основной ресурс уже на пять версий опережает ( abcd105 ) прогнозируемый CSS-ресурс ( abcd100 ).

200 OK
[...]
<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.abcd105.css">

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

<html>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.css">
   <link rel="stylesheet" href="/experimental.3eab3290.css">

Наконец, на стороне сервера отслеживайте запросы на основной ресурс, отправленные браузерами, поддерживающими Early Hints, и немедленно отвечайте кодом 103 Early Hints. В ответе 103 укажите соответствующие подсказки preconnect и preload. Как только основной ресурс будет готов, отправьте обычный ответ (например, 200 OK в случае успеха). Для обеспечения обратной совместимости рекомендуется также включать заголовки HTTP Link в окончательный ответ, возможно, даже дополняя их критически важными ресурсами, которые стали очевидны в процессе генерации основного ресурса (например, динамическая часть ключевого ресурса, если вы следовали предложению «разделить на две части»). Вот как это будет выглядеть:

GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]
103 Early Hints
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script

Несколько мгновений спустя:

200 OK
Content-Length: 7531
Content-Type: text/html; charset=UTF-8
Content-encoding: br
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script
Link: </experimental.3eab3290.css>; rel=preload; as=style
<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.css">
   <link rel="stylesheet" href="/experimental.3eab3290.css">
   <script src="/common.js"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">

Поддержка браузеров

Хотя функция 103 Early Hints поддерживается всеми основными браузерами, директивы, которые могут быть отправлены в рамках Early Hint, различаются в зависимости от браузера:

Поддержка Preconnect:

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

В инструментах разработчика Chrome также поддерживаются 103 ранних подсказки , а заголовки Link можно увидеть в ресурсах документа:

Обратите внимание: для использования ресурсов Early Hints не следует ставить галочку Disable cache в инструментах разработчика, поскольку Early Hints использует кэш браузера. Для предварительно загруженных ресурсов инициатор будет отображаться как Early-hints , а размер — как (Disk cache) :

Для тестирования HTTPS также требуется доверенный сертификат.

В инструментах разработчика Firefox нет явной поддержки 103 Early Hints в качестве инициатора, однако ресурсы, загруженные с использованием Early Hints, отображаются как cached в столбце Transferred и при нажатии на них имеют заголовок HTTP-запроса X-Moz: early hint .

Поддержка серверов

Вот краткий обзор уровня поддержки функции Early Hints среди популярных HTTP-серверов с открытым исходным кодом:

• Apache: поддерживается с помощью mod_http2.
• H2O: поддерживается .
• NGINX: поддерживается .
• Node: поддерживается для http и http2

Включить ранние подсказки проще.

Если вы используете одну из следующих CDN или платформ, вам может не потребоваться вручную настраивать функцию Early Hints. Обратитесь к онлайн-документации вашего поставщика решений, чтобы узнать, поддерживает ли он Early Hints, или воспользуйтесь неполным списком здесь:

• Первые намеки на Cloudflare
• Первые признаки активности Fastly .
• Первые намеки на Akamai .

Как избежать проблем для клиентов, которые не поддерживают функцию ранних подсказок (Early Hints).

Информационные HTTP-ответы с кодом 100 являются частью стандарта HTTP, но некоторые старые клиенты или боты могут испытывать с ними проблемы, поскольку до запуска 103 Early Hints они редко использовались для обычного просмотра веб-страниц.

Отправка только 103 ранних подсказок в ответ на запросы клиентов с заголовком HTTP sec-fetch-mode: navigate должна осуществляться только для новых клиентов, которые понимают необходимость ожидания последующего ответа. Кроме того, поскольку ранние подсказки поддерживаются только для запросов навигации (см. текущие ограничения ), это дает дополнительное преимущество, позволяя избежать ненужной отправки этих подсказок в других запросах.

Кроме того, рекомендуется отправлять уведомления Early Hints только по протоколам HTTP/2 или HTTP/3 , поскольку большинство браузеров принимают их только по этим протоколам.

Расширенный шаблон

Если вы полностью применили метод «Первые подсказки» к своим ключевым целевым страницам и ищете новые возможности, вас может заинтересовать следующий продвинутый шаблон.

Для посетителей, которые уже на n-й странице запрашивают контент в рамках типичного пользовательского пути, вы можете адаптировать ответ Early Hints к контенту, расположенному ниже и глубже на странице, другими словами, использовать Early Hints для ресурсов с более низким приоритетом. Это может показаться нелогичным, учитывая, что мы рекомендовали сосредоточиться на высокоприоритетных, блокирующих отрисовку подресурсах или источниках. Однако к тому времени, как посетитель некоторое время перемещается по сайту, весьма вероятно, что его браузер уже загрузил все критически важные ресурсы. После этого может иметь смысл переключить внимание на ресурсы с более низким приоритетом. Например, это может означать использование Early Hints для загрузки изображений товаров или дополнительного JS/CSS, необходимого только для менее распространенных взаимодействий пользователя.

Текущие ограничения

Вот ограничения функции «Ранние подсказки», реализованной в Chrome:

• Доступно только для запросов навигации (то есть, для основного ресурса документа верхнего уровня).
• Поддерживаются только preconnect и preload (то есть prefetch не поддерживается).
• Использование технологии Early Hints с последующим междоменным перенаправлением в конечном ответе приведет к тому, что браузеры разорвут ресурсы и соединения, полученные с помощью Early Hints.
• Ресурсы, предварительно загружаемые с помощью Early Hints, сохраняются в HTTP-кэше и извлекаются оттуда страницей позже. Поэтому с помощью Early Hints можно предварительно загружать только ресурсы, подлежащие кэшированию, иначе ресурс будет загружен дважды (один раз Early Hints, а затем документом). В Chrome HTTP-кэш отключен для недоверенных HTTPS-сертификатов (даже если вы продолжите загрузку страницы).
• Предварительная загрузка адаптивных изображений (с использованием imagesrcset , imagesizes или media ) может не поддерживаться с помощью HTTP-заголовков <link> , поскольку область просмотра определяется только после создания документа. В лучшем случае они будут ждать получения документа, сводя на нет основные преимущества функции 103 Early Hints.

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

Связь с H2/Push

Если вы знакомы с устаревшей функцией HTTP2/Push , вам может быть интересно, чем отличается Early Hints. В то время как Early Hints требует отправки запроса браузеру для начала загрузки критически важных подресурсов, в случае HTTP2/Push сервер может начать отправлять подресурсы одновременно с ответом. Хотя это звучит замечательно, это привело к ключевому структурному недостатку: в случае HTTP2/Push было крайне сложно избежать отправки подресурсов, которые уже были у браузера. Этот эффект «избыточной отправки» приводил к менее эффективному использованию пропускной способности сети, что значительно снижало преимущества в производительности. В целом, данные Chrome показали, что HTTP2/Push фактически оказывает негативное влияние на производительность в интернете.

Напротив, Early Hints на практике работает лучше, поскольку сочетает в себе возможность отправки предварительного ответа с подсказками, которые оставляют браузеру право самостоятельно получать или подключаться к тому, что ему действительно нужно. Хотя Early Hints теоретически не охватывает все варианты использования, которые мог бы решить HTTP2/Push, мы считаем, что Early Hints является более практичным решением для ускорения навигации.

Изображение-миниатюра предоставлено Пьером Бамином .