HTTP2 и HTTP3. Почему ваш сайт может стать быстрее

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

HTTP/1.1 — как было раньше (и что было плохо)

HTTP/1.1 десятилетиями был стандартом. Но часто его использование доставляло некоторые проблемы. Причем достаточно серьезные.

Проблема 1: Один запрос — одно соединение

Каждый ресурс (HTML, CSS, JS, картинка) требовал отдельного TCP-соединения. Для загрузки 100 ресурсов — 100 соединений.

В версии 1.1, которая и была станадртом долгое время, браузеры открывали 6-8 соединений параллельно. Но это все равно было медленно.

Проблема 2: Head-of-Line Blocking

Представьте конвейерную ленту на заводе. Если первая деталь застряла, все остальные тоже стоят. Так и в HTTP/1.1: если один запрос медленный, все следующие ждут.

Проблема 3: Много заголовков

Каждый запрос несет одни и те же заголовки (User-Agent, Cookie, Accept). Это лишний трафик.

Как мы с этим жили?

Чтобы обойти ограничения, использовали:

• Спрайты — склеивали картинки в одну.
• Инлайнинг — вставляли CSS/JS прямо в HTML.
• Конкатенацию — склеивали все JS-файлы в один.
• Domain sharding — разносили ресурсы по разным поддоменам, чтобы открыть больше соединений.

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

HTTP/2 — главные фичи

1. Мультиплексирование (Multiplexing)

Одно TCP-соединение — много параллельных запросов. Вы можете загружать HTML, CSS, JS и картинки одновременно по одному каналу.

// Все эти запросы идут параллельно по одному соединению
GET /index.html
GET /styles.css
GET /app.js
GET /logo.png

2. Сжатие заголовков (HPACK)

Заголовки сжимаются. Вместо User-Agent: Mozilla/5.0... отправляется короткий индекс. Экономия трафика — до 30%.

3. Server Push (отправка без запроса)

Сервер может отправить ресурсы, даже если клиент их еще не запросил.

Клиент: "Дай мне index.html"
Сервер: "Вот index.html, а еще я отправлю styles.css и app.js, ты пока не знаешь, но поверь, они тебе понадобятся"

Server Push нужно использовать осторожно. По-честному, мало кто умеет делать это правильно. Если сервер отправит то, что у клиента уже есть в кэше — трафик потрачен зря. Поэтому Server Push сейчас почти не используется, вместо него используют preload в HTML.

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

Клиент может сказать серверу: «Сначала загрузи CSS, потом JS, потом картинки». Сервер будет учитывать это при подготовке ответа.

HTTP/3 — что нового (и почему он лучше HTTP/2)

Если HTTP/2 стал эволюцией HTTP/1.1, то HTTP/3 — это своего рода революция. Все равно что пересесть с конной повозки на современный электромобиль.

Главное отличие: вместо TCP — QUIC

HTTP/1.1 и HTTP/2 используют TCP. У него есть недостатки:

• Медленный старт — при открытии соединения скорость низкая, потом растет.
• Head-of-Line Blocking на уровне TCP — если потерян пакет, все остальные пакеты ждут, пока его перешлют.
• Ручная смена сети — если вы переключились с Wi-Fi на мобильный интернет, TCP-соединение рвется.

HTTP/3 использует QUIC — протокол на основе UDP. Он решает все эти проблемы.

Фича 1: Нет Head-of-Line Blocking (даже на уровне пакетов)

В HTTP/2 блокировка была только на уровне запросов. Но если внутри TCP потерян пакет — все запросы ждут.

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

Фича 2: Быстрое подключение (0-RTT)

TCP требует рукопожатия (3 пакета туда-обратно) + TLS (еще 2 пакета). Итого 5 пакетов до первой передачи данных.

QUIC объединяет установку соединения и шифрование. Первый пакет уже может нести данные. Это 0-RTT (0 round-trip time).

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

Фича 3: Плавная смена сети (Connection Migration)

