что это и зачем он вам — SEO на vc.ru

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

7873
просмотров

Наглядное отличие принципа работы протокола HTTP/2 от HTTP/1

Необходимое предисловие

Меня спросят: «Эй, а ты зачем в 2022 году вообще пишешь про HTTP/2, когда на подходе HTTP/3?» – и я скажу вот что. Я регулярно провожу аудиты сайтов, в том числе – в рамках конкурентного анализа. В аудит входит и проверка используемого протокола передачи данных. И увы, вижу, что примерно половина сайтов работает на уже устаревшем протоколе данных, а многие полезные фичи HTTP/2 используются разве что теми, кто использует выделенные сервера.

Личное же общение со многими вебмастерами показывает, что они либо вообще не знают об имеющихся возможностях, либо что-то такое слышали, но без подробностей. А тема – достаточно важная, чтобы потратить пять-десять минут на ликбез. К нему и перейдём.

Что происходит во время загрузки сайта

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

• Браузер запрашивает IP заданного домена, обращаясь к серверу доменных имен (DNS). Домен – это просто имя, понятное человеку, а вот IP можно сравнить с телефонным номером этого человека.

• Получив данные об IP сайта, браузер обращается к нему через TCP-соединение через один из стандартных портов: 80-й порт для сайтов без SSL, или через защищенный 443 порт, если настроен HTTPS.

• После подключения браузер отправляет запросы, а сервер отправляет в ответ HTML или перенаправляет на другой URL, или сообщит, что тут такого нету (404).

• Браузер обрабатывает ответ сервера, анализирует полученный HTML и начинает выстраивать объектную модель документа (DOM). В процессе анализа он обнаруживает ссылки на дополнительные ресурсы, которые нужны для правильного отображения страницы, и запрашивает их у сервера. Некоторые из этих ресурсов содержат дополнительные ссылки на другие ресурсы, и эти ссылки добавляются в список запросов.

• Получив достаточный объём этих ресурсов, браузер наконец-то начинает процесс рендеринга страницы, и посетитель сайта (вы) его уже видит. Однако это ещё не конец: браузер продолжает подгружать картинки, вспомогательные скрипты, виджеты и т.п.

• По завершении процесса загрузки браузер запускает событие OnLoad Javascript, страничка готова к работе. Однако и это ещё не конец: страничка может что-то подгружать фоном, отправлять данные в системы статистики и т.д.

Каскадная диаграмма загрузки сервиса webpagetest.org наглядно показывает, что, когда и как происходит во время загрузки сайта

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

Особенности HTTP ранних версий

Изначально HTTP был простым текстовым протоколом и предназначался только для передачи гипертекстовых документов. Отправил GET-запрос, получил в ответ HTML, ничего лишнего. По мере развития протокола и интернета вообще по этому протоколу стали передаваться и другие типы файлов.

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

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

С появлением метода HEAD клиент мог загружать все метаданные, не загружая сам ресурс. Благодаря этому поисковые системы смогли проверять, обновлялся ли URL, и загружать только обновленные данные.

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

Большим ограничением протокола стала количество одновременно отправляемых запросов, в среднем – 5-8, тогда как среднестатистический сайт уже 10 лет назад редко ограничивался 50-70.

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

HTTPS

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

Протокол HTTPS шифрует передаваемые сообщения с помощью протокола TLS или уже устаревшего SSL. Благодаря HTTPS протокол HTTP получил три важных свойства:

• Передаваемая информация не может быть прочтена во время передачи;

• Сообщение не может быть модифицировано, поскольку получает цифровую подпись;

• Сообщение передаётся именно на заданный изначально сервер.

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

Но самое важное в контексте этой статьи: протокол HTTPS подразумевает дополнительные запросы и «рукопожатия», ещё более осложняя процесс отправки запросов и загрузки данных.

Основные проблемы HTTP/1

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

В результате развития протокола HTTP стало возможным передавать не только текстовое содержимое, но и мультимедийные файлы, сохранять соединение открытым и отправлять несколько запросов одновременно. Современный сайт загружает около 2,3 МБ данных при отправляемых 70 запросов в целом (фактически, число запросов может доходить до 150 на плохо оптимизированном шаблоне). С учётом того, что современный интернет в большей мере – мобильный, загрузка такого сайта становится слишком долгой.

Проблему можно охарактеризовать несколькими основными моментами:

• Около 80% времени, отводимого на отправку данных, тратится на ожидание передачи этих данных. Эта задержка не связана с пропускной способностью, которая имеет отношение только к максимальному объёму данных, загружаемых пользователем. Количество передаваемых одновременно запросов увеличить нельзя, а само значение задержки определяется физически – это скорость света, проходящего через оптоволоконный кабель.

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

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

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

Как решаются проблемы быстродействия HTTP/1.1

Основными решениями долгие годы были следующие способы оптимизации быстродействия:

• Уменьшение количества запросов благодаря объединению ресурсов (минимизируем CSS и JS, объединяем файлы, вместо отдельных картинок используем CSS-спрайты и т.п.)

• Создание параллельных HTTP-соединений и использование CDN

• Приоритизация списка запросов (сначала – HTML, важнейшие CSS, потом изображения и JS)

• Сжатие используемых ресурсов (в первую очередь – мультимедийных файлов) и использование изображений в сильно «пожатых» веб-форматах

• Передача данных в архивированном виде (gzip)

и т.п.

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

Создание параллельных HTTP-соединений было самым простым. Однако и тут есть ограничение в 4-8 соединений на домен. Чтобы обойти это ограничение, статические ресурсы размещают на CDN (файловом сервере) или на вспомогательном домене, открывающем дополнительные соединения. Благодаря тому, что речь идёт о другом домене (субдомене), браузер видит несколько разных серверов и может обращаться к ним одновременно.

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

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

HTTP/2

В 2014 году спецификация HTTP/2 была утверждена как стандарт, а с 2015 года получила поддержку во всех основных браузерах. Новые возможности включали:

• Мультиплексированная асинхронная передача данных: на одном соединении запросы разделяются на чередующиеся пакеты, сгруппированные в отдельные потоки.

• Запросы приоритизируются, благодаря чему снимается проблема с одновременной отправкой всех запросов.

• Реализовано сжатие HTTP-заголовков. Каждый отправленный заголовок содержит информацию об отправителе и получателе, а это – избыточные объёмы. Благодаря сжатию полная информация отправляется только в первом заголовке, в последующих отправленных заголовках такой информации уже нет.

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

• Server Push. Если в версии HTTP/1 браузер должен был сначала получить домашнюю страницу, и лишь из неё понять, какие ресурсы ему необходимы для рендеринга, то HTTP/2 позволяет отправить все необходимые ресурсы сразу, при первичном обращении к серверу.

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

Наглядное отличие в работе протокола HTTP/2 от предшественника

Главное отличие этого протокола – использование двоичных данных вместо текстовых. Компьютерам сложнее работать с текстами, чем с двоичным протоколом. Кроме того, современный интернет уже сложно представить в исключительно текстовом формате.

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

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

Каждый фрейм содержит метку потока, к которому принадлежит. Таким образом можно отправить сотню сообщений разом в одном мультиплексе, и ограничение в 6 сообщений снимается. А это значит, что дополнительные доменные соединения не нужны.

Браузеру уже не нужно составлять очередь из запросов, поскольку все или почти все запросы можно отправить разом (лимит в среднем составляет сотню запросов). Единственный негативный момент: это может привести к снижению пропускной способности, особенно если вы используете неоптимизированные изображения.

Важно определить приоритеты потоков, чтобы в первую очередь сервер отправлял важнейшие ресурсы. Это делается на уровне сервера. С помощью push-загрузки сервер может сразу отправить важные CSS и JS, и браузер может отобразить страницу быстрее, поскольку всё важное уже попало в браузерный кэш.

Преимущества HTTP/2 для SEO

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

Рассмотрим, что именно может стать лучше при переходе на HTTP/2.

• Если вы всерьёз тратили ресурсы (время и деньги) на оптимизацию процессов загрузки – можете расслабиться. Практика показывает, что в среднем одно лишь внедрение HTTP/2 способно улучшить ваши показатели на 50-80% благодаря ликвидации задержки в отправке запросов. Однако надо понимать, что в ряде случаев внедрение HTTP/2 может сказаться и негативно. Эти случаи рассмотрим ниже.

• Отпадает необходимость использования CDN для ускорения загрузки сайта. При достаточной пропускной полосе вы можете загружать быстрее даже «тяжелые» медиа. Однако учитывайте, что CDN полезны не только оптимизацией процессов загрузки за счёт увеличения количества потоков. CDN – это в большей мере про ближайший к вашему посетителю сервер, вопросы безопасности и т.д.

