Early Hints
Early Hints is a feature that allows the server to send preliminary HTTP headers before the main response is ready. This enables browsers to start loading critical resources even before the HTML document arrives.
How It Works
Browser requests a page
Server sends 103 Early Hints response with
LinkheadersBrowser starts preloading resources immediately
Server sends 200 OK with the actual HTML content
Resources are already loading (or loaded) when the browser parses the HTML
This can significantly improve Largest Contentful Paint (LCP) by several hundred milliseconds.
Server Requirements
Early Hints requires a compatible server:
FrankenPHP (recommended with Symfony)
Caddy
Apache (with mod_http2)
nginx (version 1.25.3+)
If your server doesn't support Early Hints, the Link headers will still be sent with the main response. They won't provide the same performance benefit but won't cause any issues.
Configuration
Options
preload_manifest
When enabled, sends a preload hint for the PWA manifest file:
This allows the browser to fetch the manifest in parallel with parsing the HTML, speeding up PWA installation prompts.
Default: true
preload_serviceworker
When enabled, sends a preload hint for the service worker script:
This can help the service worker register faster, but use with caution as it adds to the critical path.
Default: false
preconnect_workbox_cdn
When using Workbox from CDN (use_cdn: true), sends a preconnect hint:
This establishes an early connection to the CDN, reducing latency when loading Workbox modules.
Default: true
Usage with FrankenPHP
FrankenPHP automatically handles Early Hints when Link headers are present in the request attributes. No additional configuration is needed beyond enabling the feature in this bundle.
Combining with Resource Hints
Early Hints works well with the Resource Hints feature. Both features add Link headers to the request, but they serve different purposes:
Early Hints: Sends headers in a 103 response before the main content
Resource Hints: Adds
<link>tags in the HTML<head>
When both are enabled, resources get the benefit of:
Early Hints for compatible servers (103 response)
HTML link tags as fallback for all browsers
Example Response Flow
With Early Hints (FrankenPHP/Caddy)
Without Early Hints (standard server)
Performance Benefits
LCP
100-500ms faster
TTFB perceived
Improved (resources load during server processing)
PWA prompt
Faster appearance
Best Practices
Enable for production: Early Hints has minimal overhead and provides significant benefits on compatible servers.
Keep preload list small: Only preload truly critical resources. Too many hints can overwhelm the browser.
Test with DevTools: Use the Network panel to verify 103 responses are being sent (look for the "early hints" indicator).
Monitor Core Web Vitals: Track LCP improvements after enabling Early Hints.
Further Reading
Last updated
Was this helpful?