В HTTP/2 при смене сети (например, переключились с Wi-Fi на 4G) соединение разрывается, и все запросы идут заново.

QUIC использует Connection ID — уникальный идентификатор соединения, который не привязан к IP-адресу. Вы переключили сеть — QUIC продолжает соединение без потерь.

Фича 4: Встроенное шифрование

В HTTP/2 шифрование (TLS) — отдельный слой. В QUIC шифрование встроено на уровне протокола. Отключить его нельзя.

Это значит, что HTTP/3 всегда работает по HTTPS.

Сравнительная таблица

Характеристика	HTTP/1.1	HTTP/2	HTTP/3
Транспортный протокол	TCP	TCP	QUIC (UDP)
Одно соединение на запрос	✅ Да	❌ Нет (мультиплексирование)	❌ Нет
Head-of-Line Blocking	✅ Да (на уровне запросов)	❌ Нет (на уровне запросов)	❌ Нет (полностью)
Сжатие заголовков	❌ Нет	✅ Да (HPACK)	✅ Да (QPACK)
Server Push	❌ Нет	✅ Да	✅ Да
Быстрое подключение (0-RTT)	❌ Нет	❌ Нет	✅ Да
Смена сети без разрыва	❌ Нет	❌ Нет	✅ Да
Шифрование	Опционально (HTTPS)	Опционально	✅ Обязательно
Поддержка браузерами	✅ Все	✅ 99%	⚠️ 85% (Chrome, Firefox, Safari)

Как это влияет на работу фронтендера?

1. Забудьте про старые оптимизации

• Спрайты больше не нужны — HTTP/2 любит много мелких файлов.
• Конкатенация не нужна — лучше держать файлы раздельно (лучше кэшируется).
• Domain sharding даже вредит — каждое новое соединение требует ресурсов.

Современный подход:

• Много мелких файлов (несколько десятков или сотен).
• Используйте HTTP/2 push только если вы уверены (или используйте preload).

2. Используйте preload и preconnect

Так как Server Push почти не используется, помогайте браузеру с помощью HTML-тегов:

<!-- Предзагрузить CSS, который понадобится -->
<link rel="preload" href="/styles.css" as="style">
<!-- Предзагрузить шрифт -->
<link rel="preload" href="/font.woff2" as="font">
<!-- Заранее подключиться к стороннему API -->
<link rel="preconnect" href="https://api.site.com">

3. Проверяйте, работают ли новые версии HTTP на вашем сайте

Откройте DevTools → вкладка Network → кликните на любой запрос → вкладка Headers. Если в поле Protocol написано h2 — у вас HTTP/2. Если h3 — HTTP/3.

Если у вас только HTTP/1.1 — обратитесь к девопсам или хостеру. Почти все современные хостинги поддерживают HTTP/2 и HTTP/3 из коробки.

4. Для HTTP/3 проверьте настройки сервера

• NGINX: поддержка HTTP/3 появилась в версии 1.19.1 (экспериментально). Нужно включить флаг http3.
• Cloudflare, AWS, Vercel: HTTP/3 включен по умолчанию.
• Node.js: пока нет встроенной поддержки, используйте reverse-proxy (NGINX, Caddy).

Краткие итоги. Чо важно запомнить

• HTTP/2 — мультиплексирование, сжатие заголовков, Server Push. Ускоряет загрузку за счет одного соединения.
• HTTP/3 — QUIC вместо TCP. Нет Head-of-Line Blocking, быстрое подключение (0-RTT), плавная смена сети.
• HTTP/3 всегда работает по HTTPS.
• Старые оптимизации (спрайты, конкатенация, domain sharding) теперь бесполезны или даже вредны.
• Используйте preload и preconnect, чтобы помочь браузеру.

HTTP/2 и HTTP/3 убирают узкие места в сети, но не заменяют хорошую архитектуру фронтенда. Оптимизируйте картинки, минифицируйте код, используйте кэширование — и тогда новые протоколы раскроют свой потенциал на 100%.

Желаю успехов!