HTTP/2 e Brotli no Next.js: configuração e verificação

HTTP/2 e compressão podem reduzir a transferência de recursos e melhorar o carregamento, incluindo o LCP. Sozinhos, não corrigem deslocamentos de layout nem garantem posições melhores na busca. Analise rede, renderização e interações separadamente.

HTTP/2 e HTTPS

O HTTP/2 multiplexa solicitações em uma conexão e reduz bloqueios no nível HTTP. Ele ainda usa TCP: a perda de um pacote pode atrasar vários fluxos. O HTTP/3 já é utilizado e emprega outro transporte. Escolha conforme as medições e o suporte da hospedagem.

Os navegadores usam HTTP/2 sobre TLS. No Vercel ou em outra hospedagem gerenciada, verifique o protocolo negociado. Na hospedagem própria, um proxy reverso ou CDN pode cuidar de TLS e HTTP/2 antes do servidor Next.js. O módulo https do Node.js não ativa HTTP/2 sozinho.

Para um teste HTTPS local, você pode gerar um certificado para localhost. Ele não é um certificado de produção:

openssl req -x509 -newkey rsa:4096 -nodes -keyout key.pem -out cert.pem -days 365 -subj '/CN=localhost' -addext 'subjectAltName=DNS:localhost'

Este servidor personalizado demonstra HTTPS com HTTP/1.1, não uma implantação HTTP/2. Exige um projeto Next.js existente e um build concluído no modo de produção. Em geral, prefira o servidor padrão atrás de um proxy.

import next from 'next'
import fs from 'node:fs'
import https from 'node:https'

const app = next({ dev: process.env.NODE_ENV !== 'production', port: 3000 })
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()

Confira protocolo e compressão

Veja a coluna Protocol em Network no Chrome DevTools. Com um curl compatível com HTTP/2, o primeiro comando mostra o protocolo realmente usado; pode haver fallback. O segundo inspeciona os cabeçalhos de uma resposta GET anunciando suporte a Brotli e gzip.

curl --http2 -sS -o /dev/null -w '%{http_version}\n' https://your-site.com
curl -sS -D - -o /dev/null -H 'Accept-Encoding: br, gzip' https://your-site.com

Brotli e gzip

Com next start, o Next.js usa gzip por padrão. Brotli pode gerar respostas de texto menores, mas não existe economia universal de 20–25%. Na hospedagem gerenciada, inspecione as respostas; na hospedagem própria, configure Brotli em um proxy ou CDN compatível.

Desative a compressão do Next.js somente depois de configurá-la em outra camada. Esta opção não ativa Brotli:

// next.config.mjs
export default {
  compress: false,
}

Uma resposta Brotli pode conter estes cabeçalhos:

Content-Encoding: br
Vary: Accept-Encoding

Não defina Content-Encoding para um corpo não comprimido. Verifique o fallback e o tratamento de Accept-Encoding no cache. Os números abaixo são ilustrativos, não medições nem taxas garantidas:

Prefetch e Server Push

O Link do Next.js pode pré-carregar recursos de uma rota. São solicitações do navegador, não HTTP/2 Server Push. O Chrome desativou Server Push por padrão a partir da versão 106. Não faça uma otimização atual depender dele.

import Link from 'next/link'

export default function AboutLink() {
  return <Link href="/about" prefetch>About</Link>
}

Um preload pode ser útil para uma fonte realmente crítica. Substitua a URL do exemplo e ajuste o tipo e as opções cross-origin:

<link rel="preload" href="/fonts/site.woff2" as="font" type="font/woff2" crossorigin>

Prefetch e preload consomem banda. Não existe limite universal de cinco ou seis recursos: mantenha apenas as indicações com benefício medido.

Imagens

O next/image seleciona formatos otimizados conforme a configuração e o cabeçalho Accept. WebP é o formato padrão; AVIF exige configuração apropriada. As dimensões reservam espaço e reduzem deslocamentos de layout.

import Image from 'next/image'

export default function ExampleImage() {
  return <Image src="/example.jpg" alt="Example" width={800} height={600} quality={75} />
}

Estes tamanhos são ilustrativos e dependem da imagem, da resolução e da qualidade. Confira os navegadores do público em vez de usar porcentagens fixas de suporte.

Erros e comparação

Compare a mesma página nas mesmas condições de dispositivo, rede e cache. Speed Scanner e WebPageTest podem ajudar. O nome do protocolo sozinho não comprova melhora. Salve a configuração e os resultados.

• MDN HTTP/2
• Next.js Custom Server
• Google: LCP
• Next.js compress
• Next.js Link
• Chrome: HTTP/2 Server Push