HTTP/2 e Brotli in Next.js: configurazione e verifica

HTTP/2 e compressione possono ridurre il trasferimento delle risorse e migliorare il caricamento, incluso LCP. Da soli non correggono gli spostamenti del layout né garantiscono un posizionamento migliore. Controlla separatamente rete, rendering e interazioni.

HTTP/2 e HTTPS

HTTP/2 multiplexa le richieste su una connessione e riduce il blocco a livello HTTP. Usa però TCP: la perdita di un pacchetto può ancora ritardare più flussi. HTTP/3 è già utilizzato e impiega un trasporto diverso. Scegli in base alle misurazioni e al supporto dell’hosting.

I browser usano HTTP/2 su TLS. Su Vercel o altro hosting gestito, verifica il protocollo negoziato. Con hosting autonomo, un reverse proxy o CDN può gestire TLS e HTTP/2 davanti a Next.js. Il modulo Node.js https da solo non abilita HTTP/2.

Per una prova HTTPS locale puoi creare un certificato per localhost. Non è un certificato di produzione:

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

Questo server personalizzato mostra HTTPS con HTTP/1.1, non un deployment HTTP/2. Richiede un progetto Next.js esistente e, in modalità produzione, una build completata. In genere preferisci il server standard dietro 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()

Verificare protocollo e compressione

Controlla la colonna Protocol in Network di Chrome DevTools. Con una versione di curl compatibile con HTTP/2, il primo comando mostra il protocollo effettivo; è possibile un fallback. Il secondo esamina gli header di una risposta GET dichiarando il supporto di 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

Con next start, Next.js comprime con gzip per impostazione predefinita. Brotli può produrre risposte testuali più piccole, ma non esiste un risparmio universale del 20–25%. Sull’hosting gestito verifica le risposte; con hosting autonomo configura Brotli su un proxy o CDN compatibile.

Disabilita la compressione di Next.js solo dopo averla configurata su un altro livello. Questa impostazione non attiva Brotli:

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

Una risposta Brotli può avere questi header:

Content-Encoding: br
Vary: Accept-Encoding

Non impostare Content-Encoding su un corpo non compresso. Controlla il fallback e la gestione di Accept-Encoding nella cache. I numeri seguenti sono illustrativi, non misurazioni o rapporti garantiti:

Prefetch e Server Push

Il componente Link può precaricare le risorse di una route. È il browser a richiederle: non è HTTP/2 Server Push. Chrome ha disabilitato Server Push per impostazione predefinita dalla versione 106. Non farne una dipendenza dell’ottimizzazione attuale.

import Link from 'next/link'

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

Un preload può essere utile per un font realmente critico. Sostituisci l’URL d’esempio e adatta tipo e impostazioni cross-origin:

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

Prefetch e preload consumano banda. Non esiste un limite universale di cinque o sei risorse: mantieni solo i suggerimenti con un beneficio misurato.

Immagini

next/image seleziona formati ottimizzati in base alla configurazione e all’header Accept. WebP è il formato predefinito; AVIF richiede una configurazione adeguata. Le dimensioni riservano lo spazio e riducono gli spostamenti del layout.

import Image from 'next/image'

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

Le dimensioni seguenti sono illustrative e dipendono da immagine, risoluzione e qualità. Controlla i browser del pubblico invece di usare percentuali fisse di supporto.

Errori comuni e confronto

Confronta la stessa pagina nelle stesse condizioni di dispositivo, rete e cache. Speed Scanner e WebPageTest possono aiutare. Il nome del protocollo da solo non dimostra un miglioramento. Conserva configurazione e risultati.

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