Современные реалии таковы, что не каждый бизнес может себе позволить сайт, особенно стартующий бизнес. Поэтому выгодно воспользоваться конструктором сайтов, например filandor. Запуск сайта через несколько минут.
В прошлом году мы продемонстрировали, что мы подразумеваем под «молниеносной скоростью», продемонстрировав первоклассную производительность Pages во всех частях мира, а сегодня мы рады объявить об интеграции, которая еще больше продвигает наше стремление к скорости — представляем Pages поддержка ранних подсказок! Ранние подсказки позволяют разблокировать загрузку критически важных ресурсов страницы раньше любых медленных HTML-страниц. Ранние подсказки можно использовать для улучшения процесса загрузки для ваших посетителей за счет значительного снижения ключевых показателей производительности, таких как самая большая содержательная отрисовка (LCP).
Что такое ранние подсказки?
Ранние подсказки — это новая функция Интернета, которая поддерживается в Chrome, начиная с версии 103, и которую Cloudflare сделал общедоступной для веб-сайтов, использующих нашу сеть. Early Hints заменяет Server Push в качестве механизма «подсказки» браузеру о критических ресурсах на вашей странице (например, о шрифтах, CSS и изображениях вверху страницы). Браузер может немедленно начать загрузку этих ресурсов, не дожидаясь полного HTML-ответа. Это использует время, которое ранее было потрачено впустую! До Early Hints никакая работа не могла быть начата, пока браузер не получил первый байт ответа. Теперь браузер может с пользой заполнить это время, когда раньше он сидел в ожидании. Ранние подсказки могут значительно улучшить производительность вашего веб-сайта, особенно для таких показателей, как LCP.
Как работают ранние подсказки
Cloudflare кэширует любые preload а также preconnect тип Link заголовки, отправленные из вашего ответа 200 OK, и отправляет их заранее для любых последующих запросов в качестве ответа 103 Early Hints.
С практической точки зрения диалог HTTP теперь выглядит так:
Запрос
GET /
Host: example.com
Ранний ответ на подсказки
103 Early Hints
Link: </styles.css>; rel=preload; as=style
Ответ
200 OK
Content-Type: text/html; charset=utf-8
Link: </styles.css>; rel=preload; as=style
<html>
<!-- ... -->
</html>
Ранние подсказки на страницах Cloudflare
Ранние подсказки особенно полезны для веб-сайтов, размещенных на страницах Cloudflare. Если вы используете функции страниц для создания динамических страниц, отображаемых на стороне сервера (SSR), есть большая вероятность, что Early Hints значительно улучшит ваш веб-сайт.
Тестирование производительности
Мы создали простой демонстрационный веб-сайт электронной коммерции, чтобы оценить эффективность Early Hints.
На этой целевой странице указана цена каждого товара, а также счетчик остатков. Сама страница представляет собой просто созданный вручную HTML и CSS, но эти цены и значения запасов формируются в реальном времени для каждого запроса с помощью Pages Functions. Чтобы имитировать загрузку из внешнего источника данных (возможно, поддерживаемого KV, Durable Objects, D1 или даже внешним API, например Shopify), мы добавили фиксированную задержку перед разрешением этих данных. Мы включаем preload ссылки в нашем ответе на некоторые важные ресурсы:
- внешняя таблица стилей CSS,
- изображение футболки,
- изображение шапки,
- и изображение колпачка.
Самый первый запрос создает водопад, как и следовало ожидать. Первый запрос заблокирован в течение значительного периода времени, пока мы разрешаем эти данные о ценах и запасах. После загрузки браузер анализирует HTML, извлекает внешние ресурсы и делает последующие запросы на их содержимое. CSS и изображения значительно увеличивают время загрузки, учитывая их большие размеры и высокое качество. Самая большая отрисовка контента (LCP) происходит, когда загружается изображение футболки, и документ завершается после выполнения всех запросов.
В последующих запросах все становится интереснее! Эти preload ссылки кэшируются в глобальной сети Cloudflare и отправляются перед документом в ответе 103 Early Hints. Сейчас водопад выглядит совсем иначе. Первоначальный запрос выходит таким же, но теперь запросы на CSS и изображения сдвигаются намного дальше влево, поскольку они могут быть запущены, как только будет доставлен ответ 103. Браузер начинает извлекать эти ресурсы, ожидая завершения обработки исходного запроса на стороне сервера. LCP снова появляется после загрузки изображения футболки, но на этот раз оно переносится 530 мс потому что он начал загружаться 752 мс быстрее, и документ полностью загружен 562 мс быстрее, опять же, потому что все внешние ресурсы могут начать загружаться быстрее.
Последние четыре запроса (выделены желтым цветом) возвращаются как ответы 304 Not Modified с использованием If-None-Match заголовок. По умолчанию Cloudflare Pages требует, чтобы браузер подтвердил, что все ресурсы свежие, и поэтому, если они были обновлены между ответом Early Hints и когда они начинают использоваться, браузер проверяет, не изменились ли они. Поскольку они этого не сделали, нет содержательного тела для загрузки, и ответ завершается быстро. Этого можно избежать, установив пользовательский Cache-Control заголовок для этих активов, используя _headers файл. Например, вы можете кэшировать эти изображения на одну минуту с помощью такого правила:
# _headers
/*.png
Cache-Control: max-age=60
Мы могли бы продолжить этот аудит производительности, изучив другие функции, которые предлагает Cloudflare, такие как автоматическая минимизация CSS, изображения Cloudflare и изменение размера изображения.
Мы уже обслуживаем страницы Cloudflare из одной из самых быстрых сетей в мире — Early Hints просто позволяет разработчикам еще больше использовать преимущества нашей глобальной сети.
Использование ранних подсказок и страниц Cloudflare
Функция «Ранние подсказки» в Cloudflare в настоящее время ограничена кэшированием. Link заголовки в ответе веб-страницы. Как правило, это означает, что пользователям Cloudflare Pages нужно либо использовать _headers файл или функции Pages, чтобы применить эти заголовки. Однако для вашего удобства мы также добавили поддержку преобразования любых <link> HTML-элементы, которые вы включаете в свое тело в Link заголовки. Это позволяет вам напрямую управлять ранними подсказками, которые вы отправляете, прямо из того же документа, в котором вы ссылаетесь на эти ресурсы — нет необходимости выходить из HTML, чтобы воспользоваться преимуществами ранних подсказок.
Например, для следующего HTML-документа будет сгенерирован ответ Early Hints:
HTML-документ
<!DOCTYPE html>
<html>
<head>
<link rel="preload" as="style" href="/styles.css" />
</head>
<body>
<!-- ... -->
</body>
</html>
Ранний ответ на подсказки
103 Early Hints
Link: </styles.css>; rel=preload; as=style
Как упоминалось ранее, Link заголовки также могут быть установлены с помощью _headers файл, если вы предпочитаете:
# _headers
/
Link: </styles.css>; rel=preload; as=style
Ранние подсказки (и автоматический HTML <link> синтаксический анализ) уже включен автоматически для всех pages.dev домены. Если у вас есть какие-либо пользовательские домены, настроенные в вашем проекте Pages, обязательно включите Early Hints для этого домена на панели инструментов Cloudflare на вкладке «Скорость». Дополнительную информацию можно найти в нашей документации.
Кроме того, в будущем мы надеемся поддерживать функции Smart Early Hints. Умные ранние подсказки позволят Cloudflare автоматически генерировать ранние подсказки, даже если их нет. Link заголовок или <link> элементы существуют, анализируя трафик веб-сайта и делая выводы о том, какие ресурсы важны для данной страницы. Вскоре мы расскажем больше об умных ранних подсказках.
А пока попробуйте Early Hints on Pages уже сегодня! Дайте нам знать, какое улучшение загрузки вы видите на нашем сервере Discord.
