Разбираем различия между HTTP Preload и HTTP/2 Push

HTTP Preload и HTTP/2 Server Push используются для ускорения загрузки веб-приложения. В этой статье мы рассмотрим сходства и различия HTTP Preload и HTTP/2 Push. А также узнаем, когда нужно использовать каждую из них.

Содержание

Что такое HTTP/2 Push?

HTTP/2 Push позволяет веб-разработчикам определять конкретные ресурсы, которые должны быть переданы клиенту вместе с HTML-документом. Традиционно клиентская сторона, запрашивающая ресурсы у сервера, сначала получает HTML-файл. Затем анализирует его, чтобы определить, какие ресурсы нужно запрашивать далее. После чего на сервер поступают дополнительные запросы.

Но благодаря HTTP/2 Push, сервер может заранее передавать ресурсы еще до того, как клиент проанализирует HTML. Например, есть сайт с файлом

index.html
и файлом
style.css
. В этом случае браузер сначала запрашивает
index.html
, а после его получения и анализа – файл
style.css
. Но поскольку мы знаем, что клиент все равно будет запрашивать
style.css
, можно указать серверу отправить
style.css
одновременно с
index.html
.

Что такое HTTP Preload?

HTTP Preload – это еще одна технология, которую можно использовать для предварительной отправки определенных ресурсов клиенту. Но директива Preload работает не так, как HTTP/2 Push.

С помощью директивы Preload можно указать браузеру запрашивать определенные высокоприоритетные ресурсы, необходимость которых он определяет только после анализа HTML-файла.

Предположим, что браузер запросил файл

index.html
. При его анализе браузер обнаруживает, что необходим
style.css
. А также что в этом CSS-файле есть ссылка на файл
font.ttf
. Предварительная загрузка позволяет отправлять на сервер запрос одновременно и на
style.css
, и на
font.ttf
. Поскольку
font.ttf
– это ресурс, который понадобится в ближайшем будущем.

Сходства и различия

HTTP Preload и HTTP/2 Push предоставляют браузеру необходимые ресурсы заранее. Тем не менее, существует несколько важных различий между этими технологиями. Например:

  • Синтаксис Preload и Push различается. Вы можете использовать директиву Preload, чтобы инициировать Push. Если вы хотите явно предварительно загрузить ресурс, а не вызывать Push, примените команду nopush следующим образом:
Link: rel=preload; </app/script.js>;  as=script; nopush
  • С помощью Push можно принудительно отправить ресурсы, как только сервер получит первоначальный запрос от браузера. Preload позволяет выполнить предварительную загрузку только после того, как браузер получит и проанализирует HTML-файл.
  • Preload позволяет загружать ресурсы со сторонних доменов. С помощью Push можно принудительно отправлять ресурсы только со своих доменов.
  • Preload еще не полностью поддерживается браузерами. А Push имеет больше поддержки, поскольку это функция HTTP/2.

Ниже приведена простая диаграмма от Nginx, которая лучше демонстрирует разницу между двумя технологиями.

Когда использовать Preload, а когда Push?

Нельзя применять Preload и Push для ускорения доставки всех используемых ресурсов одновременно. Вместо этого вы должны заранее отправлять только первоочередные ресурсы.

Несколько примеров использования Push:

  • Вместо встраивания кода CSS или JavaScript в HTML разместите его в отдельных файлах и принудительно отправьте браузеру.
  • Push отлично подходит для оптимизации использования серверных мощностей.

Примеры использования Preload:

  • Загрузка критически важного CSS, который поздно обнаруживается в HTML-документе.
  • Загрузка изображений из верхней части веб-страницы, на которые ссылается CSS-файл.
  • Загрузка шрифтов, на которые ссылается CSS-файл.

Использование Preload и HTTP/2 Push с KeyCDN

KeyCDN поддерживает HTTP/2 Push, если установить заголовок Link с директивой Preload. После этого KeyCDN будет отправлять ресурсы с помощью push:

add_header Link "</style.css>; as=style; rel=preload";

Но если вы не хотите использовать push, установите атрибут nopush. Кроме этого, если реализация HTTP/2 не принимает принудительно отправленные ресурсы, клиент будет рассматривать их как обычный предварительно загружаемый (preload) ресурс.

Итоги

HTTP Preload и HTTP/2 Push являются полезными механизмами. Но для эффективного их использования нужно провести проверку изменения скорости загрузки страниц. Не торопитесь и поэкспериментируйте с Preload и Push в своем собственном приложении.

Данная публикация представляет собой перевод статьи «Exploring Differences Between HTTP Preload vs HTTP/2 Push» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню