Разъяснение http2. Производительность мобильной сети

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). Поэтому наличие установленного (коммерческого или бесплатного) является обязательным условием для работы по протоколу 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. Например, .

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

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

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

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

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

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

Firefox:

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

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

Протокол HTTP 1.1 служил верой и правдой почти 20 лет, так что появление новой спецификации было лишь вопросом времени. Его заменил HTTP/2, официально принятый в прошлом году и основанный на протоколе SPDY, разработанном Google.

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

Для включения в Nginx (версия 1.9.5 или выше) в файле конфигурации (секция server) необходимо дополнить директиву listen:

Server { listen 443 ssl http2; server_name example.com; ssl_certificate server.crt; ssl_certificate_key server.key; }

# Nginx поддерживает HTTP/2 только в паре с TLS

Ну а в Apache (начиная с версии 2.4.17 и выше) нужно дополнить файл конфигурации:

# for a https server Protocols h2 http/1.1 # for a http server Protocols h2c http/1.1

# Поддержка HTTP/2 для защищенного и незащищенного подключения

Во-вторых, все новые версии самых популярных браузеров тоже поддерживают HTTP/2.

Ну и в-третьих, новая спецификация намного быстрее и производительнее HTTP 1.1. К тому же, более 7.1 % веб-сайтов по данным W3Techs уже поддерживают HTTP/2.

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

Основных отличий между протоколами всего несколько.

Бинарность

В отличие от текстового HTTP 1.1, HTTP/2 — бинарный. Поэтому протокол более эффективен при парсинге, более компактный при передаче, подвержен меньшему количеству ошибок.

Мультиплексирование

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

Все файлы подгружаются параллельно. Запросы и ответы разделяются по фреймам с мета-данными, которые ассоциируют запросы и ответы. Так что они не перекрывают друг-друга и не вызывают путаницы. При этом ответы получаются по мере их готовности, следовательно, тяжелые запросы не будут блокировать обработку и выдачу более простых объектов.

Приоритизация

Вместе с мультиплексированием появилась приоритизация трафика. Запросам можно назначить приоритет на основе важности и зависимости.

Так что при загрузке веб-страницы браузер будет в первую очередь получать важные данные, CSS-код, к примеру, а все второстепенное обработается в последнюю очередь.

Компрессия заголовков HPACK

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

Server Push

При использовании протокола HTTP 1.1 браузер запрашивает страницу, сервер отправляет в ответ HTML и ждет, пока браузер его обработает и запросит все необходимые файлы: JavaScript, CSS и фото. Поэтому в новый протокол внедрили интересную функцию под названием Server Push.

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

Шифрование

Протокол HTTP/2 не требует шифрования канала. Тем не менее, все современные браузеры работают с HTTP/2 только вместе с TLS , как и Nginx. Так что массовое внедрение протокола должно поспособствовать распространению шифрования по Сети.

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

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

Главная оптимизация HTTP/2 по сравнению с HTTP 1.1 — отключение или модификация многих оптимизаций прошлой версии протокола.

  • Стоит отказаться от доменного шардинга. Такой способ распределения множества файлов по различным доменам и CDN актуален для HTTP 1.1, так как решает проблему параллельных соединений. Но в случае с новым протоколом такое решение ухудшает производительность и нивелирует приоритизацию трафика.
  • По возможности откажитесь или модифицируйте спрайты. Объединение множества маленьких картинок в одно большое изображение способно увеличить скорость загрузки страницы, но если пользователь заходил на веб-страницу с одной маленькой картинкой, то ему все-равно отправлялся весь спрайт. В случае с HTTP/2 такое решение будет менее полезным в виду появления мультиплексирования.
  • Еще один метод оптимизации изображений — встраивание при помощи DataURI. Он также может быть полезен в HTTP/2, но точно будет менее эффективным, чем в случае с прошлой версией.
  • Лучше отказаться от объединения (конкатенации) файлов. Метод похож на спрайты — все необходимые файлы, CSS и JavaScript, объединяются в один большой для передачи одним потоком по одному соединению. Так что если пользователь зашел на страницу с одним небольшим кодом JS, ему все-равно будет отправлен весь объединенный файл. Еще одна сложность — все объединенные файлы нужно выгружать из кэша одновременно, а одно изменение в коде любого из них требует обновления всего набора. Так что благодаря все тому же мультиплексированию такой подход не имеет смысла.
  • Также стоит отказаться от встраивания файлов в HTML код.

Самое главное

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

«… мы не меняем весь HTTP - методы, коды статусов и большинство заголовков остаются теми же. Мы лишь переработали его с точки зрения повышения эффективности использования, чтобы он был более щадящим по отношению к интернету…»

Важно отметить, что новая версия HTTP идёт в качестве расширения для своего предшественника, и вряд ли в обозримом будущем заменит HTTP 1.1. Реализация HTTP/2 не подразумевает автоматической поддержки всех типов шифрования, доступных в HTTP 1.1, но определённо поощряет использование более интересных альтернатив, или дополнительное обновление совместимости шифрования в ближайшем будущем. Тем не менее, в сравнениях «HTTP/2 против HTTP 1» и «SPDY против HTTP/2» герой этой статьи выходит победителем по производительности, безопасности и надёжности.

Чем был плох HTTP 1.1?

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

Но параллельное использование многочисленных соединений приводит к перегрузке TCP, следовательно, к несправедливой монополизации сетевых ресурсов. Браузеры, использующие многочисленные соединения для обработки дополнительных запросов, занимают львиную долю доступных сетевых ресурсов, что приводит к снижению сетевой производительности для других пользователей.

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

Сетевой индустрии фактически пришлось хакнуть эти ограничения с помощью таких методик, как доменный шардинг (domain sharding), конкатенация, встраивание и спрайтинг (spriting) данных, а также ряд других. Неэффективное использование HTTP 1.1 базовых TCP-соединений является причиной плохой приоритезации ресурсов, и в результате - экспоненциальной деградации производительности по мере роста сложности, функциональности и объёма веб-приложений.

Развивающейся сети уже не хватает возможностей HTTP-технологий. Разработанные много лет назад ключевые свойства HTTP 1.1 позволяют использовать несколько неприятных лазеек, ухудшающих безопасность и производительность веб-сайтов и приложений.

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

Особенности HTTP/2

Мультиплексированные потоки

Пересылаемая через HTTP/2 в обе стороны последовательность текстовых фреймов, которыми обмениваются между собой клиент и сервер, называется “потоком”. В ранних версиях HTTP можно было транслировать только по одному потоку за раз, с небольшой задержкой между разными потоками. Передавать таким способом большие объёмы медиа-контента было слишком неэффективно и ресурсозатратно. Для решение этой проблемы в HTTP/2 применяется новый бинарный слой фреймов.

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

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

  • Параллельные мультиплексированные запросы и ответы не блокируют друг друга.
  • Несмотря на передачу многочисленных потоков данных, для наибольшей эффективности использования сетевых ресурсов используется одиночное TCP-соединение.
  • Больше не нужно применять оптимизационные хаки , наподобие спрайтов, конкатенации, фрагментирования доменов и прочих, которые негативно сказываются на других сферах сетевой производительности.
  • Задержки ниже, производительность сети выше, лучше ранжирование поисковыми системами.
  • В сети и IT-ресурсах уменьшаются операционные расходы и капитальные вложения.
Благодаря описанной возможности, пакеты данных из разных потоков вперемешку передаются через единственное TCP-соединение. В конечной точке эти пакеты затем разделяются и представляются в виде отдельных потоков данных. В HTTP 1.1 и более ранних версиях для параллельной передачи многочисленных запросов пришлось бы устанавливать такое же количество TCP-соединений, что является узким местом с точки зрения общей производительности сети, несмотря на быструю передачу большего количества потоков данных.

Отправка данных по инициативе сервера (Server Push)

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

Полученный от сервера ресурс Y кэшируется на клиенте для будущего использования. Этот механизм позволяет экономить циклы «запрос-ответ» и снижает сетевую задержку. Изначально Server Push появился в протоколе SPDY. Идентификаторы потоков, содержащие псевдозаголовки наподобие:path , инициируют передачу сервером дополнительной информации, которая должна быть закэширована. Клиент должен либо явным образом позволить серверу передавать себе кэшируемые ресурсы посредством HTTP/2, либо прервать инициированные потоки, имеющие специальный идентификатор.

Другие возможности HTTP/2, известные как Cache Push, позволяют с упреждением обновлять или аннулировать кэш на клиенте. При этом сервер способен определять ресурсы, которые могут понадобиться клиенту, которые он на самом деле не запрашивал.

Реализация HTTP/2 демонстрирует высокую производительность при работе с инициативно передаваемыми ресурсами:

  • Инициативно передаваемые ресурсы сохраняются в кэше клиента.
  • Клиент может многократно использовать эти ресурсы на разных страницах.
  • Сервер может мультиплексировать инициативно передаваемые ресурсы вместе с запрошенной информацией в рамках того же TCP-соединения.
  • Сервер может приоритезировать инициативно передаваемые ресурсы. Это ключевое отличие с точки зрения производительности между HTTP/2 и HTTP 1.
  • Клиент может отклонить инициативно передаваемые ресурсы для поддержания эффективности репозитория, или может вообще отключить функцию Server Push.
  • Клиент может также ограничивать количество одновременно мультиплексированных потоков с инициативно передаваемыми данными.
В неоптимальных методиках наподобие встраивания (Inlining) также используются push-функциональности, позволяющие заставить сервер откликаться на запросы. При этом Server Push представляет собой решение на уровне протокола, помогающее избежать возни с оптимизационными хаками.

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

Двоичный протокол

Последняя версия HTTP претерпела значительные изменения с точки зрения возможностей, и демонстрирует преобразование из текстового в двоичный протокол. Для завершения циклов запрос-отклик HTTP 1.x обрабатывает текстовые команды. HTTP/2 решает те же задачи с помощью двоичных команд (состоящих из единиц и нулей). Это облегчает работу с фреймами и упрощает реализацию команд, которые могли путать из-за того, что они состоят из текста и необязательных пробелов.

Читать двоичные команды будет труднее, чем аналогичные текстовые, но зато сети будет легче их генерировать и парсить фреймы. Семантика остаётся без изменений. Браузеры, использующие HTTP/2, перед отправкой в сеть конвертируют текстовые команды в двоичные. Двоичный слой фреймов не имеет обратной совместимости с клиентами и серверами, использующими HTTP 1.x. Он является ключевым фактором, обеспечивающим значительный прирост производительности по сравнению с SPDY и HTTP 1.x. Какие преимущества даёт интернет-компаниям и онлайн-сервисам использование двоичных команд:

  • Низкие накладные расходы при парсинге данных - критически важное преимущество HTTP/2 по сравнению с HTTP 1.
  • Ниже вероятность ошибок.
  • Решение проблем с безопасностью, наподобие атак с разделением запросов (response splitting attack), проистекающих из текстовой природы HTTP 1.x.
  • Реализуются прочие возможности HTTP/2, включая сжатие, мультиплексирование, приоритезацию, управление потоками и эффективную обработку TLS.
  • Компактность команд упрощают их обработку и реализацию.
  • Выше эффективность и устойчивость к сбоям при обработке данных, передаваемых между клиентом и сервером.
  • Снижение сетевой задержки и повышение пропускной способности.

Приоритезация потоков

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

Приоритезация осуществляется с помощью присваивания каждому потоку зависимостей (Dependencies) и веса (Weight). Хотя все потоки, по сути, и так зависят друг от друга, ещё добавляется присваивание веса в диапазоне от 1 до 256. Детали механизма приоритезации всё ещё обсуждаются. Тем не менее, в реальных условиях сервер редко управляет такими ресурсами, как ЦПУ и подключения к БД. Сложность реализации сама по себе не даёт серверам выполнять запросы на приоритезацию потоков. Продолжение работ в этом направлении имеет особенное значение для успеха HTTP/2 в долгосрочной перспективе, потому что протокол позволяет обрабатывать многочисленные потоки в рамках единственного TCP-соединения.

Приоритезация поможет разделять одновременно приходящие на сервер запросы в соответствии с потребностями конечных пользователей. А обработка потоков данных в случайном порядке только подрывает эффективность и удобство HTTP/2. В то же время, продуманны и широко распространённый механизм приоритезации потоков даст нам следующие преимущества:

  • Эффективное использование сетевых ресурсов.
  • Снижение времени доставки запросов первичного контента.
  • Повышение скорости загрузки страниц.
  • Оптимизация передачи данных между клиентом и сервером.
  • Снижение отрицательного эффекта от сетевых задержек.

Сжатие заголовков с сохранением состояния

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

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

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

HPACK сжимает значение каждого заголовка перед отправкой на сервер, который потом ищет зашифрованную информацию в списке ранее полученных значений, чтобы восстановить полные данные о заголовке. Сжатие с помощью HPACK даёт невероятные преимущества с точки зрения производительности, а также обеспечивает:

  • Эффективную приоритезацию потоков.
  • Эффективное использование механизмов мультиплексирования.
  • Снижает накладные расходы при использовании ресурсов. Это один из первых вопросов, обсуждаемых при сравнении HTTP/2 с HTTP 1 и SPDY.
  • Кодирование больших и часто используемых заголовков, что позволяет не отправлять весь фрейм с заголовком. Передаваемый размер каждого потока быстро уменьшается.
  • Устойчивость к атакам, например, CRIME - эксплойтам потоков данных со сжатыми заголовками.

Различия между HTTP 1.x и SPDY

Базовая семантика приложения HTTP в последней итерации HTTP/2 осталась без изменений, включая коды статусов, URI, методики и файлы заголовков. HTTP/2 основан на SPDY, созданной в Google альтернативе HTTP 1.x. Основные различия кроются в механизмах обработки клиент-серверных запросов. В таблице отражены основные различия между HTTP 1.x, SPDY и HTTP/2:
HTTP 1.x SPDY HTTP2
Необходим SSL. SSL не требуется, но рекомендуется.
Медленное шифрование. Быстрое шифрование. Шифрование стало ещё быстрее.
Один клиент-серверный запрос на одно TCP-соединение. Много клиент-серверных запросов на одно TCP-соединение. Осуществляются одновременно на одном хосте. Многохостовое мультиплексирование. Осуществляются на нескольких хостах в одном экземпляре.
Нет сжатия заголовков. Введено сжатие заголовков. Используются улучшенные алгоритмы сжатия заголовков, что повышает производительность и безопасность.
Нет приоритезации потоков. Введена приоритезация потоков. Улучшенные механизмы приоритезации потоков.

Как HTTP/2 работает с HTTPS

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

Браузерная поддержка HTTP/2 включает в себя HTTPS-шифрование, и фактически улучшает общую производительность обеспечения безопасности при работе с HTTPS. Ключевыми особенностями HTTP/2, позволяющими обеспечить безопасность цифровых коммуникаций в чувствительном сетевом окружении, являются:

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

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

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

Основные преимущества HTTP/2

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

С точки зрения электронной коммерции и интернет-пользователей, чем больше в сети нерелевантного контента, насыщенного мультимедиа, тем медленнее она работает.

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

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

Производительность сети

Это понятие отражает совокупный эффект всех нововведений HTTP/2. Результаты бенчмарков (см. главу «Сравнение производительности HTTPS, SPDY и HTTP/2») демонстрируют увеличение производительности при использовании HTTP/2 по сравнению с его предшественниками и альтернативными решениями.

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

Технологии наподобие мультиплексирования помогают одновременно передавать больше данных. Как большой пассажирский самолёт, с несколькими этажами, напичканными сиденьями.

Что происходит, когда механизмы передачи данных сметают все преграды на пути к повышению производительности сети? У высокой скорости работы сайтов есть побочные явления: пользователи получают больше удовольствия, улучшается оптимизация для поисковых сервисов, ресурсы используются эффективнее, растёт аудитория и объёмы продаж, и многое другое.

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

Производительность мобильной сети

Ежедневно миллионы пользователей выходят в сеть со своих мобильных устройств. Мы живём в «эру постПК», множество людей используют смартфоны в качестве основного устройства для доступа к онлайн-сервисам и выполнения большинства рутинных вычислительных задач прямо на ходу, вместо длительного сидения перед мониторами настольных компьютеров.

HTTP/2 проектировался с учётом современных тенденций использования сети. Задача нивелирования небольшой пропускной способности мобильного интернета хорошо решается благодаря снижению задержки за счёт мультиплексирования и сжатия заголовков. Благодаря новой версии протокола, производительность и безопасность обмена данными на мобильных устройствах достигают уровня, характерного для десктопов. Это сразу же положительно сказывается и на возможностях онлайн-бизнеса по охвату потенциальной аудитории.

Интернет подешевле

С момента создания Всемирной паутины стоимость использования интернета быстро снижалась. Главными задачами развития сетевых технологий всегда были расширение доступа и повышение его скорости. Однако снижение цен, судя по всему, застопорилось, особенно в свете утверждений относительно монополии телекоммуникационных провайдеров.

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

Экспансивный охват

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

Насыщенность мультимедиа

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

Улучшение опыта использования мобильного интернета

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

Более эффективное использование сети

«Тяжёлый» медиа-контент и сайты со сложным дизайном приводят к заметному росту потребления ресурсов при обработке клиентом и сервером браузерных запросов. Хотя веб-разработчики и выработали приемлемые оптимизационные хаки, всё же появление устойчивого и надёжного решения в виде HTTP/2 было неизбежным. Сжатие заголовков, инициативная отправка данных сервером, зависимости потоков и мультиплексирование - всё это ключевые особенности, улучшающие эффективность использования сети.

Безопасность

Преимущества HTTP/2 не ограничиваются одной лишь производительностью. Алгоритм HPACK позволяет обходить распространённые угрозы, нацеленные на текстовые протоколы уровня приложения. Для защиты данных, передаваемых между клиентом и сервером, в HTTP/2 используется подход «Безопасность через непонятность» (Security by Obscurity): команды представлены в двоичном виде, применяется сжатие метаданных HTTP-заголовков. Кроме того, протокол может похвастаться полноценной поддержкой шифрования и требует применения улучшенной версии Transport Layer Security (TLS1.2).

Инновационность