• Упрощается процесс сканирования сайта поисковыми роботами, что критически важно для Google с его лимитами на обход сайта. Известно, что даже при возможности использовать HTTP/2 гуглобот может использовать старый протокол передачи данных (HTTP/1.1), и повлиять на это нельзя. Но если речь идёт о большом и нагруженном сайте, явно стоит предоставить роботу такую возможность.

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

• Поведенческие боты преимущественно используют протокол HTTP/1 и HTTP/1. 1. Если вы хотите заблокировать их – обрубайте такой трафик. Учтите, что по этому протоколу могут идти и люди, использующие какие-нибудь дико устаревшие браузеры, но их количество – околонулевое.

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

Возможные проблемы с HTTP/2

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

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

• HTTP/2 не устраняет полностью все проблемы своего предшественника: вы просто получаете возможность одновременно отправлять 100 запросов вместо 5-8. По достижении лимита вам так же придётся ждать выполнения первых запросов. Для шаблона сайта, отправляющего 150 запросов к серверу, это ощутимо, просто эффект проявляется реже и чуть слабее. Хотя надо понимать, что для посетителя важнее общее время загрузки, и тут HTTP/2 получает явное преимущество перед HTTP/1.1.

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

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

Как подключить

Единого способа нет, реализация в каждом конкретном случае зависит от сервера или хостинг-провайдера. В некоторых случая всё предельно просто. Например, на Timeweb вопрос решается единственной кнопкой. Возможности, правда, тоже очень ограничены.

Подключение HTTP/2 на хостинге

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

Имейте в виду, что подключить HTTP/2 без сертификата SSL не получится: браузеры требуют использования этого протокола только в такой связке, и это логично.

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

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

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

Воспользуйтесь одним из онлайн-сервисов. Их много. Начните с https://http2.pro/

Старый сервер ещё не поддерживает HTTP/2

Посмотрите на результаты аудита странички в Lighthouse (Chrome). Если HTTP/2 недоступен, вы увидите соответствующую рекомендацию.

Воспользуйтесь инструментами разработчика в консоли Chrome. В списке ресурсов в колонке «Протокол» они будут помечены как «h3». (Колонка «Протокол» по умолчанию не отображается. Кликните правой кнопкой по заголовку таблички и поставьте галочку в соответствующей строке).

С помощью консоли в Chrome вы можете увидеть, по какому протоколу доступны ресурсы сайта 

Заключение

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

И не забывайте: веб-технологии не стоят на месте, и уже скоро стандартом станет новый протокол, известный сейчас как QUIC – его чаще всего и называют HTTP/3. Поддержка QUIC в современных браузерах уже есть, но я ни разу не слышал, чтобы виртуальный хостинг в РФ уже предлагал клиентам этот протокол. Кроме того, при нынешней моде на блокировки всего подряд HTTP/3 также попадает под раздачу – но это тема для совершенно других материалов.

Протокол HTTP/2: что это, преимущества и как им пользоваться

Что такое HTTP

HTTP — это протокол, на основании которого передаются данные в интернете. HTTP строится на модели клиент/сервер. В такой модели два компьютера, клиент (тот, кто получает услугу) и сервер (провайдер услуги) общаются между собой с помощью запросов и ответов.
Эту модель можно пояснить на примере гостя в ресторане и официанта. Гость (клиент) заказывает (отправляет запрос) у официанта (сервера) еду. Официант идет за едой к повару (логика вашего приложения) и приносит ее гостю. Это очень простой пример, но он поможет понять вам концепт.

Теперь поговорим о протоколе HTTP/2.

Из статьи вы узнаете:

• Что такое HTTP
• Что такое HTTP/2
• Запрос многократной передачи данных
  • Сжатие хедеров
  • Бинарный протокол
    • Преимущества:
  • Отправка данных по инициативе сервера
    • Преимущества
  • Для HTTP/1. 1
  • Для HTTP/2
  • Отправка данных по инициативе сервера HTTP/2
  • Совместимость с браузерами
  • Как можно начать использовать HTTP/2
    • Шаг 1
    • Шаг 2
    • Шаг 3

Что такое HTTP/2

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

Основные цели разработки HTTP/2:

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

Запрос многократной передачи данных

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

Отличие между протоколами HTTP 1.1 и HTTP/2

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

Сжатие хедеров

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

Пример сжатия хедеров с помощью технологии HPACK

Бинарный протокол

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

Преимущества:

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

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

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

Пример отправки данных по инициативе сервера

Преимущества

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

