Early Hints 103 in Practice – Faster LCP

Early Hints 103 is one of the most effective performance “hacks” available in 2026. It effectively eliminates the “idle time” your browser spends waiting for your mybox server to generate HTML. By sending a 103 status code immediately, the CDN tells the browser exactly which files to start downloading before the first byte of your actual webpage even exists.

On a typical mybox site, this can slash your Largest Contentful Paint (LCP) by 15% to 25%.

How Early Hints Works (The 2026 Logic)

Usually, the browser’s journey looks like this:

1. Request: Browser asks for homepage.html.
2. Wait: Your mybox server processes PHP, queries the database, and builds the HTML (this is the TTFB).
3. Response: HTML arrives; browser finally sees it needs style.css and font.woff2.
4. Download: Browser starts fetching those files.

With Early Hints 103:

1. Request: Browser asks for homepage.html.
2. 103 Hint: Within ~20ms, the CDN sends a 103 response: “Hey, you’re going to need style.css and main-font.woff2. Start now!”
3. Parallel Work: While the mybox server is still thinking, the browser is already downloading the CSS and fonts.
4. 200 Response: HTML arrives, but the CSS is already finished downloading. The page renders instantly.

Step 1: Enabling Early Hints on Cloudflare

For most users on mybox, Cloudflare is the easiest delivery mechanism.

1. Dashboard: Go to Speed > Optimization in your Cloudflare dashboard.
2. Early Hints: Toggle the switch to On.
3. Smart Early Hints: Enable this if you want Cloudflare to automatically “guess” which assets to hint based on previous traffic patterns.
4. Link Headers: For the best results, you should manually specify your “hints” via your mybox server’s response headers.

Step 2: Identifying “High-Impact” Hints

The goal is to be surgical. If you hint too many files, you create “bandwidth contention,” which actually slows the page down. Stick to these three:

Step 3: Implementation via WPCode on mybox

You don’t need to edit your theme files. Use a PHP snippet in WPCode to send these headers:

PHP

function mybox_early_hints_headers() {
    if ( is_front_page() ) {
        header( 'Link: <https://yourdomain.com/wp-content/themes/theme/style.css>; rel=preload; as=style', false );
        header( 'Link: <https://yourdomain.com/wp-content/themes/theme/fonts/main.woff2>; rel=preload; as=font; crossorigin', false );
    }
}
add_action( 'send_headers', 'mybox_early_hints_headers' );

Step 4: Common Traps and 2026 Best Practices

• The “Crossorigin” Rule: For fonts, you must include the crossorigin attribute in your hint. If you forget it, the browser will download the font twice, doubling your load time.
• HTTPS Only: Early Hints 103 only works over HTTP/2 or HTTP/3. Ensure your mybox SSL certificate is valid and active.
• Don’t Hint “Lazy” Assets: Never hint images or scripts that are below the fold (like a footer script or a bottom-of-page gallery). This wastes the user’s data and slows the LCP.
• Vary by Template: Your “Hint” list for a Product page should be different than for your Blog. Use conditional tags (is_product(), is_single()) in your PHP snippet to ensure relevant hints.

Step 5: How to Verify It’s Working

You cannot see the 103 status code in the standard “Network” tab easily because it is a “provisional” response.

1. Terminal/Command Line: Use curl -I -H "Connection: Upgrade" -H "Upgrade: h2c" https://yourdomain.com.
2. Look for: You should see HTTP/2 103 followed by your Link headers, and then the HTTP/2 200 response.
3. WebPageTest: Run a test on WebPageTest.org and look at the “Waterfall” chart. You will see resource downloads starting before the purple “HTML” bar is finished.

Summary

Early Hints 103 is the closest thing to “time travel” for web performance. By giving the browser a head start while your mybox server is busy, you provide a perceived speed that feels instantaneous to your users.