HTTP/2 является воплощением идеи высокопроизводительной сети. Этот протокол лежит в основе кибермира, каким мы его знаем сегодня. Изменения, вносимые HTTP/2, в основном базируются на свойствах SPDY, который стал огромным шагом вперёд по сравнению с HTTP 1.x. И в ближайшем будущем HTTP/2 полностью заменит как SPDY, так и предыдущие версии HTTP. Веб-разработчики смогут избавиться от сложных оптимизационных хаков при создании высокопроизводительных сайтов и сервисов.

Преимущества HTTP/2 с точки зрения SEO

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

Стандартные процессы поисковой оптимизации выходят за рамки маркетинговой фронтэнд-тактики. Теперь они охватывают полный цикл обмена данными между клиентом и сервером. SEO-оптимизаторы, которые ранее были ключевыми фигурами в командах интернет-маркетинга, потеряли свои позиции с появлением новых технологий цифровых коммуникаций. И преобладание среди них HTTP/2 свидетельствует о тектоническом сдвиге, который заставляет веб-разработчиков и маркетологов вернуться к чертёжным доскам.

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

Сравнение производительности HTTPS, SPDY и HTTP/2

Результаты бенчмарков ясно показывают ситуацию с улучшением производительности в новом протоколе.

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

Подробности тестирования:

Результаты этого теста говорят нам следующее:

  • Размеры заголовков клиентского запроса и серверного отклика : HTTP/2 демонстрирует, что использование сжатия позволяет значительно уменьшить размер заголовка. При этом SPDY уменьшает заголовок только серверного отклика для данного запроса. HTTPS вообще не уменьшает заголовки.
  • Размер сообщения серверного отклика : размер отклика HTTP/2-сервера оказался больше, но зато в нём применялось более стойкое шифрование.
  • Количество использованных TCP-соединений : при обработке многочисленных одновременных запросов(мультиплексирование) HTTP/2 и SPDY используют меньше сетевых ресурсов, следовательно, снижается задержка.
  • Скорость загрузки страницы : HTTP/2 постоянно был быстрее SPDY. HTTPS был значительно медленнее из-за отсутствия сжатия заголовков и инициативной отправки данных сервером.

Браузерная поддержка HTTP/2 и доступность

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

Клиентская поддержка

Пользователям не нужно заботиться о настройке поддержки HTTP/2 в своих браузерах - «полноценных» и мобильных. Chrome и Firefox давно поддерживают эту технологию , а в Safari поддержка HTTP/2 появилась в 2014. В IE данный протокол поддерживается только начиная с Windows 8.

Основные мобильные браузеры, включая Android Browser, Chrome для Android и iOS, а также Safari в iOS8 и выше, уже поддерживают HTTP/2. Рекомендуется на всякий случай поставить последние стабильные версии мобильных и настольных браузеров, чтобы получить максимальную производительность и преимущества в безопасности.

Серверная поддержка: Apache и Nginx

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

Nginx -серверы, составляющие 66% всех активных веб-серверов , могут похвастаться встроенной поддержкой HTTP / 2. А для обеспечения браузерной поддержки HTTP/2 на Apache, нужно воспользоваться модулем mod_spdy . Он разработан Google для внедрения поддержки в Apache 2.2 таких функций, как мультиплексирование и сжатие заголовков. Это ПО было передано в дар Apache Software Foundation.

Как начать использовать HTTP/2?

Для настройки HTTP/2 на своём сайте воспользуйтесь этой простой инструкцией:
  1. Проверьте, чтобы был включен HTTPS:
    • Приобретите в проверенной организации сертификат SSL или TLS.
    • Активируйте сертификат.
    • Установите сертификат.
    • Обновите сервер для включения протокола HTTPS.
  2. Проверьте, чтобы базовая сетевая инфраструктура включала в себя поддержку HTTP/2 на уровне серверного ПО. Серверы Nginx имеют нативную поддержку, в Apache она появилась в октябре 2015 (в версии 2.4). В более ранних версиях для поддержки HTTP/2 нужно установить дополнительные модули.
  3. Обновите, сконфигурируйте и протестируйте ваши серверы. описана конфигурация и процедуры тестирования для серверов Apache. Свяжитесь со своим хостинг-провайдером и удостоверьтесь, что ваш сайт готов к использованию HTTP/2.
  4. Для проверки правильности конфигурации HTTP/2 воспользуйтесь этим инструментом .

Заключение

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

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

Теги: Добавить метки

В прошлом году в мире сетевых технологий произошло очень важное событие: была утверждена и стандартизирована новая версия протокола HTTP - HTTP/2. HTTP/2 уже поддерживается в популярных веб-сервераx -Apache и Nginx. Идёт работа по внедрению HTTP/2 и в IIS. Реализована поддержка и в большинстве современных браузеров.

Использование HTTP/2 за последнее время существенно расширилось.

