1"use strict";(self.webpackChunkdebugbear_docusauruss=self.webpackChunkdebugbear_docusauruss||[]).push([[4452],{53787:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>l,contentTitle:()=>s,default:()=>d,frontMatter:()=>n,metadata:()=>i,toc:()=>c});var o=r(74848),a=r(28453);const n={title:"How To Improve Page Speed With 103 Early Hints",date:new Date("2024-01-12T00:00:00.000Z"),description:"Learn how 103 Early Hints let you preload key resources before your HTML is ready, improving LCP and overall page speed.",image:"https://www.debugbear.com/dimg/7c0dc271c0448c45094c823e438f8a69.png",tags:["Browser APIs","Networking"],authors:"mattzeunert"},s=void 0,i={permalink:"/blog/103-early-hints",source:"@site/blog/103-early-hints.md",title:"How To Improve Page Speed With 103 Early Hints",description:"Learn how 103 Early Hints let you preload key resources before your HTML is ready, improving LCP and overall page speed.",date:"2024-01-12T00:00:00.000Z",tags:[{label:"Browser APIs",permalink:"/blog/tags/browser-ap-is"},{label:"Networking",permalink:"/blog/tags/networking"}],readingTime:3.32,hasTruncateMarker:!0,authors:[{name:"Matt Zeunert",title:"Founder at DebugBear",imageURL:"https://www.debugbear.com/dimg/50c8b0b02ea55da721750d84b296b5ef.jpeg",key:"mattzeunert"}],frontMatter:{title:"How To Improve Page Speed With 103 Early Hints",date:"2024-01-12T00:00:00.000Z",description:"Learn how 103 Early Hints let you preload key resources before your HTML is ready, improving LCP and overall page speed.",image:"https://www.debugbear.com/dimg/7c0dc271c0448c45094c823e438f8a69.png",tags:["Browser APIs","Networking"],authors:"mattzeunert"},unlisted:!1,lastUpdatedAt:1776287094e3,prevItem:{title:"How To Improve INP With Chrome DevTools",permalink:"/blog/inp-chrome-devtools"},nextItem:{title:"How to Set Up Soft Navigation Reporting in a React App",permalink:"/blog/soft-navigations-react-tutorial"}},l={authorsImageUrls:[void 0]},c=[];function p(e){const t={a:"a",p:"p",...(0,a.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["Early Hints are a browser feature that allows you to start loading critical page resources as early as possible. In contrast to normal ",(0,o.jsx)(t.a,{href:"/blog/resource-hints-rel-preload-prefetch-preconnect",children:"resource hints"}),", this can happen even before the server starts responding with the contents of the HTML document."]}),"\n",(0,o.jsxs)(t.p,{children:["Learn how this works and how you can use it to optimize your ",(0,o.jsx)(t.a,{href:"/docs/page-load-time",children:"page load time"}),"."]})]})}function d(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},28453:(e,t,r)=>{r.d(t,{R:()=>s,x:()=>i});var o=r(96540);const a={},n=o.createContext(a);function s(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:s(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.