- html5css.dev
- SEO
- Мобильное SEO
- Скорость сайта
- Протоколы HTTP/2 и HTTP/3
Протоколы HTTP/2 и HTTP/3
HTTP/2 убрал главное ограничение HTTP/1.1, но остался на TCP. HTTP/3 работает поверх QUIC и переживает смену сети — на мобильных это заметнее всего.
Сравнение поколений
| HTTP/1.1 | HTTP/2 | HTTP/3 | |
|---|---|---|---|
| Транспорт | TCP | TCP | QUIC поверх UDP |
| Параллельные запросы | По одному на соединение | Мультиплексирование | Мультиплексирование |
| Блокировка очереди | На уровне запросов | Остаётся на уровне TCP | Отсутствует |
| Сжатие заголовков | Нет | HPACK | QPACK |
| Потеря пакета | Задерживает всё | Задерживает все потоки | Затрагивает один поток |
| Смена сети | Разрыв | Разрыв | Соединение сохраняется |
| Установка соединения | TCP + TLS | TCP + TLS | Объединена, быстрее |
Ключевая строка для мобильных — предпоследняя. Когда телефон переключается с Wi-Fi на мобильную сеть, HTTP/3 продолжает работу, а HTTP/2 требует нового рукопожатия.
Включение на nginx
server {
listen 443 ssl;
listen 443 quic reuseport; # HTTP/3
http2 on; # HTTP/2
ssl_protocols TLSv1.2 TLSv1.3;
# сообщаем браузеру, что доступен HTTP/3
add_header Alt-Svc 'h3=":443"; ma=86400' always;
}Обязательное условие для обоих протоколов — работающий HTTPS. Настройка разобрана в уроке о протоколе HTTPS.
Приёмы, которые перестали работать
| Приём эпохи HTTP/1.1 | Почему больше не нужен |
|---|---|
| Склейка всего CSS и JS в один файл | Мультиплексирование убрало плату за число запросов; крупный бандл ломает кеширование при любой правке |
| Спрайты изображений | Отдельные файлы кешируются независимо; SVG-спрайт остаётся полезен по другой причине |
| Раздача с нескольких поддоменов | Обход лимита соединений больше не нужен, а лишние DNS-запросы и рукопожатия вредят |
| Инлайн ресурсов ради экономии запросов | Инлайнить стоит только критический CSS, остальное лучше кешировать отдельно |
| Server push | Убран: чаще отправлял то, что уже в кеше. Заменён на preload |
Что делать вместо push
<!-- шрифт первого экрана -->
<link rel="preload" href="/fonts/main.woff2" as="font"
type="font/woff2" crossorigin>
<!-- картинка-герой -->
<link rel="preload" as="image" href="/img/hero-800.avif"
imagesrcset="/img/hero-400.avif 400w, /img/hero-800.avif 800w"
imagesizes="(max-width: 768px) 100vw, 800px">preload сообщает браузеру о критичном ресурсе заранее, но не
навязывает то, что уже есть в кеше. Не злоупотребляйте: несколько preload
на странице максимум, иначе они начинают конкурировать друг с другом.
Проверка
# какой протокол отдаётся
curl -sI --http3 https://site.ru/ | head -1
curl -sI --http2 https://site.ru/ | head -1
# заголовок Alt-Svc
curl -sI https://site.ru/ | grep -i alt-svcВ DevTools → Network включите колонку Protocol: h2 — HTTP/2,
h3 — HTTP/3. Первый запрос обычно идёт по HTTP/2, а последующие
переключаются на HTTP/3 после получения Alt-Svc.
Итог
HTTP/2 сегодня минимум, HTTP/3 — то, что стоит включить ради мобильных пользователей. И не менее важно убрать оптимизации прошлой эпохи: склейку бандлов, спрайты и раздачу с нескольких доменов — они теперь мешают. Дальше — многоуровневое кеширование.
Частые вопросы
Нужен ли HTTP/3, если уже включён HTTP/2?
На мобильных — да. HTTP/3 работает поверх QUIC: нет блокировки очереди на уровне TCP, потеря пакета затрагивает только один поток, а соединение переживает переключение между Wi-Fi и мобильной сетью.
Какие приёмы оптимизации устарели с приходом HTTP/2?
Склейка файлов в один бандл, спрайты изображений, раздача статики с нескольких доменов (domain sharding) и инлайн ресурсов ради экономии запросов. При мультиплексировании много мелких файлов не проблема, а преимущество для кеширования.
Что стало с server push?
Практика показала, что он чаще вредит, чем помогает: сервер отправляет ресурсы, которые уже есть в кеше браузера. Поддержку убрали, вместо него используют rel="preload".
Как проверить, какой протокол используется?
В DevTools → Network включить колонку Protocol: h2 означает HTTP/2, h3 — HTTP/3. Из консоли — запросом curl с флагом --http3.