По данным на середину 2015 года, процент сайтов и веб-сервисов, перешедших на HTTP/2, был невелик ― всего 0,4%. Совсем свежая статистика (январь 2016) свидетельствует о значительном росте: с 0,4 до 6,5%. Есть все основания полагать, что в ближайшее время темпы роста будут увеличиваться.

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

От HTTP к HTTP/2

Немного истории

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

HTTP/2: основные нововведения

Мультиплексирование

Возможно, это самое главное преимущество HTTP/2. В HTTP/1.1 для каждого запроса требуется устанавливать отдельное TCP-соединение. Мультиплексирование же позволяет браузеру выполнять множество запросов в рамках одного TCP-соединения:

В современных браузерах количество одновременных TCP-соединений ограничено. Поэтому страницы с большим количеством статического контента загружаются не так быстро, как хотелось бы.

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

Приоритеты

Ещё одно нововведение HTTP/2 - это приоритизация. Каждому запросу можно назначить приоритет.
Существует два подхода к назначению приоритетов: на основе веса и на основе зависимостей.

В первом подходе каждый поток получает определённый вес. Потом на основе веса сервер распределяет нагрузку между потоками. Такой подход уже использовался в протоколе SPDY.

Второй метод, являющийся основным в HTTP/2, заключается в следующем: браузер просит сервер загружать определённые элементы контента в первую очередь. Например, сначала браузер может попросить сервер сначала загрузить CSS-файлы или JavaScript, а уже потом - HTML или изображения.

В HTTP/2 приоритизация является не обязательным, а желательным методом. Однако мультиплексирование без неё работать должным образом не будет. Скорость загрузки может быть даже ниже, чем HTTP/1.1. Ресурсы с более низким приоритетом будут занимать полосу, что приведёт снижению производительности.

Сжатие HTTP-заголовков

Современная веб-страница состоит из множества элементов: изображения, JS, CSS и другие. В запросе на загрузку каждого из этих элементов браузер передаёт HTTP-заголовок. Отправляя запрошенные элементы, сервер также добавляет к ним заголовок. Всё это сопряжено с излишним расходованием ресурсов.

В HTTP/2 заголовки передаются в сжатом виде. Благодаря этому уменьшается количество информации, которой обмениваются между собой сервер и браузер. Вместо алгоритмов gzip/deflate используется HPACK . Это снижает уязвимость к атакам типа BREACH .

HTTP/2 и безопасность

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

Это нужно не только для HTTP/2. В поиске Google использование безопасного соединения является одним из критериев ранжирования . Браузеры (см. и ) скоро будут помечать сайты, не поддерживающие https, как «небезопасные». Добавим также, что многие возможности HTML5 ― например, геолокация ― без безопасного соединения будут недоступны .

Базовая настройка HTTP/2 в Nginx и Apache

Приведём краткие инструкции по включению и базовой настройке HTTP/2 в Nginx и Apache. Как уже было сказано выше, большинство современных браузеров работают с HTTP/2 только через TLS, поэтому в конфигурации вашего веб-сервера должны быть прописаны соответствующие настройки.

Nginx

Поддержка HTTP/2 реализована только в новейших версиях Nginx (1.9.5 и выше). Если у вас установлена другая версия, вам потребуется обновить её.

После этого откройте конфигурационный файл /etc/nginx/nginx.conf и найдите в секции server следующую строку:

Listen 443 ssl;

и замените её на:

Listen 443 ssl http2;

Сохраните внесённые изменения и перезагрузите Nginx:

$ sudo service nginx reload

Apache

В Apache HTTP/2 поддерживается только в версиях 2.4.17 и выше. Если у вас установлена более ранняя версия, выполните обновление и подключите модуль mod_http2 . После этого добавьте в конфигурационный файл следующие строки:

# for a https server Protocols h2 http/1.1 # for a http server Protocols h2c http/1.1

После этого перезапустите Apache. Вот и всё - для базовой настройки этого вполне достаточно.

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

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

Многие способы оптимизации, успешно используемые в HTTP/1.1, в HTTP/2 работать не будут. Некоторые из них потребуется модифицировать, а от некоторых ― отказаться вообще. Рассмотрим этот вопрос более подробно.

Объединение изображений в спрайты

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

Спрайт возвращался в ответ на единственный запрос. Даже если пользователь заходил на страницу, на которой находится всего одно небольшое изображение, нужно было загрузить весь спрайт.

В HTTP/2 c его мультиплексированием таких проблем нет, однако использование спрайтов в определённых ситуациях может оказаться полезным. Объединение нескольких изображений в спрайт (особенно если все эти изображения находятся на одной странице) помогает улучшить сжатие и таким образом снизить общий объём загружаемых данных.

Встраивание изображений с помощью DataURI

