Разбираем различия между 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 в своем собственном приложении.

Пожалуйста, оставьте ваши мнения по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, отклики, дизлайки, подписки, лайки!