HTTP / 2 - это не будущее. Это настоящее.

Обзор истории HTTP

Помните, что в мае 1996 года родилась самая первая версия протокола HTTP (HTTP / 1.0).
Этот протокол описывается как RFC 1945.

Но прошло время, и веб-приложения претерпели значительные изменения. Сейчас мы создаем веб-приложения, которые привносят в браузер все больше и больше логики, и для этого нам нужно загружать все больше и больше ресурсов: это означает, что мы должны загружать несколько CSS, которые иногда создают анимацию в браузере или также сложные операции, более и больше Javascript и изображений тоже.

Версия HTTP / 1.1 предложила и позволила нам использовать новые веб-технологии, которые мы знали в последние годы, но веб-приложения все чаще используются на смартфонах и других подключенных устройствах, поэтому теперь потребности сосредоточены на производительности просмотра веб-страниц.

После первого шага, сделанного Google в 2009 году с протоколом SPDY, HTTP / 2, наконец, движется в том же направлении, что и RFC 7540.

HTTP / 2 Введение

В настоящее время протокол HTTP / 2 поддерживается большинством браузеров, и это важно отметить. Во время написания этого сообщения в блоге только Opera Mini не реализует новый протокол, как показано в следующей таблице:

При этом вы можете рассмотреть вопрос об обновлении ваших собственных веб-приложений до HTTP / 2 как можно скорее и, таким образом, предложить своим посетителям высокую производительность просмотра.

Действительно, HTTP / 2 предоставит вам новые функции, которые очень помогут в улучшении ваших приложений. Мы опишем их в оставшейся части этой статьи.

Встроенная поддержка TLS

Даже если шифрование не является обязательным, большинство браузеров сегодня поддерживают только HTTP / 2, используя шифрование, связанное с TLS, и это не проблема, потому что настоятельно рекомендуется получить сертификат SSL, что можно сделать легко и бесплатно с такими сервисами, как Let's Encrypt. Это также поможет вам защитить свое приложение, если они еще не сделали этого.

Для информации: если вы решите не использовать шифрование, уменьшительное число протокола будет h2c, тогда как если вы это сделаете, это будет h2.

Если вам нужна дополнительная информация о том, как улучшить безопасность SSL-обменов, я настоятельно приглашаю вас прочитать мое сообщение в блоге по этой теме.

Мультиплексирование потоков

Ресурсы HTTP / 1 загружались один за другим, как вы можете видеть ниже на водопаде приложения HTTP / 1. HTTP / 2 позволит сэкономить много времени на «времени ожидания», потому что несколько ресурсов могут быть отправлены / загружены клиентом с использованием одного и того же HTTP-потока (который часто называют двоичным потоком).

Здесь прошедшее время, отображаемое зеленым цветом, соответствует времени ожидания перед загрузкой ресурса. Фиолетовое время соответствует времени загрузки ресурса (TTFB - Time To First Byte), и, наконец, серое время соответствует получению ресурса клиентом.

Вот водопад загрузки ресурсов по протоколу HTTP / 2:

Здесь вы можете ясно видеть, что время, выделенное для ожидания ресурсов (старое зеленое время), полностью исчезло, и все ресурсы явно загружаются в одно и то же время, потому что они находятся в одном потоке.

Более того, учитывая, что поисковые системы рассматривают время загрузки страницы как важный показатель для повышения рейтинга веб-сайтов, это отличная причина перейти на протокол HTTP / 2: это будет большим улучшением для вашего SEO.

Чтобы помочь вам визуализировать время скорости загрузки ресурса, вот демонстрация, сравнивающая HTTP / 1 и HTTP / 2, сделанная Golang:

Плата за HTTP / 1.1: http://http2.golang.org/gophertiles?latency=0
Плата за HTTP / 2: https://http2.golang.org/gophertiles?latency=0

HPACK: сжатие заголовков

Эта новая версия протокола также включает сжатие заголовков, которые отправляются сервером для оптимизации потокового обмена.

Таким образом, если я сделаю первый запрос на веб-сайте HTTP / 2, я получу следующие заголовки:

:authority: vincent.composieux.fr
:method: GET
:path: /
:scheme: https
accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
accept-encoding: gzip, deflate, sdch, br

