https://www.debugbear.com/assets/js/16155bf6.3c649c94.js

1"use strict";(self.webpackChunkdebugbear_docusauruss=self.webpackChunkdebugbear_docusauruss||[]).push([[2709],{49425:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>g,frontMatter:()=>r,metadata:()=>l,toc:()=>h});var i=n(74848),o=n(28453),a=n(80687),s=n(78779);const r={title:"How To Improve INP With Chrome DevTools",date:new Date("2024-01-17T00:00:00.000Z"),description:"Learn how to use the DevTools Performance tab to measure INP and identify ways to improve page responsiveness.",image:"https://www.debugbear.com/dimg/cd6e9e57858eb433789ef4641d628f76.png",authors:"mattzeunert"},c=void 0,l={permalink:"/blog/inp-chrome-devtools",source:"@site/blog/inp-chrome-devtools.md",title:"How To Improve INP With Chrome DevTools",description:"Learn how to use the DevTools Performance tab to measure INP and identify ways to improve page responsiveness.",date:"2024-01-17T00:00:00.000Z",tags:[],readingTime:7.02,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 INP With Chrome DevTools",date:"2024-01-17T00:00:00.000Z",description:"Learn how to use the DevTools Performance tab to measure INP and identify ways to improve page responsiveness.",image:"https://www.debugbear.com/dimg/cd6e9e57858eb433789ef4641d628f76.png",authors:"mattzeunert"},unlisted:!1,lastUpdatedAt:1764772897e3,prevItem:{title:"What Different Navigation Types Mean For Page Speed",permalink:"/blog/navigation-type"},nextItem:{title:"How To Improve Page Speed With 103 Early Hints",permalink:"/blog/103-early-hints"}},d={authorsImageUrls:[void 0]},h=[{value:"How to measure INP for a page interaction in Chrome DevTools",id:"how-to-measure-inp-for-a-page-interaction-in-chrome-devtools",level:2},{value:"Consider enabling CPU throttling",id:"consider-enabling-cpu-throttling",level:3},{value:"Analyze INP with DevTools",id:"analyze-inp-with-devtools",level:2},{value:"Improving input delay during the initial page load process",id:"improving-input-delay-during-the-initial-page-load-process",level:2},{value:"Get real user data to guide your optimizations",id:"get-real-user-data-to-guide-your-optimizations",level:2}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://www.debugbear.com/docs/metrics/interaction-to-next-paint",children:"Interaction to Next Paint"})," (INP) is a performance metric that became one of the three ",(0,i.jsx)(t.a,{href:"https://www.debugbear.com/docs/metrics/core-web-vitals",children:"Google Core Web Vitals"})," in March 2024."]}),"\n",(0,i.jsx)(t.p,{children:"INP tends to be harder to improve than other page speed metrics, as it requires a page interaction to be measured and optimizing it often involves debugging complex JavaScript logic."}),"\n",(0,i.jsxs)(t.p,{children:["This article will explain how you can use ",(0,i.jsx)(t.a,{href:"/blog/use-chrome-devtools",children:"Chrome DevTools"})," to analyze page interactions and make your site respond to them more quickly."]}),"\n",(0,i.jsx)(t.h2,{id:"how-to-measure-inp-for-a-page-interaction-in-chrome-devtools",children:"How to measure INP for a page interaction in Chrome DevTools"}),"\n",(0,i.jsx)(t.p,{children:"You can use the DevTools Performance tab to measure the Interaction to Next Paint metric."}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:["Open DevTools by right-clicking the page and selecting ",(0,i.jsx)(t.strong,{children:"Inspect"})]}),"\n",(0,i.jsxs)(t.li,{children:["Open the ",(0,i.jsx)(t.strong,{children:"Performance"})," tab"]}),"\n",(0,i.jsx)(t.li,{children:"Start a new recording by clicking the record button in the top left"}),"\n",(0,i.jsx)(t.li,{children:"Interact with the page, for example by clicking a button or typing in a text field"}),"\n",(0,i.jsxs)(t.li,{children:["When you're done, click the ",(0,i.jsx)(t.strong,{children:"Stop"})," button in DevTools and wait for the recording to process"]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/34dacd6c3c7aea69d57c386b06bfa4ee.png",alt:"How to start a performance recording in Chrome DevTools"})}),"\n",(0,i.jsx)(t.p,{children:"Once the recording is complete, DevTools will display a lot of data, showing the start of your recording on the left and the end on the right. Don't worry, you can ignore most of it for now and focus on the INP value."}),"\n",(0,i.jsxs)(t.p,{children:["Find and expand the ",(0,i.jsx)(t.strong,{children:"Interactions"})," lane and then hover over the interaction you're interested in. We then see the duration of the interaction as well as the interaction type, in this case a mouse pointer interaction. (You may find that even if you clicked on an element DevTools will focus on the pointer interaction instead.)"]}),"\n",(0,i.jsx)(t.p,{children:'The red striped area shows when the interaction duration exceeds 200 milliseconds. If the 200-millisecond threshold is exceeded, DevTools will also show a note saying "Long interaction is indicating poor page responsiveness".'}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/b1eff6dc3e6b1e64d61f70b2a838be89.png",alt:"Interaction INP breakdown data in Chrome DevTools"})}),"\n",(0,i.jsx)(t.p,{children:"You can also see the breakdown of the INP metric into three components:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"High input delay indicates that background activity on the page is preventing the page interaction from being processed"}),"\n",(0,i.jsx)(t.li,{children:"High processing time means the event handlers for the interaction take a long time to run"}),"\n",(0,i.jsx)(t.li,{children:"High presentation delay indicates that styling, layout, and painting the updated UI is delaying the next paint"}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"The gray whiskers on the left and right show the input and presentation delay."}),"\n",(0,i.jsx)(t.h3,{id:"consider-enabling-cpu-throttling",children:"Consider enabling CPU throttling"}),"\n",(0,i.jsx)(t.p,{children:"If you're on a fast desktop computer you may struggle to replicate the slow laggy experiences your real users are having."}),"\n",(0,i.jsxs)(t.p,{children:["To emulate a less powerful device visiting your website you can ",(0,i.jsx)(t.a,{href:"/blog/cpu-throttling-in-chrome-devtools-and-lighthouse",children:"enable CPU throttling in Chrome DevTools"}),":"]}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:["Open the Performance ",(0,i.jsx)(t.strong,{children:"Capture Settings"})," by clicking on the top right gear icon in DevTools"]}),"\n",(0,i.jsx)(t.li,{children:'Select "4x" or "6x" CPU throttling in the dropdown'}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"This will make CPU processing take 4 or 6 times longer than it otherwise would on your device."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/

17514929a78efdc84fb4c769635cf9a98.png",alt:"DevTools CPU throttling UI"})}),"\n",(0,i.jsx)(t.h2,{id:"analyze-inp-with-devtools",children:"Analyze INP with DevTools"}),"\n",(0,i.jsx)(t.p,{children:"Let's look at the performance recording from above and see what it tells us."}),"\n",(0,i.jsx)(t.admonition,{type:"info",children:(0,i.jsxs)(t.p,{children:["On production sites you'll often see meaningless function names like ",(0,i.jsx)(t.code,{children:"aHg"}),". To make it easier to interpret your data, consider using source maps or testing on your local server with code that's not minified."]})}),"\n",(0,i.jsx)(t.p,{children:'The browser main thread is responsible for rendering content on the page and handling interactions. You can see what the main thread is up to in the "Main" lane in the performance recording.'}),"\n",(0,i.jsx)(t.p,{children:'Here we can notice that the main thread is busy even before the user interaction, and this leads to input delay. The multiple "Timer Fired" events show that the browser is running tasks that have been scheduled by the page. If a user interaction happens while this background task is in progress, then the browser first has to finish the scheduled task before handling the input event.'}),"\n",(0,i.jsx)(t.p,{children:"Reducing the amount of scheduled tasks running in the background can reduce the input delay. You can also try to speed up those tasks so the delay is less significant."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/5aa17780fd9ef782b8ef506f9ec679fe.png",alt:"INP input delay in Chrome DevTools recording"})}),"\n",(0,i.jsx)(t.p,{children:"In this case the processing time accounts for the vast majority of the INP value. JavaScript minification makes it hard to read what's going on, but let's still try and analyze the CPU activity here."}),"\n",(0,i.jsxs)(t.p,{children:['If we click on the "Task" at the top of the main thread lane, we can see a ',(0,i.jsx)(t.strong,{children:"Summary"})," view at the bottom of the screen. In this case, we can see that the task duration is mostly due to JavaScript processing, rather than other types of processing like style recalculations."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/3a305c880055851823beb86318a5ed7d.png",alt:"INP processing time high level summary"})}),"\n",(0,i.jsxs)(t.p,{children:["Let's switch to the ",(0,i.jsx)(t.strong,{children:"Bottom-up"})," view, which shows us how much time is spent on individual JavaScript functions or tasks like compiling JavaScript code. Ideally, we're hoping to find one function that stands out as taking much more time than the others. In that case, we can focus on optimizing that function, calling it less, or ",(0,i.jsx)(t.a,{href:"/blog/front-end-javascript-performance",children:"making it run faster"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["Unfortunately that's not quite the case here, though we can see that the function that the browser is spending the most time on is the ",(0,i.jsx)(t.code,{children:"writeCookie"})," function."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/cc1f4fc3b366da6205aa985231a791c3.png",alt:"Function breakdown in performance profile bottom-up view"})}),"\n",(0,i.jsxs)(t.p,{children:["We can search the main thread lane for the ",(0,i.jsx)(t.code,{children:"writeCookie"})," function (using ctrl+f or cmd+f). This shows us that it's not a single long call, but rather the page is calling this function 24 times in different places. The ",(0,i.jsx)(t.code,{children:"prepareAndWriteCookies"})," function could likely be consolidated and only called once."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/7c6bed83c86b4d0cf5e9de7ba4a4ed71.png",alt:"Cookie write activity across the performance profile"})}),"\n",(0,i.jsxs)(t.p,{children:["Taking our analysis up a level, we also see that a lot of time is spent as part of the ",(0,i.jsx)(t.code,{children:"newUtagTriggerHandler"})," function. This suggests that a lot of this code is not core application code necessary to update the UI but rather tracking code, e.g., calling the Google Tag with ",(0,i.jsx)(t.code,{children:"window.gtag"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Since these tasks are not necessary to display the new page content, they could be deferred until later when the UI has finished updating."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/b25e6054aa25e77491bf7a8e2a4ac560.png",alt:"Google Tag code in the performance profile"})}),"\n",(0,i.jsx)(t.p,{children:"If we look at what's going on in the main thread during the presentation delay time, we can see various rendering-related tasks like Pre-Paint, Paint, Layerize, and Commit. However, they don't take an unreasonable amount of time and the browser rendering tasks are often difficult to optimize."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/640c764af7ffec76d86c468029f04928.png",alt:"Presentation delay components in the DevTools performance recording"})}),"\n","\n",(0,i.jsx)(a.V,{}),"\n",(0,i.jsx)(t.h2,{id:"improving-input-delay-during-the-initial-page-load-process",children:"Improving input delay during the initial page load process"}),"\n",(0,i.jsx)(t.p,{children:"Sometimes most interactions on a website are fast, but the initial loading process contains many long CPU-blocking tasks. If the user clicks anywhere on the page, for example to highlight text, you'll get a high Interaction to Next Paint score with a big input delay component."}),"\n",(0,i.jsxs)(t.p,{children:["To test this, click the ",(0,i.jsx)(t.strong,{children:"Start profiling and reload page"})," icon in Chrome DevTools and keep clicking on the page a couple of times per second. You'll then be able to see whether these interactions were slow."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/842486d0f5f69a2614bf59444eeb82bc.png",alt:"Slow interactions during the initial page rendering process"})}),"\n",(0,i.jsx)(t.p,{children:"At the top of the recording, we can see that the CPU is fairly busy throughout the loading process, rendering bits of the UI as new data is loaded in."}),"\n",(0,i.jsxs)(t.p,{children:["To reduce these delays you can break processing up into smaller chunks, for example using ",(0,i.jsx)(t.code,{children:"requestIdleCallback"}),". This way each blocking task is shorter, allowing the browser to schedule processing the user interaction between these tasks."]}),"\n",(0,i.jsx)(t.p,{children:"If users are trying to interact with the UI before it's ready, you can also change the design to clearly indicate that UI components are disabled until after the page is complete."}),"\n",(0,i.jsx)(t.h2,{id:"get-real-user-data-to-guide-your-optimizations",children:"Get real user data to guide your optimizations"}),"\n",(0,i.jsx)(t.p,{children:"To get the most impact from your optimizations, you need to know what elements most frequently cause interaction delay for users. To find that out, you need to collect data directly on your website as people are using it."}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"pathname:///real-user-monitoring",children:"DebugBear real user monitoring"})," helps you get insight into your Core Web Vitals, including INP elements and breakdown into input delay, processing time, and presentation delay."]}),"\n",(0,i.jsxs)(t.p,{children:["Debug specific slow interactions, or view aggregate data across your website. For example, DebugBear surfaces what scripts are responsible for delays, based on the ",(0,i.jsx)(t.a,{href:"/blog/long-animation-frames",children:"Long Animation Frames API"}),"."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/2313a8de2b8017ccd7749b07db47cea4.png",alt:"INP LoAF script data"})}),"\n",(0,i.jsx)(t.p,{children:"Continuous Core Web Vitals collection makes it easy to spot trends and lets you get alerted to any performance regressions."}),"\n",(0,i.jsxs)(t.p,{children:["Use ",(0,i.jsx)(t.a,{href:"/docs/rum/conversion-tracking",children:"conversion tracking"})," to see how performance impacts business results."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/e8f2d229b4ebdf6d51a4194abbde30a6.png",alt:"INP monitoring dashboard"})}),"\n","\n",(0,i.jsx)(s.P,{})]})}function g(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(p,{...e})}):p(e)}},80687:(e,t,n)=>{n.d(t,{V:()=>s});n(96540);var i=n(13152),o=n(75205),a=n(74848);function s(){return(0,a.jsx)("div",{className:o.A.cta,children:(0,a.jsxs)("div",{className:o.A.ctaContainer,children:[(0,a.jsx)("div",{className:o.A.ctaImage,children:(0,a.jsx)(i.A,{alt:"Illustration of a website speed test report",sources:{light:"https://www.debugbear.com/dimg/366f42cc0187f2f23f5610ca486e6f60.png",dark:"https://www.debugbear.com/dimg/366f42cc0187f2f23f5610ca486e6f60.png"}})}),(0,a.jsxs)("div",{className:o.A.ctaContent,children:[(0,a.jsx)("h2",{children:"Run A Free Page Speed Test"}),(0,a.jsxs)("div",{className:o.A.ctaBenefits,children:[(0,a.jsx)("h3",{children:"Test Your Website:"}),(0,a.jsxs)("ul",{children:[(0,a.jsx)("li",{children:"Automated Recommendations"}),(0,a.jsx)("li",{children:"Detailed Request Waterfall"}),(0,a.jsx)("li",{children:"Web Vitals Assessment"})]})]}),(0,a.jsx)("div",{children:(0,a.jsx)("a",{href:"/test/website-speed",className:o.A.ctaButton,onClick:()=>{plausible&&plausible("DocsCtaClick_freeTest")},children:(0,a.jsx)("span",{children:"Test My Website"})})})]})]})})}},78779:(e,t,n)=>{n.d(t,{P:()=>s});n(96540);var i=n(13152),o=n(75205),a=n(74848);function s(){return(0,a.jsx)("div",{className:o.A.cta,children:(0,a.jsxs)("div",{className:o.A.ctaContainer,children:[(0,a.jsx)("div",{className:o.A.ctaImage,children:(0,a.jsx)(i.A,{alt:"Illustration of website monitoring",sources:{light:"https://www.debugbear.com/dimg/57001785e35454b95f43aa4f3bf6f857.png",dark:"https://www.debugbear.com/dimg/b2c0ae7a8dfbc4b18ba827a334c5c1af.png"}})}),(0,a.jsxs)("div",{className:o.A.ctaContent,children:[(0,a.jsx)("h2",{children:"Monitor Page Speed & Core Web Vitals"}),(0,a.jsxs)("div",{className:o.A.ctaBenefits,children:[(0,a.jsx)("h3",{children:"DebugBear monitoring includes:"}),(0,a.jsxs)("ul",{children:[(0,a.jsx)("li",{children:"In-depth Page Speed Reports"}),(0,a.jsx)("li",{children:"Automated Recommendations"}),(0,a.jsx)("li",{children:"Real User Analytics Data"})]})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("a",{href:"/signup",className:o.A.ctaButton+" hidden-when-logged-in",onClick:()=>{plausible&&plausible("DocsCtaClick_monitoring")},children:(0,a.jsx)("span",{children:"Start Free Trial"})}),(0,a.jsx)("a",{href:"/app",className:o.A.ctaButton+" visible-when-logged-in",children:(0,a.jsx)("span",{children:"Go To App"})})]})]})]})})}},75205:(e,t,n)=>{n.d(t,{A:()=>i});const i={cta:"cta_Vy7l",ctaContainer:"ctaContainer_dzq8",ctaContent:"ctaContent_VgWi",ctaImage:"ctaImage_MZ5b",ctaBenefits:"ctaBenefits_OYw7",ctaButton:"ctaButton_Uos9"}},28453:(e,t,n)=>{n.d(t,{R:()=>s,x:()=>r});var i=n(96540);const o={},a=i.createContext(o);function s(e){const t=i.useContext(a);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),i.createElement(a.Provider,{value:t},e.children)}}}]);