{"id":15090,"date":"2020-03-12T22:34:35","date_gmt":"2020-03-12T15:34:35","guid":{"rendered":"https:\/\/kiencang.net\/?p=15090"},"modified":"2023-07-23T20:17:29","modified_gmt":"2023-07-23T13:17:29","slug":"tai-thich-ung","status":"publish","type":"post","link":"https:\/\/kiencang.net\/tai-thich-ung\/","title":{"rendered":"T\u1ea3i th\u00edch \u1ee9ng (Adaptive loading): c\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 web tr\u00ean c\u00e1c thi\u1ebft b\u1ecb ch\u1eadm"},"content":{"rendered":"\n<p>V\u00e0i l\u1eddi c\u1ee7a ng\u01b0\u1eddi d\u1ecbch: B\u00e0i vi\u1ebft n\u00e0y ch\u1ee9a nhi\u1ec1u th\u00f4ng tin k\u1ef9 thu\u1eadt, m\u00e0 \u0111\u1ec3 th\u00e0nh th\u1ea1o th\u00ec ch\u00fang ta ph\u1ea3i th\u1ef1c h\u00e0nh \u0111\u00e0o s\u00e2u nhi\u1ec1u. Nh\u01b0ng v\u1ec1 \u00fd t\u01b0\u1edfng c\u0103n b\u1ea3n th\u00ec r\u1ea5t d\u1ec5 hi\u1ec3u. B\u1ea1n ph\u1ea3i n\u1eafm b\u1eaft \u0111\u01b0\u1ee3c th\u00f4ng tin ph\u1ea7n c\u1ee9ng c\u1ee7a thi\u1ebft b\u1ecb (RAM, CPU) v\u00e0 t\u1ed1c \u0111\u1ed9 k\u1ebft n\u1ed1i m\u1ea1ng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng \u0111\u1ec3 \u0111\u01b0a ra \u0111\u01b0\u1ee3c phi\u00ean b\u1ea3n \u1ee9ng d\u1ee5ng web ph\u00f9 h\u1ee3p v\u1edbi c\u00e1c \u0111i\u1ec1u ki\u1ec7n \u0111\u00f3, nh\u1eb1m gi\u00fap tr\u1ea3i nghi\u1ec7m l\u00e0 t\u1ed1t nh\u1ea5t trong kh\u1ea3 n\u0103ng c\u00f3 th\u1ec3.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>Trong b\u00e0i vi\u1ebft n\u00e0y b\u1ea1n s\u1ebd h\u1ecdc c\u00e1ch \u0111\u1ea3m b\u1ea3o r\u1eb1ng:<strong> m\u1ecdi ng\u01b0\u1eddi d\u00f9ng \u0111\u1ec1u nh\u1eadn \u0111\u01b0\u1ee3c tr\u1ea3i nghi\u1ec7m t\u1ed1t nh\u1ea5t c\u00f3 th\u1ec3<\/strong> b\u1eb1ng c\u00e1ch t\u1ed1i \u01b0u h\u00f3a trang c\u1ee7a b\u1ea1n cho ph\u1ea7n c\u1ee9ng c\u1ee5 th\u1ec3 c\u1ee7a thi\u1ebft b\u1ecb v\u00e0 c\u00e1c r\u00e0ng bu\u1ed9c, h\u1ea1n ch\u1ebf c\u1ee7a m\u1ea1ng k\u1ebft n\u1ed1i internet.<\/p>\n\n\n\n<p>Kh\u1ea3 n\u0103ng c\u1ee7a thi\u1ebft b\u1ecb v\u00e0 ch\u1ea5t l\u01b0\u1ee3ng k\u1ebft n\u1ed1i m\u1ea1ng thay \u0111\u1ed5i r\u1ea5t nhi\u1ec1u. C\u00e1c trang l\u00e0m h\u00e0i l\u00f2ng ng\u01b0\u1eddi d\u00f9ng tr\u00ean thi\u1ebft b\u1ecb ph\u1ea7n c\u1ee9ng t\u1ed1t (high-end) c\u00f3 th\u1ec3 kh\u00f4ng s\u1eed d\u1ee5ng \u0111\u01b0\u1ee3c tr\u00ean thi\u1ebft b\u1ecb c\u00f3 ph\u1ea7n c\u1ee9ng y\u1ebfu (low-end). C\u00e1c trang m\u00e0 t\u1ea3i m\u01b0\u1ee3t m\u00e0 tr\u00ean m\u1ea1ng k\u1ebft n\u1ed1i nhanh (c\u00e1p quang) c\u00f3 th\u1ec3 tr\u1edf th\u00e0nh \u00ec \u1ea1ch tr\u00ean m\u1ea1ng ch\u1eadm (c\u00e1p \u0111\u1ed3ng ho\u1eb7c 3G). B\u1ea5t c\u1ee9 ng\u01b0\u1eddi d\u00f9ng n\u00e0o c\u0169ng c\u00f3 th\u1ec3 tr\u1ea3i nghi\u1ec7m website ch\u1eadm ch\u1ea1p, \u0111\u00f3 l\u00e0 l\u00fd do t\u1ea1i sao vi\u1ec7c ph\u00e1t tri\u1ec3n c\u00e1c gi\u1ea3i ph\u00e1p &#8220;m\u1ed9t c\u1ee1 gi\u00e0y ph\u00f9 h\u1ee3p cho t\u1ea5t c\u1ea3 m\u1ecdi ng\u01b0\u1eddi \/ one-size fits all&#8221; c\u00f3 th\u1ec3 kh\u00f4ng ph\u1ea3i l\u00fac n\u00e0o c\u0169ng hi\u1ec7u qu\u1ea3.<\/p>\n\n\n\n<p>Trong h\u1ed9i th\u1ea3o c\u1ee7a <a href=\"https:\/\/www.youtube.com\/watch?v=puUPpVrIRkc\" target=\"_blank\" rel=\"noreferrer noopener\">Chrome Dev Summit<\/a>, Addy Osmani t\u1eeb Google v\u00e0 Nate Schloss t\u1eeb Facebook tr\u00ecnh b\u00e0y m\u1ed9t gi\u1ea3i ph\u00e1p cho v\u1ea5n \u0111\u1ec1 \u0111\u00f3- m\u1ed9t m\u1eabu ph\u00e2n ph\u1ed1i c\u00e1c trang \u0111\u1ec3 n\u00f3 ph\u1ee5c v\u1ee5 t\u1ed1t h\u01a1n c\u00e1c h\u1ea1n ch\u1ebf, r\u00e0ng bu\u1ed9c \u0111a d\u1ea1ng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng. H\u1ecd g\u1ecdi n\u00f3 l\u00e0 <strong>t\u1ea3i th\u00edch \u1ee9ng (adaptive loading)<\/strong>.<\/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-6577d74ce13aa\" ><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-6577d74ce13aa\"  type=\"checkbox\" id=\"item-6577d74ce13aa\"><\/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\/tai-thich-ung\/#Tai_thich_ung_la_gi\" title=\"T\u1ea3i th\u00edch \u1ee9ng l\u00e0 g\u00ec?\">T\u1ea3i th\u00edch \u1ee9ng 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\/tai-thich-ung\/#Cach_trien_khai_tai_thich_ung\" title=\"C\u00e1ch tri\u1ec3n khai t\u1ea3i th\u00edch \u1ee9ng\">C\u00e1ch tri\u1ec3n khai t\u1ea3i th\u00edch \u1ee9ng<\/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\/tai-thich-ung\/#Tai_thich_ung_trong_thuc_hanh\" title=\"T\u1ea3i th\u00edch \u1ee9ng trong th\u1ef1c h\u00e0nh\">T\u1ea3i th\u00edch \u1ee9ng trong th\u1ef1c h\u00e0nh<\/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\/tai-thich-ung\/#Hoc_them_ve_tai_thich_ung\" title=\"H\u1ecdc th\u00eam v\u1ec1 t\u1ea3i th\u00edch \u1ee9ng\">H\u1ecdc th\u00eam v\u1ec1 t\u1ea3i th\u00edch \u1ee9ng<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tai_thich_ung_la_gi\"><\/span>T\u1ea3i th\u00edch \u1ee9ng l\u00e0 g\u00ec?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>T\u1ea3i th\u00edch \u1ee9ng li\u00ean quan \u0111\u1ebfn vi\u1ec7c ph\u00e2n ph\u1ed1i c\u00e1c tr\u1ea3i nghi\u1ec7m kh\u00e1c nhau cho ng\u01b0\u1eddi d\u00f9ng kh\u00e1c nhau d\u1ef1a tr\u00ean c\u00e1c r\u00e0ng bu\u1ed9c m\u1ea1ng v\u00e0 ph\u1ea7n c\u1ee9ng thi\u1ebft b\u1ecb duy\u1ec7t web c\u1ee7a h\u1ecd, c\u1ee5 th\u1ec3:<\/p>\n\n\n\n<ul>\n<li>M\u1ed9t tr\u1ea3i nghi\u1ec7m <strong>l\u00f5i chung<\/strong> cho t\u1ea5t c\u1ea3 ng\u01b0\u1eddi d\u00f9ng (bao g\u1ed3m c\u1ea3 thi\u1ebft b\u1ecb c\u00f3 ph\u1ea7n c\u1ee9ng th\u1ea5p \/ low-end devices).<\/li>\n\n\n\n<li><strong>Th\u00eam d\u1ea7n<\/strong> c\u00e1c t\u00ednh n\u0103ng cao c\u1ea5p, n\u1ebfu m\u1ea1ng v\u00e0 ph\u1ea7n c\u1ee9ng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 x\u1eed l\u00fd \u0111\u01b0\u1ee3c n\u00f3.<\/li>\n<\/ul>\n\n\n\n<p>B\u1eb1ng c\u00e1ch t\u1ed1i \u01b0u h\u00f3a cho c\u00e1c r\u00e0ng bu\u1ed9c m\u1ea1ng v\u00e0 ph\u1ea7n c\u1ee9ng c\u1ee5 th\u1ec3, b\u1ea1n cho ph\u00e9p m\u1ecdi ng\u01b0\u1eddi d\u00f9ng c\u00f3 \u0111\u01b0\u1ee3c tr\u1ea3i nghi\u1ec7m t\u1ed1t nh\u1ea5t c\u00f3 th\u1ec3 cho thi\u1ebft b\u1ecb c\u1ee7a h\u1ecd. C\u0103n ch\u1ec9nh tr\u1ea3i nghi\u1ec7m cho r\u00e0ng bu\u1ed9c c\u1ee7a ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 bao g\u1ed3m:<\/p>\n\n\n\n<ul>\n<li>Ph\u1ee5c v\u1ee5 video v\u00e0 \u1ea3nh ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p tr\u00ean c\u00e1c m\u1ea1ng c\u00f3 k\u1ebft n\u1ed1i ch\u1eadm.<\/li>\n\n\n\n<li>\u0110i\u1ec1u ch\u1ec9nh t\u1ed1c \u0111\u1ed9 khung h\u00ecnh (frame-rate) c\u1ee7a ho\u1ea1t \u1ea3nh (th\u00ed d\u1ee5 video) tr\u00ean c\u00e1c thi\u1ebft b\u1ecb c\u00f3 ph\u1ea7n c\u1ee9ng y\u1ebfu.<\/li>\n\n\n\n<li>Tr\u00e1nh c\u00e1c ho\u1ea1t \u0111\u1ed9ng t\u00ednh to\u00e1n t\u1ed1n k\u00e9m tr\u00ean c\u00e1c thi\u1ebft b\u1ecb ph\u1ea7n c\u1ee9ng y\u1ebfu.<\/li>\n\n\n\n<li>Ch\u1eb7n <a href=\"https:\/\/kiencang.net\/javascript-ben-thu-ba\/\" target=\"_blank\" rel=\"noreferrer noopener\">c\u00e1c JS c\u1ee7a b\u00ean th\u1ee9 ba<\/a> tr\u00ean c\u00e1c thi\u1ebft b\u1ecb ch\u1eadm h\u01a1n.<\/li>\n\n\n\n<li>T\u1ea3i c\u00e1c \u0111o\u1ea1n m\u00e3 JavaScript kh\u00f4ng quan tr\u1ecdng cho m\u1ee5c \u0111\u00edch t\u01b0\u01a1ng t\u00e1c ch\u1ec9 v\u1edbi thi\u1ebft b\u1ecb c\u00f3 CPU nhanh.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cach_trien_khai_tai_thich_ung\"><\/span>C\u00e1ch tri\u1ec3n khai t\u1ea3i th\u00edch \u1ee9ng<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>C\u00e1c t\u00edn hi\u1ec7u b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng cho t\u1ea3i th\u00edch \u1ee9ng bao g\u1ed3m:<\/p>\n\n\n\n<ul>\n<li>M\u1ea1ng (network)- \u0111\u1ec3 tinh ch\u1ec9nh vi\u1ec7c truy\u1ec1n d\u1eef li\u1ec7u cho vi\u1ec7c s\u1eed d\u1ee5ng \u00edt b\u0103ng th\u00f4ng (th\u00f4ng qua <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/NetworkInformation\/effectiveType\"><code>navigator.connection.effectiveType<\/code><\/a>). B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 t\u1eadn d\u1ee5ng c\u00e1c t\u00f9y ch\u1ecdn Data Saver c\u1ee7a ng\u01b0\u1eddi d\u00f9ng (th\u00f4ng qua <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/optimizing-content-efficiency\/save-data#detecting_the_save-data_setting\"><code>navigator.connection.saveData<\/code><\/a>);<\/li>\n\n\n\n<li>B\u1ed9 nh\u1edb (memory)- \u0111\u1ec3 gi\u1ea3m ti\u00eau th\u1ee5 b\u1ed9 nh\u1edb tr\u00ean c\u00e1c thi\u1ebft b\u1ecb c\u00f3 ph\u1ea7n c\u1ee9ng th\u1ea5p (th\u00f4ng qua <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Navigator\/deviceMemory\"><code>navigator.deviceMemory<\/code><\/a>);<\/li>\n\n\n\n<li>S\u1ed1 l\u01b0\u1ee3ng l\u00f5i CPU (CPU core count)- \u0111\u1ec3 h\u1ea1n ch\u1ebf \u1ea3nh h\u01b0\u1edfng c\u1ee7a vi\u1ec7c th\u1ef1c thi JavaScript v\u00e0 gi\u1ea3m logic chuy\u00ean s\u00e2u c\u1ee7a CPU khi thi\u1ebft b\u1ecb kh\u00f4ng th\u1ec3 x\u1eed l\u00fd \u0111\u01b0\u1ee3c ch\u00fang t\u1ed1t (th\u00f4ng qua <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/NavigatorConcurrentHardware\/hardwareConcurrency\"><code>navigator.hardwareConcurrency<\/code><\/a>).<\/li>\n<\/ul>\n\n\n\n<p>C\u00f3 hai v\u1ecb tr\u00ed m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 ra quy\u1ebft \u0111\u1ecbnh v\u1ec1 vi\u1ec7c ph\u1ee5c v\u1ee5 cho ng\u01b0\u1eddi d\u00f9ng c\u00e1i g\u00ec: ph\u00eda m\u00e1y kh\u00e1ch (client) v\u00e0 ph\u00eda m\u00e1y ch\u1ee7 (server). Tr\u00ean m\u00e1y kh\u00e1ch, b\u1ea1n c\u00f3 JavaScript API \u0111\u00e3 \u0111\u01b0\u1ee3c l\u01b0u \u00fd \u1edf tr\u00ean. Tr\u00ean ph\u00eda server, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/optimizing-content-efficiency\/client-hints\" target=\"_blank\" rel=\"noreferrer noopener\">client hints<\/a> \u0111\u1ec3 hi\u1ec3u s\u00e2u h\u01a1n v\u1ec1 kh\u1ea3 n\u0103ng thi\u1ebft b\u1ecb c\u1ee7a ng\u01b0\u1eddi d\u00f9ng &amp; m\u1ea1ng m\u00e0 h\u1ecd \u0111ang k\u1ebft n\u1ed1i \u0111\u1ebfn.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">T\u1ea3i th\u00edch \u1ee9ng trong React<\/h3>\n\n\n\n<p><a href=\"https:\/\/github.com\/GoogleChromeLabs\/react-adaptive-hooks\" target=\"_blank\" rel=\"noreferrer noopener\">React Adaptive Loading Hooks &amp; Utilities<\/a> l\u00e0 m\u1ed9t g\u00f3i cho h\u1ec7 sinh th\u00e1i React l\u00e0m cho vi\u1ec7c th\u00edch \u1ee9ng website c\u1ee7a b\u1ea1n cho c\u00e1c thi\u1ebft b\u1ecb c\u00f3 ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p d\u1ec5 d\u00e0ng h\u01a1n. N\u00f3 bao g\u1ed3m:<\/p>\n\n\n\n<ul>\n<li>Hook <em>useNetworkStatus()<\/em> cho th\u00edch \u1ee9ng d\u1ef1a tr\u00ean tr\u1ea1ng th\u00e1i m\u1ea1ng (<code>slow-2g<\/code>,&nbsp;<code>2g<\/code>,&nbsp;<code>3g<\/code>, ho\u1eb7c&nbsp;<code>4g<\/code>). <\/li>\n\n\n\n<li>Hook <em>useSaveData()<\/em> cho vi\u1ec7c th\u00edch \u1ee9ng d\u1ef1a tr\u00ean t\u00f9y ch\u1ecdn DataSaver c\u1ee7a ng\u01b0\u1eddi d\u00f9ng.<\/li>\n\n\n\n<li>Hook <em>useHardwareConcurrency()<\/em> cho vi\u1ec7c th\u00edch \u1ee9ng d\u1ef1a tr\u00ean s\u1ed1 l\u01b0\u1ee3ng l\u00f5i x\u1eed l\u00fd logic CPU tr\u00ean thi\u1ebft b\u1ecb c\u1ee7a ng\u01b0\u1eddi d\u00f9ng.<\/li>\n\n\n\n<li>Hook <em>useMemoryStatus()<\/em> cho th\u00edch \u1ee9ng d\u1ef1a tr\u00ean b\u1ed9 nh\u1edb (RAM) thi\u1ebft b\u1ecb c\u1ee7a ng\u01b0\u1eddi d\u00f9ng.<\/li>\n<\/ul>\n\n\n\n<p>M\u1ed7i hook ch\u1ea5p nh\u1eadn m\u1ed9t \u0111\u1ed1i s\u1ed1 t\u00f9y ch\u1ecdn \u0111\u1ec3 \u0111\u1eb7t gi\u00e1 tr\u1ecb ban \u0111\u1ea7u. T\u00f9y ch\u1ecdn n\u00e0y l\u00e0 h\u1eefu d\u1ee5ng trong hai k\u1ecbch b\u1ea3n: khi tr\u00ecnh duy\u1ec7t c\u1ee7a ng\u01b0\u1eddi d\u00f9ng kh\u00f4ng h\u1ed7 tr\u1ee3 API li\u00ean quan v\u00e0 cho vi\u1ec7c render ph\u00eda m\u00e1y ch\u1ee7 khi m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng d\u1eef li\u1ec7u client hint \u0111\u1ec3 thi\u1ebft l\u1eadp gi\u00e1 tr\u1ecb ban \u0111\u1ea7u tr\u00ean m\u00e1y ch\u1ee7. L\u1ea5y v\u00ed d\u1ee5, hook useNetworkStatus() c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng gi\u00e1 tr\u1ecb ban \u0111\u1ea7u \u0111\u01b0\u1ee3c truy\u1ec1n t\u1eeb client hint cho render ph\u00eda m\u00e1y ch\u1ee7, khi th\u1ef1c thi tr\u00ean m\u00e1y kh\u00e1ch, t\u1ef1 c\u1eadp nh\u1eadt n\u1ebfu lo\u1ea1i m\u1ea1ng hi\u1ec7u qu\u1ea3 thay \u0111\u1ed5i.<\/p>\n\n\n\n<p>React Adaptive Loading Hooks &amp; Utilities \u0111\u01b0\u1ee3c tri\u1ec3n khai th\u00f4ng qua vi\u1ec7c s\u1eed d\u1ee5ng web platform APIs (<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Network_Information_API\">Th\u00f4ng tin v\u1ec1 m\u1ea1ng<\/a>,<a href=\"https:\/\/developers.google.com\/web\/updates\/2017\/12\/device-memory\"> b\u1ed9 nh\u1edb thi\u1ebft b\u1ecb<\/a> v\u00e0 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/NavigatorConcurrentHardware\/hardwareConcurrency\">ph\u1ea7n c\u1ee9ng<\/a>). B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00f9ng c\u00e1c APIs \u0111\u1ec3 \u00e1p d\u1ee5ng cho c\u00e1c \u00fd t\u01b0\u1edfng t\u1ea3i th\u00edch \u1ee9ng cho c\u00e1c framework v\u00e0 th\u01b0 vi\u1ec7n kh\u00e1c, ch\u1eb3ng h\u1ea1n Angular, Vue, v\u00e0 nh\u1eefng c\u00e1i kh\u00e1c.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tai_thich_ung_trong_thuc_hanh\"><\/span>T\u1ea3i th\u00edch \u1ee9ng trong th\u1ef1c h\u00e0nh<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Ph\u1ea7n n\u00e0y kh\u00e1m ph\u00e1 c\u00e1c b\u1ea3n demo v\u1ec1 c\u00e1ch s\u1eed d\u1ee5ng t\u1ea3i th\u00edch \u1ee9ng v\u00e0 c\u00e1c v\u00ed d\u1ee5 trong th\u1ebf gi\u1edbi th\u1ef1c t\u1eeb c\u00e1c trang nh\u01b0 Facebook, eBay, Tinder, v\u00e0 nh\u1eefng h\u00e3ng kh\u00e1c.<\/p>\n\n\n\n<p>Demo <a href=\"https:\/\/adaptive-loading.web.app\/react-movie-network-aware-loading\/\" target=\"_blank\" rel=\"noreferrer noopener\">React Movie<\/a> cho th\u1ea5y c\u00e1ch <a href=\"https:\/\/github.com\/GoogleChromeLabs\/adaptive-loading\/tree\/master\/react-movie-network-aware-loading\" target=\"_blank\" rel=\"noreferrer noopener\">ph\u1ee5c v\u1ee5 media d\u1ef1a tr\u00ean tr\u1ea1ng th\u00e1i m\u1ea1ng<\/a>. N\u00f3 l\u00e0 m\u1ed9t \u1ee9ng d\u1ee5ng \u0111\u1ec3 duy\u1ec7t phim- hi\u1ec3n th\u1ecb poster, t\u00f3m t\u1eaft v\u00e0 danh s\u00e1ch di\u1ec5n vi\u00ean. D\u1ef1a tr\u00ean lo\u1ea1i k\u1ebft n\u1ed1i hi\u1ec7u qu\u1ea3 c\u1ee7a ng\u01b0\u1eddi d\u00f9ng, n\u00f3 ph\u1ee5c v\u1ee5 poster ch\u1ea5t l\u01b0\u1ee3ng cao tr\u00ean c\u00e1c k\u1ebft n\u1ed1i nhanh v\u00e0 poster ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p tr\u00ean k\u1ebft n\u1ed1i ch\u1eadm.<\/p>\n\n\n\n<p><a href=\"https:\/\/twitter.com\/twittersupport\/status\/1047607749708668928\" target=\"_blank\" rel=\"noreferrer noopener\">Twitter c\u00f3 mode Data Saver<\/a> \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 gi\u1ea3m s\u1ed1 l\u01b0\u1ee3ng d\u1eef li\u1ec7u s\u1eed d\u1ee5ng. Trong mode n\u00e0y, c\u00e1c \u1ea3nh xem tr\u01b0\u1edbc \u0111\u01b0\u1ee3c t\u1ea3i trong \u0111\u1ed9 ph\u00e2n gi\u1ea3i th\u1ea5p v\u00e0 \u1ea3nh l\u1edbn ch\u1ec9 t\u1ea3i khi b\u1ea1n nh\u1ea5n v\u00e0o h\u00ecnh xem tr\u01b0\u1edbc. V\u1edbi t\u00f9y ch\u1ecdn n\u00e0y \u0111\u01b0\u1ee3c b\u1eadt, ng\u01b0\u1eddi d\u00f9ng tr\u00ean iOS v\u00e0 Android ti\u1ebft ki\u1ebfm \u0111\u01b0\u1ee3c 50% d\u1eef li\u1ec7u s\u1eed d\u1ee5ng t\u1eeb \u1ea3nh, v\u00e0 ng\u01b0\u1eddi d\u00f9ng tr\u00ean web ti\u1ebft ki\u1ec7m \u0111\u01b0\u1ee3c 80%. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 demo React s\u1eed d\u1ee5ng hook Save Data \u0111\u1ec3 sao ch\u00e9p d\u00f2ng th\u1eddi gian Twitter. B\u1ea1n h\u00e3y th\u1eed m\u1edf panel Network DevTools v\u00e0 nh\u00ecn v\u00e0o s\u1ef1 kh\u00e1c bi\u1ec7t trong l\u01b0\u1ee3ng d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c truy\u1ec1n \u0111i khi b\u1ea1n cu\u1ed9n chu\u1ed9t v\u1edbi ch\u1ebf \u0111\u1ed9 Save Data \u0111\u01b0\u1ee3c b\u1eadt kh\u00e1c v\u1edbi b\u1ecb t\u1eaft nh\u01b0 th\u1ebf n\u00e0o.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/adaptive-loading-cds-2019\/twitter-save-data.mp4\"><\/video><figcaption class=\"wp-element-caption\">M\u1ed9t screencast so s\u00e1nh cu\u1ed9n chu\u1ed9t timeline tr\u00ean Twitter v\u1edbi ch\u1ebf \u0111\u1ed9 Data Saver b\u1eadt v\u00e0 t\u1eaft. V\u1edbi Data Saver b\u1eadt, ch\u1ec9 \u1ea3nh xem tr\u01b0\u1edbc l\u00e0 \u0111\u01b0\u1ee3c t\u1ea3i v\u00e0 video kh\u00f4ng b\u1eadt t\u1ef1 \u0111\u1ed9ng.<\/figcaption><\/figure>\n\n\n\n<p>eBay t\u00f9y t\u1eebng \u0111i\u1ec1u ki\u1ec7n s\u1ebd t\u1eaft b\u1eadt c\u00e1c t\u00ednh n\u0103ng nh\u01b0 zoom (ph\u00f3ng to \u1ea3nh) khi ph\u1ea7n c\u1ee9ng ho\u1eb7c \u0111i\u1ec1u ki\u1ec7n m\u1ea1ng kh\u00f4ng h\u1ed7 tr\u1ee3 ch\u00fang t\u1ed1t. B\u1ea1n c\u00f3 th\u1ec3 l\u00e0m \u0111\u01b0\u1ee3c \u0111i\u1ec1u n\u00e0y th\u00f4ng qua vi\u1ec7c chia t\u00e1ch m\u00e3 th\u00edch \u1ee9ng (code-splitting) v\u00e0 t\u1ea3i m\u00e3-m\u1ed9t c\u00e1ch \u0111\u1ec3 t\u1ea3i c\u00f3 \u0111i\u1ec1u ki\u1ec7n c\u00e1c th\u00e0nh ph\u1ea7n t\u01b0\u01a1ng t\u00e1c cao h\u01a1n ho\u1eb7c ch\u1ea1y c\u00e1c h\u00e0m t\u00ednh to\u00e1n n\u1eb7ng h\u01a1n tr\u00ean c\u00e1c thi\u1ebft b\u1ecb c\u00f3 ph\u1ea7n c\u1ee9ng t\u1ed1t, trong khi kh\u00f4ng g\u1eedi c\u00e1c \u0111o\u1ea1n m\u00e3 n\u00e0y cho ng\u01b0\u1eddi d\u00f9ng tr\u00ean thi\u1ebft b\u1ecb ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p. B\u1ea1n c\u00f3 th\u1ec3 xem video n\u00e0y t\u1ea1i <a href=\"https:\/\/youtu.be\/puUPpVrIRkc?t=973\" target=\"_blank\" rel=\"noreferrer noopener\">ph\u00fat th\u1ee9 16<\/a> khi Addy cho th\u1ea5y m\u00f4 h\u00ecnh n\u00e0y \u0111\u01b0\u1ee3c tri\u1ec3n khai v\u1edbi <a href=\"https:\/\/web.dev\/code-splitting-suspense\/\" target=\"_blank\" rel=\"noreferrer noopener\">React.lazy() v\u00e0 Suspense<\/a> tr\u00ean <a href=\"https:\/\/github.com\/GoogleChromeLabs\/adaptive-loading\/tree\/master\/react-ebay-network-aware-code-splitting\">trang s\u1ea3n ph\u1ea9m demo<\/a><a href=\"https:\/\/github.com\/GoogleChromeLabs\/adaptive-loading\/tree\/master\/react-ebay-network-aware-code-splitting\" target=\"_blank\" rel=\"noreferrer noopener\"> <\/a><a href=\"https:\/\/github.com\/GoogleChromeLabs\/adaptive-loading\/tree\/master\/react-ebay-network-aware-code-splitting\">c\u1ee7a eBay<\/a>.<\/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\/03\/adaptive-code-splitting.png\" alt=\"Th\u00edch \u1ee9ng chia m\u00e3 v\u00e0 t\u1ea3i m\u00e3\" class=\"wp-image-15104\"\/><\/figure><\/div>\n\n\n<p>P\/S: B\u1ea1n c\u00f3 th\u1ec3 mu\u1ed1n tham kh\u1ea3o th\u00eam <a href=\"https:\/\/kiencang.net\/tang-toc-mua-hang-ebay\/\" target=\"_blank\" rel=\"noreferrer noopener\">c\u00e1c bi\u1ec7n ph\u00e1p t\u1ed1i \u01b0u h\u00f3a to\u00e0n di\u1ec7n c\u1ee7a eBay trong b\u00e0i n\u00e0y<\/a>.<\/p>\n\n\n\n<p>Tinder s\u1eed d\u1ee5ng m\u1ed9t s\u1ed1 m\u1eabu t\u1ea3i th\u00edch \u1ee9ng trong trang web c\u1ee7a n\u00f3 v\u00e0 phi\u00ean b\u1ea3n r\u00fat g\u1ecdn c\u1ee7a \u1ee9ng d\u1ee5ng \u0111\u1ec3 gi\u1eef tr\u1ea3i nghi\u1ec7m t\u1ed1c \u0111\u1ed9 cao cho t\u1ea5t c\u1ea3 m\u1ecdi ng\u01b0\u1eddi. N\u1ebfu ng\u01b0\u1eddi d\u00f9ng \u0111ang \u1edf tr\u00ean m\u1ea1ng k\u1ebft n\u1ed1i ch\u1eadm ho\u1eb7c Data Saver \u0111\u01b0\u1ee3c b\u1eadt, h\u1ecd s\u1ebd v\u00f4 hi\u1ec7u h\u00f3a t\u00ednh n\u0103ng t\u1ef1 \u0111\u1ed9ng b\u1eadt video, gi\u1edbi h\u1ea1n <a href=\"https:\/\/kiencang.net\/link-prefetch\/\" target=\"_blank\" rel=\"noreferrer noopener\">route prefetch<\/a> v\u00e0 gi\u1edbi h\u1ea1n t\u1ea3i \u1ea3nh k\u1ebf ti\u1ebfp trong carousel (b\u0103ng chuy\u1ec1n) \u0111\u1ec3 t\u1ea3i c\u00e1c \u1ea3nh m\u1ed9t l\u1ea7n v\u00e0o th\u1eddi \u0111i\u1ec3m m\u00e0 ng\u01b0\u1eddi d\u00f9ng vu\u1ed1t sang \u1ea3nh k\u1ebf ti\u1ebfp. Sau khi tri\u1ec3n khai c\u00e1c t\u1ed1i \u01b0u h\u00f3a n\u00e0y, h\u1ecd \u0111\u00e3 nh\u1eadn th\u1ea5y c\u1ea3i thi\u1ec7n \u0111\u00e1ng k\u1ec3 trong s\u1ed1 l\u1ea7n vu\u1ed1t trung b\u00ecnh trong c\u00e1c qu\u1ed1c gia nh\u01b0 Indonesia.<\/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\/03\/tinder.png\" alt=\"T\u1ea3i th\u00edch \u1ee9ng tr\u00ean tinder\" class=\"wp-image-15106\"\/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">T\u1ea3i th\u00edch \u1ee9ng trong Facebook<\/h3>\n\n\n\n<p>M\u1ed9t v\u1ea5n \u0111\u1ec1 n\u1ea3y sinh trong t\u1ea3i th\u00edch \u1ee9ng l\u00e0 nh\u00f3m c\u00e1c thi\u1ebft b\u1ecb t\u1eeb cao c\u1ea5p \u0111\u1ebfn th\u1ea5p c\u1ea5p d\u1ef1a tr\u00ean c\u00e1c t\u00edn hi\u1ec7u c\u00f3 s\u1eb5n. Tr\u00ean c\u00e1c thi\u1ebft b\u1ecb di \u0111\u1ed9ng <a href=\"https:\/\/developer.chrome.com\/multidevice\/user-agent\" target=\"_blank\" rel=\"noreferrer noopener\">chu\u1ed7i user-agent (UA)<\/a> cung c\u1ea5p t\u00ean thi\u1ebft b\u1ecb- c\u00e1i cho ph\u00e9p Facebook s\u1eed d\u1ee5ng d\u1eef li\u1ec7u c\u00f4ng khai hi\u1ec7n c\u00f3 v\u1ec1 c\u00e1c \u0111\u1eb7c t\u00ednh c\u1ee7a thi\u1ebft b\u1ecb \u0111\u1ec3 nh\u00f3m c\u00e1c thi\u1ebft b\u1ecb di \u0111\u1ed9ng v\u00e0o c\u00e1c ph\u00e2n nh\u00f3m. Tuy v\u1eady, tr\u00ean c\u00e1c thi\u1ebft b\u1ecb desktop (m\u00e1y b\u00e0n) ch\u1ec9 c\u00f3 th\u00f4ng tin li\u00ean quan \u0111\u1ebfn UA cung c\u1ea5p l\u00e0 h\u1ec7 \u0111i\u1ec1u h\u00e0nh c\u1ee7a thi\u1ebft b\u1ecb.<\/p>\n\n\n\n<p>\u0110\u1ed1i v\u1edbi vi\u1ec7c nh\u00f3m c\u00e1c thi\u1ebft b\u1ecb m\u00e1y b\u00e0n, Facebook log d\u1eef li\u1ec7u t\u1eeb h\u1ec7 \u0111i\u1ec1u h\u00e0nh, l\u00f5i CPU (t\u1eeb navigator.hardwareConcurrency) v\u00e0 b\u1ed9 nh\u1edb RAM (navigator.deviceMemory) trong khi theo d\u00f5i hi\u1ec7u su\u1ea5t c\u1ee7a ch\u00fang. T\u00ecm ki\u1ebfm m\u1ed1i quan h\u1ec7 gi\u1eefa c\u00e1c ki\u1ec3u ph\u1ea7n c\u1ee9ng kh\u00e1c nhau v\u00e0 hi\u1ec7u su\u1ea5t, h\u1ecd ph\u00e2n chia thi\u1ebft b\u1ecb th\u00e0nh n\u0103m nh\u00f3m. V\u1edbi vi\u1ec7c ph\u00e2n nh\u00f3m ph\u1ea7n c\u1ee9ng t\u00edch h\u1ee3p v\u1edbi theo d\u00f5i hi\u1ec7u su\u1ea5t, h\u1ecd c\u00f3 \u0111\u01b0\u1ee3c b\u1ee9c tranh \u0111\u1ea7y \u0111\u1ee7 h\u01a1n v\u1ec1 c\u00e1ch m\u1ecdi ng\u01b0\u1eddi s\u1eed d\u1ee5ng c\u00e1c s\u1ea3n ph\u1ea9m Facebook t\u00f9y thu\u1ed9c v\u00e0o thi\u1ebft b\u1ecb c\u1ee7a ng\u01b0\u1eddi d\u00f9ng v\u00e0 c\u00f3 th\u1ec3 x\u00e1c \u0111\u1ecbnh s\u1ef1 suy gi\u1ea3m d\u1ec5 d\u00e0ng h\u01a1n.<\/p>\n\n\n\n<p>Xem video n\u00e0y t\u1ea1i <a href=\"https:\/\/youtu.be\/puUPpVrIRkc?t=1443\" target=\"_blank\" rel=\"noreferrer noopener\">ph\u00fat th\u1ee9 24<\/a>, khi Nate n\u00f3i v\u1ec1 c\u00e1ch Facebook ti\u1ebfp c\u1eadn ki\u1ec3u thi\u1ebft k\u1ebf nh\u00f3m thi\u1ebft b\u1ecb c\u0169ng nh\u01b0 s\u1eed d\u1ee5ng t\u1ea3i th\u00edch \u1ee9ng cho h\u00ecnh \u1ea3nh \u0111\u1ed9ng v\u00e0 t\u1ea3i JavaScript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Hoc_them_ve_tai_thich_ung\"><\/span>H\u1ecdc th\u00eam v\u1ec1 t\u1ea3i th\u00edch \u1ee9ng<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>T\u1ea3i th\u00edch \u1ee9ng t\u1eadp trung v\u00e0o chuy\u1ec7n thi\u1ebft k\u1ebf website c\u1ee7a b\u1ea1n v\u1edbi s\u1ef1 c\u1ea9n tr\u1ecdng v\u1ec1 ch\u1ea5t l\u01b0\u1ee3ng khi t\u00ednh to\u00e1n. X\u00e2y d\u1ef1ng tr\u1ea3i nghi\u1ec7m l\u00f5i ho\u1ea1t \u0111\u1ed9ng hi\u1ec7u qu\u1ea3 cho t\u1ea5t c\u1ea3 m\u1ecdi ng\u01b0\u1eddi, sau \u0111\u00f3 chuy\u1ec3n \u0111\u1ed5i ho\u1eb7c x\u00e2y th\u00eam c\u00e1c t\u00ednh n\u0103ng l\u00e0m cho n\u00f3 t\u1ed1t h\u01a1n n\u1ebfu ng\u01b0\u1eddi d\u00f9ng \u0111\u1ee7 b\u1ed9 nh\u1edb, CPU, ho\u1eb7c m\u1ea1ng c\u00f3 k\u1ebft n\u1ed1i nhanh. \u0110\u1ec3 h\u1ecdc h\u1ecfi nhi\u1ec1u h\u01a1n v\u1ec1 t\u1ea3i th\u00edch \u1ee9ng, h\u00e3y xem <a href=\"https:\/\/github.com\/GoogleChromeLabs\/adaptive-loading#full-applications\" target=\"_blank\" rel=\"noreferrer noopener\">c\u00e1c b\u1ea3n demo<\/a> v\u00e0 xem bu\u1ed5i n\u00f3i chuy\u1ec7n chuy\u1ec7n t\u1ea1i Chrome Dev Summit:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Adaptive Loading - Improving web performance on slow devices (Chrome Dev Summit 2019)\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/puUPpVrIRkc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><em>(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: <a href=\"https:\/\/web.dev\/adaptive-loading-cds-2019\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Adaptive loading: improving web performance on slow devices<\/a>, t\u00e1c gi\u1ea3: Milica Mihajlija, website: web[.]dev)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>V\u00e0i l\u1eddi c\u1ee7a ng\u01b0\u1eddi d\u1ecbch: B\u00e0i vi\u1ebft n\u00e0y ch\u1ee9a nhi\u1ec1u th\u00f4ng tin k\u1ef9 thu\u1eadt, m\u00e0 \u0111\u1ec3 th\u00e0nh th\u1ea1o th\u00ec ch\u00fang ta ph\u1ea3i th\u1ef1c h\u00e0nh \u0111\u00e0o s\u00e2u nhi\u1ec1u. Nh\u01b0ng v\u1ec1 \u00fd t\u01b0\u1edfng c\u0103n b\u1ea3n th\u00ec r\u1ea5t d\u1ec5 hi\u1ec3u. B\u1ea1n ph\u1ea3i n\u1eafm b\u1eaft \u0111\u01b0\u1ee3c th\u00f4ng tin ph\u1ea7n c\u1ee9ng c\u1ee7a thi\u1ebft b\u1ecb (RAM, CPU) v\u00e0 t\u1ed1c \u0111\u1ed9 k\u1ebft &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>T\u1ea3i th\u00edch \u1ee9ng (Adaptive loading): c\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 web tr\u00ean c\u00e1c thi\u1ebft b\u1ecb ch\u1eadm &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"description\" content=\"\u00dd t\u01b0\u1edfng c\u1ee7a t\u1ea3i th\u00edch \u1ee9ng r\u1ea5t \u0111\u01a1n gi\u1ea3n. B\u1ea1n c\u1ea7n nh\u1eadn bi\u1ebft \u0111\u01b0\u1ee3c kh\u1ea3 n\u0103ng c\u1ee7a ph\u1ea7n c\u1ee9ng v\u00e0 t\u1ed1c \u0111\u1ed9 k\u1ebft n\u1ed1i m\u1ea1ng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng \u0111\u1ec3 \u0111\u01b0a ra phi\u00ean b\u1ea3n web ph\u00f9 h\u1ee3p, qua \u0111\u00f3 ph\u1ee5c v\u1ee5 \u0111\u01b0\u1ee3c t\u1ed1c \u0111\u1ed9 cao nh\u1ea5t c\u00f3 th\u1ec3.\" \/>\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\/tai-thich-ung\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"T\u1ea3i th\u00edch \u1ee9ng (Adaptive loading): c\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 web tr\u00ean c\u00e1c thi\u1ebft b\u1ecb ch\u1eadm &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"\u00dd t\u01b0\u1edfng c\u1ee7a t\u1ea3i th\u00edch \u1ee9ng r\u1ea5t \u0111\u01a1n gi\u1ea3n. B\u1ea1n c\u1ea7n nh\u1eadn bi\u1ebft \u0111\u01b0\u1ee3c kh\u1ea3 n\u0103ng c\u1ee7a ph\u1ea7n c\u1ee9ng v\u00e0 t\u1ed1c \u0111\u1ed9 k\u1ebft n\u1ed1i m\u1ea1ng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng \u0111\u1ec3 \u0111\u01b0a ra phi\u00ean b\u1ea3n web ph\u00f9 h\u1ee3p, qua \u0111\u00f3 ph\u1ee5c v\u1ee5 \u0111\u01b0\u1ee3c t\u1ed1c \u0111\u1ed9 cao nh\u1ea5t c\u00f3 th\u1ec3.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/tai-thich-ung\/\" \/>\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-12T15:34:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-23T13:17:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/adaptive-code-splitting.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=\"9 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"T\u1ea3i th\u00edch \u1ee9ng (Adaptive loading): c\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 web tr\u00ean c\u00e1c thi\u1ebft b\u1ecb ch\u1eadm &#8226; Ki\u1ebfn c\u00e0ng","description":"\u00dd t\u01b0\u1edfng c\u1ee7a t\u1ea3i th\u00edch \u1ee9ng r\u1ea5t \u0111\u01a1n gi\u1ea3n. B\u1ea1n c\u1ea7n nh\u1eadn bi\u1ebft \u0111\u01b0\u1ee3c kh\u1ea3 n\u0103ng c\u1ee7a ph\u1ea7n c\u1ee9ng v\u00e0 t\u1ed1c \u0111\u1ed9 k\u1ebft n\u1ed1i m\u1ea1ng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng \u0111\u1ec3 \u0111\u01b0a ra phi\u00ean b\u1ea3n web ph\u00f9 h\u1ee3p, qua \u0111\u00f3 ph\u1ee5c v\u1ee5 \u0111\u01b0\u1ee3c t\u1ed1c \u0111\u1ed9 cao nh\u1ea5t c\u00f3 th\u1ec3.","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\/tai-thich-ung\/","og_locale":"vi_VN","og_type":"article","og_title":"T\u1ea3i th\u00edch \u1ee9ng (Adaptive loading): c\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 web tr\u00ean c\u00e1c thi\u1ebft b\u1ecb ch\u1eadm &#8226; Ki\u1ebfn c\u00e0ng","og_description":"\u00dd t\u01b0\u1edfng c\u1ee7a t\u1ea3i th\u00edch \u1ee9ng r\u1ea5t \u0111\u01a1n gi\u1ea3n. B\u1ea1n c\u1ea7n nh\u1eadn bi\u1ebft \u0111\u01b0\u1ee3c kh\u1ea3 n\u0103ng c\u1ee7a ph\u1ea7n c\u1ee9ng v\u00e0 t\u1ed1c \u0111\u1ed9 k\u1ebft n\u1ed1i m\u1ea1ng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng \u0111\u1ec3 \u0111\u01b0a ra phi\u00ean b\u1ea3n web ph\u00f9 h\u1ee3p, qua \u0111\u00f3 ph\u1ee5c v\u1ee5 \u0111\u01b0\u1ee3c t\u1ed1c \u0111\u1ed9 cao nh\u1ea5t c\u00f3 th\u1ec3.","og_url":"https:\/\/kiencang.net\/tai-thich-ung\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2020-03-12T15:34:35+00:00","article_modified_time":"2023-07-23T13:17:29+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/adaptive-code-splitting.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":"9 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/tai-thich-ung\/","url":"https:\/\/kiencang.net\/tai-thich-ung\/","name":"T\u1ea3i th\u00edch \u1ee9ng (Adaptive loading): c\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 web tr\u00ean c\u00e1c thi\u1ebft b\u1ecb ch\u1eadm &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2020-03-12T15:34:35+00:00","dateModified":"2023-07-23T13:17:29+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"description":"\u00dd t\u01b0\u1edfng c\u1ee7a t\u1ea3i th\u00edch \u1ee9ng r\u1ea5t \u0111\u01a1n gi\u1ea3n. B\u1ea1n c\u1ea7n nh\u1eadn bi\u1ebft \u0111\u01b0\u1ee3c kh\u1ea3 n\u0103ng c\u1ee7a ph\u1ea7n c\u1ee9ng v\u00e0 t\u1ed1c \u0111\u1ed9 k\u1ebft n\u1ed1i m\u1ea1ng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng \u0111\u1ec3 \u0111\u01b0a ra phi\u00ean b\u1ea3n web ph\u00f9 h\u1ee3p, qua \u0111\u00f3 ph\u1ee5c v\u1ee5 \u0111\u01b0\u1ee3c t\u1ed1c \u0111\u1ed9 cao nh\u1ea5t c\u00f3 th\u1ec3.","breadcrumb":{"@id":"https:\/\/kiencang.net\/tai-thich-ung\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/tai-thich-ung\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/tai-thich-ung\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"T\u1ea3i th\u00edch \u1ee9ng (Adaptive loading): c\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 web tr\u00ean c\u00e1c thi\u1ebft b\u1ecb ch\u1eadm"}]},{"@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\/15090"}],"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=15090"}],"version-history":[{"count":1,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/15090\/revisions"}],"predecessor-version":[{"id":24358,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/15090\/revisions\/24358"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=15090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=15090"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=15090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}