Using HTTP/2 and brotli in NextJS

Web application performance has a direct impact on user experience and SEO. According to Google research, 53% of users abandon pages that take longer than 3 seconds to load. Modern protocols like HTTP/2 and efficient data compression techniques are becoming key tools to improve metrics like LCP (Largest Contentful Paint) and CLS (Cumulative Layout Shift).

HTTP/2 solves the “head-of-line blocking ” problem of HTTP/1.1 by allowing multiple requests to be sent over a single TCP connection. This is critical for pages with multiple resources.

Requirements:

• HTTPS: HTTP/2 requires TLS encryption. A self-signed certificate can be generated for local development:

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

Customization in Next.js:

• Vercel (default): HTTP/2 is automatically enabled when deploying to Vercel.

• Self-hosting: Use a Node.js server with the https module:

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()

Verification:

Use Chrome DevTools (Network tab) or command:

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

Compression settings: Brotli vs Gzip

Brotli provides 20-25% better compression than Gzip. Next.js supports both formats, but it is recommended to use Brotli for text resources (HTML, JS, CSS).

Brotli activation in Next.js:

• Vercel: Enabled by default.

• Self-hosting: Add middleware compression with 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`)
}

Example headers:

Content-Encoding: br

Compression efficiency by JS example

Using Server Push

HTTP/2 Server Push allows you to send resources to the client before the client requests them. In Next.js this is implemented through the Link component:

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

Manual Push Control:

For critical resources (such as fonts), you can use http2.pushStream:

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

Cons:

• Network overload: Don't fluff more than 5-6 resources.

• Support: Some older proxies may not be able to handle Push.

Image Optimization

Next.js provides an Image component with automatic conversion to WebP:

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

Format Comparison:

Frequent errors

Conclusion

HTTP/2 and compression remain the foundation of optimization until the arrival of HTTP/3. For Next.js projects, it is important to combine built-in mechanisms with manual server configuration. Testing via Lighthouse and WebPageTest will allow you to accurately assess the effect.

Experiment with settings, keep an eye on updates (e.g. experiments with HTTP/3 in Vercel), and remember: optimization is a process, not a one-time task.

Resources:

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