Оптимизация в HTTP/2

Если вы еще сомневаетесь, стоит ли переводить ваш WEB-проект на HTTP/2, то ответ: да, стоит

На примере реального проекта розничная сеть магазинов мы покажем насколько эффективнее стал интернет ресурс

Чего удалось достичь на реальном проекте

Доступ через протокол версии Среднее время загрузки страницы
HTTP 1.x без оптимизации 5.44 сек
HTTP 1.x с включенной оптимизаций:"склейка файлов","доменное шардирование" 5.07 сек
SPDY/3.1 4.77 сек
HTTP/2 3.91 сек
На диаграмме загрузки ресурсов (js, css, картинки) для подключения HTTP 1.1, отлично видно, что количество загружаемых файлов ограничено количетсвом открываемых браузером потоков. Загрузка происходит последовательно и "временная линия" имеет значительную продолжительность. Кроме того, со стороны сервера могут присутствовать ограничения, на количество открываемых потоков для единичного браузера. А также не забываем, что все данные передаются в текстовом виде. Диаграмма загрузки взята с другого сайта allo.ua, для иллюстрации различий
cosmos
На диаграмме для подключения HTTP/2, "временная линия" имеет совершенно другую картину. Она короткая, все ресурсы загружаются параллельно. Если просмотреть поток передачи данных, можно убедиться что содержимое ресурсов передается в двоичном виде, сперху применяется дополнительное ZIP сжатие.
cosmos

Почему возникла проблема

За время существования HTTP 1.1 было придумано множество "костылей", чтобы обойти ограничения протокола
  • Доменный шардинг - это такой способ распределения множества файлов по различным доменам и CDN, который решает проблему параллельных соединений
  • Спрайты - объединение множества маленьких картинок в одно большое изображение с целью увеличить скорость загрузки страницы
  • "Склейка файлов" - это как спрайты, все необходимые файлы, CSS и JavaScript, объединяются в один большой для передачи одним потоком по одному соединению
  • В некоторых системах управления контентом были встроены специальные технологии, например "композитный сайт" в 1С-Битрикс

Главные отличия HTTP/2 от HTTP 1.1

  • Производительность Новая спецификация намного быстрее и производительнее HTTP 1.1.
  • Бинарность Поэтому протокол более эффективен при парсинге, более компактный при передаче, подвержен меньшему количеству ошибок
  • Мультиплексирование Все файлы подгружаются параллельно. Запросы и ответы разделяются по фреймам с мета-данными, которые ассоциируют запросы и ответы. Так что они не перекрывают друг-друга и не вызывают путаницы. При этом ответы получаются по мере их готовности, следовательно, тяжелые запросы не будут блокировать обработку и выдачу более простых объектов
  • Приоритизация Вместе с мультиплексированием появилась приоритизация трафика. Запросам можно назначить приоритет на основе важности и зависимости.
  • Компрессия заголовков Протокол HTTP построен таким образом, что при отправке запросов также передаются заголовки, которые содержат дополнительную информацию. Сервер, в свою очередь, также прикрепляет заголовки к ответам. А учитывая, что веб-страницы состоят из множества файлов, все заголовки могут занимать приличный объем. Поэтому в HTTP/2 присутствует сжатие заголовков, которое позволит существенно сократить объем вспомогательной информации, так что браузер сможет отправить все запросы сразу.
  • Шифрование Протокол HTTP/2 не требует шифрования канала. Тем не менее, все современные браузеры работают с HTTP/2 только вместе с TLS, как и Nginx. Так что массовое внедрение протокола должно поспособствовать распространению шифрования по Сети. Поэтому, если вы уже используете TLS, то стоит задействовать HTTP/2, который раскрывает весь потенциал шифрования. При создании зашифрованного соединения происходит только один TLS Handshake, что существенно упрощает весь процесс и сокращает время подключения.
  • Прогрессивность Все новые версии популярных веб-серверов уже поддерживают протокол
Протокол HTTP/2 значительно оптимизирован по сравнению с HTTP 1.1, его внедрение и минимальные настройки способно улучшить производительность вашего web-проекта. А отключение дополнительных ухищрений, которые использовались чтобы обойти ограничения HTTP 1.1 может снять целый слой бизнес-логики с системного программного обеспечения и еще более ускорить систему

Насколько протокол поддерживается браузерами?

Доля использования HTTP/2 поддерживающих версий браузера Global Market Share
IE 11 on Windows 10 0.14%
Edge 12, and 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%

Как запустить у себя

Подключить SSL сертификат
# for a https server spdy/3.1, http/1.1
openssl s_client -servername www.aniart.com.ua -connect www.aniart.com.ua:443 -nextprotoneg ''
CONNECTED(00000003)
Protocols advertised by server: h2, spdy/3.1, http/1.1
Для включения в Nginx (версия 1.9.5 или выше) в файле конфигурации /etc/nginx/nginx.conf (секция server) необходимо дополнить директиву listen:
server {
	listen              443 ssl http2;
	server_name         example.com;
	ssl_certificate server.crt;
	ssl_certificate_key server.key;
}
						
Apache (начиная с версии 2.4.17 и выше) нужно дополнить файл конфигурации:
# for a https server
Protocols h2 http/1.1
# for a http server
Protocols h2c http/1.1
						

Всегда обращайтесь к профессионалам

Оптимально настроить сервер под ваши нагрузки, проконсультировать по e-commerce, если что-то пошло не так, или просто хотите доверить эту операцию профессионалам, всегда можете обратиться к нам Aniart
image

У Вас есть проект?

Давайте обсудим его. Придумаем. И сделаем!

Оставить заявку

Не пропустите. Похожие публикации

Мы всегда готовы к диалогу

Украина, г. Киев ул. Ивана Мазепы 11-б
+38 (044) 362-87-14
+38 (044) 239-16-74
Россия, г. Москва Рублевское шоссе д.28 офис №111
+7 (916) 961 39 65
Казахстан, г. Алматы ул. Желтоксана, 175 офис 403
+7 (702) 170 98 70
+7 (727) 392 58 48

Не подписывайтесь!

2437 подписчиков
2017 ©  «AniArt»  -  Технологические решения для интернет бизнеса
Работает на 1C-Битрикс: Управление сайтом