Использование HTTP/2 и brotli в проектах на Next.js

Производительность веб-приложений напрямую влияет на пользовательский опыт и SEO. Согласно исследованиям Google, 53% пользователей покидают страницы, которые загружаются дольше 3 секунд. Современные протоколы, такие как HTTP/2, и эффективные методы сжатия данных становятся ключевыми инструментами для улучшения метрик вроде LCP (Largest Contentful Paint) и CLS (Cumulative Layout Shift).

HTTP/2 решает проблему "head-of-line blocking" HTTP/1.1, позволяя отправлять несколько запросов через один TCP-соединение. Это критично для страниц с множеством ресурсов.

Требования:

• HTTPS: HTTP/2 требует TLS-шифрования. Для локальной разработки можно сгенерировать самоподписанный сертификат:

openssl req -x509 -newkey rsa:4096 -nodes -keyout key.pem -out cert.pem -days 365

Настройка в Next.js:

• Vercel (по умолчанию): При деплое на Vercel HTTP/2 включен автоматически.
• Self-hosting: Используйте Node.js сервер с модулем https:

import next from 'next'
import fs from 'node:fs'
import https from 'node:https'
 
const app = next({ dev: process.env.NODE_ENV !== 'production', port })
const handle = app.getRequestHandler()
 
async function startServer() {
	await app.prepare()
 
	https
		.createServer(
			{
				cert: fs.readFileSync('./cert.pem'),
				key: fs.readFileSync('./key.pem'),
			},
			async (request, response) => {
				await handle(request, response)
			},
		)
		.listen(3000)
 
	console.info(`Ready on https://localhost:3000`)
}
 
startServer()

Проверка:

Используйте Chrome DevTools (вкладка Network) или команду:

curl -I --http2 https://your-site.com

Настройка сжатия: Brotli vs Gzip

Brotli обеспечивает на 20-25% лучшее сжатие, чем Gzip. Next.js поддерживает оба формата, но рекомендуется использовать Brotli для текстовых ресурсов (HTML, JS, CSS).

Активация Brotli в Next.js:

• Vercel: Включено по умолчанию.
• Self-hosting: Добавьте middleware compression с Brotli:

import compression from 'compression'
import next from 'next'
import fs from 'node:fs'
import https from 'node:https'
 
const app = next({ dev: process.env.NODE_ENV !== 'production', port })
const handle = app.getRequestHandler()
 
async function startServer() {
	await app.prepare()
 
	https
		.createServer(
			{
				cert: fs.readFileSync('./cert.pem'),
				key: fs.readFileSync('./key.pem'),
			},
			async (request, response) => {
				compression({
					brotli: {
						enabled: true,
						// params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 11 }
					},
				})
 
				await handle(request, response)
			},
		)
		.listen(3000)
 
	console.info(`Ready on https://localhost:3000`)
}

Пример заголовков:

Content-Encoding: br

Эффективность сжатия на примере JS

Использование Server Push

HTTP/2 Server Push позволяет отправлять ресурсы клиенту до его запроса. В Next.js это реализуется через компонент Link:

import Link from 'next/link'
;<Link href="/about" prefetch>
	<a>About project</a>
</Link>

Ручное управление Push:

Для критических ресурсов (например, шрифтов) можно использовать http2.pushStream:

server.get('/critical-page', (req, res) => {
	res.push('/_next/static/chunks/webpack.js', {}).end()
})

Минусы:

• Перегрузка сети: Не пушите более 5-6 ресурсов.
• Поддержка: Некоторые старые прокси могут не обрабатывать Push.

Оптимизация изображений

Next.js предоставляет компонент Image с автоматической конвертацией в WebP:

import Image from 'next/image'
;<Image src="/example.jpg" alt="Example" width={800} height={600} quality={75} />

Сравнение форматов:

Частые ошибки

Заключение

HTTP/2 и сжатие остаются фундаментом оптимизации до прихода HTTP/3. Для Next.js-проектов важно сочетать встроенные механизмы с ручной настройкой сервера. Тестирование через Lighthouse и WebPageTest позволит точно оценить эффект.

Экспериментируйте с настройками, следите за обновлениями (например, эксперименты с HTTP/3 в Vercel), и помните: оптимизация — это процесс, а не разовая задача.

Источники:

• MDN HTTP/2
• Nextjs Custom Server
• Google Web Fundamentals