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