INP to the Rescue: How Websites Became Faster and More Fun to Use

The Need for Speed

[{"selector":"#anim-0d98f8e7-18d2-44f0-be97-81378957bdd5","keyframes":{"opacity":[0,1]},"delay":0,"duration":1500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-dff1ea4e-b099-42fb-b29c-19d14238d277","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-30567c9f-3d00-4ceb-b45d-b10f0971a08a","keyframes":{"transform":["translate3d(-115.50632%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c5b55001-4e45-4da1-8b2b-4fec673140db","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c84498bf-558d-4e2a-92a1-fd60f2427e73","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-b867fcfc-1648-4a59-8be0-da00674804f6","keyframes":{"transform":["translate3d(-124.46042%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b736c827-b77b-412f-b7eb-e8c19fd228e2","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-32446d64-3a43-42f7-8c37-9d09eea5777f","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-b33d1f4f-4abc-49c6-87b1-c7148b794a31","keyframes":{"transform":["translate3d(-118.60465%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cc45509c-3f56-489b-955d-72945a11409b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6b521159-51e2-44ac-bd3f-0495cb3ce820","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-9ab2a244-ffc5-4e21-ba32-fdcb7e6121fb","keyframes":{"transform":["rotate(-353deg) translate3d(-282.48173%, 0px, 0) rotate(353deg)","rotate(-353deg) translate3d(0px, 0px, 0) rotate(353deg)"]},"delay":100,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7b753a71-248e-4bbc-a034-5a6eac75b5bd","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fa179064-01ab-4865-8997-ace193e85a4e","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":100,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Arrow

Behind the Scenes

[{"selector":"#anim-21c87bc8-0f80-4701-9d44-028534c6bcbd","keyframes":{"transform":["translate3d(-120.47782%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8b9bfe8a-ab66-4804-a217-4c602c0d3fce","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cb256fdb-13c0-4c34-8bcd-fcb08669db22","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-37b63df6-c188-483e-b550-61caebe97eb8","keyframes":{"transform":["translate3d(-113.75%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fa9e2927-1987-47a7-86aa-c4bfcf999d73","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ba1e813e-e69e-4462-a358-7db6576d0659","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-ceb9d2bf-a0fe-416b-ae46-b6589be959c4","keyframes":{"opacity":[0,1]},"delay":0,"duration":1500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-9189e356-685f-48ee-befd-ed6e3592e237","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] INP measures the time from user interaction to visual feedback. It ensures websites respond quickly to clicks, taps, & keystrokes with instant confirmation that their actions are being processed.

Delightful User Experiences

[{"selector":"#anim-71adbf00-a31f-4476-a8fd-a0cf786dba6f","keyframes":{"transform":["translate3d(-135.12397%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fc55289a-a5f6-4bb4-8aff-7c6a9599ac45","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6f0d46bc-aa63-48f9-b70d-a0aee1f90063","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-bd05bca4-1654-4eb5-bb95-cda91ccc55b1","keyframes":{"transform":["translate3d(-116.45161%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-669b7937-41ac-4012-bb4f-42c2e1af07c6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f9baa982-c02a-4bcb-b0cd-ebbc58635396","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-2927cdb4-d40c-4ce2-9786-bd0ee0a674f4","keyframes":{"opacity":[0,1]},"delay":0,"duration":1500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-d181042b-ac97-44b2-93af-6a2166f83d0f","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] - Fast websites provide immediate visual feedback. - Users see items added to carts, menus opening, and forms being authenticated. - INP makes browsing smooth and enjoyable.

The Power of INP

[{"selector":"#anim-7ab4c66a-98b8-44a1-8941-564381e995bc","keyframes":{"transform":["translate3d(-124.10072%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-952b386a-a03e-4a5e-a6f8-770ae2dfe20d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c9d767d0-39d5-4307-9449-97aa08a15e2c","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-cc08b080-f691-4d8e-aaa1-5371baa43ddb","keyframes":{"transform":["translate3d(-115.00001%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-814c9226-927f-4977-a2b3-04031b3ab289","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1d9c9e8e-1a17-4f4f-9f80-a30f71ff39ba","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-025b8789-d13b-4725-812c-0d42c20ba123","keyframes":{"opacity":[0,1]},"delay":0,"duration":1500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-a654e731-f4a3-41cd-85fa-01749ca8d1f2","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] - INP replaces First Input Delay (FID) as a Core Web Vital. - It considers all interactions, not just the first one. - Websites strive for low INP values for excellent responsiveness.

How INP is Measured

[{"selector":"#anim-e19fb07d-6d8e-4af4-87bf-54f7fb0a161b","keyframes":{"transform":["translate3d(-114.01869%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-17bba79d-fa11-45e5-8740-1237d02bf00a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9f6040f0-adfb-49e4-99d2-200fe09056b9","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-1fc64414-d8ab-41bc-96dc-30935bfb6f57","keyframes":{"transform":["translate3d(-115.18988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-061a27f9-9b1e-42d6-b80b-9c5cbc27127c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d71d8b91-51f1-48dd-93e7-54dbe27880ce","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-9de068c1-371c-4b39-934a-2dcc3908578d","keyframes":{"opacity":[0,1]},"delay":0,"duration":1500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-bdfd34f7-b24d-4a3d-ad1b-fd4263b307bb","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] - Field tools like PageSpeed Insights and Chrome User Experience Report capture INP. - Developers use JavaScript libraries like web-vitals to measure and improve INP .

A Fast & Fun Future

[{"selector":"#anim-20a5d22f-86fd-4f43-a3b8-f20df21d32d8","keyframes":{"transform":["translate3d(-121.16041%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2f217f4d-e867-444f-ba0c-e81d2a491b57","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b8cc35f4-5eb6-434b-a077-a2c83aa0eaf4","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-4cacc3b3-45a6-4722-8929-6a8bd7568ac4","keyframes":{"transform":["translate3d(-118.96551%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-36117a2e-6892-496b-8848-40060d7811bd","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-08a89621-c254-4d76-83da-272412b9e582","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-3d23bb9f-7b05-4734-8d9f-294690845048","keyframes":{"opacity":[0,1]},"delay":0,"duration":1500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-77b2e8d4-5e3f-4389-b38e-869774e10a22","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] - Websites continue to prioritize speed and responsiveness. - INP drives innovation and enhances user experiences.