Чего удалось достичь на реальном проекте
| Доступ через протокол версии | Среднее время загрузки страницы |
| 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, для иллюстрации различий
На диаграмме для подключения HTTP/2, "временная линия" имеет совершенно другую картину. Она короткая, все ресурсы загружаются параллельно.
Если просмотреть поток передачи данных, можно убедиться что содержимое ресурсов передается в двоичном виде, сперху применяется дополнительное ZIP сжатие.
Почему возникла проблема
За время существования 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