В моем следующем запросе заголовки: Authority,: method,: scheme, accept и accept-encoding, вероятно, не изменятся.
HTTP / 2 сможет сжать их, чтобы освободить место в ответе.

Чтобы вы могли самостоятельно протестировать сжатие заголовков, я предлагаю вам использовать инструмент h2load, который вы можете использовать для тестирования производительности HTTP / 2-вызовов, сделав здесь два запроса:

$ h2load https://vincent.composieux.fr -n 2 | grep traffic
traffic: 32.25KB (33023) total, 650B (650) headers (space savings 25.29%), 31.51KB (32270) data

Здесь мы видим, что мои сжатые заголовки сэкономили мне 25,29% размера обмена.

Server Push (предварительная загрузка)

Это небольшая революция в загрузке ресурсов браузера.

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

Чтобы предварительно загрузить ресурс, вам просто нужно отправить заголовок HTTP, отформатированный следующим образом:

Link: </fonts/myfont.woff2>;rel="preload";as="font"

Вы, конечно, можете определить несколько заголовков ссылок, а в качестве атрибутов также могут принимать следующие значения: шрифт, изображение, стиль или сценарий.

Также можно использовать разметку HTML для предварительной загрузки ресурсов:

<link rel="preload" href="/fonts/myfont.woff2" as="font">

Также, если вы используете PHP-фреймворк Symfony, обратите внимание, что в нем реализована предварительная загрузка ресурсов в версии 3.3. Чтобы использовать его, вам просто нужно использовать обертку предварительной загрузки следующим образом:

<link href="{{ preload(asset('/fonts/myfont.woff2'), { as: 'font' }) }}">

Для получения дополнительной информации об этой функции вы можете посетить: http://symfony.com/blog/new-in-symfony-3-3-asset-preloading-with-http-2-push

Также обратите внимание, что новый компонент Symfony в настоящее время находится на рассмотрении в этом запросе на слияние, чтобы управлять всеми доступными ссылками, которые позволяют выполнять предварительную загрузку или отправку (предварительная загрузка, предварительная установка, предварительная визуализация,…).

Подсказки сервера (предварительная выборка)

Обратите внимание, что этот метод не имеет отношения к HTTP / 2, потому что он доступен уже давно, но его интересно сравнить с предварительной загрузкой.

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

Его вариант использования совершенно тот же, в зависимости от того, что вам не нужно указывать атрибут as:

Link: </fonts/myfont.woff2>; rel=prefetch

Используйте протокол HTTP / 2

Если ваш веб-сервер является nginx, протокол HTTP / 2 поддерживается начиная с версии 1.9.5, и вам просто нужно указать в атрибуте listen, что вы хотите использовать http2:

server {
    listen 443 ssl http2;
    ...

Чтобы убедиться, что HTTP / 2 полностью включен на вашем сервере, я предлагаю вам ввести nginx -V и проверить, включена ли у вас опция компиляции - with-http_v2_module. Кроме того, вы также можете проверить, что ваша версия OpenSSL, используемая nginx, является последней.

Начиная с этого момента, вам просто нужно перезапустить ваш веб-сервер, чтобы включить новый протокол.

[note] К сведению, если http / 2 не поддерживается браузером клиента, ваш веб-сервер автоматически переключится на протокол http / 1.1. [/ note]

На стороне веб-сервера Apache версии 2.4.12 и выше также поддерживают HTTP / 2.

В глобальном масштабе активировать протокол HTTP / 2 довольно просто. Если вы из мира Javascript, вы должны знать, что доступен пакет http2 для создания экземпляра экспресс сервера с новой версией протокола.

Заключение

HTTP / 2 можно использовать с сегодняшнего дня в ваших веб-приложениях, и он может быть хорош только (в основном для ваших пользователей), но также и для вашего приложения во многих сферах: производительность, SEO, шифрование.

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

Так что же дальше? Работа над HTTP / 3 или новой версией после HTTP / 2 до сих пор не началась, но будущее и технологии должны оставить нам третью версию этого широко используемого протокола!

HTTP / 2 - это не будущее. Это настоящее.