Вернемся к истории о госте в ресторане и официанте. Представим, что официанты — это TCP-подключения, и вы хотите заказать ужин и бутылку воды. Для версии HTTP/1.1 это будет означать, что вы попросить у одного официанта ужин, а у второго воду, то есть у вас будет два TCP-подключения. Для версии HTTP/2 вы попросите обе вещи у одного официанта, но он доставит вам их по отдельности. У вас будет одно TCP-подключение и меньшая нагрузка на сервер. Кроме того, у сервера будет одно лишнее подключение (официант) для следующего клиента (гостя).

Фундаментальная разница между протоколами HTTP/1.1 и HTTP/2 видна на примере отправки данных по инициативе сервера.

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

Чтобы продемонстрировать эту механику, возьмем пример такой страницы:

Страница со 100 картинками зеленых галочек для примера

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

На что важно обращать внимание на картинке ниже — это количество запросов, время загрузки, колонку протокола, колонку инициатора и диаграмму.

Для HTTP/1.1

Пример обработки картинки со 100 галочками протоколом HTTP/1.1

Количество запросов: 102
Время загрузки: 12, 97 секунд
Протокол: “http/1.1”
Колонка инициатора: Инициатор первого запроса — пользователь/клиент, и оставшаяся часть запросов инициируются клиентом, который понимает, что ему нужны дополнительные ресурсы (в этом случае картинки).
Диаграмма: мы можем видеть, как запросы обрабатываются множественными пачками (TCP-подключениями).

Для HTTP/2

Пример обработки картинки со 100 галочками протоколом HTTP/2

Количество запросов: 102
Время загрузки: 11,19 секунд
Протокол: “h3” (HTTP/2)
Колонка инициатора: Инициатор первого запроса — пользователь/клиент, и оставшаяся часть запросов инициируются клиентом, который понимает, что ему нужны дополнительные ресурсы (в этом случае картинки).
Диаграмма: мы можем видеть, как запросы обрабатываются двумя пачками (TCP-подключениями).

Обратите внимание на время загрузки. В этом случае оно немного ниже, чем время загрузки в примере HTTP/1.1, но это не всегда так.

Отправка данных по инициативе сервера HTTP/2

Обработка картинки со 100 галочками с помощью отправки данных по инициативе сервера

Количество запросов: 102
Время загрузки: 3,17 секунд
Протокол: “h3” (HTTP/2)
Колонка инициатора: Инициатор первого запроса — пользователь/клиент, и оставшаяся часть запросов инициируются сервером (один запрос/цикл ответа)
Диаграмма: мы видим, как запросы обрабатывается с помощью одного TCP-подключения.

Совместимость с браузерами

Большинство современных браузеров полностью поддерживают протокол HTTP/2 за исключением (помечено красным) Opera mini Всех версии и браузера UC под Android.

Также некоторые браузеры поддерживают HTTP/2 частично (помечены светло-зеленым), — например, IE11.

Больше деталей о поддержке браузеров протокола HTTP/2

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

Шаг 1

• Убедитесь, что вы используете HTTPS: купите SSL или TLS-сертификат от официального центра сертификации или используйте бесплатный SSL от Let’s Encrypt.
• Активируйте SSL-сертификат.
• Установите его.
• Перезапустите сайт, чтобы активировать HTTPS-протокол.

Установите SSL-сертификат и защитите свой сайт!

Выбрать SSL

Шаг 2

Убедитесь, что ваша сетевая инфраструктура, включая ПО сервера, поддерживает HTTP/2. Серверы Nginx поддерживают HTTP/2 по умолчанию, тогда как Apache добавил поддержку HTTP/2 в октябре 2015. Это значит, что серверам Apache могут понадобиться дополнительные модули, чтобы включить передачу данных c помощью HTTP/2.

Шаг 3

Обновите, настройте и протестируйте серверы, чтобы они поддерживали HTTP/2.

Настройка и тестирование для серверов Apache

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

Источники: статья в блоге Kinsta, статья в Medium

Что такое HTTP/2? Все, что вам нужно знать для SEO

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

Но что это такое и как вы можете использовать HTTP/2 для SEO?

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

Что такое HTTP/2?

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

Он был официально стандартизирован в 2015 году, ему предшествует HTTP/1, который обслуживает Интернет более 15 лет.

Google подтвердил, что они начнут сканировать сайты через HTTP/2 в ноябре 2020 года, а Джон Мюллер подтвердил в мае 2021 года, что они уже сканируют более половины всех URL-адресов с использованием протокола HTTP/2.

