Хостинг сайтов MainHost
НАШ БЛОГ:  HTTP/2: ускоряем загрузку сайтов info@mainhost.com.ua     +380 (542) 798-780    

HTTP/2: ускоряем загрузку сайтов

Недавно для услуги хостинга сайтов мы добавили поддержку протокола HTTP/2. Сегодня детально расскажем о преимуществах и особенностях нового протокола.

HTTP/2 — новая версия сетевого протокола HTTP, основанная на разработанном компанией Google протоколе SPDY. Предыдущая версия протокола HTTP/1.1 принята в далеком 1999 году, когда сайты очень сильно отличались от современных. В наше время веб-технологии развиваются слишком стремительно, поэтому новая версия протокола — очень важное и нужное нововведение, направленное на повышение безопасности, эффективности и скорости работы сайтов.

Ключевые особенности HTTP/2

  • Мультиплексирование. В HTTP/1.1 для каждого запроса требуется устанавливать отдельное TCP-соединение, одновременное количество которых ограничено. Мультиплексирование в HTTP/2 позволяет браузеру выполнять множество запросов в рамках одного TCP-соединения. Таким образом, статические элементы загружаются параллельно, запросы и ответы не блокируют друг друга. Как результат, быстрая загрузка и визуализация страницы сайта.

  • Сжатие HTTP-заголовков. При отправке запросов клиентом и ответов сервером передаются HTTP-заголовки, которые содержат вспомогательную информацию. Если загружаемая страница содержит большое количество элементов — все заголовки будут занимать приличный объем. В HTTP/2 заголовки передаются в сжатом виде, что позволяет существенно сократить объем информации, которой обмениваются сервер и клиент. Кроме того, для сжатия используется специальный алгоритм HPACK, который снижает риски к атакам по перехвату информации.
  • Приоритизация. Назначение приоритетов запросам позволяет обеспечить визуальную скорость загрузки страницы для пользователя. Например, браузер может попросить сервер отправить в первую очередь файлы CSS, так как они очень важны для определения вида страницы.
  • Server Push. При использовании HTTP/1.1 сервер отправляет в ответ на запрос HTML-код и ожидает от браузера запросов на элементы страницы.  В HTTP/2 добавлена функция Server Push, которая позволяет серверу сразу отправлять дополнительные элементы, которые могут понадобится браузеру в будущем.
  • Бинарность. Протокол HTTP/2 является бинарным, в то время как HTTP/1.1 – текстовый. Поэтому он более эффективен для анализа и обработки сервером, более компактный при передаче и меньше подвержен ошибкам.

Поддержка браузерами

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

Важно! Протокол HTTP/2 не требует обязательного шифрования, однако разработчики браузеров приняли решение реализовать работу с новым протоколом только через TLS (HTTPS). Поэтому наличие установленного SSL-сертификата (коммерческого или бесплатного) является обязательным условием для работы по протоколу HTTP/2.

Ниже наглядно представлены версии браузеров, для которых реализована поддержка протокола HTTP/2 (выделены зеленым фоном). В Internet Explorer 11 новый протокол поддерживается только в Windows 10, в Safari — OSX 10.11 и выше.

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

HTTP/2 и поисковая оптимизация (SEO)

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

HTTP/2 и оптимизация сайтов

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

  • Объединение изображений в спрайты. В HTTP/1.1 объединение небольших изображений в один спрайт эффективно, так как требуется всего одно HTTP-соединение и не возникает очереди запросов. Но если на странице используется всего одно изображение — нужно загрузить весь спрайт. В HTTP/2 с мультиплексированием очередь запросов больше не является проблемой, поэтому во многих случаях оптимально загружать много мелких изображений, которые используются на странице. Однако, в некоторых случаях объединение изображений в один спрайт может быть полезным, так как улучшается сжатие и уменьшается объем загрузки, особенно если все изображения используются на странице.
  • Встраивание изображений с помощью data URI. Еще один способ решения проблемы с множественными запросами – встраивание изображений в CSS с помощью data URI. За счет этого может существенно увеличиваться размер файла со стилями, но требуется меньше HTTP-соединений. В HTTP/2 такой подход может быть полезным, но вряд ли будет помогать улучшению производительности.
  • Объединение CSS и JavaScript. Еще один способ ограничения количества HTTP-соединений. При таком подходе все файлы css/js объединяются в один большой файл. А значит при загрузке одной страницы загружаются сразу все таблицы стилей и js-код, даже если они не используются на текущей странице. Кроме того, браузером кэшируется сразу весь общий файл и небольшое изменение кода потребует повторной загрузки всего файла. С мультиплексированием в HTTP/2 загрузка множества мелких файлов не является проблемой, поэтому распределение файлов css/js только на нужные страницы будет намного эффективнее и поспособствует увеличению скорости загрузки сайта.
  • Доменный шардинг. Этот способ заключается в загрузке статических ресурсов с разных доменов или поддоменов основного домена и актуален только для HTTP/1.1. Причина та же — ограничение на количество параллельных HTTP-соединений. В HTTP/2 такой подход негативно влияет на производительность за счет открытия дополнительных TCP-соединений и препятствия в обработке приоритетов ресурсов.

Как проверить, поддерживает ли сайт протокол HTTP/2

  • Онлайн-сервисы.

Существуют онлайн-сервисы, с помощью которых можно легко и быстро проверить наличие поддержки HTTP/2. Например, сервис от http2.pro.

  • Расширения для браузеров.

Для браузеров Chrome и Firefox есть расширения, которые иконкой-индикатором оповещают о том, что сайт открыт по протоколу HTTP/2.

Chrome:

Firefox:

  • Инструменты разработчика в браузере.

Рассмотрим для примера просмотр протокола в инструментах разработчика в браузерах Chrome и Firefox.

Chrome:

  1. Открываем инструменты разработчика: нажимаем правой кнопкой мыши на странице и выбираем в контекстном меню «Просмотреть код» или нажимаем Ctrl+Shift+I.
  2. Переходим на вкладку «Network» и нажимаем кнопку F5 для обновления страницы
  3. Нажимаем правой кнопкой мыши на названии какого-либо столбца и выбираем в контекстном меню «Protocol», добавив тем самым соответствующий столбец.

Для каждого ресурса в столбце «Protocol» отображается протокол, по которому он загружен:

Firefox:

  1. Открываем инструменты разработчика: нажимаем правой кнопкой мыши на странице и выбираем в контекстном меню «Исследовать элемент» или нажимаем Ctrl+Shift+I.
  2. Переходим на вкладку «Сеть» и нажимаем кнопку F5 для обновления страницы
  3. Нажимаем правой кнопкой мыши на названии какого-либо столбца и выбираем в контекстном меню «Протокол», добавив тем самым соответствующий столбец.

Для каждого ресурса в столбце «Протокол» отображается протокол, по которому он загружен:

Банковский перевод Карты VISA/MasterCard Приват24 WebMoney LiqPay Интеркасса
Все способы оплаты »