Missing HTTP/2 push or preload headers
- Server Configuration
Problem Summary
HTTP/2 push and preload headers allow the server to proactively send resources the browser will need before they’re requested. Missing these headers means the browser must discover, request, and wait for each resource sequentially.
Performance Impact
- Delayed resource discovery: Browser parses HTML before knowing what to fetch
- Increased round trips: Extra time between request and delivery
- Worse on high-latency connections: Each millisecond counts on slow networks
- Suboptimal LCP: Critical rendering path isn’t optimized
How to Detect
- PageSpeed Insights: Shows “Preload key requests” opportunities
- Lighthouse: Flags critical requests not preloaded
- Chrome DevTools Network Tab: Check Initiator column for preloaded resources
- web.dev measure: Check “Initial server response time”
Solutions
1. Add Preload Link Headers
Add to HTML head or server config:
<link rel="preload" href="https://adame.io/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="https://adame.io/css/critical.css" as="style">2. Nginx Preload Headers
location / { add_header Link "</css/critical.css>; as=style; rel=preload";}3. HTTP/2 Push (Nginx)
location / { http2_push /css/style.css; http2_push /js/main.js; http2_push /fonts/font.woff2;}4. WordPress Plugins
Plugins like Perfmatters or WP Rocket can handle this automatically.