В то время он сказал, что «это означает, что роботу Googlebot не нужно будет тратить столько времени на сканирование вашего сервера, как раньше».

Что такое протокол?

Протокол — это, по сути, набор правил для управления запросами между клиентами и серверами. Обычно он состоит из трех основных частей: заголовка, полезной нагрузки и нижнего колонтитула.

Заголовок содержит информацию, включая исходный и конечный адрес страницы, а также сведения о размере и типе.

Полезная нагрузка — это фактическая информация, которая будет передана.

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

Чем отличается работа HTTP/2 от HTTP/1?

Мой любимый способ понять HTTP-запросы — аналогия с грузовиком Тома Энтони.

По сути, грузовик представляет собой запрос от клиента к серверу, а дорога, по которой движется грузовик, является сетевым соединением.

Как только грузовик с запросом от браузера достигнет сервера, он загрузит ответ и вернет его обратно в браузер.

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

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

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

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

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

Введите HTTP/2

Здесь можно использовать HTTP/2, чтобы оказать положительное влияние на поведение запросов.

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

Содержание этих запросов и ответов остается прежним; они просто обрабатываются немного по-другому.

Еще одна полезная функция HTTP/2 — Server Push, что означает, что сервер может отвечать на запрос сразу несколькими ответами.

Например, нам нужно вернуть файлы CSS и JavaScript вместе с HTML; все они могут быть отправлены одновременно, вместо того, чтобы доставляться в браузер по отдельности.

Технические характеристики HTTP/2

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

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

Двоичный Нетекстовый

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

Это было сделано для упрощения реализации команд и облегчения их создания и анализа.

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

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

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

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

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

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

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

Server Push

Позволяет помещать ресурсы, которые могут использоваться, в кэш браузера до того, как они будут запрошены. Информация или ресурсы, которые, как ожидается, будут в будущих запросах (на основе предыдущих запросов), также будут отправлены, а не будут ждать ответа от другого клиента.

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

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

Приоритизация потоков — это когда предпочтение отдается определенным потокам данных на основе зависимостей и весов, присвоенных каждому из них.

Это позволяет серверу оптимизировать распределение ресурсов в зависимости от требований конечного пользователя.

HTTP/2 и HTTPS

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

Это не только повышает безопасность пользователей и приложений, но также требует меньше рукопожатий TLS и приводит к меньшему потреблению ресурсов как на стороне клиента, так и на стороне сервера.

Плюсы HTTP/2

Естественно, как обновленная технология, HTTP/2 приносит некоторые преимущества.

Обновление до HTTP/2 не является миграцией и не требует изменения URL-адресов. Это изменение протокола, которое не потребует слишком много усилий со стороны SEO.

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

Веб-производительность

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

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

Возможность отправлять и получать больше данных на запрос связи — еще один практический пример повышения производительности.

Кроме того, приоритизация потоков позволяет эффективно использовать ресурсы, что сокращает время, затрачиваемое на доставку запросов контента пользователю.

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

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

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

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

Улучшение взаимодействия с пользователем

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

Как говорит Google, вероятность отказов увеличивается на 32%, если загрузка страницы увеличивается с 1 до 3 секунд, а HTTP/2 — это лишь один из способов повысить скорость загрузки.

Повышенная безопасность

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

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

Преимущества для SEO

Конечно, все это в совокупности окажет положительное влияние и на SEO.

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

Все они также могут влиять на видимость веб-сайта в поиске, а также на удобство использования и конверсию.

Минусы HTTP/2

Как и все технологии, HTTP/2 также имеет некоторые минусы, которые вам следует учитывать.

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

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

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

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

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

Внедрение HTTP/2

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

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

Вы можете проверить, поддерживает ли ваш сервер HTTP/2, используя сайт http2.pro. Это скажет вам, поддерживает ли ваш сервер HTTP/2, ALPN и Server-push.

Кроме того, вы можете проверить, какие ресурсы в настоящее время обслуживаются через HTTP/2 в Chrome Dev Tools.

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

Стоит отметить, что вы не можете «заставить» робота Googlebot сканировать ваш сайт через HTTP/2.

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

Аудит Google Lighthouse также будет отображаться, если ваш сайт загружается с использованием HTTP/2.

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

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

Дополнительные ресурсы:

• Техническое SEO — это необходимость, а не опция
• HTTP или HTTPS? Зачем вам нужен безопасный сайт
• Продвинутое техническое SEO: полное руководство

Авторы изображений

Все скриншоты сделаны автором, июнь 2021 г.

