{
    "slug": "http2_push",
    "term": "HTTP/2 Server Push & Early Hints",
    "category": "networking",
    "difficulty": "intermediate",
    "short": "HTTP/2 Server Push lets a server proactively send assets (CSS, JS, fonts) before the browser requests them. 103 Early Hints is its practical successor — sending Link preload headers before the full response is ready.",
    "long": "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.",
    "aliases": [],
    "tags": [
        "http2",
        "performance",
        "networking",
        "preload"
    ],
    "misconception": "HTTP/2 Server Push is not the same as preload — Push sends the bytes unconditionally; a preload hint lets the browser decide whether to fetch based on its cache.",
    "why_it_matters": "103 Early Hints can shave 100–500ms from perceived load time on server-rendered pages by overlapping asset fetches with server processing time — a measurable Core Web Vitals improvement.",
    "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."
    ],
    "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."
    ],
    "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."
    ],
    "related": [
        "critical_rendering_path",
        "web_vitals",
        "preload_prefetch"
    ],
    "prerequisites": [],
    "refs": [
        "https://developer.chrome.com/blog/early-hints",
        "https://www.rfc-editor.org/rfc/rfc8297"
    ],
    "bad_code": "// Server Push — deprecated, may be ignored or cause duplicate downloads:\nheader('Link: </style.css>; rel=preload; as=style', false);\n// Some servers interpret this as a push directive",
    "good_code": "// 103 Early Hints — modern, cache-aware:\nheader('HTTP/1.1 103 Early Hints');\nheader('Link: </critical.css>; rel=preload; as=style', false);\nheader('Link: </font.woff2>; rel=preload; as=font; crossorigin', false);\nob_flush(); flush();\n\n// ... expensive DB queries happen here ...\n// Browser is already fetching CSS and font in parallel",
    "example_note": "The 103 response is sent immediately before the slow DB work begins — the browser fetches critical CSS during the server think-time, so the render-blocking resource arrives before the HTML does.",
    "created": "2026-03-31",
    "updated": "2026-03-31",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/http2_push",
        "html_url": "https://codeclaritylab.com/glossary/http2_push",
        "json_url": "https://codeclaritylab.com/glossary/http2_push.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[HTTP/2 Server Push & Early Hints](https://codeclaritylab.com/glossary/http2_push) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/http2_push"
            }
        }
    }
}