Ещё один популярный способ решения проблемы множественных HTTP-запросов в HTTP/1.1 ― встраивание изображений с использованием Data URI . Это существенно увеличивает в размере таблицу стилей.

Если одновременно со встраиванием изображений для оптимизации используется ещё и конкатенация JS и CSS, пользователю скорее всего придётся загрузить весь соответствующий код, даже если он не будет посещать страницу с этими изображениями.
В HTTP/2 такая практика скорее ухудшит, а не улучшит производительность.

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

Для оптимизации работы сайтов часто используется конкатенация небольших CSS- и JS-файлов. Много маленьких файлов объединяются в один большой. Таким образом удаётся обойти лимит на количество HTTP-запросов.

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

Ещё одна сложность заключается в том, что все элементы конкатенированного файла нужно вычищать из кэша одновременно. Невозможно сделать так, чтобы для одних элементов была выставлена одна дата истечения срока действия, а для других (которые к тому же и используются гораздо чаще) - другая. Если изменить хотя бы одну строку в CSS - срок действия истечёт сразу у всех элементов.

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

Доменное шардирование

В HTTP/1.1 имеется ограничение на количество открытых соединений. Чтобы обойти это ограничение, приходится загружать статические ресурсы с нескольких поддоменов одного домена. Такой приём называется доменным шардированием; он часто используется, например, для страниц с большим количеством изображений. Это помогает увеличить скорость загрузки, но вместе с тем и создаёт дополнительные проблемы .

С переходом HTTP/2 необходимость в доменном шардировании отпадает. Вы можете запросить столько ресурсов, сколько вам требуется. Более того, в случае с HTTP/2 шардирование не улучшит производительность, а приведёт скорее к противоположному эффекту, так как создаст дополнительные TCP-соединения и будет мешать приоритизации.

Когда переходить?

Когда планировать переход на HTTP/2? Однозначного ответа на этот вопрос нет и быть не может. Дадим, однако, одну подсказку: регулярно просматривайте логи посещаемости вашего сервиса. Когда вы увидите, что большая часть посетителей используют поддерживающие HTTP/2 браузеры - можно переходить. На текущий момент поддержка HTTP/2 реализована в Chrome (в том числе и в мобильной версии для Android), Firefox, Opera, Edge, Safari.

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

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

Полезные ссылки

В заключение приведём для заинтересованных читателей несколько полезных ссылок

23.04.18 827

Протокол передачи гипертекста (HTTP ) управляет соединением между сервером и браузерами. Впервые с 1999 года мы получили новую версию этого протокола , и она обещает существенно более быстрые сайты для всех.

Я расскажу о ключевых особенностях нового протокола , рассмотрю его совместимость с браузерами и серверами.

Краткая история HTTP

HTTP – это старый протокол, изначально определённый в 1991 году , и в последний раз серьёзно изменённый в версии HTTP/1.1 .

Сайты в 1999 году сильно отличались от тех, которые мы разрабатываем сегодня. Сейчас, чтобы отобразить домашнюю страницу среднего сайта, требуется 1,9 Мб. При этом загружается более 100 отдельных ресурсов, от изображений и шрифтов до файлов JavaScript и CSS .

HTTP/1.1 плохо работает с большим количеством ресурсов. Поэтому лучшие практики оптимизации направлены на повышение производительности этой версии протокола.

SPDY

В 2009 году два инженера корпорации Google рассказали про исследовательский проект под названием SPDY . Этот проект был нацелен на решение проблем, связанных с работой протокола HTTP/1.1. SPDY позволяет:

  • Использовать конкурирующие запросы в одном соединении TCP (мультиплексирование ).
  • Браузерам устанавливать приоритеты так, чтобы ресурсы, важные для отображения страницы, загружались первыми.
  • Сжимать и уменьшать заголовки HTTP
  • Реализовать технологию server push , в рамках которой сервер может пересылать браузеру важные ресурсы, прежде чем его об этом попросят.

В добавление к этому SPDY обязывает шифровать соединение (HTTPS ) между браузером и сервером.

SPDY не заменяет HTTP . Он скорее является туннелем для протокола и изменяет процесс отправки запросов и ответов HTTP . Для него обязательна поддержка, как на стороне сервера, так и на стороне клиента. Благодаря поддержке, доступной в NGNIX и пакетах от Google для Apache , SPDY применялся достаточно широко. При этом современные версии основных браузеров поддерживают его в полном объеме.

Поддержка SPDY браузерами по данным « Can I Use »

HTTP/2

Поддержка SPDY была прекращена в Edge из-за того, что специалисты Microsoft реализовали в новом браузере поддержку HTTP/2 – последней по времени выхода версии протокола HTTP . Но другие современные браузеры всё ещё сохраняют поддержку SPDY .

Поддержка HTTP /2 браузерами по данным « Can I Use »

