What is Interaction to Next Paint?

INP

[{"selector":"#anim-af84b93f-78d5-409e-9c4e-582724fe9906 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0.7064558435849004%, 2.8895057030673547e-7%) scale(0.9523809523809523)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] INP considers longest interaction on a page as the result

What is a Good INP score?

Good INP Score

[{"selector":"#anim-7060de05-f5b5-4d50-a22a-e6952f3875d9","keyframes":{"opacity":[0,1]},"delay":0,"duration":1200,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7ef51a51-962e-407f-9990-bf3ac68d9bd3","keyframes":{"transform":["rotate(-90deg) translate3d(0px, -299.05145%, 0) rotate(90deg)","rotate(-90deg) translate3d(0px, 0px, 0) rotate(90deg)"]},"delay":0,"duration":1200,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cbda7dde-c55b-420c-ad86-f8f2799a0f62","keyframes":{"opacity":[0,1]},"delay":0,"duration":7000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-259e0e8b-6a14-44b9-8d5b-6a3a0c1bdc66","keyframes":{"transform":["translate3d(-100%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":7000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-37c778f3-0ae4-412f-a404-c67206bbc0e8","keyframes":{"opacity":[0,1]},"delay":0,"duration":1200,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-9156257a-0b1c-46a2-9cfb-2f43d25e1d16","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1200,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] Green Star

How to measure INP score

INP Score Measuring

[{"selector":"#anim-ff6700af-7662-4774-80b6-3f589c2056af","keyframes":{"opacity":[0,1]},"delay":0,"duration":1200,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f7563ae7-20df-438b-99d6-98ced2499c87","keyframes":{"transform":["rotate(-90deg) translate3d(0px, -312.46611%, 0) rotate(90deg)","rotate(-90deg) translate3d(0px, 0px, 0) rotate(90deg)"]},"delay":0,"duration":1200,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0c500398-47dc-4917-a932-5a722873d8f5","keyframes":{"opacity":[0,1]},"delay":0,"duration":7000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f4247a66-9e3a-4bc1-8537-73861d087bb6","keyframes":{"transform":["translate3d(-100%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":7000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c535ab78-1e21-4af6-83fa-d53db761b5d7","keyframes":{"opacity":[0,1]},"delay":0,"duration":1200,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-f159e21f-ed2a-47bd-afe4-44c73c21142b","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1200,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] Green Star

INP Score Measuring

[{"selector":"#anim-9ab8c9e3-154d-4e2f-b68f-6cbcb108cf73","keyframes":{"opacity":[0,1]},"delay":0,"duration":7000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8f49a9ad-ed8c-4697-8325-c0302d677281","keyframes":{"transform":["translate3d(-100%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":7000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-af90a43f-5438-4d96-b21f-76a74a4bb6f7","keyframes":{"opacity":[0,1]},"delay":0,"duration":1200,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-7765ffd9-da66-40cd-9d39-9e8ffbec6191","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1200,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-dae8b8c4-7337-4330-bbfd-898ef8f32e09","keyframes":{"opacity":[0,1]},"delay":0,"duration":1200,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-147cc8a0-d05c-4a08-b7c4-359e64a9a493","keyframes":{"transform":["rotate(-90deg) translate3d(0px, -312.46611%, 0) rotate(90deg)","rotate(-90deg) translate3d(0px, 0px, 0) rotate(90deg)"]},"delay":0,"duration":1200,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Green Star

INP Score Measuring

[{"selector":"#anim-e9ebe1ff-f819-4f66-9576-174e4ca0469d","keyframes":{"opacity":[0,1]},"delay":0,"duration":7000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-21ea7d14-c38a-4259-bffe-50176d4ca6a0","keyframes":{"transform":["translate3d(-100%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":7000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-02b89628-b1f3-4a17-ba36-c3a70f792301","keyframes":{"opacity":[0,1]},"delay":0,"duration":1200,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-1a144815-3108-49fb-9053-9d9628b168c7","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1200,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-edb974aa-b0da-4722-bffa-4f47dab0da46","keyframes":{"opacity":[0,1]},"delay":0,"duration":1200,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2ebc448b-38b9-4ab2-8b39-3b0700e7fa3e","keyframes":{"transform":["rotate(-90deg) translate3d(0px, -312.46611%, 0) rotate(90deg)","rotate(-90deg) translate3d(0px, 0px, 0) rotate(90deg)"]},"delay":0,"duration":1200,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Green Star

INP Score Measuring

[{"selector":"#anim-61b7df90-e823-4572-b607-c26f4cde49bf","keyframes":{"opacity":[0,1]},"delay":0,"duration":7000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-037f4919-cbca-470f-9e87-c7f5ebc32c58","keyframes":{"transform":["translate3d(-100%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":7000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-05f26d16-eabc-4ca7-93a9-a685bf55719c","keyframes":{"opacity":[0,1]},"delay":0,"duration":1200,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-9a89e658-d0fa-4745-98d1-2d212c03912d","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1200,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-fee94c44-1ccf-4944-a04b-3cacb2f02902","keyframes":{"opacity":[0,1]},"delay":0,"duration":1200,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e1591540-0071-4b0f-8fa4-1dee0d306644","keyframes":{"transform":["rotate(-90deg) translate3d(0px, -312.46611%, 0) rotate(90deg)","rotate(-90deg) translate3d(0px, 0px, 0) rotate(90deg)"]},"delay":0,"duration":1200,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Green Star

Read more about INP measurement and optimization here👇

[{"selector":"#anim-a4aaca94-6c56-4eac-86e2-b1658bcb5968","keyframes":{"opacity":[0,1]},"delay":0,"duration":1200,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7c33f5f2-b923-4611-8ed3-31c3090988eb","keyframes":{"transform":["translate3d(-115.18988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":1200,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a5a0fac5-e310-4533-b3f1-4f5435737381","keyframes":{"opacity":[0,1]},"delay":1100,"duration":1200,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a3329364-ce08-402e-a76e-eb39c9c41219","keyframes":{"transform":["translate3d(100.00000%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":1100,"duration":1200,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-05ca815c-a867-476c-98df-0734fcd89680","keyframes":{"opacity":[0,1]},"delay":1100,"duration":1200,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0460a291-16f8-4631-b73e-0fb111c362da","keyframes":{"transform":["translate3d(878.57101%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":1100,"duration":1200,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3d878dae-9de5-49b5-a0e5-89a6d5bed0cb","keyframes":{"opacity":[0,1]},"delay":2000,"duration":2000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e099b86c-c680-4384-8323-921f1fdfc582","keyframes":{"opacity":[0,1]},"delay":2000,"duration":2000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f108da84-a567-4d83-a06f-e766fb4304e0","keyframes":{"transform":["rotate(-351deg) translate3d(141.17644%, 0px, 0) rotate(351deg)","rotate(-351deg) translate3d(0px, 0px, 0) rotate(351deg)"]},"delay":1000,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ffaa0a3b-fe72-4598-9724-e397f98703a0","keyframes":{"opacity":[0,1]},"delay":1000,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-84be45e6-3dab-4fd9-ada4-d49c82109ade","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":1000,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Off-white Banner Black Star Curved Arrow Phone

What is Interaction to Next Paint?

INP

Interaction to Next Paint

What is a Good INP score?

Good INP Score

INP below or equal to 200ms => Good

How to measure INP score

INP Score Measuring

01

PageSpeed Insights

INP Score Measuring

02

Chrome User Experience Report (CrUX)

INP Score Measuring

03

Web Vitals extension for Chrome

INP Score Measuring

04

Lighthouse in DevTools Timespan mode

Read more about INP measurement and optimization here👇

INP Optimization