{"id":16876,"date":"2020-04-12T03:20:27","date_gmt":"2020-04-11T20:20:27","guid":{"rendered":"https:\/\/kiencang.net\/?p=16133"},"modified":"2023-07-23T19:50:53","modified_gmt":"2023-07-23T12:50:53","slug":"mo-hinh-rail","status":"publish","type":"post","link":"https:\/\/kiencang.net\/mo-hinh-rail\/","title":{"rendered":"\u0110o \u0111\u1ea1c hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 website b\u1eb1ng m\u00f4 h\u00ecnh RAIL"},"content":{"rendered":"\n<p><strong>RAIL<\/strong> l\u00e0 m\u00f4 h\u00ecnh hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 trang l\u1ea5y <strong>ng\u01b0\u1eddi d\u00f9ng l\u00e0m trung t\u00e2m<\/strong> (user-centric), m\u00f4 h\u00ecnh n\u00e0y chia nh\u1ecf tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng th\u00e0nh c\u00e1c <strong>h\u00e0nh \u0111\u1ed9ng quan tr\u1ecdng<\/strong> (key action). M\u1ee5c ti\u00eau c\u0169ng nh\u01b0 h\u01b0\u1edbng d\u1eabn c\u1ee7a RAIL h\u01b0\u1edbng \u0111\u1ebfn l\u00e0: gi\u00fap \u0111\u1ee1 c\u00e1c nh\u00e0 l\u1eadp tr\u00ecnh v\u00e0 ng\u01b0\u1eddi thi\u1ebft k\u1ebf \u0111\u1ea3m b\u1ea3o \u0111\u01b0\u1ee3c tr\u1ea3i nghi\u1ec7m c\u1ee7a ng\u01b0\u1eddi d\u00f9ng t\u1ed1t nh\u1ea5t c\u00f3 th\u1ec3 cho t\u1eebng h\u00e0nh \u0111\u1ed9ng c\u1ee7a h\u1ecd (ng\u01b0\u1eddi d\u00f9ng). B\u1eb1ng c\u00e1ch x\u00e2y d\u1ef1ng c\u1ea5u tr\u00fac d\u1ef1a tr\u00ean t\u00ednh to\u00e1n k\u1ef9 l\u01b0\u1ee1ng v\u1ec1 hi\u1ec7u su\u1ea5t, RAIL cho ph\u00e9p c\u00e1c nh\u00e0 thi\u1ebft k\u1ebf v\u00e0 l\u1eadp tr\u00ecnh vi\u00ean t\u1ea1o ra c\u00e1c m\u1ee5c ti\u00eau \u0111\u00e1ng tin c\u1eady, \u0111em l\u1ea1i \u1ea3nh h\u01b0\u1edfng cao nh\u1ea5t cho tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng (user experience).<\/p>\n\n\n\n<p>T\u1eebng \u1ee9ng d\u1ee5ng web c\u00f3 b\u1ed1n kh\u00eda c\u1ea1nh kh\u00e1c nhau trong v\u00f2ng \u0111\u1eddi c\u1ee7a n\u00f3, v\u00e0 hi\u1ec7u su\u1ea5t c\u0169ng nh\u01b0 t\u1ed1c \u0111\u1ed9 kh\u1edbp kh\u00edt v\u1edbi ch\u00fang theo nh\u1eefng c\u00e1ch kh\u00e1c nhau:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/rail-1024x371.png\" alt=\"m\u00f4 h\u00ecnh RAIL\" class=\"wp-image-16135\"\/><figcaption class=\"wp-element-caption\"><strong>H\u00ecnh 1<\/strong>. \u0110\u00e2y l\u00e0 4 ph\u1ea7n trong m\u00f4 h\u00ecnh hi\u1ec7u su\u1ea5t RAIL. Response \/ \u0110\u00e1p \u1ee9ng. Animation \/ Ho\u1ea1t \u1ea3nh (*). Idle \/ Th\u1eddi gian r\u1ea3nh r\u1ed7i. Load \/ T\u1ea3i<\/figcaption><\/figure>\n\n\n\n<p>(*): \u00dd ngh\u0129a c\u1ee7a t\u1eeb ho\u1ea1t \u1ea3nh s\u1ebd \u0111\u01b0\u1ee3c gi\u1ea3i th\u00edch trong ph\u1ea7n t\u01b0\u01a1ng \u1ee9ng, video v\u00e0 \u1ea3nh \u0111\u1ed9ng ch\u1ec9 l\u00e0 m\u1ed9t ph\u1ea7n trong \u0111\u00f3, ho\u1ea1t \u1ea3nh c\u00f3 \u00fd ngh\u0129a r\u1ed9ng v\u00e0 ph\u1ee9c t\u1ea1p h\u01a1n. <\/p>\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-6577d660631e6\" ><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-6577d660631e6\"  type=\"checkbox\" id=\"item-6577d660631e6\"><\/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\/mo-hinh-rail\/#Cac_muc_tieu_va_huong_dan\" title=\"C\u00e1c m\u1ee5c ti\u00eau v\u00e0 h\u01b0\u1edbng d\u1eabn\">C\u00e1c m\u1ee5c ti\u00eau v\u00e0 h\u01b0\u1edbng d\u1eabn<\/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\/mo-hinh-rail\/#Tap_trung_vao_nguoi_dung\" title=\"T\u1eadp trung v\u00e0o ng\u01b0\u1eddi d\u00f9ng\">T\u1eadp trung v\u00e0o ng\u01b0\u1eddi d\u00f9ng<\/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\/mo-hinh-rail\/#Cac_cong_cu_dung_cho_viec_do_dac_RAIL\" title=\"C\u00e1c c\u00f4ng c\u1ee5 d\u00f9ng cho vi\u1ec7c \u0111o \u0111\u1ea1c RAIL\">C\u00e1c c\u00f4ng c\u1ee5 d\u00f9ng cho vi\u1ec7c \u0111o \u0111\u1ea1c RAIL<\/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\/mo-hinh-rail\/#Tong_ket\" title=\"T\u1ed5ng k\u1ebft\">T\u1ed5ng k\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cac_muc_tieu_va_huong_dan\"><\/span>C\u00e1c m\u1ee5c ti\u00eau v\u00e0 h\u01b0\u1edbng d\u1eabn<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Trong b\u1ed1i c\u1ea3nh c\u1ee7a m\u00f4 h\u00ecnh RAIL, thu\u1eadt ng\u1eef <strong>m\u1ee5c ti\u00eau<\/strong> v\u00e0 <strong>h\u01b0\u1edbng d\u1eabn<\/strong> c\u00f3 c\u00e1c ngh\u0129a c\u1ee5 th\u1ec3 sau \u0111\u00e2y:<\/p>\n\n\n\n<ul>\n<li><strong>M\u1ee5c ti\u00eau<\/strong> (Goal). C\u00e1c ch\u1ec9 s\u1ed1 hi\u1ec7u su\u1ea5t quan tr\u1ecdng \u0111\u1ed1i v\u1edbi tr\u1ea3i nghi\u1ec7m c\u1ee7a ng\u01b0\u1eddi d\u00f9ng. V\u00ec nh\u1eadn th\u1ee9c c\u1ee7a con ng\u01b0\u1eddi t\u01b0\u01a1ng \u0111\u1ed1i \u1ed5n \u0111\u1ecbnh, c\u00e1c m\u1ee5c ti\u00eau n\u00e0y kh\u00f4ng c\u00f3 kh\u1ea3 n\u0103ng thay \u0111\u1ed5i trong m\u1ed9t s\u1edbm m\u1ed9t chi\u1ec1u.<\/li>\n\n\n\n<li><strong>H\u01b0\u1edbng d\u1eabn<\/strong> (Guideline). C\u00e1c khuy\u1ebfn ngh\u1ecb gi\u00fap b\u1ea1n \u0111\u1ea1t \u0111\u01b0\u1ee3c m\u1ee5c ti\u00eau \u0111\u1ec1 ra. Ch\u00fang c\u00f3 th\u1ec3 \u0111\u00e1p \u1ee9ng ri\u00eang cho c\u1ea5u h\u00ecnh ph\u1ea7n c\u1ee9ng v\u00e0 \u0111i\u1ec1u ki\u1ec7n k\u1ebft n\u1ed1i m\u1ea1ng hi\u1ec7n t\u1ea1i, v\u00e0 do v\u1eady c\u00f3 th\u1ec3 thay \u0111\u1ed5i theo th\u1eddi gian (change over time).<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tap_trung_vao_nguoi_dung\"><\/span>T\u1eadp trung v\u00e0o ng\u01b0\u1eddi d\u00f9ng<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-table aligncenter\"><table><tbody><tr><td>\u1ede \u0111\u00e2y c\u00e1c n\u1ed7 l\u1ef1c t\u1ed1i \u01b0u hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 c\u1ee7a b\u1ea1n l\u1ea5y ng\u01b0\u1eddi d\u00f9ng l\u00e0m t\u00e2m \u0111i\u1ec3m. B\u1ea3ng b\u00ean d\u01b0\u1edbi m\u00f4 t\u1ea3 c\u00e1c ch\u1ec9 s\u1ed1 quan tr\u1ecdng v\u1ec1 c\u00e1ch ng\u01b0\u1eddi d\u00f9ng nh\u1eadn th\u1ee9c s\u1ef1 tr\u00ec ho\u00e3n v\u1ec1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9.<\/td><td><strong>Nh\u1eadn th\u1ee9c c\u1ee7a ng\u01b0\u1eddi d\u00f9ng v\u1ec1 tr\u00ec ho\u00e3n hi\u1ec7u su\u1ea5t<\/strong><\/td><\/tr><tr><td>0 \u0111\u1ebfn 16ms<\/td><td>Ng\u01b0\u1eddi d\u00f9ng r\u1ea5t gi\u1ecfi trong vi\u1ec7c theo d\u00f5i chuy\u1ec3n \u0111\u1ed9ng (tracking motion), v\u00e0 h\u1ecd kh\u00f3 ch\u1ecbu khi c\u00e1c ho\u1ea1t \u1ea3nh (animation) di\u1ec5n ra kh\u00f4ng m\u01b0\u1ee3t m\u00e0. H\u1ecd nh\u1eadn th\u1ee9c c\u00e1c h\u1ecdat \u1ea3nh l\u00e0 m\u01b0\u1ee3t m\u00e0 mi\u1ec5n l\u00e0 n\u00f3 th\u1ecfa m\u00e3n \u0111i\u1ec1u ki\u1ec7n k\u1ebft xu\u1ea5t \u0111\u01b0\u1ee3c 60 frame m\u1edbi m\u1ed7i gi\u00e2y. T\u01b0\u01a1ng \u0111\u01b0\u01a1ng v\u1edbi t\u1ed1c \u0111\u1ed9 16ms\/frame, bao g\u1ed3m c\u1ea3 th\u1eddi gian c\u1ea7n thi\u1ebft cho tr\u00ecnh duy\u1ec7t \u0111\u1ea9y frame m\u1edbi l\u00ean m\u00e0n h\u00ecnh, do v\u1eady b\u1ea1n n\u00ean \u0111\u1ec3 t\u1ed1c \u0111\u1ed9 t\u1ea1o m\u1ed9t frame c\u1ee7a \u1ee9ng d\u1ee5ng v\u00e0o kho\u1ea3ng 10ms.<\/td><\/tr><tr><td>0 \u0111\u1ebfn 100ms<\/td><td>Ph\u1ea3n h\u1ed3i cho t\u01b0\u01a1ng t\u00e1c c\u1ee7a ng\u01b0\u1eddi d\u00f9ng trong kho\u1ea3ng th\u1eddi gian n\u00e0y v\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u1ea3m th\u1ea5y th\u00edch k\u1ebft qu\u1ea3 ngay l\u1eadp t\u1ee9c. N\u1ebfu d\u00e0i h\u01a1n, k\u1ebft n\u1ed1i gi\u1eefa h\u00e0nh \u0111\u1ed9ng v\u00e0 ph\u1ea3n h\u1ed3i (reaction) s\u1ebd b\u1ecb ph\u00e1 v\u1ee1. <\/td><\/tr><tr><td>100 \u0111\u1ebfn 300ms<\/td><td>Ng\u01b0\u1eddi d\u00f9ng c\u1ea3m th\u1ea5y \u0111\u1ed9 tr\u1ec5 \u1edf m\u1ee9c \u0111\u1ed9 nh\u1eb9.<\/td><\/tr><tr><td>300 \u0111\u1ebfn 1000ms<\/td><td>Trong kho\u1ea3ng n\u00e0y, m\u1ecdi th\u1ee9 \u0111\u01b0\u1ee3c c\u1ea3m nh\u1eadn t\u1ef1 nhi\u00ean v\u00e0 ti\u1ebfn tr\u00ecnh c\u1ee7a t\u00e1c v\u1ee5 \u0111\u01b0\u1ee3c nh\u00ecn nh\u1eadn l\u00e0 li\u00ean t\u1ee5c. V\u1edbi ph\u1ea7n \u0111a ng\u01b0\u1eddi d\u00f9ng web, vi\u1ec7c t\u1ea3i trang ho\u1eb7c v\u00f9ng xem thay \u0111\u1ed5i \u0111\u01b0\u1ee3c coi nh\u01b0 m\u1ed9t t\u00e1c v\u1ee5.<\/td><\/tr><tr><td>1000ms ho\u1eb7c h\u01a1n<\/td><td>Tr\u00ean 1000ms (1 gi\u00e2y), ng\u01b0\u1eddi d\u00f9ng m\u1ea5t t\u1eadp trung v\u00e0o t\u00e1c v\u1ee5 m\u00e0 h\u1ecd \u0111ang th\u1ef1c hi\u1ec7n.<\/td><\/tr><tr><td>10000ms ho\u1eb7c h\u01a1n<\/td><td>Tr\u00ean 10000ms (10 gi\u00e2y), ng\u01b0\u1eddi d\u00f9ng s\u1ebd c\u1ea3m th\u1ea5y b\u1ef1c b\u1ed9i v\u00e0 c\u00f3 kh\u1ea3 n\u0103ng b\u1ecf ngang t\u00e1c v\u1ee5. H\u1ecd c\u00f3 th\u1ec3 c\u00f3 ho\u1eb7c c\u00f3 th\u1ec3 kh\u00f4ng quay tr\u1edf l\u1ea1i sau n\u00e0y.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Nh\u1eadn th\u1ee9c c\u1ee7a ng\u01b0\u1eddi d\u00f9ng v\u1ec1 kh\u00eda c\u1ea1nh tr\u00ec ho\u00e3n hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 l\u00e0 kh\u00e1c nhau, t\u00f9y thu\u1ed9c v\u00e0o \u0111i\u1ec1u ki\u1ec7n k\u1ebft n\u1ed1i m\u1ea1ng v\u00e0 ph\u1ea7n c\u1ee9ng. L\u1ea5y v\u00ed d\u1ee5, tr\u1ea3i nghi\u1ec7m t\u1ea3i trang trong v\u00f2ng 1000ms l\u00e0 h\u1ee3p l\u00fd tr\u00ean tr\u00ean m\u00e1y b\u00e0n c\u00f3 ph\u1ea7n c\u1ee9ng t\u1ed1t v\u1edbi k\u1ebft n\u1ed1i Wifi nhanh, v\u00ec ng\u01b0\u1eddi d\u00f9ng \u0111\u00e3 quen v\u1edbi tr\u1ea3i nghi\u1ec7m t\u1ea3i trang 1000ms. Nh\u01b0ng v\u1edbi thi\u1ebft b\u1ecb di \u0111\u1ed9ng c\u00f3 k\u1ebft n\u1ed1i 3G ch\u1eadm, t\u1ea3i trang trong v\u00f2ng 5000ms l\u00e0 m\u1ee5c ti\u00eau kh\u1ea3 d\u0129 h\u01a1n, v\u00ec ng\u01b0\u1eddi d\u00f9ng di \u0111\u1ed9ng n\u00f3i chung c\u00f3 kh\u1ea3 n\u0103ng ki\u00ean nh\u1eabn h\u01a1n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0110\u00e1p \u1ee9ng: x\u1eed l\u00fd c\u00e1c s\u1ef1 ki\u1ec7n d\u01b0\u1edbi 50ms<\/h3>\n\n\n\n<p><strong>M\u1ee5c ti\u00eau<\/strong>: Ho\u00e0n th\u00e0nh qu\u00e1 tr\u00ecnh chuy\u1ec3n \u0111\u1ed5i \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o b\u1edfi h\u00e0nh vi nh\u1eadp v\u00e0o c\u1ee7a ng\u01b0\u1eddi d\u00f9ng (user input) trong v\u00f2ng 100ms. Ng\u01b0\u1eddi d\u00f9ng m\u1ea5t ph\u1ea7n l\u1edbn th\u1eddi gian ch\u1edd \u0111\u1ee3i c\u1ee7a h\u1ecd tr\u00ean website l\u00e0 cho c\u00e1c ph\u1ea3n h\u1ed3i \u0111\u1ea7u v\u00e0o, ch\u1ee9 kh\u00f4ng ph\u1ea3i ch\u1edd \u0111\u1ee3i trang t\u1ea3i v\u1ec1.<\/p>\n\n\n\n<p><strong>H\u01b0\u1edbng d\u1eabn<\/strong>:<\/p>\n\n\n\n<ul>\n<li>X\u1eed l\u00fd c\u00e1c s\u1ef1 ki\u1ec7n nh\u1eadp v\u00e0o c\u1ee7a ng\u01b0\u1eddi d\u00f9ng trong v\u00f2ng 50ms \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o hi\u1ec3n th\u1ecb ph\u1ea3n h\u1ed3i trong v\u00f2ng 100ms, n\u1ebfu kh\u00f4ng, s\u1ef1 k\u1ebft n\u1ed1i gi\u1eefa h\u00e0nh \u0111\u1ed9ng v\u00e0 ph\u1ea3n h\u1ed3i s\u1ebd b\u1ecb ph\u00e1 v\u1ee1. \u0110i\u1ec1u n\u00e0y \u00e1p d\u1ee5ng cho ph\u1ea7n l\u1edbn c\u00e1c m\u1ee5c nh\u1eadp \u0111\u1ea7u v\u00e0o, ch\u1eb3ng h\u1ea1n nh\u01b0 click v\u00e0o button (n\u00fat b\u1ea5m), b\u1eaft \u0111\u1ea7u ho\u1ea1t \u1ea3nh. \u0110i\u1ec1u n\u00e0y kh\u00f4ng \u00e1p d\u1ee5ng cho vi\u1ec7c k\u00e9o ch\u1ea1m ho\u1eb7c cu\u1ed9n trang.<\/li>\n\n\n\n<li>M\u1eb7c d\u00f9 nghe c\u00f3 v\u1ebb ph\u1ea3n tr\u1ef1c gi\u00e1c, kh\u00f4ng ph\u1ea3i l\u00fac n\u00e0o vi\u1ec7c ph\u1ea3n h\u1ed3i ngay l\u1eadp t\u1ee9c cho m\u1ee5c nh\u1eadp \u0111\u1ea7u v\u00e0o c\u1ee7a ng\u01b0\u1eddi d\u00f9ng c\u0169ng h\u1ee3p l\u00fd. B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng kho\u1ea3ng th\u1eddi gian 100ms n\u00e0y \u0111\u1ec3 th\u1ef1c hi\u1ec7n c\u00e1c c\u00f4ng vi\u1ec7c quan tr\u1ecdng kh\u00e1c. Nh\u01b0ng h\u00e3y c\u1ea9n th\u1eadn, b\u1ea1n \u0111\u1eebng ch\u1eb7n ng\u01b0\u1eddi d\u00f9ng. N\u1ebfu c\u00f3 th\u1ec3, h\u00e3y th\u1ef1c hi\u1ec7n nhi\u1ec7m v\u1ee5 d\u01b0\u1edbi ch\u1ebf \u0111\u1ed9 n\u1ec1n.<\/li>\n\n\n\n<li>V\u1edbi c\u00e1c h\u00e0nh \u0111\u1ed9ng k\u00e9o d\u00e0i h\u01a1n 50ms m\u1edbi ho\u00e0n th\u00e0nh \u0111\u01b0\u1ee3c, lu\u00f4n lu\u00f4n cung c\u1ea5p th\u00f4ng tin ph\u1ea3n h\u1ed3i.<\/li>\n<\/ul>\n\n\n\n<p><strong>50ms hay 100ms?:<\/strong><\/p>\n\n\n\n<p>M\u1ee5c ti\u00eau l\u00e0 ph\u1ea3n h\u1ed3i cho m\u1ee5c nh\u1eadp \u0111\u1ea7u v\u00e0o (input) d\u01b0\u1edbi 100ms, v\u1eady th\u00ec t\u1ea1i sao ch\u1ec9 ti\u00eau c\u1ee7a ch\u00fang ta ch\u1ec9 c\u00f3 50ms m\u00e0 th\u00f4i? \u0110i\u1ec1u n\u00e0y l\u00e0 v\u00ec: th\u01b0\u1eddng s\u1ebd c\u00f3 c\u00e1c c\u00f4ng vi\u1ec7c kh\u00e1c ph\u1ea3i l\u00e0m b\u1ed5 sung v\u00e0o vi\u1ec7c x\u1eed l\u00fd m\u1ee5c nh\u1eadp \u0111\u1ea7u v\u00e0o (input handling), v\u00e0 c\u00f4ng vi\u1ec7c \u0111\u00f3 chi\u1ebfm m\u1ed9t ph\u1ea7n th\u1eddi gian c\u00f3 s\u1eb5n \u0111\u1ec3 \u0111\u01b0a ra \u0111\u00e1p \u1ee9ng cho \u0111\u1ea7u v\u00e0o m\u00e0 ch\u1ea5p nh\u1eadn \u0111\u01b0\u1ee3c. N\u1ebfu m\u1ed9t \u1ee9ng d\u1ee5ng th\u1ef1c hi\u1ec7n c\u00f4ng vi\u1ec7c theo khuy\u1ebfn ngh\u1ecb c\u00e1ch qu\u00e3ng 50ms trong th\u1eddi gian r\u1ea3nh, \u0111i\u1ec1u \u0111\u00f3 c\u00f3 ngh\u0129a l\u00e0 input c\u00f3 th\u1ec3 ph\u1ea3i x\u1ebfp h\u00e0ng \u0111\u1ee3i \u0111\u1ebfn 50ms n\u1ebfu n\u00f3 xu\u1ea5t hi\u1ec7n v\u00e0o \u0111\u00fang l\u00fac b\u1eaft \u0111\u1ea7u idle task (t\u00e1c v\u1ee5 nh\u00e0n r\u1ed7i). \u0110\u1ec3 ph\u00f2ng b\u1ecb cho vi\u1ec7c n\u00e0y, s\u1ebd an to\u00e0n khi gi\u1ea3 \u0111\u1ecbnh l\u00e0 ch\u1ec9 c\u00f2n c\u00f3 50ms kh\u1ea3 d\u1ee5ng cho vi\u1ec7c x\u1eed l\u00fd input trong th\u1ef1c t\u1ebf. Hi\u1ec7u \u1ee9ng n\u00e0y \u0111\u01b0\u1ee3c minh h\u1ecda trong \u0111\u1ed3 h\u00ecnh b\u00ean d\u01b0\u1edbi, cho ch\u00fang ta th\u1ea5y c\u00e1ch ti\u1ebfp nh\u1eadn m\u1ee5c nh\u1eadp \u0111\u1ea7u v\u00e0o trong su\u1ed1t m\u1ed9t t\u00e1c v\u1ee5 nh\u00e0n r\u1ed3i (idle task) \u0111ang x\u1ebfp h\u00e0ng, l\u00e0m gi\u1ea3m \u0111i th\u1eddi gian x\u1eed l\u00fd c\u00f3 s\u1eb5n: <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/rail-dap-ung-1024x512.png\" alt=\"\u0110\u00e1p \u1ee9ng trong RAIL\" class=\"wp-image-16162\"\/><figcaption class=\"wp-element-caption\"><strong>H\u00ecnh 2<\/strong>. C\u00e1ch c\u00e1c t\u00e1c v\u1ee5 nh\u00e0n r\u1ed7i \u1ea3nh h\u01b0\u1edfng l\u00ean ch\u1ec9 ti\u00eau \u0111\u00e1p \u1ee9ng c\u1ee7a m\u1ee5c nh\u1eadp \u0111\u1ea7u v\u00e0o.<\/figcaption><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Ho\u1ea1t \u1ea3nh: t\u1ea1o m\u1ed9t frame trong v\u00f2ng 10ms<\/h3>\n\n\n\n<p><strong>M\u1ee5c ti\u00eau<\/strong>:<\/p>\n\n\n\n<ul>\n<li>T\u1ea1o t\u1eebng frame trong ho\u1ea1t \u1ea3nh trong v\u00f2ng 10ms ho\u1eb7c \u00edt h\u01a1n. V\u1ec1 m\u1eb7t k\u1ef9 thu\u1eadt, m\u1ee9c t\u1ed1i \u0111a cho t\u1eebng frame l\u00e0 16ms (1000ms \/ 60 frame m\u1ed7i gi\u00e2y ~ 16ms), nh\u01b0ng c\u00e1c tr\u00ecnh duy\u1ec7t c\u1ea7n kho\u1ea3ng 6ms \u0111\u1ec3 render (k\u1ebft xu\u1ea5t) t\u1eebng frame, v\u00ec th\u1ebf h\u01b0\u1edbng d\u1eabn \u0111\u01b0a ra con s\u1ed1 10ms m\u1ed7i frame.<\/li>\n\n\n\n<li>H\u01b0\u1edbng \u0111\u1ebfn m\u1ee5c ti\u00eau cho tr\u1ea3i nghi\u1ec7m th\u1ecb gi\u00e1c m\u01b0\u1ee3t m\u00e0 (smoothness). Ng\u01b0\u1eddi d\u00f9ng s\u1ebd \u0111\u1ec3 \u00fd khi t\u1ed1c \u0111\u1ed9 frame thay \u0111\u1ed5i.<\/li>\n<\/ul>\n\n\n\n<p><strong>H\u01b0\u1edbng d\u1eabn<\/strong>:<\/p>\n\n\n\n<ul>\n<li>Trong c\u00e1c \u0111i\u1ec3m \u00e1p l\u1ef1c cao nh\u01b0 ho\u1ea1t \u1ea3nh, quan tr\u1ecdng l\u00e0 kh\u00f4ng l\u00e0m \u0111i\u1ec1u g\u00ec h\u1ebft khi b\u1ea1n c\u00f3 th\u1ec3, v\u00e0 t\u1ed1i thi\u1ec3u h\u00f3a vi\u1ec7c ph\u1ea3i l\u00e0m khi b\u1ea1n kh\u00f4ng th\u1ec3. B\u1ea5t c\u1ee9 khi n\u00e0o c\u00f3 th\u1ec3, s\u1eed d\u1ee5ng ph\u1ea3n h\u1ed3i 100ms \u0111\u1ec3 t\u00ednh to\u00e1n tr\u01b0\u1edbc c\u00f4ng vi\u1ec7c quan tr\u1ecdng, n\u1eb7ng nh\u1ecdc v\u00ec th\u1ebf m\u00e0 b\u1ea1n c\u00f3 kh\u1ea3 n\u0103ng t\u1ed1i \u0111a h\u00f3a c\u01a1 h\u1ed9i \u0111\u1ea1t \u0111\u01b0\u1ee3c 60fps.<\/li>\n\n\n\n<li>B\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o th\u00eam c\u00e1c b\u00e0i vi\u1ebft v\u1ec1 hi\u1ec7u su\u1ea5t k\u1ebft xu\u1ea5t v\u1edbi nhi\u1ec1u chi\u1ebfn l\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a ho\u1ea1t \u1ea3nh kh\u00e1c nhau.<\/li>\n\n\n\n<li>Nh\u1eadn bi\u1ebft t\u1ea5t c\u1ea3 c\u00e1c ki\u1ec3u ho\u1ea1t \u1ea3nh kh\u00e1c nhau. Ho\u1ea1t \u1ea3nh kh\u00f4ng ch\u1ec9 l\u00e0 hi\u1ec7u \u1ee9ng UI (giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng) l\u1ea1 m\u1eaft. C\u00e1c t\u01b0\u01a1ng t\u00e1c sau \u0111\u1ec1u c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c xem l\u00e0 ho\u1ea1t \u1ea3nh: <em>(1) Ho\u1ea1t \u1ea3nh hi\u1ec3n th\u1ecb<\/em>. Ch\u1eb3ng h\u1ea1n nh\u01b0 c\u00e1c ch\u1ec9 th\u1ecb v\u00e0o ra, tweens v\u00e0 t\u1ea3i; (<em>2) Cu\u1ed9n<\/em>. \u0110i\u1ec1u n\u00e0y bao g\u1ed3m flinging, ngh\u0129a l\u00e0 khi ng\u01b0\u1eddi d\u00f9ng cu\u1ed9n trang, v\u00e0 \u0111\u1ec3 \u0111\u00f3, r\u1ed3i trang ti\u1ebfp t\u1ee5c cu\u1ed9n; <em>(3) K\u00e9o th\u1ea3<\/em>. Ho\u1ea1t \u1ea3nh th\u01b0\u1eddng theo sau c\u00e1c t\u01b0\u01a1ng t\u00e1c c\u1ee7a ng\u01b0\u1eddi d\u00f9ng, ch\u1eb3ng h\u1ea1n nh\u01b0 xoay b\u1ea3n \u0111\u1ed3 ho\u1eb7c ch\u1ee7 \u0111\u1ed9ng d\u00f9ng hai ng\u00f3n tay m\u1edf r\u1ed9ng ra (pinching) \u0111\u1ec3 zoom (ph\u00f3ng to).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Idle (nh\u00e0n r\u1ed7i): T\u1ed1i \u0111a th\u1eddi gian nh\u00e0n r\u1ed7i<\/h3>\n\n\n\n<p><strong>M\u1ee5c ti\u00eau<\/strong>: T\u1ed1i \u0111a h\u00f3a th\u1eddi gian nh\u00e0n r\u1ed7i \u0111\u1ec3 t\u0103ng kh\u1ea3 n\u0103ng cho th\u1eddi gian ph\u1ea3n h\u1ed3i c\u1ee7a trang \u0111\u00e1p \u1ee9ng m\u1ee5c nh\u1eadp c\u1ee7a ng\u01b0\u1eddi d\u00f9ng \u1edf m\u1ed1c d\u01b0\u1edbi 50ms.<\/p>\n\n\n\n<p><strong>H\u01b0\u1edbng d\u1eabn<\/strong>:<\/p>\n\n\n\n<ul>\n<li>S\u1eed d\u1ee5ng th\u1eddi gian nh\u00e0n r\u1ed7i \u0111\u1ec3 ho\u00e0n th\u00e0nh n\u1ed1t c\u00f4ng vi\u1ec7c b\u1ecb tr\u00ec ho\u00e3n. L\u1ea5y v\u00ed d\u1ee5, v\u1edbi l\u1ea7n t\u1ea3i trang \u0111\u1ea7u ti\u00ean (initial page load), b\u1ea1n h\u00e3y t\u1ea3i \u00edt d\u1eef li\u1ec7u nh\u1ea5t c\u00f3 th\u1ec3, sau \u0111\u00f3 s\u1eed d\u1ee5ng th\u1eddi gian r\u1ea3nh r\u1ed7i \u0111\u1ec3 t\u1ea3i ph\u1ea7n c\u00f2n l\u1ea1i.<\/li>\n\n\n\n<li>Th\u1ef1c hi\u1ec7n c\u00f4ng vi\u1ec7c trong th\u1eddi gian r\u1ea3nh r\u1ed7i trong v\u00f2ng 50ms ho\u1eb7c \u00edt h\u01a1n. B\u1ea5t c\u1ee9 t\u00e1c v\u1ee5 n\u00e0o d\u00e0i h\u01a1n th\u00ec b\u1ea1n s\u1ebd g\u1eb7p ph\u1ea3i nguy c\u01a1 can thi\u1ec7p v\u00e0o kh\u1ea3 n\u0103ng ph\u1ea3n h\u1ed3i c\u1ee7a \u1ee9ng d\u1ee5ng cho m\u1ee5c nh\u1eadp c\u1ee7a ng\u01b0\u1eddi d\u00f9ng trong th\u1eddi gian khuy\u1ebfn ngh\u1ecb l\u00e0 50ms.<\/li>\n\n\n\n<li>N\u1ebfu ng\u01b0\u1eddi d\u00f9ng t\u01b0\u01a1ng t\u00e1c v\u1edbi trang trong th\u1eddi gian r\u1ea3nh r\u1ed7i, t\u01b0\u01a1ng t\u00e1c c\u1ee7a ng\u01b0\u1eddi d\u00f9ng ph\u1ea3i lu\u00f4n lu\u00f4n c\u00f3 \u0111\u01b0\u1ee3c \u01b0u ti\u00ean cao nh\u1ea5t v\u00e0 \u0111\u01b0\u1ee3c ph\u00e9p l\u00e0m gi\u00e1n \u0111o\u1ea1n c\u00f4ng vi\u1ec7c d\u00e0nh cho th\u1eddi gi\u1ea3n r\u1ea3nh r\u1ed7i (idle time work).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Load (t\u1ea3i): Ph\u00e2n ph\u1ed1i n\u1ed9i dung v\u00e0 gi\u00fap trang c\u00f3 kh\u1ea3 n\u0103ng t\u01b0\u01a1ng t\u00e1c trong v\u00f2ng t\u1eeb 5 gi\u00e2y tr\u1edf xu\u1ed1ng<\/h3>\n\n\n\n<p>Khi trang c\u1ee7a b\u1ea1n ch\u1eadm, s\u1ef1 t\u1eadp trung ch\u00fa \u00fd c\u1ee7a ng\u01b0\u1eddi d\u00f9ng s\u1ebd b\u1ecb ph\u00e2n t\u00e1n, v\u00e0 ng\u01b0\u1eddi d\u00f9ng xem nhi\u1ec7m v\u1ee5 \u0111ang th\u1ef1c hi\u1ec7n coi nh\u01b0 h\u1ecfng. C\u00e1c website t\u1ea3i nhanh c\u00f3 session trung b\u00ecnh d\u00e0i h\u01a1n, t\u1ef7 l\u1ec7 bounce rate (tho\u00e1t trang sau l\u1ea7n \u0111\u1ea7u truy c\u1eadp) th\u1ea5p h\u01a1n, v\u00e0 qu\u1ea3ng c\u00e1o c\u00f3 kh\u1ea3 n\u0103ng \u0111\u01b0\u1ee3c xem nhi\u1ec1u h\u01a1n. B\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u th\u00eam c\u00e1c b\u00e0i vi\u1ebft v\u1ec1 c\u00e1ch \u0111\u1ed9 tr\u1ec5 tr\u00ean di \u0111\u1ed9ng \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn doanh thu c\u1ee7a c\u00e1c nh\u00e0 xu\u1ea5t b\u1ea3n.<\/p>\n\n\n\n<p><strong>M\u1ee5c ti\u00eau<\/strong>:<\/p>\n\n\n\n<ul>\n<li>T\u1ed1i \u01b0u h\u00f3a t\u1ed1c \u0111\u1ed9 t\u1ea3i <a href=\"https:\/\/kiencang.net\/tai-thich-ung\/\" target=\"_blank\" rel=\"noreferrer noopener\">t\u01b0\u01a1ng \u1ee9ng v\u1edbi kh\u1ea3 n\u0103ng c\u1ee7a thi\u1ebft b\u1ecb v\u00e0 k\u1ebft n\u1ed1i m\u1ea1ng<\/a> m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u1ee7a b\u1ea1n s\u1eed d\u1ee5ng \u0111\u1ec3 truy c\u1eadp trang web. Hi\u1ec7n t\u1ea1i m\u1ee5c ti\u00eau h\u1ee3p l\u00fd cho l\u1ea7n t\u1ea3i \u0111\u1ea7u ti\u00ean l\u00e0 vi\u1ec7c t\u1ea3i trang c\u0169ng nh\u01b0 kh\u1ea3 n\u0103ng t\u01b0\u01a1ng t\u00e1c ph\u1ea3i th\u1ef1c hi\u1ec7n \u0111\u01b0\u1ee3c trong v\u00f2ng t\u1eeb 5 gi\u00e2y tr\u1edf xu\u1ed1ng tr\u00ean thi\u1ebft b\u1ecb di \u0111\u1ed9ng t\u1ea7m trung v\u1edbi k\u1ebft n\u1ed1i 3G ch\u1eadm. Nh\u01b0ng b\u1ea1n c\u1ea7n \u00fd th\u1ee9c r\u1eb1ng c\u00e1c m\u1ee5c ti\u00eau n\u00e0y c\u00f3 th\u1ec3 thay \u0111\u1ed5i theo th\u1eddi gian.<\/li>\n\n\n\n<li>V\u1edbi l\u1ea7n t\u1ea3i k\u1ebf ti\u1ebfp (\u00edt nhi\u1ec1u \u0111\u00e3 \u0111\u01b0\u1ee3c <a href=\"https:\/\/kiencang.net\/http-caching-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">cache s\u1eb5n m\u1ed9t s\u1ed1 t\u00e0i nguy\u00ean<\/a>), m\u1ee5c ti\u00eau c\u1ea7n nh\u1eafm \u0111\u1ebfn h\u1ee3p l\u00fd l\u00e0 t\u1ea3i trang d\u01b0\u1edbi 2 gi\u00e2y. Nh\u01b0ng m\u1ee5c ti\u00eau n\u00e0y c\u0169ng c\u00f3 th\u1ec3 thay \u0111\u1ed5i theo th\u1eddi gian.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/cac-chi-so-toc-do-1024x507.png\" alt=\"c\u00e1c ch\u1ec9 s\u1ed1 t\u1ed1c \u0111\u1ed9\" class=\"wp-image-16140\"\/><figcaption class=\"wp-element-caption\"><strong>H\u00ecnh 3<\/strong>. T\u1eebng ch\u1ec9 s\u1ed1 t\u1ed1c \u0111\u1ed9 \u0111\u1ea1i di\u1ec7n cho m\u1ed9t pha kh\u00e1c nhau trong nh\u1eadn th\u1ee9c c\u1ee7a ng\u01b0\u1eddi d\u00f9ng v\u1ec1 tr\u1ea3i nghi\u1ec7m t\u1ea3i trang<\/figcaption><\/figure>\n\n\n\n<p><strong>H\u01b0\u1edbng d\u1eabn<\/strong>:<\/p>\n\n\n\n<ul>\n<li>Ki\u1ec3m tra hi\u1ec7u su\u1ea5t trang c\u1ee7a b\u1ea1n tr\u00ean thi\u1ebft b\u1ecb di \u0111\u1ed9ng v\u00e0 k\u1ebft n\u1ed1i m\u1ea1ng chi\u1ebfm \u0111a s\u1ed1. N\u1ebfu doanh nghi\u1ec7p c\u1ee7a b\u1ea1n c\u00f3 th\u00f4ng tin v\u1ec1 thi\u1ebft b\u1ecb v\u00e0 m\u1ea1ng k\u1ebft n\u1ed1i c\u1ee5 th\u1ec3 m\u00e0 ng\u01b0\u1eddi d\u00f9ng s\u1eed d\u1ee5ng, b\u1ea1n c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p ch\u00fang \u0111\u1ec3 th\u1ebft l\u1eadp m\u1ee5c ti\u00eau hi\u1ec7u su\u1ea5t t\u1ea3i trang cho ri\u00eang m\u00ecnh. N\u1ebfu kh\u00f4ng, <a href=\"https:\/\/www.gsma.com\/mobileeconomy\/\" target=\"_blank\" rel=\"noreferrer noopener\">Mobile Economy 2017<\/a> g\u1ee3i \u00fd r\u1eb1ng m\u1ed9t l\u1ef1a ch\u1ecdn c\u0103n b\u1ea3n c\u00f3 t\u00ednh to\u00e0n c\u1ea7u l\u00e0 thi\u1ebft b\u1ecb di \u0111\u1ed9ng Android t\u1ea7m trung, ch\u1eb3ng h\u1ea1n nh\u01b0 Moto G4, v\u00e0 k\u1ebft n\u1ed1i m\u1ea1ng 3G ch\u1eadm (\u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a l\u00e0 400ms RTT v\u00e0 t\u1ed1c \u0111\u1ed9 400kp\/s). K\u1ebft h\u1ee3p n\u00e0y c\u00f3 s\u1eb5n tr\u00ean WebPageTest.<\/li>\n\n\n\n<li>C\u1ea7n ph\u1ea3i ghi nh\u1edb r\u1eb1ng, m\u1eb7c d\u00f9 c\u00e1c thi\u1ebft b\u1ecb di \u0111\u1ed9ng \u0111i\u1ec3n h\u00ecnh c\u1ee7a ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 n\u00f3i r\u1eb1ng n\u00f3 \u0111ang tr\u00ean k\u1ebft n\u1ed1i 2G, 3G, ho\u1eb7c 4G, nh\u01b0ng trong th\u1ef1c t\u1ebf <em>t\u1ed1c \u0111\u1ed9 k\u1ebft n\u1ed1i hi\u1ec7u qu\u1ea3 (effective coneection speed)<\/em> th\u01b0\u1eddng th\u1ea5p h\u01a1n \u0111\u00e1ng k\u1ec3, nguy\u00ean nh\u00e2n l\u00e0 do c\u00e1c g\u00f3i d\u1eef li\u1ec7u b\u1ecb m\u1ea5t v\u00e0 m\u1ea1ng bi\u1ebfn thi\u00ean thay \u0111\u1ed5i. <\/li>\n\n\n\n<li>T\u1eadp trung v\u00e0o vi\u1ec7c t\u1ed1i \u01b0u h\u00f3a cho <a href=\"https:\/\/kiencang.net\/duong-dan-hien-thi-trang-quan-trong\/\" target=\"_blank\" rel=\"noreferrer noopener\">tuy\u1ebfn hi\u1ec3n th\u1ecb quan tr\u1ecdng<\/a> \u0111\u1ec3 ng\u0103n qu\u00e1 tr\u00ecnh render (k\u1ebft xu\u1ea5t) b\u1ecb ch\u1eb7n.<\/li>\n\n\n\n<li>B\u1ea1n kh\u00f4ng c\u1ea7n ph\u1ea3i t\u1ea3i m\u1ecdi th\u1ee9 trong v\u00f2ng d\u01b0\u1edbi 5 gi\u00e2y \u0111\u1ec3 t\u1ea1o ra nh\u1eadn th\u1ee9c cho ng\u01b0\u1eddi d\u00f9ng l\u00e0 qu\u00e1 tr\u00ecnh t\u1ea3i \u0111\u00e3 ho\u00e0n t\u1ea5t. H\u00e3y th\u1ef1c hi\u1ec7n ki\u1ec3u render l\u0169y ti\u1ebfn v\u00e0 l\u00e0m m\u1ed9t s\u1ed1 vi\u1ec7c kh\u00e1c \u1edf ch\u1ebf \u0111\u1ed9 background (n\u1ec1n). Tr\u00ec ho\u00e3n t\u1ea3i c\u00e1c t\u00e0i nguy\u00ean kh\u00f4ng quan tr\u1ecdng \u0111em \u0111\u1ebfn c\u00e1c kho\u1ea3ng th\u1eddi gian r\u1ea3nh r\u1ed7i nhi\u1ec1u h\u01a1n.<\/li>\n\n\n\n<li>Nh\u1eadn bi\u1ebft c\u00e1c y\u1ebfu t\u1ed1 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn hi\u1ec7u su\u1ea5t t\u1ea3i trang: (1) T\u1ed1c \u0111\u1ed9 m\u1ea1ng v\u00e0 \u0111\u1ed9 tr\u1ec5, (2) Ph\u1ea7n c\u1ee9ng (v\u00ed d\u1ee5 CPU ch\u1eadm h\u01a1n), (3) Gi\u1ea3i ph\u00f3ng b\u1ed9 nh\u1edb cache, (4) S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa L2\/L3 caching, (5) Ph\u00e2n t\u00edch c\u00fa ph\u00e1p JavaScript.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cac_cong_cu_dung_cho_viec_do_dac_RAIL\"><\/span>C\u00e1c c\u00f4ng c\u1ee5 d\u00f9ng cho vi\u1ec7c \u0111o \u0111\u1ea1c RAIL<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>C\u00f3 m\u1ed9t s\u1ed1 c\u00f4ng c\u1ee5 gi\u00fap b\u1ea1n t\u1ef1 \u0111\u1ed9ng \u0111o \u0111\u1ea1c RAIL. S\u1eed d\u1ee5ng c\u00f4ng c\u1ee5 n\u00e0o c\u00f2n t\u00f9y thu\u1ed9c v\u00e0o ki\u1ec3u th\u00f4ng tin m\u00e0 b\u1ea1n c\u1ea7n, v\u00e0 quy tr\u00ecnh l\u00e0m vi\u1ec7c (workflow) m\u00e0 b\u1ea1n \u01b0a th\u00edch:<\/p>\n\n\n\n<ul>\n<li><strong>Chrome DevTools<\/strong>. C\u00f4ng c\u1ee5 d\u00e0nh cho l\u1eadp tr\u00ecnh vi\u00ean \u0111\u01b0\u1ee3c t\u00edch h\u1ee3p s\u1eb5n v\u00e0o b\u00ean trong tr\u00ecnh duy\u1ec7t Google Chrome. Cung c\u1ea5p c\u00e1c ph\u00e2n t\u00edch s\u00e2u tr\u00ean m\u1ecdi kh\u00eda c\u1ea1nh di\u1ec5n ra khi trang c\u1ee7a b\u1ea1n t\u1ea3i ho\u1eb7c ch\u1ea1y.<\/li>\n\n\n\n<li><strong>Lighthouse<\/strong>. \u0110\u01b0\u1ee3c t\u00edch h\u1ee3p v\u00e0o trong Chrome DevTools, d\u01b0\u1edbi d\u1ea1ng Extension cho Chrome, c\u0169ng nh\u01b0 module Node.js, v\u00e0 b\u00ean trong WebPageTest. B\u1ea1n \u0111\u01b0a v\u00e0o URL c\u1ea7n ki\u1ec3m tra, sau \u0111\u00f3 n\u00f3 s\u1ebd gi\u1ea3 l\u1eadp m\u1ed9t thi\u1ebft b\u1ecb t\u1ea7m trung v\u1edbi k\u1ebft n\u1ed1i 3G ch\u1eadm, r\u1ed3i ch\u1ea1y m\u1ed9t lo\u1ea1t c\u00e1c ki\u1ec3m tra tr\u00ean trang, v\u00e0 cu\u1ed1i c\u00f9ng \u0111\u01b0a cho b\u1ea1n m\u1ed9t b\u00e1o c\u00e1o v\u1ec1 hi\u1ec7u su\u1ea5t t\u1ea3i, c\u0169ng nh\u01b0 c\u00e1c g\u1ee3i \u00fd l\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 c\u1ea3i thi\u1ec7n. N\u00f3 c\u0169ng cung c\u1ea5p c\u00e1c ki\u1ec3m tra \u0111\u1ec3 c\u1ea3i thi\u1ec7n kh\u1ea3 n\u0103ng truy c\u1eadp, gi\u00fap trang d\u1ec5 d\u00e0ng b\u1ea3o tr\u00ec h\u01a1n, \u0111\u1ee7 \u0111i\u1ec1u ki\u1ec7n l\u00e0 \u1ee9ng d\u1ee5ng web l\u0169y ti\u1ebfn (Progressive Web App), v\u00e2n v\u00e2n.<\/li>\n\n\n\n<li><strong>WebPageTest<\/strong>. \u0110\u01b0\u1ee3c t\u00edch h\u1ee3p v\u00e0o <a href=\"https:\/\/webpagetest.org\/easy\" target=\"_blank\" rel=\"noreferrer noopener\">webpagetest.org\/easy<\/a>. B\u1ea1n \u0111\u01b0a v\u00e0o URL c\u1ea7n ki\u1ec3m tra, n\u00f3 t\u1ea3i trang tr\u00ean thi\u1ebft b\u1ecb Moto G4 th\u1eadt v\u1edbi k\u1ebft n\u1ed1i 3G ch\u1eadm, v\u00e0 sau \u0111\u00f3 g\u1eedi cho b\u1ea1n b\u1ea3n b\u00e1o c\u00e1o chi ti\u1ebft v\u1ec1 hi\u1ec7u su\u1ea5t t\u1ea3i c\u1ee7a trang. B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 t\u00f9y ch\u1ec9nh \u0111\u1ec3 n\u00f3 t\u00edch h\u1ee3p c\u1ea3 ki\u1ec3m tra Lighthouse v\u00e0o \u0111\u1ea5y.<\/li>\n<\/ul>\n\n\n\n<p>Ph\u1ea7n b\u00ean d\u01b0\u1edbi cung c\u1ea5p cho b\u1ea1n nhi\u1ec1u th\u00f4ng tin h\u01a1n v\u1ec1 c\u00e1ch s\u1eed d\u1ee5ng t\u1eebng c\u00f4ng c\u1ee5 \u0111\u1ec3 \u0111o \u0111\u1ea1c RAIL.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Chrome DevTools<\/h3>\n\n\n\n<p>Panel <strong>Performance<\/strong> l\u00e0 khu v\u1ef1c ch\u00ednh d\u00f9ng \u0111\u1ec3 ph\u00e2n t\u00edch c\u00e1c ch\u1ec9 s\u1ed1 RAIL c\u1ee7a b\u1ea1n. B\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u tr\u01b0\u1edbc c\u00e1c b\u00e0i vi\u1ebft v\u1ec1 ph\u00e2n t\u00edch hi\u1ec7u su\u1ea5t Runtime \u0111\u1ec3 quen thu\u1ed9c v\u1edbi giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng (UI) c\u1ee7a panel <strong>Performance<\/strong>. Quy tr\u00ecnh l\u00e0m vi\u1ec7c v\u00e0 Giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng \u0111\u1ec3 ph\u00e2n t\u00edch hi\u1ec7u su\u1ea5t t\u1ea3i g\u1ea7n nh\u01b0 l\u00e0 t\u01b0\u01a1ng t\u1ef1, s\u1ef1 kh\u00e1c bi\u1ec7t ch\u1ec9 l\u00e0 c\u00e1ch b\u1eaft \u0111\u1ea7u v\u00e0 k\u1ebft th\u00fac ghi (recording).<\/p>\n\n\n\n<p>C\u00e1c t\u00ednh n\u0103ng sau c\u1ee7a DevTools l\u00e0 \u0111\u1eb7c bi\u1ec7t li\u00ean quan:<\/p>\n\n\n\n<ul>\n<li><strong>\u0110i\u1ec1u ch\u1ec9nh CPU (Throttle your CPU)<\/strong> c\u1ee7a b\u1ea1n \u0111\u1ec3 m\u00f4 ph\u1ecfng thi\u1ebft b\u1ecb c\u00f3 c\u1ea5u h\u00ecnh y\u1ebfu (less-powerful device).<\/li>\n\n\n\n<li><strong>\u0110i\u1ec1u ch\u1ec9nh m\u1ea1ng (Throttle the network)<\/strong> \u0111\u1ec3 m\u00f4 ph\u1ecfng c\u00e1c k\u1ebft n\u1ed1i ch\u1eadm h\u01a1n (slower connections).<\/li>\n\n\n\n<li><strong>Xem c\u00e1c ho\u1ea1t \u0111\u1ed9ng c\u1ee7a lu\u1ed3ng ch\u00ednh (View main thread activity)<\/strong> \u0111\u1ec3 xem t\u1eebng s\u1ef1 ki\u1ec7n xu\u1ea5t hi\u1ec7n tr\u00ean lu\u1ed3ng ch\u00ednh trong khi b\u1ea1n ghi l\u1ea1i.<\/li>\n\n\n\n<li><strong>Xem c\u00e1c ho\u1ea1t \u0111\u1ed9ng c\u1ee7a lu\u1ed3ng ch\u00ednh trong m\u1ed9t b\u1ea3ng (View main thread activities in a table)<\/strong> \u0111\u1ec3 s\u1eafp x\u1ebfp c\u00e1c ho\u1ea1t \u0111\u1ed9ng d\u1ef1a tr\u00ean ti\u00eau ch\u00ed c\u00e1i n\u00e0o chi\u1ebfm nhi\u1ec1u th\u1eddi gian nh\u1ea5t.<\/li>\n\n\n\n<li><strong>Ph\u00e2n t\u00edch frame tr\u00ean gi\u00e2y (FPS)<\/strong> \u0111\u1ec3 \u0111o \u0111\u1ea1c xem li\u1ec7u ho\u1ea1t \u1ea3nh c\u1ee7a b\u1ea1n th\u1ef1c s\u1ef1 ch\u1ea1y tr\u01a1n tru hay kh\u00f4ng.<\/li>\n\n\n\n<li><strong>Gi\u00e1m s\u00e1t vi\u1ec7c s\u1eed d\u1ee5ng CPU, k\u00edch th\u01b0\u1edbc heap JS, DOM node, layout tr\u00ean gi\u00e2y v\u00e0 nhi\u1ec1u th\u1ee9 kh\u00e1c n\u1eefa<\/strong> trong th\u1eddi gian th\u1ef1c (real-time) v\u1edbi <strong>Performance Monitor<\/strong>.<\/li>\n\n\n\n<li><strong>H\u00ecnh \u1ea3nh h\u00f3a c\u00e1c y\u00eau c\u1ea7u m\u1ea1ng (Visualize network requests)<\/strong> xu\u1ea5t hi\u1ec7n khi b\u1ea1n b\u1eaft \u0111\u1ea7u ti\u1ebfn h\u00e0nh ghi v\u1edbi khu v\u1ef1c <strong>Network<\/strong>.<\/li>\n\n\n\n<li><strong>Ch\u1ee5p m\u00e0n h\u00ecnh trong khi ghi (Capture screenshots while recording)<\/strong> \u0111\u1ec3 ph\u00e1t l\u1ea1i ch\u00ednh x\u00e1c trang tr\u00f4ng nh\u01b0 th\u1ebf n\u00e0o khi trang t\u1ea3i, ho\u1eb7c m\u1ed9t ho\u1ea1t \u1ea3nh \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t, v\u00e2n v\u00e2n.<\/li>\n\n\n\n<li><strong>Xem c\u00e1c t\u01b0\u01a1ng t\u00e1c (View interactions)<\/strong> \u0111\u1ec3 nhanh ch\u00f3ng x\u00e1c \u0111\u1ecbnh \u0111i\u1ec1u g\u00ec x\u1ea3y ra tr\u00ean trang sau khi m\u1ed9t ng\u01b0\u1eddi d\u00f9ng t\u01b0\u01a1ng t\u00e1c v\u1edbi n\u00f3.<\/li>\n\n\n\n<li><strong>Ph\u00e1t hi\u1ec7n c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 cu\u1ed9n chu\u1ed9t trong th\u1eddi gian th\u1ef1c (Find scroll performance issues in real-time)<\/strong> b\u1eb1ng c\u00e1ch highlight (l\u00e0m n\u1ed5i b\u1eadt) trang b\u1ea5t c\u1ee9 khi n\u00e0o m\u1ed9t tr\u00ecnh l\u1eafng nghe r\u1eafc r\u1ed1i ti\u1ec1m n\u0103ng \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Lighthouse<\/h3>\n\n\n\n<p>N\u1ebfu v\u1eabn ch\u01b0a bi\u1ebft c\u00e1ch c\u00e0i \u0111\u1eb7t v\u00e0 ch\u1ea1y Lighthouse b\u1ea1n h\u00e3y tham kh\u1ea3o c\u00e1c h\u01b0\u1edbng d\u1eabn tr\u00ean m\u1ea1ng.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/hieu-suat-lighthouse-1024x652.jpg\" alt=\"b\u00e1o c\u00e1o hi\u1ec7u su\u1ea5t c\u1ee7a Lighthouse\" class=\"wp-image-16150\"\/><figcaption class=\"wp-element-caption\"><strong>H\u00ecnh 4<\/strong>. M\u1ed9t v\u00ed d\u1ee5 v\u1ec1 b\u00e1o c\u00e1o c\u1ee7a Lighthouse<\/figcaption><\/figure>\n\n\n\n<p>C\u00e1c ki\u1ec3m tra sau \u0111\u1eb7c bi\u1ec7t c\u00f3 li\u00ean quan:<\/p>\n\n\n\n<p><strong>Ph\u1ea3n h\u1ed3i (response)<\/strong>:<\/p>\n\n\n\n<ul>\n<li>\u01af\u1edbc t\u00ednh \u0111\u1ed9 tr\u1ec5 m\u1ee5c nh\u1eadp. \u01af\u1edbc t\u00ednh xem \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n m\u1ea5t bao l\u00e2u \u0111\u1ec3 ph\u1ea3n h\u1ed3i l\u1ea1i t\u01b0\u01a1ng t\u00e1c \u0111\u1ea7u v\u00e0o c\u1ee7a ng\u01b0\u1eddi d\u00f9ng, d\u1ef1a tr\u00ean th\u1eddi gian r\u1ea3nh r\u1ed7i c\u1ee7a lu\u1ed3ng ch\u00ednh.<\/li>\n\n\n\n<li>S\u1eed d\u1ee5ng tr\u00ecnh l\u1eafng nghe s\u1ef1 ki\u1ec7n b\u1ecb \u0111\u1ed9ng \u0111\u1ec3 c\u1ea3i thi\u1ec7n cu\u1ed9n chu\u1ed9t.<\/li>\n<\/ul>\n\n\n\n<p><strong>T\u1ea3i (load)<\/strong>:<\/p>\n\n\n\n<ul>\n<li>\u0110\u0103ng k\u00fd Service Worker. M\u1ed9t service worker c\u00f3 th\u1ec3 cache c\u00e1c t\u00e0i nguy\u00ean ph\u1ed5 bi\u1ebfn tr\u00ean thi\u1ebft b\u1ecb c\u1ee7a ng\u01b0\u1eddi d\u00f9ng, gi\u1ea3m th\u1eddi gian cho vi\u1ec7c t\u00ecm n\u1ea1p c\u00e1c t\u00e0i nguy\u00ean lu\u00e2n chuy\u1ec3n qua m\u1ea1ng.<\/li>\n\n\n\n<li>T\u1ed1c \u0111\u1ed9 t\u1ea3i trang \u0111\u1ee7 nhanh tr\u00ean 3G.<\/li>\n\n\n\n<li>First Meaningful Paint. \u0110o th\u1eddi \u0111i\u1ec3m trang xu\u1ea5t hi\u1ec7n v\u1edbi \u0111\u1ea7y \u0111\u1ee7 \u00fd ngh\u0129a.<\/li>\n\n\n\n<li>First CPU Idle. \u0110\u00e1nh d\u1ea5u th\u1eddi \u0111i\u1ec3m \u0111\u1ea7u ti\u00ean khi m\u00e0 lu\u1ed3ng ch\u00ednh tr\u00ean trang \u0111\u1ee7 r\u1ea3nh r\u1ed7i \u0111\u1ec3 x\u1eed l\u00fd c\u00e1c m\u1ee5c nh\u1eadp \u0111\u1ea7u v\u00e0o.<\/li>\n\n\n\n<li><a href=\"https:\/\/kiencang.net\/time-to-interactive-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Time To Interactive<\/a>. \u0110o th\u1eddi \u0111i\u1ec3m m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 t\u01b0\u01a1ng t\u00e1c \u1ed5n \u0111\u1ecbnh v\u1edbi t\u1ea5t c\u1ea3 ph\u1ea7n t\u1eed tr\u00ean trang.<\/li>\n\n\n\n<li>Ch\u1ec9 s\u1ed1 t\u1ed1c \u0111\u1ed9 nh\u1eadn th\u1ee9c (Perceptual Speed Index)<\/li>\n\n\n\n<li><a href=\"https:\/\/kiencang.net\/loai-bo-tai-nguyen-chan-hien-thi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Gi\u1ea3m c\u00e1c t\u00e0i nguy\u00ean ch\u1eb7n hi\u1ec3n th\u1ecb<\/a><\/li>\n\n\n\n<li>C\u00e1c \u1ea3nh d\u01b0\u1edbi <a href=\"https:\/\/kiencang.net\/man-hinh-dau-tien\/\" target=\"_blank\" rel=\"noreferrer noopener\">m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean<\/a> (offscreen). B\u1ea1n n\u00ean <a href=\"https:\/\/kiencang.net\/lazy-load-anh-va-video\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tr\u00ec ho\u00e3n t\u1ea3i \u1ea3nh<\/a> n\u1eb1m d\u01b0\u1edbi m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean cho \u0111\u1ebfn khi ch\u00fang th\u1ef1c s\u1ef1 c\u1ea7n d\u00f9ng \u0111\u1ebfn.<\/li>\n\n\n\n<li><a href=\"https:\/\/kiencang.net\/kich-thuoc-anh-toi-uu\/\" target=\"_blank\" rel=\"noreferrer noopener\">S\u1eed d\u1ee5ng h\u00ecnh \u1ea3nh c\u00f3 k\u00edch c\u1ee1 ch\u00ednh x\u00e1c<\/a>. B\u1ea1n kh\u00f4ng n\u00ean ph\u1ee5c v\u1ee5 c\u00e1c \u1ea3nh c\u00f3 k\u00edch c\u1ee1 l\u1edbn h\u01a1n \u0111\u00e1ng k\u1ec3 so v\u1edbi k\u00edch c\u1ee1 \u0111\u01b0\u1ee3c k\u1ebft xu\u1ea5t trong viewport (khung nh\u00ecn tr\u00ecnh duy\u1ec7t) c\u1ee7a thi\u1ebft b\u1ecb di \u0111\u1ed9ng.<\/li>\n\n\n\n<li>Chu\u1ed7i c\u00e1c y\u00eau c\u1ea7u quan tr\u1ecdng. H\u00ecnh \u1ea3nh h\u00f3a cho <a href=\"https:\/\/kiencang.net\/duong-dan-hien-thi-trang-quan-trong\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tuy\u1ebfn hi\u1ec3n th\u1ecb quan tr\u1ecdng<\/a> (Critical Rendering Path).<\/li>\n\n\n\n<li>S\u1eed d\u1ee5ng HTTP\/2<\/li>\n\n\n\n<li><a href=\"https:\/\/kiencang.net\/toi-uu-hoa-anh-tren-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">T\u1ed1i \u01b0u h\u00f3a \u1ea3nh<\/a><\/li>\n\n\n\n<li>Cho ph\u00e9p b\u1eadt n\u00e9n v\u0103n b\u1ea3n<\/li>\n\n\n\n<li>Tr\u00e1nh t\u1ea3i tr\u1ecdng m\u1ea1ng qu\u00e1 l\u1edbn<\/li>\n\n\n\n<li><a href=\"https:\/\/kiencang.net\/dom-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">S\u1eed d\u1ee5ng k\u00edch th\u01b0\u1edbc DOM qu\u00e1 l\u1edbn<\/a>. Gi\u1ea3m dung l\u01b0\u1ee3ng m\u1ea1ng b\u1eb1ng c\u00e1ch ch\u1ec9 chuy\u1ec3n \u0111i c\u00e1c node DOM th\u1ef1c s\u1ef1 c\u1ea7n thi\u1ebft cho qu\u00e1 tr\u00ecnh k\u1ebft xu\u1ea5t trang.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">WebPageTest<\/h3>\n\n\n\n<p>Nh\u1eadp URL c\u1ee7a b\u1ea1n v\u00e0o <a href=\"https:\/\/webpagetest.org\/easy\">webpagetest.org\/easy<\/a> \u0111\u1ec3 nh\u1eadn b\u00e1o c\u00e1o v\u1ec1 c\u00e1ch trang t\u1ea3i tr\u00ean thi\u1ebft b\u1ecb Android th\u1ef1c t\u1ea7m trung (real mid-range) v\u1edbi k\u1ebft n\u1ed1i 3G ch\u1eadm.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/bao-cao-wpt-1024x771.png\" alt=\"B\u00e1o c\u00e1o c\u1ee7a WebPageTest\" class=\"wp-image-16148\"\/><figcaption class=\"wp-element-caption\"><strong>H\u00ecnh 5<\/strong>. V\u00ed d\u1ee5 v\u1ec1 b\u00e1o c\u00e1o c\u1ee7a WebPageTest<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tong_ket\"><\/span>T\u1ed5ng k\u1ebft<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>RAIL nh\u01b0 th\u1ea5u k\u00ednh gi\u00fap b\u1ea1n s\u0103m soi v\u00e0o tr\u1ea3i nghi\u1ec7m c\u1ee7a ng\u01b0\u1eddi d\u00f9ng tr\u00ean website nh\u01b0 m\u1ed9t h\u00e0nh tr\u00ecnh bao g\u1ed3m c\u00e1c t\u01b0\u01a1ng t\u00e1c ri\u00eang bi\u1ec7t. Hi\u1ec3u r\u00f5 c\u00e1ch nh\u1eadn th\u1ee9c c\u1ee7a ng\u01b0\u1eddi d\u00f9ng v\u1ec1 trang web c\u1ee7a b\u1ea1n, qua \u0111\u00f3 gi\u00fap thi\u1ebft l\u1eadp c\u00e1c m\u1ee5c ti\u00eau hi\u1ec7u su\u1ea5t c\u00f3 \u1ea3nh h\u01b0\u1edfng l\u1edbn nh\u1ea5t cho tr\u1ea3i nghi\u1ec7m c\u1ee7a ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n<ul>\n<li><strong>T\u1eadp trung v\u00e0o ng\u01b0\u1eddi d\u00f9ng.<\/strong><\/li>\n\n\n\n<li><strong>Ph\u1ea3n h\u1ed3i cho m\u1ee5c nh\u1eadp c\u1ee7a ng\u01b0\u1eddi d\u00f9ng d\u01b0\u1edbi 100ms.<\/strong><\/li>\n\n\n\n<li><strong>T\u1ea1o ra c\u00e1c frame d\u01b0\u1edbi 10ms cho c\u00e1c ho\u1ea1t \u1ea3nh.<\/strong><\/li>\n\n\n\n<li><strong>T\u1ed1i \u0111a h\u00f3a th\u1eddi gian r\u1ea3nh r\u1ed7i c\u1ee7a lu\u1ed3ng ch\u00ednh.<\/strong><\/li>\n\n\n\n<li><strong>T\u1ea3i n\u1ed9i dung c\u00f3 kh\u1ea3 n\u0103ng t\u01b0\u01a1ng t\u00e1c trong v\u00f2ng 5000ms.<\/strong><\/li>\n<\/ul>\n\n\n\n<p><em>(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: <a href=\"https:\/\/web.dev\/rail\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Measure Performance with the RAIL Model<\/a>, c\u00e1c t\u00e1c gi\u1ea3: Meggin Keaney, Addy Osmani, Kayce Basques, Jason Miller, trang: Google Developers)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>RAIL l\u00e0 m\u00f4 h\u00ecnh hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 trang l\u1ea5y ng\u01b0\u1eddi d\u00f9ng l\u00e0m trung t\u00e2m (user-centric), m\u00f4 h\u00ecnh n\u00e0y chia nh\u1ecf tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng th\u00e0nh c\u00e1c h\u00e0nh \u0111\u1ed9ng quan tr\u1ecdng (key action). M\u1ee5c ti\u00eau c\u0169ng nh\u01b0 h\u01b0\u1edbng d\u1eabn c\u1ee7a RAIL h\u01b0\u1edbng \u0111\u1ebfn l\u00e0: gi\u00fap \u0111\u1ee1 c\u00e1c nh\u00e0 l\u1eadp tr\u00ecnh v\u00e0 ng\u01b0\u1eddi thi\u1ebft k\u1ebf \u0111\u1ea3m &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"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>\u0110o \u0111\u1ea1c hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 website b\u1eb1ng m\u00f4 h\u00ecnh RAIL &#8226; Ki\u1ebfn c\u00e0ng<\/title>\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\/mo-hinh-rail\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0110o \u0111\u1ea1c hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 website b\u1eb1ng m\u00f4 h\u00ecnh RAIL &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"RAIL l\u00e0 m\u00f4 h\u00ecnh hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 trang l\u1ea5y ng\u01b0\u1eddi d\u00f9ng l\u00e0m trung t\u00e2m (user-centric), m\u00f4 h\u00ecnh n\u00e0y chia nh\u1ecf tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng th\u00e0nh c\u00e1c h\u00e0nh \u0111\u1ed9ng quan tr\u1ecdng (key action). M\u1ee5c ti\u00eau c\u0169ng nh\u01b0 h\u01b0\u1edbng d\u1eabn c\u1ee7a RAIL h\u01b0\u1edbng \u0111\u1ebfn l\u00e0: gi\u00fap \u0111\u1ee1 c\u00e1c nh\u00e0 l\u1eadp tr\u00ecnh v\u00e0 ng\u01b0\u1eddi thi\u1ebft k\u1ebf \u0111\u1ea3m &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/mo-hinh-rail\/\" \/>\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-04-11T20:20:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-23T12:50:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/rail-1024x371.png\" \/>\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=\"26 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u0110o \u0111\u1ea1c hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 website b\u1eb1ng m\u00f4 h\u00ecnh RAIL &#8226; Ki\u1ebfn c\u00e0ng","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\/mo-hinh-rail\/","og_locale":"vi_VN","og_type":"article","og_title":"\u0110o \u0111\u1ea1c hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 website b\u1eb1ng m\u00f4 h\u00ecnh RAIL &#8226; Ki\u1ebfn c\u00e0ng","og_description":"RAIL l\u00e0 m\u00f4 h\u00ecnh hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 trang l\u1ea5y ng\u01b0\u1eddi d\u00f9ng l\u00e0m trung t\u00e2m (user-centric), m\u00f4 h\u00ecnh n\u00e0y chia nh\u1ecf tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng th\u00e0nh c\u00e1c h\u00e0nh \u0111\u1ed9ng quan tr\u1ecdng (key action). M\u1ee5c ti\u00eau c\u0169ng nh\u01b0 h\u01b0\u1edbng d\u1eabn c\u1ee7a RAIL h\u01b0\u1edbng \u0111\u1ebfn l\u00e0: gi\u00fap \u0111\u1ee1 c\u00e1c nh\u00e0 l\u1eadp tr\u00ecnh v\u00e0 ng\u01b0\u1eddi thi\u1ebft k\u1ebf \u0111\u1ea3m &hellip;","og_url":"https:\/\/kiencang.net\/mo-hinh-rail\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2020-04-11T20:20:27+00:00","article_modified_time":"2023-07-23T12:50:53+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/rail-1024x371.png"}],"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":"26 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/mo-hinh-rail\/","url":"https:\/\/kiencang.net\/mo-hinh-rail\/","name":"\u0110o \u0111\u1ea1c hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 website b\u1eb1ng m\u00f4 h\u00ecnh RAIL &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2020-04-11T20:20:27+00:00","dateModified":"2023-07-23T12:50:53+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/mo-hinh-rail\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/mo-hinh-rail\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/mo-hinh-rail\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"\u0110o \u0111\u1ea1c hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 website b\u1eb1ng m\u00f4 h\u00ecnh RAIL"}]},{"@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\/16876"}],"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=16876"}],"version-history":[{"count":1,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16876\/revisions"}],"predecessor-version":[{"id":24338,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16876\/revisions\/24338"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=16876"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=16876"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=16876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}