HTTP/2 y Brotli en Next.js: configuración y comprobación

HTTP/2 y la compresión pueden reducir la transferencia de recursos y mejorar la carga, incluido el LCP. Por sí solos no corrigen los desplazamientos de diseño ni garantizan mejores posiciones. Revise la red, el renderizado y las interacciones por separado.

HTTP/2 y HTTPS

HTTP/2 multiplexa solicitudes en una conexión y reduce el bloqueo a nivel HTTP. Sigue utilizando TCP: la pérdida de un paquete puede retrasar varios flujos. HTTP/3 ya se utiliza y emplea otro transporte. Elija según las mediciones y el soporte del alojamiento.

Los navegadores usan HTTP/2 sobre TLS. En Vercel u otro alojamiento gestionado, compruebe el protocolo negociado. En alojamiento propio, un proxy inverso o CDN puede gestionar TLS y HTTP/2 delante de Next.js. El módulo https de Node.js no activa HTTP/2 por sí solo.

Para probar HTTPS localmente puede generar un certificado para localhost. No es un certificado de producción:

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 muestra HTTPS con HTTP/1.1, no un despliegue HTTP/2. Requiere un proyecto Next.js existente y una compilación terminada en modo de producción. En general, prefiera el servidor estándar detrás de un 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()

Compruebe el protocolo y la compresión

Revise la columna Protocol de Network en Chrome DevTools. Con una versión de curl compatible con HTTP/2, el primer comando muestra el protocolo utilizado; puede producirse una negociación de otra versión. El segundo inspecciona los encabezados de una respuesta GET anunciando soporte de Brotli y 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 y gzip

Con next start, Next.js usa gzip de forma predeterminada. Brotli puede generar respuestas de texto más pequeñas, pero no existe un ahorro universal del 20–25%. En alojamiento gestionado, revise las respuestas; en alojamiento propio, configure Brotli en un proxy o CDN compatible.

Desactive la compresión de Next.js solo después de configurarla en otra capa. Esta opción no activa Brotli:

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

Una respuesta Brotli puede incluir estos encabezados:

Content-Encoding: br
Vary: Accept-Encoding

No establezca Content-Encoding en un cuerpo sin comprimir. Verifique las variantes alternativas y el tratamiento de Accept-Encoding en la caché. Estas cifras son ilustrativas, no mediciones ni ratios garantizados:

Prefetch y Server Push

Link de Next.js puede precargar recursos de una ruta. Son solicitudes del navegador, no HTTP/2 Server Push. Chrome desactivó Server Push de forma predeterminada a partir de la versión 106. No haga depender una optimización actual de ese mecanismo.

import Link from 'next/link'

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

Un preload puede ser útil para una fuente realmente crítica. Sustituya la URL del ejemplo y ajuste el tipo y la configuración cross-origin:

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

Prefetch y preload consumen ancho de banda. No existe un límite universal de cinco o seis recursos: mantenga solo las indicaciones con un beneficio medido.

Imágenes

next/image selecciona formatos optimizados según la configuración y el encabezado Accept. WebP es el formato predeterminado; AVIF requiere la configuración correspondiente. Las dimensiones reservan espacio y reducen los desplazamientos de diseño.

import Image from 'next/image'

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

Estos tamaños son ilustrativos y dependen de la imagen, la resolución y la calidad. Compruebe los navegadores de su público en vez de usar porcentajes fijos de compatibilidad.

Errores y comparación

Compare la misma página con las mismas condiciones de dispositivo, red y caché. Speed Scanner y WebPageTest pueden ayudar. El nombre del protocolo no demuestra por sí solo una mejora. Guarde la configuración y los resultados.

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