3.10. Как перевести веб-приложение на HTTP/2

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

Часто для переключения ничего не нужно делать, главное — убедиться, что ваш сервер поддерживает HTTP/2. Оптимизация веб-приложения в основном состоит из удаления всех оптимизаций для HTTP/1.1 и создания новых для HTTP/2.2.

Ниже мы рассмотрим решение: что делать, если ваш сервер не поддерживает HTTP/2 «из коробки».

1. Проверьте, полезен ли переход на HTTP/2 для пользователей вашего веб-приложения

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

Например, в Google Analytics:

  1. Откройте Google Analytics и выберите профиль веб-приложения.
  2. Перейдите в отчёт «Аудитория» > «Технологии» > «Браузер и ОС».
  3. По умолчанию основным выбранным параметром будет «Браузеры».
  4. Измените дополнительный параметр на «Пользователи» > «Версия браузера».
  5. Вы увидите таблицу всех браузеров и версий, которые ваши посетители используют для просмотра сайта.

2. Проверьте серверное программное обеспечение

Свяжитесь с хостинговой компанией и узнайте, какую систему используют ваши веб-серверы — вероятно, Apache или NGINX. Уточните, поддерживает ли текущая версия системы HTTP/2 «из коробки». Например, Apache начал поддерживать HTTP/2 с версии 2.4.17, NGINX — 1.9.5. При этом убедитесь, что ваш сервер продолжит поддерживать всех пользователей HTTP/1.x в качестве запасного варианта.

Полный список программного обеспечения, поддерживающего HTTP/2, можно найти в официальной документации. Проверить версию сервера также можно с помощью сервиса http2.pro.

3. Проверьте, установлен ли SSL-сертификат

Переход на HTTP/2 почти бесполезен, если на вашем сервере нет SSL-сертификата. Большинство браузеров просто проигнорируют HTTP/2-версию веб-сайта, если она не защищена. Поэтому установите SSL-сертификат.

4. Оптимизируйте Javascript и CSS для HTTP/2

Теперь избавимся от оптимизации под HTTP, которая для HTTP/2 неактуальна.

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

Например, общая рекомендация для HTTP/1 заключалась в том, чтобы уменьшить количество файлов CSS и Javascript, на которые есть ссылки в исходном коде, и объединить их в одни файлы. Это имеет смысл для протокола HTTP/1, поскольку веб-страницы загружаются постепенно, от начала до конца. Быстрее загрузить один большой файл со всеми CSS или JavaScript, чем иметь отдельные файлы для каждой части веб-приложения. Недостатком этой практики является то, что при каждом небольшом изменении CSS и JavaScript ваш веб-сайт должен обновлять весь большой файл, а пользователям приходится загружать ненужный код.

Благодаря преимуществам скорости HTTP/2 можно загружать только тот код JavaScript или CSS, который действительно требуется пользователю при посещении конкретной страницы.

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

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

5. Спрайты

Аналогично со спрайтами — другим популярным методом, предназначенным для повышения производительности веб-приложений под HTTP/1.x.

До использования HTTP/2 и SPDY каждый запрос ресурсов страницы требовал значительных затрат времени. Каждое новое изображение означало дополнительные миллисекунды загрузки. Чтобы сэкономить время и ресурсы сети, нужно было объединять, например, иконки, в одно большое изображение — спрайт.

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

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

6. Поддомены

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

Готово!

Настройка поддержки HTTP/2 сервером

Теперь поговорим о ситуации, если сервер не поддерживает HTTP/2 из коробки.

Nginx

Обновите версию сервера Nginx, откройте файл конфигурации /etc/nginx/nginx.conf и отредактируйте его. Вместо строки:

listen 443 SSL

Введите значение:

listen 443 ssl http2

И обновите сервер командой:

sudo service nginx reload

Apache

Если ваш сайт находится на сервере Apache, обновите его до последней версии. Подключите mod_http2 и добавьте в файл конфигурации строку:

<!-- для https -->
Protocols h2 http/1.1
<!-- для http -->
Protocols h2c http/1.1

Обновите сервер командой:

sudo service apache reload

После установки HTTP/2 проверьте его активность здесь https://tools.keycdn.com/http2-test.

Готово! Ваше веб-приложение обновлено под HTTP/2.

Чек-лист переключения:

  • Проверьте версии браузеров пользователей веб-приложения.
  • Убедитесь, что хостинг поддерживает HTTP/2.
  • Подключите SSL.
  • Избавьтесь от оптимизаций под HTTP/1.x.
  • Оптимизируйте проект под HTTP/2.