Категория
SEO
Web Dev SEO

Что такое HTTP/2?

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

Всемирная паутина в целом работает по протоколу передачи гипертекста (HTTP). HTTP был впервые задуман еще в 1989 году, а последняя крупная версия была ратифицирована в 1999 году. Интернет в те дни был совсем другим. Большинство веб-сайтов были текстовыми с очень небольшим количеством изображений, сценариев и стилей, а видео было еще реже. Сегодня веб-сайты гораздо более интерактивны с изображениями, анимацией, стилями, пользовательскими шрифтами и многим другим, но за это приходится платить: одна страница может запросить более 100 различных ресурсов.

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

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

«Предоставление пользователю отличного пользовательского интерфейса и быстрое выполнение этого требования стало искусством».

Tweet Этот

Введите HTTP/2

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

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

Преимущества HTTP/2

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

• Сжатие заголовка
  • Размер заголовка HTTP будет значительно уменьшен
• Мультиплексирование
  • Несколько запросов могут обслуживаться одновременно по одному соединению 9020 8
• Сервер HTTP/2 Push
  • Ресурсы могут быть переданы клиенту до того, как они будут запрошены
• Приоритизация
  • Ресурсы могут иметь уровни зависимости, позволяющие серверу расставлять приоритеты, какие запросы выполнять в первую очередь
• Двоичный
  • HTTP/2 — это двоичный протокол, делающий его намного более эффективным при передаче данных. Рукопожатие TLS может быть довольно долгим, но благодаря уменьшенной задержке и мультиплексированию другие запросы могут выполнять свою работу без блокировки.

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

    Две компании, которые являются синонимами веб-производительности, — CloudFlare и Akamai. Обе эти компании предоставляют CDN и другие решения для повышения производительности и надежности веб-сайтов, и обе поддерживают HTTP/2. Чтобы способствовать принятию HTTP/2, давайте посмотрим на демонстрационные версии, которые они предоставляют, чтобы продемонстрировать некоторые преимущества.

    Демо CloudFlare показывает разницу между загрузкой большого количества ресурсов с сервера HTTP/1.1 и сервера HTTP/2. В наших тестах сторона HTTP/2 выигрывала каждый раз более чем в 2,5 раза.

    Демонстрация Akamai очень похожа, как и результаты.

    Последняя демонстрация, которую я хотел бы показать, предоставлена ​​командой Golang в Google. Эта демонстрация снова загружает кучу ресурсов, но дополнительно позволяет вам установить задержку для запроса, чтобы действительно продемонстрировать преимущества HTTP/2. Без учета задержки разница между HTTP/2 и HTTP/1.1 составила 569мс против 3227 мс. Если мы добавим 200 мс задержки, результаты будут выглядеть совсем по-другому, когда HTTP/2 загрузит страницу за 839 мс по сравнению с 9095 мс, которые потребовались для HTTP/1.1. Посмотрите демо для себя здесь.

    Если вам интересно узнать, какие веб-сайты используют HTTP/2, есть несколько простых способов проверить это. Расширение Chrome HTTP/2 и SPDY Indicator — это один из способов легко получать уведомления о том, что на веб-сайте включен HTTP/2. Если вы предпочитаете не устанавливать расширения, HTTP/2 Test by KeyCDN предоставляет веб-сайт, на котором вы можете ввести URL-адрес и посмотреть, включен ли в этом домене HTTP/2.

    Поддержка браузера HTTP/2

    Реализации протокола HTTP/2 для многих языков, серверов и браузеров уже развернуты. Такие браузеры, как Chrome и Firefox, полностью поддерживают протокол HTTP/2. Браузеры Microsoft Edge и Apple Safari поддерживают HTTP/2, но только через защищенные соединения. Мобильные версии Chrome и Safari также поддерживают протокол HTTP/2.

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

    Использование HTTP/2 в вашем стеке

    Что касается вашего стека технологий, независимо от того, используете ли вы IIS, Apache, nginx или любую из этих технологий, вы можете легко включить HTTP/2. Поскольку протокол HTTP/2 обратно совместим, вам не нужно будет вносить какие-либо изменения в ваш фактический код. Начиная с версии 1.6 Golang, стандартная библиотека http фактически использует HTTP/2 по умолчанию, когда доступна поддержка браузера.

    «Реализации HTTP/2 доступны для большинства используемых сегодня технологических стеков! Чего вы ждете?»

    Tweet Это

    Будущее HTTP/2

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

    This entry was posted in Популярное