TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

HTTP2 – Все еще его не используете?

1 879

HTTP2 относительно новый протокол значительно ускоряет загрузку страниц и широко поддерживается всеми основными браузерами и серверами. Вы должны использовать его прямо сейчас. Прежде чем двигаться дальше, взгляните на демонстрационную страницу ImageKit.io, чтобы понять повышение производительности благодаря HTTP / 2. Ранее HTTP / 1.1 был основной версией сетевого протокола HTTP, используемого во всемирной паутине и реализованного на клиентах и серверах. Это хорошо работало в течение 15 лет. Но по мере развития современных приложений и веб-сайтов и увеличения объема данных, загружаемых на одну страницу, недостатки HTTP / 1.1 стали более заметными.

Один открытый запрос на соединение

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

HTTP2 и дублирование данных

Другая проблема с HTTP / 1.1 – дублирование данных между запросами (куки и другие заголовки). Слишком много запросов означает слишком много избыточных данных, которые могут повлиять на производительность. Это привело к разработке таких методов, как спрайты изображений (объединение нескольких запросов изображений в один) и разделение доменов (разделение запросов ресурсов на несколько доменов для увеличения числа возможных параллельных соединений TCP). HTTP / 2 был построен по протоколу Google SPDY с учетом вышеупомянутых недостатков HTTP / 1.1. Основные преимущества HTTP / 2 по сравнению с HTTP / 1.1, взятые из их страницы Github:

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

Позволяет использовать одно и то же TCP-соединение для нескольких параллельных запросов

Сжатие заголовка с использованием HPACK

Сжатые заголовки, уменьшенная избыточность данных

Сервер Push

Вместо того чтобы ждать, пока клиент запросит ресурсы, такие как JS и CSS, сервер может «выдвинуть» ресурсы, которые, по его мнению, потребуются клиенту. Избегает поездки туда и обратно. Хотя основные преимущества упомянуты выше, давайте рассмотрим реальный пример различия между производительностью HTTP / 1.1 и HTTP / 2. Демонстрационная страница из ImageKit, которая была дана ранее в этом посте, состоит из изображения, разделенного на 100 меньших изображений. Изображение загружается одновременно по HTTP / 1.1 и HTTP / 2, чтобы показать разницу в производительности загрузки из-за мультиплексирования и сжатия заголовка HTTP / 2. Здесь разница в загрузке ресурсов по HTTP / 1.1 против HTTP / 2 HTTP / 2 – явный победитель. Как только первые несколько ресурсов начинают загружаться через HTTP / 2, следующие ресурсы загружаются очень быстро. Это не относится к HTTP / 1.1, где ресурсы изображения продолжают загружаться в течение более длительного времени один за другим (типично конвейерной обработке в HTTP / 1.1) для завершения полного изображения. Откройте отладчик в Chrome и перезагрузите демонстрационную страницу в ImageKit. Сортируйте изображения на вкладке «Сеть» по «Водопад». Вот что вы увидите. HTTP2 – Все еще его не используете? Изображения через HTTP / 2 начинают загружаться параллельно, почти в одно и то же время, и заканчивают загружаться почти одновременно. С другой стороны, вот что мы получаем для изображений, загружаемых по HTTP / 1.1 HTTP2 – Все еще его не используете? Изображения загружаются партиями по 6 (параллельные соединения устанавливаются браузером). И, следовательно, весь набор из 100 изображений занимает больше времени для полной загрузки. Откройте инструменты разработчика Chrome и перейдите на вкладку Сеть. Щелкните правой кнопкой мыши «Имя» или любой другой заголовок списка элементов и убедитесь, что вы выбрали «Протокол» в открывшемся списке. HTTP2 – Все еще его не используете? Теперь перезагрузите страницу и проверьте значение протокола для элементов, загружаемых на страницу. Если HTTP / 2 работает для определенного запроса, значение протокола будет «h2». В противном случае значение будет «http / 1.1». Это можно наблюдать на скриншотах вкладки «Сеть», которые были опубликованы выше. Почти все браузеры поддерживают HTTP / 2 – Chrome, Firefox, Opera, Safari (для определенных версий ОС) и даже IE. Полный список браузеров, поддерживающих HTTP / 2, можно найти здесь . Примечание: HTTP / 2 реализован только через TLS. Таким образом, сейчас важнее перенести свои ресурсы в HTTPS, если вы этого еще не сделали. Обратите внимание, что HTTPS необходим для конкретного ресурса, а не для всей страницы или веб-сайта. Рабочая группа HTTP поддерживает полный список реализаций HTTP / 2 на разных серверах . Вы можете обновить свой сервер, если таковой имеется, для поддержки HTTP / 2. Для ресурсов, которые загружаются из CDN или стороннего поставщика, вам необходимо связаться с ними для обновления до HTTP / 2, если это необходимо. Также обратите внимание, что хотя большинство ваших пользователей смогут использовать HTTP / 2, некоторые из них все еще могут обращаться к вашему приложению из более старых браузеров. Таким образом, оптимизация производительности, сделанная для HTTP / 1.1, все еще будет важной и заслуживающей внимания. ImageKit предоставляет HTTPS-готовый образ CDN, который автоматически поддерживает HTTP / 2 для доставки изображений без какой-либо дополнительной настройки. Это гарантирует, что оптимизированные и преобразованные изображения на вашем сайте загружаются еще быстрее с ImageKit. Пожалуйста, поделитесь своими комментариями о влиянии, которое вы видели на производительность загрузки страницы, когда вы обновили свое приложение для использования HTTP / 2, и любые другие уроки, которые следует извлечь из опыта миграции.

HTTP2 – Все еще его не используете? Источник записи: https://techblog.sdstudio.top/http2-vse-eshhe-ne-ispolzuete/

Источник записи: https://blog.imagekit.io

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