{"id":7705,"date":"2026-04-15T10:02:43","date_gmt":"2026-04-15T08:02:43","guid":{"rendered":"https:\/\/mybox.com\/help\/?post_type=manual_kb&#038;p=7705"},"modified":"2026-04-15T10:03:40","modified_gmt":"2026-04-15T08:03:40","slug":"early-hints-103-in-practice-faster-lcp","status":"publish","type":"manual_kb","link":"https:\/\/mybox.com\/help\/en\/knowledgebase\/early-hints-103-in-practice-faster-lcp\/","title":{"rendered":"Early Hints 103 in Practice \u2013 Faster LCP"},"content":{"rendered":"\n<div class=\"translation-block translation-block-merged\">\n<p class=\"wp-block-paragraph\"><strong>Early Hints 103<\/strong> is one of the most effective performance &#8220;hacks&#8221; available in 2026. It effectively eliminates the &#8220;idle time&#8221; your browser spends waiting for your <strong>mybox<\/strong> 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On a typical <strong>mybox<\/strong> site, this can slash your <strong>Largest Contentful Paint (LCP)<\/strong> by <strong>15% to 25%<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/early-hints-103-in-practice-faster-lcp\/#How_Early_Hints_Works_The_2026_Logic\" >How Early Hints Works (The 2026 Logic)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/early-hints-103-in-practice-faster-lcp\/#Step_1_Enabling_Early_Hints_on_Cloudflare\" >Step 1: Enabling Early Hints on Cloudflare<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/early-hints-103-in-practice-faster-lcp\/#Step_2_Identifying_%E2%80%9CHigh-Impact%E2%80%9D_Hints\" >Step 2: Identifying &#8220;High-Impact&#8221; Hints<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/early-hints-103-in-practice-faster-lcp\/#Step_3_Implementation_via_WPCode_on_mybox\" >Step 3: Implementation via WPCode on mybox<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/early-hints-103-in-practice-faster-lcp\/#Step_4_Common_Traps_and_2026_Best_Practices\" >Step 4: Common Traps and 2026 Best Practices<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/early-hints-103-in-practice-faster-lcp\/#Step_5_How_to_Verify_Its_Working\" >Step 5: How to Verify It&#8217;s Working<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/early-hints-103-in-practice-faster-lcp\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_Early_Hints_Works_The_2026_Logic\"><\/span><strong>How Early Hints Works (The 2026 Logic)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<\/div>\n\n<div id=\"mybox-4192560090\" class=\"mybox-content mybox-entity-placement\"><div class=\"early-access-banner-inpost\">\r\n  <div class=\"banner-left-inpost\">\r\n    <div class=\"icon-box-inpost\">\r\n      <img decoding=\"async\" src=\"https:\/\/mybox.com\/help\/wp-content\/uploads\/2026\/02\/square-info-icon.svg\" alt=\"Info\">\r\n    <\/div>\r\n    <div class=\"text-box-inpost\">\r\n      <span class=\"label-inpost\"><span class=\"translation-block translation-block-banner-text\">Early access<\/span><\/span>\r\n      <h4><span class=\"translation-block translation-block-banner-text\">Still need help?<\/span><\/h4>\r\n      <p><span class=\"translation-block translation-block-banner-text\">Contact our customer service team.<\/span><\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"banner-right-inpost\">\r\n    <a href=\"https:\/\/panel.mybox.com\/helpdesk2\/v\/list\/\" class=\"banner-button-inpost\"><span class=\"translation-block translation-block-banner-text\">Message us<\/span><\/a>\r\n  <\/div>\r\n<\/div><\/div>\n\n<div class=\"translation-block translation-block-merged\"><p class=\"wp-block-paragraph\">Usually, the browser&#8217;s journey looks like this:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Request:<\/strong> Browser asks for <code>homepage.html<\/code>.<\/li>\n\n\n\n<li><strong>Wait:<\/strong> Your <strong>mybox<\/strong> server processes PHP, queries the database, and builds the HTML (this is the <strong>TTFB<\/strong>).<\/li>\n\n\n\n<li><strong>Response:<\/strong> HTML arrives; browser finally sees it needs <code>style.css<\/code> and <code>font.woff2<\/code>.<\/li>\n\n\n\n<li><strong>Download:<\/strong> Browser starts fetching those files.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>With Early Hints 103:<\/strong><\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Request:<\/strong> Browser asks for <code>homepage.html<\/code>.<\/li>\n\n\n\n<li><strong>103 Hint:<\/strong> Within <strong>~20ms<\/strong>, the CDN sends a 103 response: <em>&#8220;Hey, you&#8217;re going to need <code>style.css<\/code> and <code>main-font.woff2<\/code>. Start now!&#8221;<\/em><\/li>\n\n\n\n<li><strong>Parallel Work:<\/strong> While the <strong>mybox<\/strong> server is still thinking, the browser is already downloading the CSS and fonts.<\/li>\n\n\n\n<li><strong>200 Response:<\/strong> HTML arrives, but the CSS is already finished downloading. The page renders <strong>instantly<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1_Enabling_Early_Hints_on_Cloudflare\"><\/span><strong>Step 1: Enabling Early Hints on Cloudflare<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">For most users on <strong>mybox<\/strong>, Cloudflare is the easiest delivery mechanism.<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Dashboard:<\/strong> Go to <strong>Speed > Optimization<\/strong> in your Cloudflare dashboard.<\/li>\n\n\n\n<li><strong>Early Hints:<\/strong> Toggle the switch to <strong>On<\/strong>.<\/li>\n\n\n\n<li><strong>Smart Early Hints:<\/strong> Enable this if you want Cloudflare to automatically &#8220;guess&#8221; which assets to hint based on previous traffic patterns.<\/li>\n\n\n\n<li><strong>Link Headers:<\/strong> For the best results, you should manually specify your &#8220;hints&#8221; via your <strong>mybox<\/strong> server&#8217;s response headers.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2_Identifying_%E2%80%9CHigh-Impact%E2%80%9D_Hints\"><\/span><strong>Step 2: Identifying &#8220;High-Impact&#8221; Hints<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The goal is to be surgical. If you hint too many files, you create &#8220;bandwidth contention,&#8221; which actually slows the page down. Stick to these three:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Asset Type<\/strong><\/td><td><strong>How to Format the Header<\/strong><\/td><td><strong>Why?<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Main CSS<\/strong><\/td><td><code>Link: &lt;\/style.css&gt;; rel=preload; as=style<\/code><\/td><td>Essential for the &#8220;First Paint.&#8221;<\/td><\/tr><tr><td><strong>Primary Font<\/strong><\/td><td><code>Link: &lt;\/font.woff2&gt;; rel=preload; as=font; crossorigin<\/code><\/td><td>Prevents &#8220;FOIT&#8221; (flashing invisible text).<\/td><\/tr><tr><td><strong>LCP Image<\/strong><\/td><td><code>Link: &lt;\/hero.webp&gt;; rel=preload; as=image<\/code><\/td><td>The single biggest factor for your LCP score.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_3_Implementation_via_WPCode_on_mybox\"><\/span><strong>Step 3: Implementation via WPCode on mybox<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You don&#8217;t need to edit your theme files. Use a PHP snippet in <strong>WPCode<\/strong> to send these headers:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">PHP<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function mybox_early_hints_headers() {\n    if ( is_front_page() ) {\n        header( 'Link: &lt;https:\/\/yourdomain.com\/wp-content\/themes\/theme\/style.css&gt;; rel=preload; as=style', false );\n        header( 'Link: &lt;https:\/\/yourdomain.com\/wp-content\/themes\/theme\/fonts\/main.woff2&gt;; rel=preload; as=font; crossorigin', false );\n    }\n}\nadd_action( 'send_headers', 'mybox_early_hints_headers' );\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_4_Common_Traps_and_2026_Best_Practices\"><\/span><strong>Step 4: Common Traps and 2026 Best Practices<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The &#8220;Crossorigin&#8221; Rule:<\/strong> For fonts, you <strong>must<\/strong> include the <code>crossorigin<\/code> attribute in your hint. If you forget it, the browser will download the font twice, doubling your load time.<\/li>\n\n\n\n<li><strong>HTTPS Only:<\/strong> Early Hints 103 only works over <strong>HTTP\/2<\/strong> or <strong>HTTP\/3<\/strong>. Ensure your <strong>mybox<\/strong> SSL certificate is valid and active.<\/li>\n\n\n\n<li><strong>Don&#8217;t Hint &#8220;Lazy&#8221; Assets:<\/strong> Never hint images or scripts that are below the fold (like a footer script or a bottom-of-page gallery). This wastes the user&#8217;s data and slows the LCP.<\/li>\n\n\n\n<li><strong>Vary by Template:<\/strong> Your &#8220;Hint&#8221; list for a Product page should be different than for your Blog. Use conditional tags (<code>is_product()<\/code>, <code>is_single()<\/code>) in your PHP snippet to ensure relevant hints.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_5_How_to_Verify_Its_Working\"><\/span><strong>Step 5: How to Verify It&#8217;s Working<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You cannot see the 103 status code in the standard &#8220;Network&#8221; tab easily because it is a &#8220;provisional&#8221; response.<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Terminal\/Command Line:<\/strong> Use <code>curl -I -H \"Connection: Upgrade\" -H \"Upgrade: h2c\" https:\/\/yourdomain.com<\/code>.<\/li>\n\n\n\n<li><strong>Look for:<\/strong> You should see <code>HTTP\/2 103<\/code> followed by your <code>Link<\/code> headers, and then the <code>HTTP\/2 200<\/code> response.<\/li>\n\n\n\n<li><strong>WebPageTest:<\/strong> Run a test on <a href=\"https:\/\/www.webpagetest.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">WebPageTest.org<\/a> and look at the &#8220;Waterfall&#8221; chart. You will see resource downloads starting <em>before<\/em> the purple &#8220;HTML&#8221; bar is finished.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span><strong>Summary<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Early Hints 103 is the closest thing to &#8220;time travel&#8221; for web performance. By giving the browser a head start while your <strong>mybox<\/strong> server is busy, you provide a perceived speed that feels instantaneous to your users.<\/p>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"template":"","format":"standard","manualknowledgebasecat":[12,58],"manual_kb_tag":[850,4457,9480,9481,9482,9483,9484,9485,9486,9487],"class_list":["post-7705","manual_kb","type-manual_kb","status-publish","format-standard","hentry","manualknowledgebasecat-cloudflare","manualknowledgebasecat-web-applications-cms","manual_kb_tag-http","manual_kb_tag-largest-contentful-paint","manual_kb_tag-early-hints","manual_kb_tag-early-hints-10","manual_kb_tag-status-code-10","manual_kb_tag-link-headers","manual_kb_tag-preload","manual_kb_tag-preload-link","manual_kb_tag-font-preload","manual_kb_tag-crossorigin-attribute"],"_links":{"self":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/7705","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb"}],"about":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/types\/manual_kb"}],"author":[{"embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":2,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/7705\/revisions"}],"predecessor-version":[{"id":7706,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/7705\/revisions\/7706"}],"wp:attachment":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/media?parent=7705"}],"wp:term":[{"taxonomy":"manualknowledgebasecat","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manualknowledgebasecat?post=7705"},{"taxonomy":"manual_kb_tag","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb_tag?post=7705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}