Представьте: вы в кофейне с 15 друзьями пытаетесь сделать заказ, но есть только один бариста, который принимает заказы по очереди, а макиато у всех становится всё холоднее. Это и есть HTTP/1.1 в двух словах. А теперь представьте команду бариста, которая обслуживает все заказы одновременно, создавая латте-арт — это HTTP/2 говорит: «Подержи мой эспрессо». Давайте оптимизируем ваши веб-приложения, как будто разгоняем DeLorean.

Секрет скорости: что делает HTTP/2 особенным

Мультиплексирование: конец кошмаров с fork() HTTP/1.1 был похож на попытку выпить смузи через 6 параллельных соломинок — теоретически возможно, но практически неудобно. Вот как HTTP/2 меняет правила игры:

graph LR A[Браузер] -->|Одно TCP-соединение| B[Сервер HTTP/2] B -->|Поток 1: HTML| A B -->|Поток 2: CSS| A B -->|Поток 3: JS| A B -->|Поток n: Активы| A

Больше никакого разделения домена или спрайтов изображений. Однажды я сократил время загрузки мультимедийного сайта с 4,2 до 1,8 секунды, просто переключив HTTP/2 — клиент подумал, что я открыл чёрную магию. HPACK: когда сжатие заголовков становится олимпийским видом спорта В HTTP/2 используется сжатие заголовков, которому позавидовала бы русская матрёшка. Оцените разницу:

# Сравнение размеров заголовков
curl -v --http1.1 https://your-site.com > http11_headers.txt
curl -v --http2 https://your-site.com > http2_headers.txt
du -h *.txt

Обычно вы увидите сокращение на 60–80%. Один сайт электронной коммерции сэкономил 1,2 ПБ в месяц на заголовках — этого достаточно, чтобы транслировать каждую серию «Друзей» 42 миллиона раз!

Учебный курс по настройке: от нуля до героя

Nginx: заставим его работать Вот моя проверенная в бою конфигурация:

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    ssl_certificate /etc/letsencrypt/live/yourdomain/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/yourdomain/privkey.pem;
    # Для HTTP/2 нужны современные криптографические протоколы
    ssl_protocols TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256;
    # Включение серверного push (используйте осторожно!)
    http2_push /static/css/main.css;
    http2_push /static/js/app.js;
}

Webpack: собирайте так, будто готовитесь к полёту на Марс С HTTP/2 мы можем оптимизировать по-другому:

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      maxSize: 244000, // Храните менее 250 КБ для оптимального кэширования
      minSize: 20000  // Не разбивайте маленькие файлы
    }
  }
}

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

<link rel="stylesheet" href="critical.css" fetchpriority="high">
<script src="analytics.js" fetchpriority="low"></script>

Отладка: станьте мастером HTTP/2

Используйте Chrome chrome://net-export для захвата сетевых журналов, а затем визуализируйте их с помощью NetLog Viewer (https://netlog-viewer.appspot.com/). Обратите внимание на:

  1. Зависимости потоков (отношения родитель/потомок).
  2. Приоритетные веса (числа от 1 до 256).
  3. HEADERS против фреймов DATA. Однажды я обнаружил неконтролируемый fetchpriority=“urgent” на GIF с кошкой, который задерживал проверку кредитных карт. Правда.

Тёмные искусства: серверный push и не только

Серверный push подобен другу, который приносит ваш зонт до того, как пойдёт дождь — мощный, но им легко злоупотребить. Используйте этот фрагмент Node.js для разумного продвижения:

const http2 = require('http2');
const server = http2.createSecureServer({/*...*/});
server.on('stream', (stream, headers) => {
  if (headers[':path'] === '/') {
    stream.pushStream({':path': '/style.css'}, (err, pushStream) => {
      pushStream.respondWithFile('style.css');
    });
  }
  stream.respondWithFile('index.html');
});

Помните: для продвигаемых ресурсов требуется проверка кэша. Я реализовал заголовки push-with-validation, которые сократили количество лишних запросов на 73% для новостного сайта.

Настройка производительности: от хорошей скорости до невероятной

  1. Приоритизация потоков — как тетрис для пакетов.
  2. Объединение соединений — когда несколько доменов разрешаются на один IP-адрес.
  3. 0-RTT — для ранних данных TLS 1.3 (но остерегайтесь атак повтора). Используйте эту команду мониторинга, чтобы увидеть HTTP/2 в действии:
nghttp -n -v -H "user-agent: Mozilla" https://your-site.com | grep streams

Вы увидите, что потоки обрабатываются параллельно, как муравьи на пикнике.

Будущее уже наступило (но возьмите шлем)

Хотя QUIC и HTTP/3 грядут, HTTP/2 по-прежнему остаётся рабочей лошадкой современного веба. График задержки одного клиента после перехода на HTTP/2 выглядел как трамплин — в хорошем смысле. Помните: оптимизация — это путь, а не цель. Теперь сделайте так, чтобы ваши веб-приложения загружались так быстро, что им нужен будет штамп времени, чтобы доказать, что они загрузились!