Что такое HTTP/2 и как влияет на увеличение скорости загрузки сайта

Что такое HTTP/2? Это современный протокол передачи данных в сети. Использование данного протокола очень сильно повышает скорость загрузки Вашего сайта.

Выпуск HTTP/2 в 2015 году стал большой победой для современного Интернета. Хотя HTTP/1.1 работал достаточно хорошо, он был создан в эпоху, когда еще не было полного двустороннего шифрования, веб-страниц размером 1,9 МБ и времени доставки менее 3 секунд. Для больших объемов страниц и малого времени доставки контента нам нужен был современный протокол для современной сети, и HTTP/2 обещал стать таким.

Конечно, перевести всю сеть на новый протокол непросто. У нас было 18 лет HTTP/1.1, что означает 18 лет устаревших приложений, фреймворков и методов разработки. Это много времени с точки зрения программного обеспечения, и теперь, когда HTTP/2 устранил многие ограничения старого протокола, многие из этих приложений и методов потребуют обновления.

В этом посте мы рассмотрим влияние HTTP/2 на разработку внешнего интерфейса (сайта). Имейте в виду, что HTTP/2 по-прежнему поддерживается только 83% браузеров. Если вы решите внедрить эти изменения, обязательно убедитесь, что они принесут пользу вашим посетителям. Как подключить и настроить http/2 с openssl в VestaCP с Centos 7 читайте тут.

Разделение домена

Одним из самых больших ограничений HTTP/1.1 является отсутствие мультиплексирования. С HTTP/1.1 каждый ресурс на веб-сайте загружается один за другим. Это означает, что веб-сайт со 100 файлами передает каждый отдельный файл один за другим в том порядке, в котором их запрашивает браузер. Передача каждого файла не начнется до тех пор, пока предыдущий файл не закончатся.

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

Разделение домена использовало это, преднамеренно перемещая активы в разные домены. HTML можно было разместить в одном домене, а файлы изображений, CSS и JavaScript — в других доменах или поддоменах. Браузеры будут открывать отдельные подключения к каждому домену и загружать файлы параллельно, обходя ограничения HTTP/1.1.

Как HTTP/2 это исправляет?

HTTP/2 изначально поддерживает мультиплексирование по одному соединению. Браузер открывает одно TCP-соединение с веб-сервером для всех запросов. Разделение домена может на самом деле снизить производительность, так как каждое новое соединение требует поиска DNS и рукопожатия TCP. С HTTP/2 проще и быстрее перемещать все активы в один и тот же домен.

Конкатенация

Отсутствие мультиплексирования в HTTP/1.1 привело к созданию еще одного хитрого трюка, называемого конкатенацией ресурсов. Объединение ресурсов — это объединение нескольких небольших файлов, таких как файлы CSS и JavaScript, в один файл большего размера. Идея состоит в том, что накладные расходы на передачу нескольких небольших файлов намного больше, чем на передачу одного большого файла. Конкатенация также используется для объединения изображений в листы спрайтов.

Идея конкатенации заключается в том, что накладные расходы на передачу одного файла немного большего размера меньше, чем на передачу нескольких файлов меньшего размера. Проблема в том, что это уменьшает модульность, влияя как на управление кешем, так и на время загрузки страницы. Если изменяется одно правило CSS или строка JavaScript, необходимо повторно кэшировать весь файл. Браузеры также могут в конечном итоге загрузить код, который никогда не будет использован.

Как HTTP/2 это исправляет?

Повторно используя одно и то же соединение, мультиплексирование устраняет большую часть накладных расходов, связанных с загрузкой отдельных файлов. Однако конкатенация все еще может быть полезна в сочетании со сжатием. Стоимость сжатия очень маленьких ресурсов не стоит дополнительного времени обработки, и хотя некоторые веб-серверы позволяют вам установить пороговое значение (в Nginx это значение по умолчанию равно 20 байтам или меньше), объединение некоторых из этих файлов может помочь уменьшить их размер.

Встраивание

Как и конкатенация, встраивание ресурсов — еще один трюк, предназначенный для уменьшения количества загрузок. Встраивание встраивает внешние ресурсы непосредственно в HTML-код веб-страницы. Например, файлы JavaScript и CSS становятся <script> и <style> блоками соответственно, а изображения кодируются в кодировке Base64 непосредственно в теги изображений.

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

Как HTTP/2 это исправляет?

Встраивание противодействует одной из сильнейших возможностей HTTP/2, одновременно увеличивая размер HTML-документа и уменьшая количество мультиплексируемых файлов. Обычно браузер загружает HTML, изображение и таблицу стилей параллельно, но при встраивании браузер должен загружать все три как один файл. Встраивание не только НЕ позволяет браузерам мультиплексировать, но также НЕ позволяет браузерам и прокси-серверам кэшировать внешние ресурсы для более быстрой доставки.

Сравнение производительности

К сожалению, НЕ смогу привести детальное сравнение по производительности сайта до подключения нового протокола и после подключения. Так, как не фиксировал все данные в ходе модернизации своего сайта.

Скажу лишь одно:

Была проделано очень большая работа по оптимизации проекта. Но перевалить отметку в 85 — 89 процентов по Гугл PageSpeed Insights, ни как не удавалось. Только после правильной установки протокола HTTP/2 удалось пересечь заветную границу и попасть в зеленую зону. Выйти на стабильные 91 — 93 процента. Теперь мой сайт на WordPress попал в 1% сайтов на земном шаре по скорости загрузки.

Скорость загрузки после подключения http2

А Вы много видели сайтов в зеленой зоне по PageSpeed Insights? Лично я НЕТ!

Заключение

Хотя HTTP/2 устраняет множество проблем с HTTP/1.1, это не означает, что все методы разработки внешнего интерфейса (САЙТА) устарели. Такие методы, как минимизация и размещение ресурсов в сети доставки контента (CDN), по-прежнему рекомендуются для уменьшения размера файла и увеличения скорости загрузки. HTTP/2 также представляет внутренние функции, такие как сжатие заголовков и отправка на сервер, которые обещают сделать веб-сайты еще быстрее. Есть подозрение, что использование серверной загрузки для критических ресурсов также сократит все важное время FirstPaint до HTTP/1.1 с оптимизацией внешнего интерфейса.

По опыту оптимизации своего проекта могу сказать следующее:

Критический CSS встроен в шапку, есть несколько JavaScript встроенных инлайн. Доставку контента (CDN) сети никогда не использовал и не буду. Все таблицы стилей объединены в одну, JavaScript так же объединён в один.

Но, как уже было сказано выше именно грамотное подключение современного протокола HTTP/2 сыграло большую роль в достижении зеленой зоны. И прекрасно работает со старыми методами ускорения загрузки. Если что то отключить, допустим разобрать и подгружать 7 таблиц стилей вместо одной, то скорость падает до 79 — 81.

Вывод

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

P. S.

Очень долгое время я считал, что данный протокол у меня подключен. И он действительно был подключен, но работал кривовато. Виной тому был старый openssl. Когда смонтировал Nginx с новым openssl, протокол заработал как надо.

Вы можете узнать больше о HTTP/2 на домашней странице HTTP/2. Надеюсь мне удалось рассказать, как влияет на скорость загрузки сайта HTTP/2 и что такое HTTP/2.