HTTP/2 Server Push & Early Hints
TL;DR
Explanation
HTTP/2 Server Push allowed servers to send additional resources alongside the initial HTML response, avoiding a round trip for critical assets. In practice it suffered from a fundamental problem: the server cannot know which assets the browser already has cached, leading to wasted bandwidth pushing already-cached resources. Major CDNs (Cloudflare, Chrome) deprecated or removed Server Push support. 103 Early Hints (RFC 8297) is the modern replacement — the server sends a preliminary 103 response with Link: rel=preload headers immediately, while still generating the full page. The browser starts fetching those assets during the server think-time. Unlike Push, the browser controls whether to actually fetch each hint, respecting its own cache. In PHP this is emitted with header('HTTP/1.1 103 Early Hints') before any output.
Watch Out
Common Misconception
Why It Matters
Common Mistakes
- Using Server Push without cache-awareness — pushing already-cached assets wastes bandwidth and can trigger redundant downloads.
- Sending 103 Early Hints after output has started — the 103 must be sent before any body bytes.
- Hinting too many resources — hinting 20 assets defeats the purpose; hint only render-blocking critical resources.
Avoid When
- Avoid HTTP/2 Server Push for new projects — browser support is being removed; use 103 Early Hints or <link rel=preload> instead.
- Do not hint resources that are already in the browser cache for returning users — measure cache hit rates before adding hints.
When To Use
- Send 103 Early Hints for render-blocking CSS and critical fonts on server-rendered pages where DB or API latency is the bottleneck.
- Use Early Hints via CDN (Cloudflare, Fastly) when your origin supports it — the CDN can replay hints from cache without hitting origin.
Code Examples
// Server Push — deprecated, may be ignored or cause duplicate downloads:
header('Link: </style.css>; rel=preload; as=style', false);
// Some servers interpret this as a push directive// 103 Early Hints — modern, cache-aware:
header('HTTP/1.1 103 Early Hints');
header('Link: </critical.css>; rel=preload; as=style', false);
header('Link: </font.woff2>; rel=preload; as=font; crossorigin', false);
ob_flush(); flush();
// ... expensive DB queries happen here ...
// Browser is already fetching CSS and font in parallel