HTTP/2 строится на успехе SPDY , который был использован как стартовая платформа для нового протокола. При этом большинство задач SPDY так же реализовано в HTTP/2 . Требование соединения по HTTPS было отменено . Несмотря на это, разработчики всех браузеров решили реализовать поддержку HTTP/2 только для TLS (https ) соединений. Поэтому использования HTTP/2 подразумевает использование сайтом HTTPS .

Спецификация HTTP/2 была завершена в феврале 2015 года. Спустя год он прекрасно поддерживается браузерами. Так же, как и SPDY , HTTP/2 предполагает поддержку, как в браузере, так и на сервере.

Уже существует много его реализаций для серверов. Вы можете следить за ними в справочнике по HTTP/2 .

Придётся ли изменять сайты?

HTTP/2 обратно совместим с HTTP/1.1 , поэтому есть возможность его проигнорировать, и всё продолжит работать, как раньше. Изменение протокола незаметно для пользователей. Многие из читателей этой статьи уже используют протокол, отличный от HTTP/1.1 многие годы. Например, если у вас есть аккаунт в почтовом сервисе Gmail , и вы используете браузер Google Chrome для доступа к нему.

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

Что нужно изменить, чтобы использовать преимущества HTTP/2?

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

Переходите на TLS

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

Это важно не только для HTTP/2 . Google использует защищённое соединение как сигнал при ранжировании сайта , а браузеры начинают отмечать не https сайты как «небезопасные ».

Преобразование нескольких файлов изображений в спрайты

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

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

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

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

Встраивание изображений с помощью Data URI

Другой метод решения проблемы множественных запросов в HTTP/1.1 – встраивание изображений в CSS, используя data URI . Встраивание изображений таким образом сильно увеличивает размер файла стилей. Если вы сочетаете этот метод с другой техникой оптимизации, то браузер загрузит весь этот CSS ? даже если пользователь не посетит страницы, на которых используются эти изображения. В HTTP/2 эта «лучшая практика » скорее будет вредить, чем улучшать производительность.

Соединение CSS и JavaScript

На финальной стадии сборки сайта многие соединяют все мелкие файлы CSS и JavaScript , используемые на нем. Мы зачастую разделяем их при разработке, чтобы было легче управлять ими. Но доставка одного файла браузеру более эффективна в плане производительности, чем доставка пяти. И мы снова пытаемся сократить количество HTTP-запросов .

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

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

Разделение ресурсов между хостами: Sharding

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

HTTP/2 устраняет необходимость использования domain sharding: можно запрашивать любое количество ресурсов. Но это навредит производительности: создаются дополнительные соединения TCP , и препятствует расстановке приоритетов в HTTP/2 .

Как подготовиться к HTTP/2

Несколько советов, как подготовиться к переходу на HTTP/2 .

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

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

Организуйте файлы по секциям сайта

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

Управляйте разделением между доменами

На данный момент лучшая практика для HTTP/1.1 – ограничить разделение двумя именами хостов. В HTTP/2 существует способ объединить эти соединения, если сертификат TLS действителен для обоих хостов и хосты находятся на одном IP-адресе . TLS сертификат необходим для работы через HTTP/2 .

Дальнейшие действия

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

Когда совершать переход?

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

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

Ваш план действий в отношении HTTP/2

  1. Запустите сайт с безопасным соединением или перейдите на TLS прямо сейчас.
  2. Подготовьтесь к HTTP/2 в процессе сборки сайта. Используйте советы, приведенные выше, чтобы создать сайт, оптимизированный под обе версии протокола.
  3. Проверьте хостинг. Удостоверьтесь в том, что ваш сервер поддерживает HTTP/2 .
  4. Разверните оптимизацию под HTTP/2 . Прекратите использовать устаревшие практики и переходите к применению новых.

После того, как вы перейдёте на HTTP/2 , стоит проверить, насколько увеличится скорость вашего сайта.

Узнайте больше

Растущий объём информации о HTTP/2 доступен в сети. Ниже я перечислила некоторые ресурсы, к которым я обращалась при написании этой статьи.

  • Hypertext Transfer Protocol Version 2 (HTTP/2) ” (спецификация ).
    Это для людей, получающих удовольствие от чтения спецификаций, или тех, кому требуется понимание тонких моментов. Для всех остальных HTTP/2 FAQ – это прекрасный обзор основных функций.
  • Индикатор HTTP/2 и SPDY : Chrome .
    Этот плагин позволяют узнать, предоставляется ли сайт, на котором вы находитесь, через HTTP/2 .

Перевод статьи “Getting Ready For HTTP/2 A Guide For Web Designers And Developers ” был подготовлен дружной командой проекта .

Хорошо Плохо