{"id":72143,"date":"2023-07-14T09:07:19","date_gmt":"2023-07-14T02:07:19","guid":{"rendered":"https:\/\/wiki.tino.org\/staging\/?p=72143"},"modified":"2024-02-06T15:50:40","modified_gmt":"2024-02-06T08:50:40","slug":"interaction-to-next-paint-inp-la-gi","status":"publish","type":"post","link":"https:\/\/tino.vn\/blog\/interaction-to-next-paint-inp-la-gi\/","title":{"rendered":"Interaction to Next Paint (INP) l\u00e0 g\u00ec? M\u1ed9t s\u1ed1 th\u00f4ng tin v\u1ec1 INP m\u00e0 b\u1ea1n n\u00ean bi\u1ebft"},"content":{"rendered":"\n

Khi truy c\u1eadp v\u00e0o m\u1ed9t trang web, ch\u00fang ta lu\u00f4n mu\u1ed1n \u0111\u01b0\u1ee3c t\u01b0\u01a1ng t\u00e1c v\u00e0 nh\u1eadn ph\u1ea3n h\u1ed3i t\u1eeb giao di\u1ec7n ngay l\u1eadp t\u1ee9c m\u00e0 kh\u00f4ng ph\u1ea3i ch\u1edd \u0111\u1ee3i qu\u00e1 l\u00e2u. Ch\u00ednh v\u00ec l\u1ebd \u0111\u00f3, INP \u0111\u00e3 tr\u1edf th\u00e0nh m\u1ed9t ch\u1ec9 s\u1ed1 \u0111\u01b0\u1ee3c c\u00e1c nh\u00e0 qu\u1ea3n tr\u1ecb trang web \u0111\u1eb7c bi\u1ec7t quan t\u00e2m \u0111\u1ec3 c\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng. V\u1eady Interaction to Next Paint (INP) l\u00e0 g\u00ec? INP bao nhi\u00eau l\u00e0 t\u1ed1t? C\u00e1c b\u1ea1n h\u00e3y c\u00f9ng Tino Group t\u00ecm hi\u1ec3u c\u1ee5 th\u1ec3 qua b\u00e0i vi\u1ebft d\u01b0\u1edbi \u0111\u00e2y nh\u00e9!<\/strong><\/p>\n\n\n\n

Interaction to Next Paint (INP) l\u00e0 g\u00ec?<\/strong><\/h2>\n\n\n\n

\u0110\u1ecbnh ngh\u0129a Interaction to Next Paint (INP)<\/strong><\/h3>\n\n\n\n

Interaction to Next Paint (INP) l\u00e0 thu\u1eadt ng\u1eef \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong l\u0129nh v\u1ef1c t\u1ed1i \u01b0u h\u00f3a trang web v\u00e0 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng. Thu\u1eadt ng\u1eef n\u00e0y \u0111\u1ec1 c\u1eadp \u0111\u1ebfn th\u1eddi gian m\u00e0 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 x\u1eed l\u00fd v\u00e0 hi\u1ec3n th\u1ecb ph\u1ea3n h\u1ed3i cho c\u00e1c h\u00e0nh \u0111\u1ed9ng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng tr\u00ean trang web.<\/p>\n\n\n\n

Khi ng\u01b0\u1eddi d\u00f9ng t\u01b0\u01a1ng t\u00e1c v\u1edbi trang web, ch\u1eb3ng h\u1ea1n nh\u01b0 nh\u1ea5p chu\u1ed9t (click CTA, li\u00ean k\u1ebft), g\u00f5 ph\u00edm (t\u00ecm ki\u1ebfm, nh\u1eadp m\u1eadt kh\u1ea9u) ho\u1eb7c cu\u1ed9n trang, h\u1ecd s\u1ebd mong mu\u1ed1n nh\u1eadn \u0111\u01b0\u1ee3c ph\u1ea3n h\u1ed3i ngay l\u1eadp t\u1ee9c t\u1eeb giao di\u1ec7n. Tuy nhi\u00ean, th\u1eddi gian m\u00e0 trang web m\u1ea5t \u0111\u1ec3 x\u1eed l\u00fd v\u00e0 hi\u1ec3n th\u1ecb ph\u1ea3n h\u1ed3i c\u00f3 th\u1ec3 g\u00e2y ra s\u1ef1 tr\u00ec ho\u00e3n v\u00e0 l\u00e0m gi\u1ea3m tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n

INP \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 \u0111o l\u01b0\u1eddng kho\u1ea3ng th\u1eddi gian gi\u1eefa l\u00fac ng\u01b0\u1eddi d\u00f9ng t\u01b0\u01a1ng t\u00e1c v\u00e0 l\u00fac giao di\u1ec7n hi\u1ec3n th\u1ecb ph\u1ea3n h\u1ed3i t\u01b0\u01a1ng \u1ee9ng.<\/p>\n\n\n

\n
\"interaction-to-next-paint-inp-la-gi\"
Interaction to Next Paint (INP) l\u00e0 g\u00ec?<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n

INP \u0111\u00f3ng vai tr\u00f2 quan tr\u1ecdng trong Core Web Vitals, m\u1ed9t chu\u1ea9n \u0111o l\u01b0\u1eddng tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng c\u1ee7a Google. C\u1ea3i thi\u1ec7n ch\u1ec9 s\u1ed1 INP gi\u00fap t\u0103ng c\u01b0\u1eddng t\u00ednh t\u01b0\u01a1ng t\u00e1c v\u00e0 \u0111\u00e1p \u1ee9ng nhanh ch\u00f3ng \u0111\u1ed1i v\u1edbi h\u00e0nh \u0111\u1ed9ng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng, mang l\u1ea1i tr\u1ea3i nghi\u1ec7m t\u1ed1t h\u01a1n cho ng\u01b0\u1eddi d\u00f9ng tr\u00ean trang web.<\/p>\n\n\n\n

\u0110\u1ec3 c\u1ea3i thi\u1ec7n ch\u1ec9 s\u1ed1 INP, b\u1ea1n c\u00f3 th\u1ec3 t\u1ed1i \u01b0u h\u00f3a t\u1ea3i trang, gi\u1ea3m thi\u1ec3u t\u00e0i nguy\u00ean kh\u00f4ng c\u1ea7n thi\u1ebft v\u00e0 s\u1eed d\u1ee5ng c\u00e1c c\u00f4ng ngh\u1ec7 th\u00edch h\u1ee3p \u0111\u1ec3 t\u0103ng t\u1ed1c \u0111\u1ed9 t\u1ea3i trang<\/a>. \u0110\u1ed3ng th\u1eddi, b\u1ea1n c\u0169ng c\u1ea7n s\u1eed d\u1ee5ng c\u00e1c c\u00f4ng c\u1ee5 \u0111o l\u01b0\u1eddng v\u00e0 ph\u00e2n t\u00edch INP \u0111\u1ec3 theo d\u00f5i v\u00e0 c\u1ea3i thi\u1ec7n ch\u1ec9 s\u1ed1 n\u00e0y.<\/p>\n\n\n\n

INP ho\u1ea1t \u0111\u1ed9ng nh\u01b0 th\u1ebf n\u00e0o?<\/strong><\/h3>\n\n\n\n

V\u00ec m\u1ee5c ti\u00eau c\u1ee7a INP l\u00e0 \u0111o l\u01b0\u1eddng m\u1ee9c \u0111\u1ed9 ph\u1ea3n h\u1ed3i c\u1ee7a m\u1ed9t trang n\u00ean ch\u1ec9 s\u1ed1 n\u00e0y s\u1ebd x\u00e1c \u0111\u1ecbnh c\u00e1c t\u01b0\u01a1ng t\u00e1c v\u1edbi m\u1ed9t trang nh\u01b0 nh\u1ea5p v\u00e0o li\u00ean k\u1ebft, th\u00eam th\u1ee9 g\u00ec \u0111\u00f3 v\u00e0o gi\u1ecf h\u00e0ng c\u1ee7a h\u1ecd, m\u1edf menu,… v\u00e0 xem kho\u1ea3ng th\u1eddi gian nh\u1eadn \u0111\u01b0\u1ee3c ph\u1ea3n h\u1ed3i m\u1ea5t bao l\u00e2u.<\/p>\n\n\n\n

N\u1ebfu c\u00f3 t\u1ed5ng s\u1ed1 \u00edt h\u01a1n 50 l\u01b0\u1ee3t t\u01b0\u01a1ng t\u00e1c tr\u00ean m\u1ed9t trang, INP s\u1ebd l\u00e0 kho\u1ea3ng th\u1eddi gian m\u00e0 m\u1ed9t l\u01b0\u1ee3t t\u01b0\u01a1ng t\u00e1c d\u00e0i nh\u1ea5t di\u1ec5n ra (\u0111\u1ed9 tr\u1ec5 t\u01b0\u01a1ng t\u00e1c). N\u1ebfu c\u00f3 h\u01a1n 50 l\u01b0\u1ee3t t\u01b0\u01a1ng t\u00e1c, INP s\u1ebd l\u00e0 ph\u00e2n v\u1ecb th\u1ee9 98 c\u1ee7a \u0111\u1ed9 tr\u1ec5 t\u01b0\u01a1ng t\u00e1c.<\/p>\n\n\n\n

\u0110\u1ed9 tr\u1ec5 t\u01b0\u01a1ng t\u00e1c \u0111o l\u01b0\u1eddng kho\u1ea3ng th\u1eddi gian t\u1eeb khi ng\u01b0\u1eddi d\u00f9ng t\u01b0\u01a1ng t\u00e1c v\u1edbi m\u1ed9t trang cho \u0111\u1ebfn khi khung ti\u1ebfp theo \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb (ngh\u0129a l\u00e0 ng\u01b0\u1eddi d\u00f9ng nh\u00ecn th\u1ea5y \u0111i\u1ec1u g\u00ec \u0111\u00f3 kh\u00e1c bi\u1ec7t tr\u00ean m\u00e0n h\u00ecnh c\u1ee7a h\u1ecd v\u00e0 nh\u1eadn \u0111\u01b0\u1ee3c ph\u1ea3n h\u1ed3i r\u1eb1ng t\u01b0\u01a1ng t\u00e1c \u0111\u00f3 \u0111\u00e3 k\u00edch ho\u1ea1t s\u1ef1 thay \u0111\u1ed5i). Kho\u1ea3ng th\u1eddi gian n\u00e0y bao g\u1ed3m:<\/p>\n\n\n\n