103 ранних подсказки: что это такое и как это реализовать
Опубликовано: 2022-07-16103 Early Hints — это новый код состояния HTTP, который помогает браузерам решать, какой контент предварительно загружать, еще до того, как страница начала появляться.
После первого упоминания Cloudflare в конце прошлого года Google официально объявила, что Early Hints доступны в Chrome версии 103 с поддержкой предварительной загрузки и предварительного подключения для запуска:
В следующих строках вы узнаете, что такое Ранние подсказки и как вы можете реализовать их на своем веб-сайте для повышения производительности.
Но перед этим мы проведем краткий обзор того, как работают браузеры и почему в первую очередь возникла необходимость в Early Hints.
В двух словах: браузеры, серверы и серверное время на обдумывание
Чтобы вы могли загрузить эту страницу (или любую другую страницу) и прочитать содержимое, вашему браузеру требовались инструкции о том, что отображать и какие ресурсы (такие как изображения, шрифты, файлы JavaScript) необходимо получить для завершения его рисования.
По сути, ваш браузер отправляет запрос на сервер, и инструкции о том, что загружать, приходят из ответа сервера.
К сожалению, может возникнуть задержка в пару сотен миллисекунд, пока сервер не соберет все ресурсы, необходимые для компиляции всей веб-страницы и отправки ее обратно в браузер.
Этот период известен как «время обдумывания сервером».
В течение этого времени ожидания сервера браузер просто сидит и ждет, не отображая никакого контента. И я думаю, мы могли бы согласиться с тем, что никто не хочет смотреть на пустой экран.
Вот где в игру вступают Ранние подсказки.
Что такое ранние подсказки?
Один из способов повысить производительность страницы — использовать подсказки ресурсов. Как следует из их названия, они дают браузеру «подсказки» о том, какие ресурсы ему могут понадобиться позже — например, предварительная загрузка определенных файлов или подключение к другому серверу.
Если вам интересна эта тема и вы хотите узнать больше, ознакомьтесь с нашей статьей о подсказках ресурсов и их реализации.
Как бы здорово не звучало использование подсказок ресурсов, есть одна загвоздка. Чтобы браузер отреагировал на них, сервер должен отправить хотя бы часть страницы.
Введите ранние подсказки.
Ранние подсказки используют преимущество «времени обдумывания сервера» для асинхронной отправки инструкций в браузер, чтобы начать загрузку критически важных подресурсов (таких как таблицы стилей, важные файлы JavaScript и т. д.) или установить соединение с источниками, которые, вероятно, будут использоваться на сервере. страницу, пока сервер компилирует полный ответ.
Без ранних намеков
Проще говоря:
При включении Early Hints сервер отправляет два ответа: первый (код состояния HTTP 103 Early Hints), чтобы указать браузеру, что он может начать загрузку сразу же, а второй (код состояния HTTP 200) — это полный ответ с оставшейся частью. Информация.
С включенными ранними подсказками
Отправляя эти подсказки в браузер до компиляции полного ответа, браузер может выяснить, что ему нужно сделать, чтобы быстрее загрузить веб-страницу для пользователя.
Конечный результат:
Более быстрая загрузка страниц и уменьшенная задержка, воспринимаемая пользователем.
Если вы ищете более формальное объяснение, Cloudflare проделал большую работу, предоставив его:
Реализация ранних подсказок на вашем веб-сайте
Вы должны предпринять несколько шагов, чтобы успешно внедрить Early Hints на своем веб-сайте.
Шаг 0. Рассмотрите возможность использования ссылки rel =preload или ссылки rel=preconnect вместо Early Hints.
Это шаг 0, потому что , если ваш сервер может немедленно отправить ответ 200, добавление Early Hints бесполезно . Вместо этого, если вы хотите еще больше ускорить ответ 200, вы можете использовать подсказки ресурса link rel=preload или link rel=preconnect .
Самый простой способ определить, насколько быстро ваш сервер отправляет ответ 200, — это использовать инструмент тестирования производительности KeyCDN. Все, что вам нужно сделать, это вставить URL вашего сайта и получить данные:
Шаг 1. Определите самые популярные страницы
Если шаг 0 для вас неприемлем и вашему серверу требуется время для генерации ответа, у вас есть все предпосылки для продолжения интеграции Early Hints.
Первый шаг — определить ваши главные целевые страницы или, другими словами, страницу, с которой ваши пользователи начинают свое путешествие по вашему сайту. Эти точки входа более важны, чем любые другие страницы, потому что эффективность «Ранних советов» снижается по мере того, как ваши посетители перемещаются по вашим веб-сайтам .
Это связано с тем, что современные браузеры довольно хорошо угадывают, какую страницу пользователь посетит следующей, и у них, вероятно, есть все подресурсы, которые им нужны, при второй или третьей последующей навигации.
Шаг 2. Определите критические источники и подресурсы, которые в наибольшей степени способствуют ключевым показателям производительности.
Определив свои главные целевые страницы, вы должны перейти к определению того, какие источники и подресурсы являются хорошими кандидатами для подсказок предварительного подключения или предварительной загрузки. Это будут источники и ресурсы, которые в значительной степени влияют на ключевые показатели, такие как «Самая большая содержательная отрисовка» и «Первая содержательная отрисовка».
В частности, вам следует искать подресурсы, блокирующие рендеринг, такие как синхронный JavaScript, таблицы стилей или даже веб-шрифты.
Вы можете определить их, запустив свой веб-сайт с помощью инструмента тестирования, такого как WebPageTest, и проверив каскадную диаграмму. Все ресурсы, блокирующие рендеринг, будут иметь перед собой «X»:
Самый простой способ определить подресурсы, подходящие для Early Hints, — это если ваши основные ресурсы уже используют ссылку rel=preconnect или ссылку rel =preload . Это идеальные кандидаты.
И вот как вы можете вручную добавить Early Hints на свой сайт.
Но что, если у вас нет технических навыков, чтобы сделать это самостоятельно?
Что ж, есть более простой способ.
Включение ранних подсказок с использованием вашей учетной записи Cloudflare
Если вы являетесь пользователем Cloudflare, вы можете включить Early Hints через панель управления, выполнив следующие действия:
- Войдите в свою панель инструментов Cloudflare и выберите свой домен.
- На панели инструментов нажмите Скорость > Оптимизация.
- В разделе «Оптимизированная доставка» включите «Ранние подсказки».
Как вы, возможно, знаете, Cloudflare также предоставляет встроенную CDN NitroPack. Этот переход открыл нам дверь для начала работы над новой функцией пограничного кэширования HTML, которая, когда она будет выпущена, позволит нам предоставить всем нашим клиентам возможность включить Early Hints без учетной записи Cloudflare.
Мы глубоко погрузились в процесс разработки и усердно работаем над тем, чтобы как можно скорее выпустить пограничное кэширование HTML. Поэтому не забудьте подписаться на нашу рассылку и следить за нашим блогом, чтобы первыми узнать, когда мы объявим об этом.