{"id":15133,"date":"2020-03-13T15:32:53","date_gmt":"2020-03-13T08:32:53","guid":{"rendered":"https:\/\/kiencang.net\/?p=15133"},"modified":"2023-07-23T19:43:51","modified_gmt":"2023-07-23T12:43:51","slug":"first-input-delay","status":"publish","type":"post","link":"https:\/\/kiencang.net\/first-input-delay\/","title":{"rendered":"First Input Delay (FID) l\u00e0 g\u00ec?"},"content":{"rendered":"\n<p>V\u00e0i l\u1eddi c\u1ee7a ng\u01b0\u1eddi d\u1ecbch: FID l\u00e0 \u0111i\u1ec1u kh\u00f4ng th\u1ec3 tr\u00e1nh, khi ng\u01b0\u1eddi d\u00f9ng th\u1ef1c hi\u1ec7n t\u01b0\u01a1ng t\u00e1c trong khi tr\u00ecnh duy\u1ec7t \u0111ang b\u1eadn r\u1ed9n t\u1ea3i trang v\u1ec1 v\u00e0 th\u1ef1c hi\u1ec7n c\u00e1c h\u00e0nh \u0111\u1ed9ng theo h\u01b0\u1edbng d\u1eabn (th\u01b0\u1eddng l\u00e0 JavaScript), bu\u1ed9c n\u00f3 ph\u1ea3i tr\u00ec ho\u00e3n c\u00e1c y\u00eau c\u1ea7u t\u01b0\u01a1ng t\u00e1c kh\u00e1c. FID tr\u1edf n\u00ean quan tr\u1ecdng v\u00ec n\u00f3 l\u00e0 <em>\u1ea5n t\u01b0\u1ee3ng \u0111\u1ea7u ti\u00ean<\/em> c\u1ee7a ng\u01b0\u1eddi d\u00f9ng v\u1ec1 chuy\u1ec7n t\u01b0\u01a1ng t\u00e1c v\u1edbi trang. Trong khi FID kh\u00f4ng th\u1ebf tr\u00e1nh, th\u00ec d\u0129 nhi\u00ean ch\u00fang ta n\u00ean t\u00ecm c\u00e1ch gi\u1ea3m gi\u00e1 tr\u1ecb n\u00e0y xu\u1ed1ng c\u00e0ng nh\u1ecf c\u00e0ng t\u1ed1t. OK, gi\u1edd ch\u00fang ta b\u1eaft \u0111\u1ea7u th\u00f4i.<\/p>\n\n\n\n<p>&#8212;<\/p>\n\n\n\n<p>First Input Delay (FID) l\u00e0 m\u1ed9t ch\u1ec9 s\u1ed1 quan tr\u1ecdng, l\u1ea5y ng\u01b0\u1eddi d\u00f9ng l\u00e0m trung t\u00e2m \u0111\u1ec3 \u0111o \u0111\u1ea1c \u0111\u00e1p \u1ee9ng t\u1ea3i, v\u00ec n\u00f3 \u0111\u1ecbnh l\u01b0\u1ee3ng tr\u1ea3i nghi\u1ec7m c\u1ee7a ng\u01b0\u1eddi d\u00f9ng c\u1ea3m th\u1ea5y ra sao khi h\u1ecd c\u1ed1 g\u1eafng t\u01b0\u01a1ng t\u00e1c v\u1edbi trang kh\u00f4ng ph\u1ea3n h\u1ed3i- FID th\u1ea5p gi\u00fap \u0111\u1ea3m b\u1ea3o trang d\u1ec5 d\u00f9ng h\u01a1n.<\/p>\n\n\n\n<p>T\u1ea5t c\u1ea3 ch\u00fang ta \u0111\u1ec1u bi\u1ebft t\u1ea7m quan tr\u1ecdng c\u1ee7a vi\u1ec7c t\u1ea1o ra \u1ea5n t\u01b0\u1ee3ng ban \u0111\u1ea7u t\u1ed1t (good first impression). N\u00f3 quan tr\u1ecdng khi l\u00e0m quen m\u1ed9t ng\u01b0\u1eddi xa l\u1ea1, v\u00e0 n\u00f3 c\u0169ng quan tr\u1ecdng khi x\u00e2y d\u1ef1ng tr\u1ea3i nghi\u1ec7m tr\u00ean web.<\/p>\n\n\n\n<p>Tr\u00ean web, \u1ea5n t\u01b0\u1ee3ng t\u1ed1t \u0111\u1ea7u ti\u00ean c\u00f3 th\u1ec3 t\u1ea1o ra s\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa m\u1ed9t ng\u01b0\u1eddi d\u00f9ng trung th\u00e0nh ho\u1eb7c h\u1ecd s\u1ebd r\u1eddi \u0111i m\u00e0 kh\u00f4ng bao gi\u1edd quay tr\u1edf l\u1ea1i. C\u00e2u h\u1ecfi l\u00e0, \u0111i\u1ec1u g\u00ec t\u1ea1o ra \u1ea5n t\u01b0\u1ee3ng t\u1ed1t, v\u00e0 c\u00e1ch b\u1ea1n \u0111o \u0111\u1ea1c ki\u1ec3u \u1ea5n t\u01b0\u1ee3ng n\u00e0o \u0111\u00f3 m\u00e0 b\u1ea1n mu\u1ed1n t\u1ea1o cho ng\u01b0\u1eddi d\u00f9ng?<\/p>\n\n\n\n<p>Tr\u00ean web, c\u00e1c \u1ea5n t\u01b0\u1ee3ng \u0111\u1ea7u ti\u00ean c\u00f3 th\u1ec3 c\u00f3 r\u1ea5t nhi\u1ec1u d\u1ea1ng th\u1ee9c kh\u00e1c nhau- ch\u00fang ta c\u00f3 <a href=\"https:\/\/kiencang.net\/su-tin-cay-trong-thiet-ke-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u1ea5n t\u01b0\u1ee3ng \u0111\u1ea7u ti\u00ean v\u1ec1 thi\u1ebft k\u1ebf v\u00e0 s\u1ef1 h\u1ea5p d\u1eabn tr\u1ef1c quan c\u1ee7a trang<\/a> c\u0169ng nh\u01b0 \u1ea5n t\u01b0\u1ee3ng \u0111\u1ea7u ti\u00ean v\u1ec1 t\u1ed1c \u0111\u1ed9 v\u00e0 ph\u1ea3n h\u1ed3i.<\/p>\n\n\n\n<p>Trong khi kh\u00f3 m\u00e0 \u0111o \u0111\u1ea1c, n\u1eafm b\u1eaft \u0111\u01b0\u1ee3c chuy\u1ec7n ng\u01b0\u1eddi d\u00f9ng th\u00edch thi\u1ebft k\u1ebf website c\u1ee7a b\u1ea1n nh\u01b0 th\u1ebf n\u00e0o qua c\u00f4ng c\u1ee5 API, th\u00ec ng\u01b0\u1ee3c l\u1ea1i vi\u1ec7c \u0111o \u0111\u1ea1c t\u1ed1c \u0111\u1ed9 v\u00e0 ph\u1ea3n h\u1ed3i l\u1ea1i kh\u00f4ng b\u1ecb nh\u01b0 v\u1eady!<\/p>\n\n\n\n<p>\u1ea4n t\u01b0\u1ee3ng \u0111\u1ea7u ti\u00ean m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 v\u1ec1 t\u1ed1c \u0111\u1ed9 t\u1ea3i c\u1ee7a trang c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u0111o th\u00f4ng qua <a href=\"https:\/\/kiencang.net\/first-contentful-paint-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">First Contentful Paint (FCP)<\/a>. Nh\u01b0ng m\u1ee9c \u0111\u1ed9 nhanh ch\u00f3ng m\u00e0 trang c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 \u0111\u01b0a c\u00e1c pixel l\u00ean m\u00e0n h\u00ecnh ch\u1ec9 l\u00e0 m\u1ed9t ph\u1ea7n c\u1ee7a c\u00e2u chuy\u1ec7n m\u00e0 th\u00f4i. Quan tr\u1ecdng kh\u00f4ng k\u00e9m l\u00e0 trang c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i nhanh nh\u01b0 th\u1ebf n\u00e0o khi ng\u01b0\u1eddi d\u00f9ng c\u1ed1 g\u1eafng t\u01b0\u01a1ng t\u00e1c v\u1edbi nh\u1eefng pixels \u0111\u00f3!<\/p>\n\n\n\n<p>Ch\u1ec9 s\u1ed1 First Input Delay (FID) gi\u00fap b\u1ea1n \u0111o \u0111\u1ea1c \u0111\u01b0\u1ee3c \u1ea5n t\u01b0\u1ee3ng \u0111\u1ea7u ti\u00ean c\u1ee7a ng\u01b0\u1eddi d\u00f9ng v\u1ec1 v\u1ea5n \u0111\u1ec1 t\u01b0\u01a1ng t\u00e1c v\u00e0 ph\u1ea3n h\u1ed3i tr\u00ean trang c\u1ee7a b\u1ea1n.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_60 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >M\u1ee5c l\u1ee5c<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\" role=\"button\"><label for=\"item-6577d74a146d1\" ><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input aria-label=\"Toggle\" aria-label=\"item-6577d74a146d1\"  type=\"checkbox\" id=\"item-6577d74a146d1\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/kiencang.net\/first-input-delay\/#1_FID_la_gi\" title=\"#1. FID l\u00e0 g\u00ec?\">#1. FID l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/kiencang.net\/first-input-delay\/#2_Lam_the_nao_do_duoc_FID\" title=\"#2. L\u00e0m th\u1ebf n\u00e0o \u0111o \u0111\u01b0\u1ee3c FID\">#2. L\u00e0m th\u1ebf n\u00e0o \u0111o \u0111\u01b0\u1ee3c FID<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/kiencang.net\/first-input-delay\/#3_Chi_so_FID_co_gia_tri_bao_nhieu_thi_duoc_xem_la_on\" title=\"#3. Ch\u1ec9 s\u1ed1 FID c\u00f3 gi\u00e1 tr\u1ecb bao nhi\u00eau th\u00ec \u0111\u01b0\u1ee3c xem l\u00e0 \u1ed5n?\">#3. Ch\u1ec9 s\u1ed1 FID c\u00f3 gi\u00e1 tr\u1ecb bao nhi\u00eau th\u00ec \u0111\u01b0\u1ee3c xem l\u00e0 \u1ed5n?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/kiencang.net\/first-input-delay\/#4_Lam_the_nao_de_cai_thien_FID\" title=\"#4. L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 c\u1ea3i thi\u1ec7n FID\">#4. L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 c\u1ea3i thi\u1ec7n FID<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\" id=\"fid-la-gi\"><span class=\"ez-toc-section\" id=\"1_FID_la_gi\"><\/span>#1. FID l\u00e0 g\u00ec?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>FID \u0111o kho\u1ea3ng th\u1eddi gian t\u1eeb khi ng\u01b0\u1eddi d\u00f9ng l\u1ea7n \u0111\u1ea7u t\u01b0\u01a1ng t\u00e1c v\u1edbi trang c\u1ee7a b\u1ea1n (v\u00ed d\u1ee5, khi h\u1ecd click v\u00e0o li\u00ean k\u1ebft, nh\u1ea5n v\u00e0o n\u00fat, ho\u1eb7c s\u1eed d\u1ee5ng m\u1ed9t t\u00f9y ch\u1ec9nh, \u0111i\u1ec1u khi\u1ec3n d\u1ef1a tr\u00ean s\u1ee9c m\u1ea1nh c\u1ee7a JavaScript) <strong>cho \u0111\u1ebfn khi tr\u00ecnh duy\u1ec7t th\u1ef1c s\u1ef1 c\u00f3 kh\u1ea3 n\u0103ng ph\u1ea3n h\u1ed3i v\u1edbi t\u01b0\u01a1ng t\u00e1c \u0111\u00f3<\/strong>.<\/p>\n\n\n\n<p>Nh\u00e0 ph\u00e1t tri\u1ec3n &#8211; ng\u01b0\u1eddi vi\u1ebft m\u00e3 ph\u1ea3n h\u1ed3i cho c\u00e1c s\u1ef1 ki\u1ec7n, th\u01b0\u1eddng gi\u1ea3 \u0111\u1ecbnh l\u00e0 \u0111o\u1ea1n m\u00e3 \u0111\u00f3 s\u1ebd ch\u1ea1y ngay l\u1eadp t\u1ee9c, ngay khi s\u1ef1 ki\u1ec7n x\u1ea3y ra. Nh\u01b0ng ng\u01b0\u1eddi d\u00f9ng th\u01b0\u1eddng tr\u1ea3i nghi\u1ec7m \u0111i\u1ec1u ng\u01b0\u1ee3c l\u1ea1i- ch\u00fang ta t\u1ea3i trang web tr\u00ean \u0111i\u1ec7n tho\u1ea1i, c\u1ed1 g\u1eafng t\u01b0\u01a1ng t\u00e1c v\u1edbi n\u00f3, v\u00e0 sau \u0111\u00f3 b\u1ef1c b\u1ed9i khi ch\u1eb3ng c\u00f3 g\u00ec x\u1ea3y ra c\u1ea3!<\/p>\n\n\n\n<p>N\u00f3i chung, \u0111\u1ed9 tr\u1ec5 \u0111\u1ea7u v\u00e0o (input delay \/ input latency) x\u1ea3y ra v\u00ec lu\u1ed3ng nhi\u1ec7m v\u1ee5 ch\u00ednh c\u1ee7a tr\u00ecnh duy\u1ec7t v\u1eabn \u0111ang b\u1eadn r\u1ed9n l\u00e0m \u0111i\u1ec1u g\u00ec \u0111\u00f3, v\u00ec th\u1ebf n\u00f3 kh\u00f4ng (ch\u01b0a) th\u1ec3 ph\u1ea3n h\u1ed3i cho ng\u01b0\u1eddi d\u00f9ng \u0111\u01b0\u1ee3c. M\u1ed9t l\u00fd do ph\u1ed5 bi\u1ebfn cho \u0111i\u1ec1u n\u00e0y l\u00e0 c\u00f3 th\u1ec3 tr\u00ecnh duy\u1ec7t \u0111ang b\u1eadn r\u1ed9n <a href=\"https:\/\/kiencang.net\/tai-javascript-defer-async\/\" target=\"_blank\" rel=\"noreferrer noopener\">ph\u00e2n t\u00edch c\u00fa ph\u00e1p v\u00e0 th\u1ef1c thi (c\u00e1c) file JavaScript l\u1edbn<\/a>. Trong khi n\u00f3 l\u00e0m \u0111i\u1ec1u \u0111\u00f3, n\u00f3 kh\u00f4ng th\u1ec3 ch\u1ea1y b\u1ea5t k\u1ef3 tr\u00ecnh l\u1eafng nghe s\u1ef1 ki\u1ec7n n\u00e0o, v\u00ec JavaScript m\u00e0 n\u00f3 \u0111ang t\u1ea3i c\u00f3 th\u1ec3 b\u1ea3o n\u00f3 l\u00e0m vi\u1ec7c g\u00ec \u0111\u00f3 kh\u00e1c.<\/p>\n\n\n\n<p>C\u00f9ng xem x\u00e9t timeline d\u01b0\u1edbi \u0111\u00e2y v\u1ec1 c\u00e1ch m\u1ed9t trang web th\u00f4ng th\u01b0\u1eddng t\u1ea3i:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/timeline-load.jpg\" alt=\"timeline c\u00e1c y\u00eau c\u1ea7u v\u00e0 d\u00f2ng ch\u00ednh\" class=\"wp-image-15135\"\/><\/figure>\n\n\n\n<p>Ch\u00fa th\u00edch:<\/p>\n\n\n\n<ul>\n<li>Network requests: c\u00e1c y\u00eau c\u1ea7u m\u1ea1ng.<\/li>\n\n\n\n<li>Main thread task: t\u00e1c v\u1ee5 thu\u1ed9c lu\u1ed3ng ch\u00ednh.<\/li>\n\n\n\n<li>Navigation start: b\u1eaft \u0111\u1ea7u \u0111i\u1ec1u h\u01b0\u1edbng.<\/li>\n<\/ul>\n\n\n\n<p>H\u00ecnh minh h\u1ecda ph\u00eda tr\u00ean cho th\u1ea5y trang t\u1ea1o ra m\u1ed9t s\u1ed1 y\u00eau c\u1ea7u m\u1ea1ng cho c\u00e1c t\u00e0i nguy\u00ean (r\u1ea5t c\u00f3 th\u1ec3 l\u00e0 c\u00e1c file CSS v\u00e0 JS), v\u00e0-sau khi nh\u1eefng t\u00e0i nguy\u00ean n\u00e0y \u0111\u01b0\u1ee3c t\u1ea3i xong- ch\u00fang \u0111\u01b0\u1ee3c x\u1eed l\u00fd tr\u00ean lu\u1ed3ng ch\u00ednh (main thread).<\/p>\n\n\n\n<p>\u0110i\u1ec1u n\u00e0y d\u1eabn \u0111\u1ebfn c\u00e1c giai \u0111o\u1ea1n khi m\u00e0 lu\u1ed3ng ch\u00ednh b\u1eadn r\u1ed9n trong gi\u00e2y l\u00e1t, c\u00e1i \u0111\u01b0\u1ee3c ch\u1ec9 ra b\u1eb1ng c\u00e1c kh\u1ed1i nhi\u1ec7m v\u1ee5 m\u00e0u be (tr\u1ee5c Main Thread) \u1edf b\u00ean d\u01b0\u1edbi kh\u1ed1i m\u00e0u x\u00e1m (tr\u1ee5c Network Requests).<\/p>\n\n\n\n<p>C\u00e1c tr\u00ec ho\u00e3n nh\u1eadp v\u00e0o \u0111\u1ea7u ti\u00ean k\u00e9o d\u00e0i th\u01b0\u1eddng xu\u1ea5t hi\u1ec7n gi\u1eefa <a href=\"https:\/\/kiencang.net\/first-contentful-paint-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">First Contentful Paint (FCP)<\/a> v\u00e0 <a href=\"https:\/\/kiencang.net\/time-to-interactive-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Time to Interactive (TTI)<\/a> b\u1edfi v\u00ec trang \u0111\u00e3 xu\u1ea5t m\u1ed9t s\u1ed1 n\u1ed9i dung c\u1ee7a n\u00f3 nh\u01b0ng v\u1eabn ch\u01b0a c\u00f3 \u0111\u01b0\u1ee3c t\u01b0\u01a1ng t\u00e1c \u0111\u00e1ng tin c\u1eady. \u0110\u1ec3 minh h\u1ecda c\u00e1ch \u0111i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 x\u1ea3y ra nh\u01b0 th\u1ebf n\u00e0o, FCP v\u00e0 TTI \u0111\u00e3 \u0111\u01b0\u1ee3c \u0111\u01b0a v\u00e0o timeline d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/fid-fcp-tti.jpg\" alt=\"\" class=\"wp-image-15137\"\/><\/figure>\n\n\n\n<p>Ch\u00fa th\u00edch: <\/p>\n\n\n\n<ul>\n<li>Styles are loaded and browser can paint content \/ CSS \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 v\u00e0 tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 hi\u1ec3n th\u1ecb n\u1ed9i dung<\/li>\n\n\n\n<li>Main thread is idle for 5+ seconds \/ Lu\u1ed3ng ch\u00ednh nh\u00e0n r\u1ed7i sau h\u01a1n 5 gi\u00e2y<\/li>\n<\/ul>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 nh\u1eadn th\u1ea5y c\u00f3 kho\u1ea3ng th\u1eddi gian h\u1ee3p l\u00fd (bao g\u1ed3m ba nhi\u1ec7m v\u1ee5 d\u00e0i) gi\u1eefa FCP v\u00e0 TTI, n\u1ebfu ng\u01b0\u1eddi d\u00f9ng c\u1ed1 g\u1eafng t\u01b0\u01a1ng t\u00e1c v\u1edbi trang trong th\u1eddi gian n\u00e0y (v\u00ed d\u1ee5 click v\u00e0o li\u00ean k\u1ebft), s\u1ebd c\u00f3 s\u1ef1 tr\u00ec ho\u00e3n gi\u1eefa vi\u1ec7c click v\u00e0 khi lu\u1ed3ng ch\u00ednh c\u00f3 kh\u1ea3 n\u0103ng ph\u1ea3n h\u1ed3i.<\/p>\n\n\n\n<p>Xem \u0111i\u1ec1u g\u00ec c\u00f3 th\u1ec3 x\u1ea3y ra n\u1ebfu ng\u01b0\u1eddi d\u00f9ng c\u1ed1 g\u1eafng t\u01b0\u01a1ng t\u00e1c v\u1edbi trang g\u1ea7n th\u1eddi \u0111i\u1ec3m b\u1eaft \u0111\u1ea7u c\u1ee7a t\u00e1c v\u1ee5 d\u00e0i nh\u1ea5t:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/fid-full.jpg\" alt=\"FID \u0111\u1ea7y \u0111\u1ee7\" class=\"wp-image-15140\"\/><\/figure>\n\n\n\n<p>Ch\u00fa th\u00edch:<\/p>\n\n\n\n<ul>\n<li>Browser receives first user input: Tr\u00ecnh duy\u1ec7t nh\u1eadn th\u00f4ng tin \u0111\u1ea7u v\u00e0o \u0111\u1ea7u ti\u00ean t\u1eeb ng\u01b0\u1eddi d\u00f9ng<\/li>\n\n\n\n<li>Browser can respond to the first user input: Tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 ph\u1ea3n h\u1ed3i th\u00f4ng tin \u0111\u1ea7u v\u00e0o \u0111\u1ea7u ti\u00ean t\u1eeb ng\u01b0\u1eddi d\u00f9ng (khi t\u00e1c v\u1ee5 \u0111ang ph\u1ea3i gi\u1ea3i quy\u1ebft trong lu\u1ed3ng ch\u00ednh ho\u00e0n th\u00e0nh xong)<\/li>\n<\/ul>\n\n\n\n<p>B\u1edfi v\u00ec \u0111\u1ea7u v\u00e0o xu\u1ea5t hi\u1ec7n khi tr\u00ecnh duy\u1ec7t \u0111ang trong qu\u00e1 tr\u00ecnh ch\u1ea1y t\u00e1c v\u1ee5, n\u00f3 ph\u1ea3i \u0111\u1ee3i cho \u0111\u1ebfn khi nhi\u1ec7m v\u1ee5 ho\u00e0n th\u00e0nh r\u1ed3i m\u1edbi c\u00f3 th\u1ec3 ph\u1ea3n h\u1ed3i \u0111\u1ea7u v\u00e0o. Th\u1eddi gian n\u00f3 ph\u1ea3i \u0111\u1ee3i ch\u00ednh l\u00e0 gi\u00e1 tr\u1ecb FID cho ng\u01b0\u1eddi d\u00f9ng c\u1ee5 th\u1ec3 \u0111\u00f3 tr\u00ean trang c\u1ee5 th\u1ec3.<\/p>\n\n\n\n<p>L\u01b0u \u00fd: Trong v\u00ed d\u1ee5 tr\u00ean ng\u01b0\u1eddi d\u00f9ng ch\u1ec9 <em>t\u00ecnh c\u1edd<\/em> t\u01b0\u01a1ng t\u00e1c v\u1edbi trang t\u1ea1i th\u1eddi \u0111i\u1ec3m lu\u1ed3ng ch\u00ednh b\u1eaft \u0111\u1ea7u giai \u0111o\u1ea1n b\u1eadn r\u1ed9n nh\u1ea5t. N\u1ebfu ng\u01b0\u1eddi d\u00f9ng t\u01b0\u01a1ng t\u00e1c v\u1edbi trang ch\u1ec9 v\u00e0i kho\u1ea3nh kh\u1eafc tr\u01b0\u1edbc \u0111\u00f3 (trong giai \u0111o\u1ea1n r\u1ea3nh r\u1ed7i) tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 \u0111\u00e1p \u1ee9ng ph\u1ea3n h\u1ed3i ngay l\u1eadp t\u1ee9c. Ph\u01b0\u01a1ng sai n\u00e0y trong \u0111\u1ed9 tr\u1ec5 \u0111\u1ea7u v\u00e0o nh\u1ea5n m\u1ea1nh t\u1ea7m quan tr\u1ecdng c\u1ee7a vi\u1ec7c \u0111\u1ec3 \u00fd \u0111\u1ebfn vi\u1ec7c ph\u00e2n ph\u1ed1i c\u00e1c gi\u00e1 tr\u1ecb FID khi b\u00e1o c\u00e1o c\u00e1c ch\u1ec9 s\u1ed1. B\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u th\u00eam v\u1ec1 \u0111i\u1ec1u n\u00e0y trong ph\u1ea7n d\u01b0\u1edbi \u0111\u00e2y v\u1ec1 vi\u1ec7c ph\u00e2n t\u00edch v\u00e0 b\u00e1o c\u00e1o d\u1eef li\u1ec7u FID.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"t\u1ea1i-sao-b\u1ea1n-ch\u1ec9-quan-tam-d\u1ebfn-m\u1ee5c-nh\u1eadp-d\u1ea7u-tien\">T\u1ea1i sao b\u1ea1n ch\u1ec9 quan t\u00e2m \u0111\u1ebfn m\u1ee5c nh\u1eadp \u0111\u1ea7u ti\u00ean?<\/h3>\n\n\n\n<p>Trong khi tr\u00ec ho\u00e3n b\u1ea5t k\u1ef3 m\u1ee5c nh\u1eadp n\u00e0o \u0111\u1ec1u c\u00f3 th\u1ec3 d\u1eabn \u0111\u1ebfn tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng t\u1ed3i t\u1ec7, ch\u00fang ta ch\u1ee7 y\u1ebfu \u0111\u01b0\u1ee3c khuy\u00ean n\u00ean \u0111o \u0111\u1ea1c tr\u00ec ho\u00e3n m\u1ee5c nh\u1eadp \u0111\u1ea7u ti\u00ean (first input delay) v\u00ec m\u1ed9t v\u00e0i l\u00fd do:<\/p>\n\n\n\n<ul>\n<li>First Input Delay l\u00e0 \u1ea5n t\u01b0\u1ee3ng \u0111\u1ea7u ti\u00ean c\u1ee7a ng\u01b0\u1eddi d\u00f9ng v\u1ec1 kh\u00eda c\u1ea1nh kh\u1ea3 n\u0103ng ph\u1ea3n h\u1ed3i c\u1ee7a trang, v\u00e0 \u1ea5n t\u01b0\u1ee3ng \u0111\u1ea7u ti\u00ean r\u1ea5t quan tr\u1ecdng trong vi\u1ec7c h\u00ecnh th\u00e0nh \u1ea5n t\u01b0\u1ee3ng t\u1ed5ng th\u1ec3 v\u1ec1 ch\u1ea5t l\u01b0\u1ee3ng trang v\u00e0 \u0111\u1ed9 tin c\u1eady.<\/li>\n\n\n\n<li>C\u00e1c v\u1ea5n \u0111\u1ec1 l\u1edbn nh\u1ea5t v\u1ec1 t\u01b0\u01a1ng t\u00e1c m\u00e0 ch\u00fang ta th\u1ea5y tr\u00ean th\u1ebf gi\u1edbi web hi\u1ec7n n\u00e0y xu\u1ea5t hi\u1ec7n trong th\u1eddi gian t\u1ea3i trang. V\u00ec th\u1ebf, ch\u00fang t\u00f4i tin r\u1eb1ng tr\u01b0\u1edbc h\u1ebft t\u1eadp trung v\u00e0o c\u1ea3i thi\u1ec7n t\u01b0\u01a1ng t\u00e1c \u0111\u1ea7u ti\u00ean c\u1ee7a ng\u01b0\u1eddi d\u00f9ng tr\u00ean trang s\u1ebd c\u00f3 \u1ea3nh h\u01b0\u1edfng l\u1edbn nh\u1ea5t trong vi\u1ec7c c\u1ea3i thi\u1ec7n t\u01b0\u01a1ng t\u00e1c t\u1ed5ng th\u1ec3 tr\u00ean web.<\/li>\n\n\n\n<li>C\u00e1c gi\u1ea3i ph\u00e1p \u0111\u01b0\u1ee3c khuy\u1ebfn ngh\u1ecb cho website kh\u1eafc ph\u1ee5c First Input Delay (t\u00e1ch m\u00e3\/code splitting, t\u1ea3i \u00edt JavaScript upfront, v\u00e2n v\u00e2n) kh\u00f4ng nh\u1ea5t thi\u1ebft t\u01b0\u01a1ng \u0111\u1ed3ng v\u1edbi c\u00e1c gi\u1ea3i ph\u00e1p kh\u1eafc ph\u1ee5c input delay ch\u1eadm sau khi trang \u0111\u00e3 t\u1ea3i xong. B\u1eb1ng c\u00e1ch chia t\u00e1ch c\u00e1c ch\u1ec9 s\u1ed1 n\u00e0y, ch\u00fang ta c\u00f3 kh\u1ea3 n\u0103ng cung c\u1ea5p c\u00e1c h\u01b0\u1edbng d\u1eabn v\u1ec1 hi\u1ec7u su\u1ea5t c\u1ee5 th\u1ec3 h\u01a1n cho nh\u00e0 l\u1eadp tr\u00ecnh.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"lam-th\u1ebf-nao-bi\u1ebft-d\u01b0\u1ee3c-cai-nao-la-m\u1ee5c-nh\u1eadp-d\u1ea7u-tien\">L\u00e0m th\u1ebf n\u00e0o bi\u1ebft \u0111\u01b0\u1ee3c c\u00e1i n\u00e0o l\u00e0 m\u1ee5c nh\u1eadp \u0111\u1ea7u ti\u00ean?<\/h3>\n\n\n\n<p>FID l\u00e0 ch\u1ec9 s\u1ed1 \u0111o \u0111\u1ea1c kh\u1ea3 n\u0103ng ph\u1ea3n h\u1ed3i c\u1ee7a trang trong khi trang t\u1ea3i. V\u00ec l\u00fd do \u0111\u00f3, n\u00f3 ch\u1ec9 t\u1eadp trung v\u00e0o s\u1ef1 ki\u1ec7n nh\u1eadp v\u00e0o t\u1eeb c\u00e1c h\u00e0nh \u0111\u1ed9ng r\u1eddi r\u1ea1c nh\u01b0 click, ch\u1ea1m v\u00e0 nh\u1ea5n ph\u00edm.<\/p>\n\n\n\n<p>C\u00e1c t\u01b0\u01a1ng t\u00e1c kh\u00e1c, ch\u1eb3ng h\u1ea1n nh\u01b0 cu\u1ed9n chu\u1ed9t v\u00e0 zoom, l\u00e0 c\u00e1c h\u00e0nh \u0111\u1ed9ng li\u00ean t\u1ee5c v\u00e0 c\u00f3 nh\u1eefng h\u1ea1n ch\u1ebf hi\u1ec7u su\u1ea5t ho\u00e0n to\u00e0n kh\u00e1c (ngo\u00e0i ra, tr\u00ecnh duy\u1ec7t th\u01b0\u1eddng \u1ea9n \u0111\u1ed9 tr\u1ec5 c\u1ee7a ch\u00fang b\u1eb1ng c\u00e1ch ch\u1ea1y ch\u00fang tr\u00ean m\u1ed9t lu\u1ed3ng ri\u00eang bi\u1ec7t).<\/p>\n\n\n\n<p>N\u00f3i c\u00e1ch kh\u00e1c, FID t\u1eadp trung v\u00e0o R (kh\u1ea3 n\u0103ng ph\u1ea3n h\u1ed3i\/responsiveness) trong <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/rail\">m\u00f4 h\u00ecnh hi\u1ec7u su\u1ea5t RAIL<\/a>, trong khi cu\u1ed9n chu\u1ed9t v\u00e0 zoom li\u00ean quan nhi\u1ec1u h\u01a1n \u0111\u1ebfn A (\u1ea3nh \u0111\u1ed9ng\/animation), v\u00e0 ch\u1ea5t l\u01b0\u1ee3ng hi\u1ec7u su\u1ea5t c\u1ee7a ch\u00fang n\u00ean \u0111\u01b0\u1ee3c \u0111\u00e1nh gi\u00e1 ri\u00eang.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"chuy\u1ec7n-gi-x\u1ea3y-ra-n\u1ebfu-ng\u01b0\u1eddi-dung-khong-bao-gi\u1edd-t\u01b0\u01a1ng-tac-v\u1edbi-trang-c\u1ee7a-b\u1ea1n\">Chuy\u1ec7n g\u00ec x\u1ea3y ra n\u1ebfu ng\u01b0\u1eddi d\u00f9ng kh\u00f4ng bao gi\u1edd t\u01b0\u01a1ng t\u00e1c v\u1edbi trang c\u1ee7a b\u1ea1n<\/h3>\n\n\n\n<p>Kh\u00f4ng ph\u1ea3i t\u1ea5t c\u1ea3 ng\u01b0\u1eddi d\u00f9ng s\u1ebd t\u01b0\u01a1ng t\u00e1c v\u1edbi trang c\u1ee7a b\u1ea1n. V\u00e0 kh\u00f4ng ph\u1ea3i t\u1ea5t c\u1ea3 c\u00e1c t\u01b0\u01a1ng t\u00e1c \u0111\u1ec1u li\u00ean quan \u0111\u1ebfn FID (nh\u01b0 \u0111\u00e3 \u0111\u01b0\u1ee3c \u0111\u1ec1 c\u1eadp trong ph\u1ea7n tr\u01b0\u1edbc). Ngo\u00e0i ra, m\u1ed9t s\u1ed1 t\u01b0\u01a1ng t\u00e1c \u0111\u1ea7u ti\u00ean c\u1ee7a ng\u01b0\u1eddi d\u00f9ng s\u1ebd di\u1ec5n ra v\u00e0o th\u1eddi \u0111i\u1ec3m t\u1ec7 (khi lu\u1ed3ng ch\u00ednh v\u1eabn b\u1eadn r\u1ed9n trong m\u1ed9t kho\u1ea3ng th\u1eddi gian d\u00e0i), v\u00e0 m\u1ed9t s\u1ed1 t\u01b0\u01a1ng t\u00e1c \u0111\u1ea7u ti\u00ean c\u1ee7a ng\u01b0\u1eddi d\u00f9ng s\u1ebd di\u1ec5n ra v\u00e0o th\u1eddi \u0111i\u1ec3m t\u1ed1t (khi lu\u1ed3ng ch\u00ednh \u0111\u00e3 ho\u00e0n th\u00e0nh, v\u00e0 \u0111ang trong giai \u0111o\u1ea1n ngh\u1ec9 ng\u01a1i).<\/p>\n\n\n\n<p>\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 m\u1ed9t s\u1ed1 ng\u01b0\u1eddi d\u00f9ng s\u1ebd kh\u00f4ng c\u00f3 gi\u00e1 tr\u1ecb FID, m\u1ed9t s\u1ed1 ng\u01b0\u1eddi d\u00f9ng s\u1ebd c\u00f3 gi\u00e1 tr\u1ecb FID th\u1ea5p, v\u00e0 m\u1ed9t s\u1ed1 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 c\u00f3 gi\u00e1 tr\u1ecb FID cao.<\/p>\n\n\n\n<p>C\u00e1ch b\u1ea1n theo d\u00f5i, b\u00e1o c\u00e1o v\u00e0 ph\u00e2n t\u00edch FID c\u00f3 th\u1ec3 s\u1ebd kh\u00e1c ch\u00fat \u00edt so v\u1edbi c\u00e1c s\u1ed1 li\u1ec7u kh\u00e1c m\u00e0 b\u1ea1n s\u1eed d\u1ee5ng. Ph\u1ea7n ti\u1ebfp theo gi\u1ea3i th\u00edch cho b\u1ea1n c\u00e1ch l\u00e0m \u0111i\u1ec1u n\u00e0y t\u1ed1t nh\u1ea5t.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"lam-th\u1ebf-nao-do-d\u01b0\u1ee3c-fid\"><span class=\"ez-toc-section\" id=\"2_Lam_the_nao_do_duoc_FID\"><\/span>#2. L\u00e0m th\u1ebf n\u00e0o \u0111o \u0111\u01b0\u1ee3c FID<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>FID l\u00e0 ch\u1ec9 s\u1ed1 ch\u1ec9 c\u00f3 th\u1ec3 \u0111o \u0111\u1ea1c \u0111\u01b0\u1ee3c th\u00f4ng qua m\u00f4i tr\u01b0\u1eddng t\u1ef1 nhi\u00ean (in the field), v\u00ec n\u00f3 y\u00eau c\u1ea7u ng\u01b0\u1eddi d\u00f9ng th\u1ef1c t\u01b0\u01a1ng t\u00e1c v\u1edbi trang c\u1ee7a b\u1ea1n. B\u1ea1n c\u00f3 th\u1ec3 \u0111o \u0111\u1ea1c FID b\u1eb1ng c\u00e1c c\u00f4ng c\u1ee5 sau.<\/p>\n\n\n\n<ul>\n<li><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\">PageSpeed Insights<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\">Chrome User Experience Report<\/a> (B\u00e1o c\u00e1o tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng c\u1ee7a Chrome)<\/li>\n\n\n\n<li><a href=\"https:\/\/firebase.google.com\/docs\/perf-mon\/get-started-web\">Firebase Performance Monitoring<\/a> (b\u1ea3n beta)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"do-d\u1ea1c-fid-trong-javascript\">\u0110o \u0111\u1ea1c FID trong JavaScript<\/h3>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 \u0111o \u0111\u1ea1c FID trong JavaScript b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng <a href=\"https:\/\/wicg.github.io\/event-timing\">Event Timing API<\/a>. V\u00ed d\u1ee5 d\u01b0\u1edbi \u0111\u00e2y cho th\u1ea5y c\u00e1ch t\u1ea1o <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/PerformanceObserver\">PerformanceObserver<\/a> \u0111\u1ec3 l\u1eafng nghe m\u1ee5c nh\u1eadp \u0111\u1ea7u ti\u00ean, t\u00ednh to\u00e1n FID, v\u00e0 ghi l\u1ea1i gi\u00e1 tr\u1ecb v\u00e0o console:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Create the Performance Observer instance.\nconst observer = new PerformanceObserver((list) =&gt; {\n  for (const entry of list.getEntries()) {\n    const fid = entry.processingStart - entry.startTime;\n    console.log('FID:', fid);\n  }\n});\n\/\/ Start observing first-input entries.\nobserver.observe({\n  type: 'first-input',\n  buffered: true,\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"phan-tich-va-bao-cao-d\u1eef-li\u1ec7u-fid\">Ph\u00e2n t\u00edch v\u00e0 b\u00e1o c\u00e1o d\u1eef li\u1ec7u FID<\/h3>\n\n\n\n<p>Do c\u00e1c gi\u00e1 tr\u1ecb FID \u0111\u01b0\u1ee3c ch\u1edd \u0111\u1ee3i l\u00e0 bi\u1ebfn thi\u00ean trong kho\u1ea3ng r\u1ed9ng, \u0111i\u1ec1u quan tr\u1ecdng khi b\u00e1o c\u00e1o FID l\u00e0 b\u1ea1n t\u1eadp trung v\u00e0o vi\u1ec7c c\u00e1c gi\u00e1 tr\u1ecb n\u00e0y ph\u00e2n t\u00e1n v\u00e0 \u0111\u1ec3 \u00fd \u0111\u1ebfn ph\u00e2n v\u1ecb cao h\u01a1n. Trong th\u1ef1c t\u1ebf, ch\u00fang t\u00f4i khuy\u1ebfn kh\u00edch b\u1ea1n t\u1eadp trung v\u00e0o ph\u00e2n v\u1ecb c\u1ee5 th\u1ec3 t\u1ea1i m\u1ee9c t\u1eeb 95-99, v\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd \u0111\u1ea1i di\u1ec7n cho c\u00e1c tr\u1ea3i nghi\u1ec7m \u0111\u1ea7u ti\u00ean \u0111\u1eb7c bi\u1ec7t t\u1ec7 h\u1ea1i m\u00e0 ng\u01b0\u1eddi d\u00f9ng \u0111ang c\u00f3 v\u1edbi trang web c\u1ee7a b\u1ea1n. V\u00e0 n\u00f3 s\u1ebd cho th\u1ea5y c\u00e1c khu v\u1ef1c m\u00e0 b\u1ea1n c\u1ea7n c\u1ea3i thi\u1ec7n nh\u1ea5t.<\/p>\n\n\n\n<p>\u0110i\u1ec1u n\u00e0y c\u0169ng \u0111\u00fang n\u1ebfu b\u1ea1n ph\u00e2n chia b\u00e1o c\u00e1o theo nh\u00f3m ho\u1eb7c ki\u1ec3u thi\u1ebft b\u1ecb. L\u1ea5y v\u00ed d\u1ee5, n\u1ebfu b\u1ea1n ch\u1ea1y c\u00e1c b\u00e1o c\u00e1o ri\u00eang bi\u1ec7t cho m\u00e1y b\u00e0n v\u00e0 di \u0111\u1ed9ng, gi\u00e1 tr\u1ecb FID b\u1ea1n c\u1ea7n quan t\u00e2m nh\u1ea5t tr\u00ean m\u00e1y b\u1ea1n ph\u1ea3i c\u00f3 ph\u00e2n v\u1ecb t\u1eeb 95-99 cho ng\u01b0\u1eddi d\u00f9ng m\u00e1y b\u00e0n, v\u00e0 gi\u00e1 tr\u1ecb FID b\u1ea1n quan t\u00e2m nh\u1ea5t tr\u00ean di \u0111\u1ed9ng ph\u1ea3i c\u00f3 ph\u00e2n v\u1ecb t\u1eeb 95-99 cho ng\u01b0\u1eddi d\u00f9ng di \u0111\u1ed9ng.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ch\u1ec9-s\u1ed1-fid-co-gia-tr\u1ecb-bao-nhieu-thi-d\u01b0\u1ee3c-xem-la-\u1ed5n\"><span class=\"ez-toc-section\" id=\"3_Chi_so_FID_co_gia_tri_bao_nhieu_thi_duoc_xem_la_on\"><\/span>#3. Ch\u1ec9 s\u1ed1 FID c\u00f3 gi\u00e1 tr\u1ecb bao nhi\u00eau th\u00ec \u0111\u01b0\u1ee3c xem l\u00e0 \u1ed5n?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u0110\u1ec3 c\u00f3 \u0111\u01b0\u1ee3c tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng t\u1ed1t, c\u00e1c trang c\u1ea7n ph\u1ea3i c\u1ed1 g\u1eafng \u0111\u1ea1t \u0111\u01b0\u1ee3c First Input Delay \u00edt h\u01a1n <strong>100 mili gi\u00e2y<\/strong>. <\/p>\n\n\n\n<p>\u0110\u1ec3 \u0111\u1ea3m b\u1ea3o b\u1ea1n \u0111\u1ea1t \u0111\u01b0\u1ee3c m\u1ee5c ti\u00eau \u0111\u00f3 cho ph\u1ea7n \u0111a ng\u01b0\u1eddi d\u00f9ng, m\u1ed9t ng\u01b0\u1ee1ng t\u1ed1t \u0111\u1ec3 \u0111o l\u00e0 ph\u00e2n v\u1ecb th\u1ee9 75 trong qu\u00e1 tr\u00ecnh t\u1ea3i trang, \u0111\u01b0\u1ee3c ph\u00e2n kh\u00fac tr\u00ean c\u1ea3 thi\u1ebft b\u1ecb di \u0111\u1ed9ng l\u1eabn m\u00e1y t\u00ednh \u0111\u1ec3 b\u00e0n.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"lam-th\u1ebf-nao-d\u1ec3-c\u1ea3i-thi\u1ec7n-fid\"><span class=\"ez-toc-section\" id=\"4_Lam_the_nao_de_cai_thien_FID\"><\/span>#4. L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 c\u1ea3i thi\u1ec7n FID<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u0110\u1ec3 h\u1ecdc c\u00e1ch c\u1ea3i thi\u1ec7n FID cho m\u1ed9t trang c\u1ee5 th\u1ec3, b\u1ea1n c\u00f3 th\u1ec3 ch\u1ea1y tr\u00ecnh ki\u1ec3m tra hi\u1ec7u su\u1ea5t Lighthouse v\u00e0 d\u1ed3n s\u1ef1 ch\u00fa \u00fd v\u00e0o b\u1ea5t c\u1ee9 c\u01a1 h\u1ed9i c\u1ee5 th\u1ec3 n\u00e0o m\u00e0 tr\u00ecnh ki\u1ec3m tra g\u1ee3i \u00fd.<\/p>\n\n\n\n<p>Trong khi FID l\u00e0 ch\u1ec9 s\u1ed1 \u0111\u01b0\u1ee3c \u0111o trong m\u00f4i tr\u01b0\u1eddng t\u1ef1 nhi\u00ean (v\u00e0 Lighthouse l\u00e0 c\u00f4ng c\u1ee5 \u0111o trong m\u00f4i tr\u01b0\u1eddng th\u1eed nghi\u1ec7m), h\u01b0\u1edbng d\u1eabn \u0111\u1ec3 c\u1ea3i thi\u1ec7n FID c\u0169ng gi\u1ed1ng nh\u01b0 vi\u1ec7c c\u1ea3i thi\u1ec7n ch\u1ec9 s\u1ed1 trong m\u00f4i tr\u01b0\u1eddng th\u1eed nghi\u1ec7m <a href=\"https:\/\/kiencang.net\/total-blocking-time-la-gi\/\">Total Blocking Time (TBT)<\/a>.<\/p>\n\n\n\n<p>V\u1ec1 t\u1ed5ng quan, \u0111\u1ec3 c\u1ea3i thi\u1ec7n FID cho b\u1ea5t k\u1ef3 trang n\u00e0o, b\u1ea1n c\u00f3 th\u1ec3 tham khao c\u00e1c ch\u1ee7 \u0111\u1ec1 sau:<\/p>\n\n\n\n<ul>\n<li><a href=\"https:\/\/kiencang.net\/tai-nguyen-ben-thu-ba-wordpress\/\">Gi\u1ea3m \u1ea3nh h\u01b0\u1edfng m\u00e3 c\u1ee7a b\u00ean th\u1ee9 ba<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/kiencang.net\/giam-thoi-gian-thuc-thi-javascript\/\">Gi\u1ea3m th\u1eddi gian th\u1ef1c thi JavaScript<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/kiencang.net\/toi-thieu-cong-viec-luong-chinh\/\">T\u1ed1i thi\u1ec3u h\u00f3a c\u00f4ng vi\u1ec7c c\u1ee7a lu\u1ed3ng ch\u00ednh<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/kiencang.net\/tom-tat-tai-nguyen\/\">Gi\u1eef s\u1ed1 l\u01b0\u1ee3ng y\u00eau c\u1ea7u th\u1ea5p v\u00e0 d\u1eef li\u1ec7u t\u1ea3i v\u1ec1 c\u00f3 k\u00edch c\u1ee1 nh\u1ecf<\/a><\/li>\n<\/ul>\n\n\n\n<p>Chu\u1ed7i b\u00e0i vi\u1ebft v\u1ec1 c\u00e1c ch\u1ec9 s\u1ed1 t\u0103ng t\u1ed1c:<\/p>\n\n\n\n<ul>\n<li><a href=\"https:\/\/kiencang.net\/total-blocking-time-la-gi\/\">Total Blocking Time l\u00e0 g\u00ec<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/kiencang.net\/first-contentful-paint-la-gi\/\">First Contentful Paint l\u00e0 g\u00ec<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/kiencang.net\/time-to-interactive-la-gi\/\">Time To Interactive l\u00e0 g\u00ec<\/a><\/li>\n\n\n\n<li>First Input Delay l\u00e0 g\u00ec (b\u00e0i b\u1ea1n \u0111ang \u0111\u1ecdc)<\/li>\n\n\n\n<li><a href=\"https:\/\/kiencang.net\/largest-contentful-paint-la-gi\/\">Largest Contentful Paint l\u00e0 g\u00ec<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/kiencang.net\/cumulative-layout-shift\/\" target=\"_blank\" rel=\"noreferrer noopener\">Cumulative layout shift (CLS) l\u00e0 g\u00ec<\/a><\/li>\n<\/ul>\n\n\n\n<p><em> (D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft <a href=\"https:\/\/web.dev\/fid\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">First Input Delay, t\u00e1c gi\u1ea3: Philip Walton<\/a>, t\u1eeb trang web dev) <\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>V\u00e0i l\u1eddi c\u1ee7a ng\u01b0\u1eddi d\u1ecbch: FID l\u00e0 \u0111i\u1ec1u kh\u00f4ng th\u1ec3 tr\u00e1nh, khi ng\u01b0\u1eddi d\u00f9ng th\u1ef1c hi\u1ec7n t\u01b0\u01a1ng t\u00e1c trong khi tr\u00ecnh duy\u1ec7t \u0111ang b\u1eadn r\u1ed9n t\u1ea3i trang v\u1ec1 v\u00e0 th\u1ef1c hi\u1ec7n c\u00e1c h\u00e0nh \u0111\u1ed9ng theo h\u01b0\u1edbng d\u1eabn (th\u01b0\u1eddng l\u00e0 JavaScript), bu\u1ed9c n\u00f3 ph\u1ea3i tr\u00ec ho\u00e3n c\u00e1c y\u00eau c\u1ea7u t\u01b0\u01a1ng t\u00e1c kh\u00e1c. FID tr\u1edf n\u00ean quan &hellip;<\/p>\n","protected":false},"author":1,"featured_media":21370,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[282],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>First Input Delay (FID) l\u00e0 g\u00ec? &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"description\" content=\"First Input Delay l\u00e0 m\u1ed9t trong 6 ch\u1ec9 s\u1ed1 quan tr\u1ecdng nh\u1ea5t \u0111\u1ec3 \u0111\u00e1nh gi\u00e1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 website. Th\u00f4ng qua \u0111\u1ed9 tr\u1ec5 \u0111\u1ea7u ti\u00ean m\u00e0 ng\u01b0\u1eddi d\u00f9ng g\u1eb7p ph\u1ea3i khi t\u01b0\u01a1ng t\u00e1c, ng\u01b0\u1eddi ta \u01b0\u1edbc t\u00ednh \u0111\u01b0\u1ee3c nh\u1ea5t \u0111\u1ecbnh m\u1ee9c \u0111\u1ed9 h\u00e0i l\u00f2ng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/first-input-delay\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"First Input Delay (FID) l\u00e0 g\u00ec? &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"First Input Delay l\u00e0 m\u1ed9t trong 6 ch\u1ec9 s\u1ed1 quan tr\u1ecdng nh\u1ea5t \u0111\u1ec3 \u0111\u00e1nh gi\u00e1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 website. Th\u00f4ng qua \u0111\u1ed9 tr\u1ec5 \u0111\u1ea7u ti\u00ean m\u00e0 ng\u01b0\u1eddi d\u00f9ng g\u1eb7p ph\u1ea3i khi t\u01b0\u01a1ng t\u00e1c, ng\u01b0\u1eddi ta \u01b0\u1edbc t\u00ednh \u0111\u01b0\u1ee3c nh\u1ea5t \u0111\u1ecbnh m\u1ee9c \u0111\u1ed9 h\u00e0i l\u00f2ng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/first-input-delay\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-13T08:32:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-23T12:43:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/first-input-delay.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"426\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"First Input Delay (FID) l\u00e0 g\u00ec? &#8226; Ki\u1ebfn c\u00e0ng","description":"First Input Delay l\u00e0 m\u1ed9t trong 6 ch\u1ec9 s\u1ed1 quan tr\u1ecdng nh\u1ea5t \u0111\u1ec3 \u0111\u00e1nh gi\u00e1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 website. Th\u00f4ng qua \u0111\u1ed9 tr\u1ec5 \u0111\u1ea7u ti\u00ean m\u00e0 ng\u01b0\u1eddi d\u00f9ng g\u1eb7p ph\u1ea3i khi t\u01b0\u01a1ng t\u00e1c, ng\u01b0\u1eddi ta \u01b0\u1edbc t\u00ednh \u0111\u01b0\u1ee3c nh\u1ea5t \u0111\u1ecbnh m\u1ee9c \u0111\u1ed9 h\u00e0i l\u00f2ng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kiencang.net\/first-input-delay\/","og_locale":"vi_VN","og_type":"article","og_title":"First Input Delay (FID) l\u00e0 g\u00ec? &#8226; Ki\u1ebfn c\u00e0ng","og_description":"First Input Delay l\u00e0 m\u1ed9t trong 6 ch\u1ec9 s\u1ed1 quan tr\u1ecdng nh\u1ea5t \u0111\u1ec3 \u0111\u00e1nh gi\u00e1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 website. Th\u00f4ng qua \u0111\u1ed9 tr\u1ec5 \u0111\u1ea7u ti\u00ean m\u00e0 ng\u01b0\u1eddi d\u00f9ng g\u1eb7p ph\u1ea3i khi t\u01b0\u01a1ng t\u00e1c, ng\u01b0\u1eddi ta \u01b0\u1edbc t\u00ednh \u0111\u01b0\u1ee3c nh\u1ea5t \u0111\u1ecbnh m\u1ee9c \u0111\u1ed9 h\u00e0i l\u00f2ng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng.","og_url":"https:\/\/kiencang.net\/first-input-delay\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2020-03-13T08:32:53+00:00","article_modified_time":"2023-07-23T12:43:51+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/first-input-delay.jpg","type":"image\/jpeg"}],"author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"12 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/first-input-delay\/","url":"https:\/\/kiencang.net\/first-input-delay\/","name":"First Input Delay (FID) l\u00e0 g\u00ec? &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2020-03-13T08:32:53+00:00","dateModified":"2023-07-23T12:43:51+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"description":"First Input Delay l\u00e0 m\u1ed9t trong 6 ch\u1ec9 s\u1ed1 quan tr\u1ecdng nh\u1ea5t \u0111\u1ec3 \u0111\u00e1nh gi\u00e1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 website. Th\u00f4ng qua \u0111\u1ed9 tr\u1ec5 \u0111\u1ea7u ti\u00ean m\u00e0 ng\u01b0\u1eddi d\u00f9ng g\u1eb7p ph\u1ea3i khi t\u01b0\u01a1ng t\u00e1c, ng\u01b0\u1eddi ta \u01b0\u1edbc t\u00ednh \u0111\u01b0\u1ee3c nh\u1ea5t \u0111\u1ecbnh m\u1ee9c \u0111\u1ed9 h\u00e0i l\u00f2ng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng.","breadcrumb":{"@id":"https:\/\/kiencang.net\/first-input-delay\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/first-input-delay\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/first-input-delay\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"First Input Delay (FID) l\u00e0 g\u00ec?"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/15133"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=15133"}],"version-history":[{"count":2,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/15133\/revisions"}],"predecessor-version":[{"id":24331,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/15133\/revisions\/24331"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/21370"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=15133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=15133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=15133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}