Если вы всё ещё сомневаетесь, стоит ли переводить свой веб-проект на HTTP/2, ответ короткий: стоит. На примере реального проекта — сайта розничной сети магазинов — показываем, насколько быстрее стал ресурс после перехода. И что именно придётся сделать на сервере, чтобы получить тот же результат.
Что дал переход на реальном проекте
Мы замеряли среднее время загрузки страницы на одном и том же сайте, меняя только протокол доступа. Разница между самым медленным и самым быстрым вариантом — больше полутора секунд.
| Доступ через протокол версии | Среднее время загрузки страницы |
|---|---|
| HTTP 1.x без оптимизации | 5,44 с |
| HTTP 1.x с включённой оптимизацией: «склейка файлов», «доменный шардинг» | 5,07 с |
| SPDY/3.1 | 4,77 с |
| HTTP/2 | 3,91 с |
Показательно, что классическая оптимизация под HTTP 1.1 дала всего 0,37 секунды выигрыша, тогда как одна лишь смена протокола — больше полутора. То есть упирались мы не в размер файлов, а в ограничения самого способа передачи данных.
Как это видно на диаграммах загрузки
На диаграмме загрузки ресурсов (js, css, изображения) для соединения HTTP 1.1 отлично видно, что количество файлов, которые загружаются одновременно, ограничено числом потоков, которые открывает браузер. Загрузка идёт последовательно, и «временная линия» получается заметно длинной. Кроме того, со стороны сервера тоже могут быть ограничения на количество потоков для одного браузера. И не забываем: все данные передаются в текстовом виде.
На диаграмме для соединения HTTP/2 картина совсем другая. «Временная линия» короткая, все ресурсы загружаются параллельно. Если посмотреть на сам поток передачи данных, можно убедиться, что содержимое ресурсов идёт в двоичном виде, а сверху применяется дополнительное ZIP-сжатие.
Почему вообще возникла проблема
За время существования HTTP 1.1 разработчики придумали множество обходных приёмов, чтобы обойти ограничения протокола.
- Доменный шардинг — способ распределить множество файлов между разными доменами и CDN, который решает проблему параллельных соединений.
- Спрайты — объединение множества маленьких изображений в одно большое, чтобы ускорить загрузку страницы.
- «Склейка файлов» — то же самое, что спрайты, только для кода: все нужные CSS и JavaScript объединяются в один большой файл, чтобы передать его одним потоком по одному соединению.
- Встроенные технологии ускорения в CMS — в отдельных системах управления контентом для этого появлялись собственные специальные механизмы.
Главные отличия HTTP/2 от HTTP 1.1
Производительность
Новая спецификация значительно быстрее и производительнее HTTP 1.1.
Бинарность
Протокол эффективнее при парсинге, компактнее в передаче и меньше подвержен ошибкам.
Мультиплексирование
Все файлы подгружаются параллельно. Запросы и ответы разделяются на фреймы с метаданными, которые связывают их между собой, поэтому они не перекрывают друг друга и не создают путаницы. Ответы приходят по мере готовности, поэтому тяжёлые запросы не блокируют обработку и выдачу более простых объектов.
Приоритизация
Вместе с мультиплексированием появилась приоритизация трафика: запросам можно назначить приоритет на основе важности и зависимостей.
Сжатие заголовков
HTTP устроен так, что вместе с запросами передаются заголовки с дополнительной информацией, и сервер тоже добавляет заголовки к ответам. Поскольку страница состоит из множества файлов, заголовки вместе дают немалый объём. В HTTP/2 они сжимаются, поэтому вспомогательной информации становится существенно меньше, а браузер может отправить все запросы сразу.
Прогрессивность
Все новые версии популярных веб-серверов уже поддерживают протокол.
Шифрование: почему HTTP/2 почти всегда идёт вместе с TLS
Сам протокол HTTP/2 не требует шифрования канала. Однако все современные браузеры работают с HTTP/2 только вместе с TLS — так же, как и Nginx. Поэтому массовое внедрение протокола должно поспособствовать распространению шифрования в сети.
Из-за этого логика простая: если вы уже используете TLS, стоит задействовать HTTP/2, который раскрывает весь потенциал шифрования. При создании зашифрованного соединения происходит всего один TLS Handshake, а это существенно упрощает весь процесс и сокращает время подключения.
Насколько протокол поддерживают браузеры
На момент замера доля версий браузеров с поддержкой HTTP/2 выглядела так.
| Версии браузеров с поддержкой HTTP/2 | Global Market Share |
|---|---|
| IE 11 on Windows 10 | 0,14 % |
| Edge 12, 13 | 0,35 % |
| Firefox 36—45 | 5,09 % |
| Chrome 41—49 | 15,06 % |
| Safari 9 | 0,91 % |
| Opera 28—34 | 0,57 % |
| Safari for iOS 9.1 | 1,07 % |
| Opera 30 for Android | 0,01 % |
| Chrome 46 for Android | 3,59 % |
| Firefox 41 for Android | 0,01 % |
| Итого | 26,79 % |
Остальная аудитория просто продолжает работать по HTTP 1.1 — протокол согласуется при подключении, поэтому никого не «отрезает».
Как включить HTTP/2 у себя
- Подключите SSL-сертификат. Без TLS современные браузеры на HTTP/2 не перейдут, поэтому начинать нужно именно с сертификата.
- Проверьте, что сервер анонсирует h2. Сделайте запрос к своему домену через openssl s_client с параметром -nextprotoneg. В ответе должна быть строка вида «Protocols advertised by server: h2, spdy/3.1, http/1.1».
- Включите протокол в Nginx. Нужна версия 1.9.5 или выше. В файле конфигурации /etc/nginx/nginx.conf, в секции server, дополните директиву listen: listen 443 ssl http2; — рядом остаются server_name, ssl_certificate и ssl_certificate_key.
- Или дополните конфигурацию Apache. Начиная с версии 2.4.17, для https-сервера добавляется Protocols h2 http/1.1, для http-сервера — Protocols h2c http/1.1.
- Отключите лишние обходные приёмы. Склейка файлов, доменный шардинг и другие хитрости времён HTTP 1.1 после перехода уже не нужны.
Что это даёт в итоге
Протокол HTTP/2 значительно оптимизированнее по сравнению с HTTP 1.1: его внедрение и минимальные настройки способны улучшить производительность вашего веб-проекта. А отключение дополнительных хитростей, которые использовали, чтобы обойти ограничения HTTP 1.1, может снять целый слой бизнес-логики с системного программного обеспечения и ускорить систему ещё больше.
Оптимально настроить сервер под ваши нагрузки, проконсультировать по e-commerce, разобраться, если что-то пошло не так, — со всем этим лучше идти к специалистам. Не сомневайтесь и переводите свои проекты на HTTP/2.
