{"id":16849,"date":"2020-03-08T04:27:03","date_gmt":"2020-03-07T21:27:03","guid":{"rendered":"https:\/\/kiencang.net\/?p=14863"},"modified":"2023-09-01T12:20:56","modified_gmt":"2023-09-01T05:20:56","slug":"link-prefetch","status":"publish","type":"post","link":"https:\/\/kiencang.net\/link-prefetch\/","title":{"rendered":"Prefetch l\u00e0 g\u00ec? T\u00ecm n\u1ea1p tr\u01b0\u1edbc t\u00e0i nguy\u00ean \u0111\u1ec3 t\u0103ng t\u1ed1c c\u00e1c truy c\u1eadp k\u1ebf ti\u1ebfp c\u1ee7a ng\u01b0\u1eddi d\u00f9ng"},"content":{"rendered":"\n<p>Trong b\u00e0i vi\u1ebft n\u00e0y ch\u00fang ta s\u1ebd c\u00f9ng t\u00ecm hi\u1ec3u v\u1ec1 th\u1ebb <code>rel=prefetch<\/code> d\u00f9ng trong vi\u1ec7c g\u1ee3i \u00fd t\u00e0i nguy\u00ean (resource hints) v\u00e0 c\u00e1ch s\u1eed d\u1ee5ng n\u00f3.<\/p>\n\n\n\n<p>Nghi\u00ean c\u1ee9u ch\u1ec9 ra r\u1eb1ng <a href=\"https:\/\/wpostats.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">t\u1ed1c \u0111\u1ed9 t\u1ea3i trang nhanh h\u01a1n \u0111em \u0111\u1ebfn h\u1ec7 qu\u1ea3 c\u00f3 l\u1ee3i l\u00e0 t\u1ef7 l\u1ec7 chuy\u1ec3n \u0111\u1ed5i cao h\u01a1n<\/a> v\u00e0 t\u1ea5t nhi\u00ean: c\u00e1c tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng t\u1ed1t h\u01a1n. N\u1ebfu b\u1ea1n nh\u00ecn s\u00e2u v\u00e0o chu\u1ed7i truy c\u1eadp c\u1ee7a ng\u01b0\u1eddi d\u00f9ng tr\u00ean website v\u00e0 bi\u1ebft \u0111\u01b0\u1ee3c c\u00e1c trang h\u1ecd c\u00f3 kh\u1ea3 n\u0103ng s\u1ebd truy c\u1eadp ti\u1ebfp, b\u1ea1n c\u00f3 th\u1ec3 c\u1ea3i thi\u1ec7n th\u1eddi gian t\u1ea3i trang c\u1ee7a truy c\u1eadp trong t\u01b0\u01a1ng lai (future navigations) b\u1eb1ng c\u00e1ch t\u1ea3i c\u00e1c t\u00e0i nguy\u00ean cho nh\u1eefng trang \u0111\u00f3 tr\u01b0\u1edbc khi h\u1ecd th\u1ef1c s\u1ef1 click v\u00e0o li\u00ean k\u1ebft (ahead of time).<\/p>\n\n\n\n<p>H\u01b0\u1edbng d\u1eabn n\u00e0y gi\u1ea3i th\u00edch c\u00e1ch th\u1ef1c hi\u1ec7n \u0111i\u1ec1u \u0111\u00f3 v\u1edbi th\u1ebb <code>&lt;link rel=prefetch><\/code>, m\u1ed9t <a href=\"https:\/\/www.w3.org\/TR\/resource-hints\/\">c\u00f4ng c\u1ee5 g\u1ee3i \u00fd t\u00e0i nguy\u00ean<\/a> cho ph\u00e9p b\u1ea1n tri\u1ec3n khai t\u00ecm n\u1ea1p tr\u01b0\u1edbc (prefetching) m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng v\u00e0 hi\u1ec7u qu\u1ea3.<\/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-6577d65d197e3\" ><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-6577d65d197e3\"  type=\"checkbox\" id=\"item-6577d65d197e3\"><\/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\/link-prefetch\/#Cai_thien_dieu_huong_bang_relprefetch\" title=\"C\u1ea3i thi\u1ec7n \u0111i\u1ec1u h\u01b0\u1edbng b\u1eb1ng rel=prefetch\">C\u1ea3i thi\u1ec7n \u0111i\u1ec1u h\u01b0\u1edbng b\u1eb1ng rel=prefetch<\/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\/link-prefetch\/#Cac_truong_hop_ap_dung\" title=\"C\u00e1c tr\u01b0\u1eddng h\u1ee3p \u00e1p d\u1ee5ng\">C\u00e1c tr\u01b0\u1eddng h\u1ee3p \u00e1p d\u1ee5ng<\/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\/link-prefetch\/#Cach_trien_khai_relprefetch\" title=\"C\u00e1ch tri\u1ec3n khai rel=prefetch\">C\u00e1ch tri\u1ec3n khai rel=prefetch<\/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\/link-prefetch\/#Prefetch_kieu_%E2%80%98under_the_hood\" title=\"Prefetch ki\u1ec3u &#8216;under the hood&#8217;\">Prefetch ki\u1ec3u &#8216;under the hood&#8217;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/kiencang.net\/link-prefetch\/#Ket_luan\" title=\"K\u1ebft lu\u1eadn\">K\u1ebft lu\u1eadn<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/kiencang.net\/link-prefetch\/#Bonus\" title=\"Bonus\">Bonus<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cai_thien_dieu_huong_bang_relprefetch\"><\/span>C\u1ea3i thi\u1ec7n \u0111i\u1ec1u h\u01b0\u1edbng b\u1eb1ng rel=prefetch<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Th\u00eam <code>&lt;link rel=prefetch><\/code> v\u00e0o trang web n\u00f3i cho tr\u00ecnh duy\u1ec7t l\u00e0 n\u00f3 h\u00e3y t\u1ea3i to\u00e0n b\u1ed9 c\u00e1c trang, ho\u1eb7c m\u1ed9t s\u1ed1 t\u00e0i nguy\u00ean (ch\u1eb3ng h\u1ea1n nh\u01b0 file JS ho\u1eb7c CSS), m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 c\u1ea7n d\u00f9ng \u0111\u1ebfn trong t\u01b0\u01a1ng lai. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 c\u1ea3i thi\u1ec7n c\u00e1c ch\u1ec9 s\u1ed1 nh\u01b0 <a href=\"https:\/\/kiencang.net\/first-contentful-paint-la-gi\/\">First Contentful Paint<\/a> (th\u1eddi gian ng\u01b0\u1eddi d\u00f9ng nh\u00ecn th\u1ea5y ph\u1ea3n h\u1ed3i b\u1eb1ng h\u00ecnh \u1ea3nh \u0111\u1ea7u ti\u00ean t\u1eeb trang) v\u00e0 <a href=\"https:\/\/kiencang.net\/time-to-interactive-la-gi\/\">Time To Interactive<\/a> (th\u1eddi gian ng\u01b0\u1eddi d\u00f9ng c\u00f3 kh\u1ea3 n\u0103ng t\u01b0\u01a1ng t\u00e1c v\u1edbi website) v\u00e0 c\u00f3 th\u1ec3 gi\u00fap c\u00e1c truy c\u1eadp k\u1ebf ti\u1ebfp (subsequent navigations) hi\u1ec3n th\u1ecb g\u1ea7n nh\u01b0 ngay l\u1eadp t\u1ee9c. <\/p>\n\n\n\n<p>C\u1ea5u tr\u00fac:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"prefetch\" href=\"index.html\" as=\"document\"&gt;<\/code><\/pre>\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\/prefetch-1024x529.png\" alt=\"c\u00e1ch prefetch l\u00e0m vi\u1ec7c\" class=\"wp-image-14864\"\/><figcaption class=\"wp-element-caption\">C\u00e1ch prefetch l\u00e0m vi\u1ec7c<\/figcaption><\/figure><\/div>\n\n\n<p>C\u1ea7n l\u01b0u \u00fd l\u00e0 g\u1ee3i \u00fd <strong>prefetch ti\u00eau th\u1ee5 t\u00e0i nguy\u00ean b\u1ed5 sung m\u00e0 kh\u00f4ng c\u1ea7n thi\u1ebft ngay \u1edf th\u1eddi \u0111i\u1ec3m hi\u1ec7n t\u1ea1i<\/strong>, v\u00ec th\u1ebf k\u1ef9 thu\u1eadt n\u00e0y c\u1ea7n \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng m\u1ed9t c\u00e1ch c\u1ea9n tr\u1ecdng; ch\u1ec9 prefetch c\u00e1c t\u00e0i nguy\u00ean khi b\u1ea1n t\u1ef1 tin r\u1eb1ng ng\u01b0\u1eddi d\u00f9ng s\u1ebd c\u1ea7n \u0111\u1ebfn ch\u00fang trong t\u01b0\u01a1ng lai g\u1ea7n. H\u00e3y c\u1ea9n tr\u1ecdng tr\u00e1nh prefetch khi ng\u01b0\u1eddi d\u00f9ng \u0111ang tr\u00ean m\u1ea1ng c\u00f3 k\u1ebft n\u1ed1i ch\u1eadm. B\u1ea1n c\u00f3 th\u1ec3 ph\u00e1t hi\u1ec7n \u0111i\u1ec1u \u0111\u00f3 b\u1eb1ng <a href=\"https:\/\/web.dev\/adaptive-serving-based-on-network-quality\/\" target=\"_blank\" rel=\"noreferrer noopener\">API Network Information<\/a>.<\/p>\n\n\n\n<p>C\u00f3 nhi\u1ec1u c\u00e1ch x\u00e1c \u0111\u1ecbnh n\u00ean t\u00ecm n\u1ea1p tr\u01b0\u1edbc c\u00e1c li\u00ean k\u1ebft n\u00e0o. C\u00e1ch \u0111\u01a1n gi\u1ea3n nh\u1ea5t l\u00e0 prefetch li\u00ean k\u1ebft \u0111\u1ea7u ti\u00ean ho\u1eb7c v\u00e0i li\u00ean k\u1ebft \u0111\u1ea7u ti\u00ean tr\u00ean trang hi\u1ec7n t\u1ea1i. C\u0169ng c\u00f3 m\u1ed9t s\u1ed1 th\u01b0 vi\u1ec7n gi\u1ea3i quy\u1ebft \u0111i\u1ec1u n\u00e0y th\u00f4ng qua c\u00e1c c\u00e1ch ti\u1ebfp c\u1eadn tinh vi h\u01a1n, c\u00e1c gi\u1ea3i th\u00edch c\u1ee5 th\u1ec3 s\u1ebd \u0111\u01b0\u1ee3c t\u00f4i n\u00f3i \u1edf c\u00e1c ph\u1ea7n ti\u1ebfp theo c\u1ee7a b\u00e0i vi\u1ebft n\u00e0y.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cac_truong_hop_ap_dung\"><\/span>C\u00e1c tr\u01b0\u1eddng h\u1ee3p \u00e1p d\u1ee5ng<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Prefetch c\u00e1c trang k\u1ebf ti\u1ebfp<\/strong><\/h3>\n\n\n\n<p>Prefetch c\u00e1c t\u00e0i li\u1ec7u HTML khi c\u00e1c trang k\u1ebf ti\u1ebfp n\u1eb1m trong kh\u1ea3 n\u0103ng d\u1ef1 \u0111o\u00e1n, v\u00ec th\u1ebf khi ng\u01b0\u1eddi d\u00f9ng click v\u00e0o link, trang \u0111\u01b0\u1ee3c t\u1ea3i g\u1ea7n nh\u01b0 ngay l\u1eadp t\u1ee9c (loaded instanly).<\/p>\n\n\n\n<p>L\u1ea5y v\u00ed d\u1ee5, trong m\u1ed9t trang danh s\u00e1ch s\u1ea3n ph\u1ea9m, b\u1ea1n c\u00f3 th\u1ec3 prefetch c\u00e1c trang s\u1ea3n ph\u1ea9m ph\u1ed5 bi\u1ebfn nh\u1ea5t trong danh s\u00e1ch. Trong m\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p, \u0111i\u1ec1u h\u01b0\u1edbng k\u1ebf ti\u1ebfp r\u1ea5t d\u1ec5 d\u1ef1 \u0111o\u00e1n-v\u00ed d\u1ee5 tr\u00ean trang gi\u1ecf h\u00e0ng, kh\u1ea3 n\u0103ng ng\u01b0\u1eddi d\u00f9ng truy c\u1eadp trang thanh to\u00e1n th\u01b0\u1eddng cao, v\u00e0 n\u00f3 r\u00f5 r\u00e0ng l\u00e0 \u1ee9ng c\u1eed vi\u00ean t\u1ed1t \u0111\u1ec3 prefetch.<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#e9e9e9\"><a href=\"https:\/\/kiencang.net\/tang-toc-mua-hang-ebay\/\">eBay tri\u1ec3n khai prefetch<\/a> cho n\u0103m k\u1ebft qu\u1ea3 \u0111\u1ea7u ti\u00ean tr\u00ean trang t\u00ecm ki\u1ebfm \u0111\u1ec3 t\u0103ng t\u1ed1c th\u1eddi gian t\u1ea3i trang c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c truy c\u1eadp trong t\u01b0\u01a1ng lai v\u00e0 h\u1ecd th\u1ea5y thay \u0111\u1ed5i n\u00e0y \u1ea3nh h\u01b0\u1edfng t\u00edch c\u1ef1c \u0111\u1ebfn t\u1ef7 l\u1ec7 chuy\u1ec3n \u0111\u1ed5i.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">T\u00ecm n\u1ea1p tr\u01b0\u1edbc c\u00e1c t\u00e0i nguy\u00ean t\u0129nh<\/h3>\n\n\n\n<p>Prefetch c\u00e1c t\u00e0i nguy\u00ean t\u0129nh, ch\u1eb3ng h\u1ea1n nh\u01b0 JS ho\u1eb7c CSS, khi c\u00e1c ph\u1ea7n ti\u1ebfp theo m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 truy c\u1eadp c\u00f3 kh\u1ea3 n\u0103ng \u0111\u01b0\u1ee3c d\u1ef1 \u0111o\u00e1n. \u0110i\u1ec1u n\u00e0y \u0111\u1eb7c bi\u1ec7t c\u00f3 \u00edch khi nh\u1eefng t\u00e0i nguy\u00ean n\u00e0y \u0111\u01b0\u1ee3c chia s\u1ebb tr\u00ean nhi\u1ec1u trang.<\/p>\n\n\n\n<p>L\u1ea5y v\u00ed d\u1ee5, Netflix t\u1eadn d\u1ee5ng th\u1eddi gian ng\u01b0\u1eddi d\u00f9ng th\u1ef1c hi\u1ec7n khi \u0111\u0103ng xu\u1ea5t trang \u0111\u1ec3 prefetch React, c\u00e1i s\u1ebd \u0111\u01b0\u1ee3c d\u00f9ng khi ng\u01b0\u1eddi d\u00f9ng \u0111\u0103ng nh\u1eadp tr\u1edf l\u1ea1i. Nh\u1edd \u0111i\u1ec1u n\u00e0y m\u00e0 h\u1ecd gi\u1ea3m \u0111\u01b0\u1ee3c 30% th\u1eddi gian t\u01b0\u01a1ng t\u00e1c cho c\u00e1c \u0111i\u1ec1u h\u01b0\u1edbng t\u01b0\u01a1ng lai.<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#e9e9e9\">T\u1ea1i th\u1eddi \u0111i\u1ec3m vi\u1ebft b\u00e0i n\u00e0y, \u0111\u00e3 c\u00f3 kh\u1ea3 n\u0103ng chia s\u1ebb c\u00e1c t\u00e0i nguy\u00ean prefetch gi\u1eefa c\u00e1c trang \u0111\u01b0\u1ee3c ph\u1ee5c v\u1ee5 t\u1eeb c\u00e1c host g\u1ed1c kh\u00e1c nhau. Khi kh\u00f3a k\u00e9p HTTP cache \u0111\u01b0\u1ee3c chuy\u1ec3n (?), \u0111i\u1ec1u n\u00e0y s\u1ebd ch\u1ec9 ho\u1ea1t \u0111\u1ed9ng cho c\u00e1c \u0111i\u1ec1u h\u01b0\u1edbng c\u1ea5p cao nh\u1ea5t (top-level) v\u00e0 ngu\u1ed3n ph\u1ee5 c\u00f9ng g\u1ed1c (subresource), nh\u01b0ng n\u00f3 s\u1ebd kh\u00f4ng c\u00f3 kh\u1ea3 n\u0103ng t\u00e1i s\u1eed d\u1ee5ng c\u00e1c ngu\u1ed3n ph\u1ee5 \u0111\u00e3 \u0111\u01b0\u1ee3c prefetch gi\u1eefa c\u00e1c host g\u1ed1c kh\u00e1c nhau. \u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0, n\u1ebfu <code>a.com<\/code> prefetch ngu\u1ed3n <code>b.com\/library.js<\/code>, n\u00f3 kh\u00f4ng th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng cho cache c\u1ee7a t\u00ean mi\u1ec1n <code>c.com<\/code>. M\u1ed9t s\u1ed1 tr\u00ecnh duy\u1ec7t, ch\u1eb3ng h\u1ea1n nh\u01b0 c\u00e1c tr\u00ecnh duy\u1ec7t d\u1ef1a tr\u00ean WebKit, \u0111\u00e3 l\u01b0u tr\u1eef b\u1ed9 nh\u1edb cache v\u00e0 l\u01b0u tr\u1eef HTML5 cho t\u1ea5t c\u1ea3 t\u00ean mi\u1ec1n c\u1ee7a b\u00ean th\u1ee9 ba.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">T\u00ecm n\u1ea1p tr\u01b0\u1edbc c\u00e1c \u0111o\u1ea1n m\u00e3 JavaScript theo y\u00eau c\u1ea7u<\/h3>\n\n\n\n<p>Code-splitting (ph\u00e2n chia \/ t\u00e1ch m\u00e3) JavaScript c\u1ee7a trang cho ph\u00e9p b\u1ea1n ch\u1ec9 t\u1ea3i ban \u0111\u1ea7u m\u1ed9t ph\u1ea7n v\u00e0 lazy-load (t\u1ea3i l\u01b0\u1eddi) ph\u1ea7n c\u00f2n l\u1ea1i. N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng k\u1ef9 thu\u1eadt n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng prefetch cho th\u00e0nh ph\u1ea7n kh\u00f4ng c\u1ea7n thi\u1ebft ngay l\u1eadp t\u1ee9c nh\u01b0ng s\u1ebd c\u00f3 kh\u1ea3 n\u0103ng \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u s\u1edbm.<\/p>\n\n\n\n<p>L\u1ea5y v\u00ed d\u1ee5, n\u1ebfu b\u1ea1n c\u00f3 m\u1ed9t trang bao g\u1ed3m m\u1ed9t n\u00fat b\u1ea5m m\u1edf ra m\u1ed9t h\u1ed9p tho\u1ea1i c\u00f3 ch\u1ee9a c\u00e1c l\u1ef1a ch\u1ecdn emoji (bi\u1ec3u t\u01b0\u1ee3ng m\u1eb7c c\u01b0\u1eddi, m\u1eb7t m\u1ebfu, v\u00e2n v\u00e2n), b\u1ea1n c\u00f3 th\u1ec3 chia n\u00f3 l\u00e0m ba \u0111o\u1ea1n m\u00e3 JavaScript, bao g\u1ed3m: home, dialog (h\u1ed9p tho\u1ea1i) v\u00e0 picker (l\u1ef1a ch\u1ecdn). Home v\u00e0 dialog c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c t\u1ea3i l\u00fac ban \u0111\u1ea7u (initially loaded), trong khi picker c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c t\u1ea3i theo ki\u1ec3u &#8216;theo y\u00eau c\u1ea7u&#8217; (on-demand), v\u00ec n\u00f3 kh\u00f4ng ph\u1ea3i l\u00e0 th\u00e0nh ph\u1ea7n ch\u1eafc ch\u1eafn \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng ngay l\u1eadp t\u1ee9c. C\u00e1c c\u00f4ng c\u1ee5 nh\u01b0 webpack cho ph\u00e9p b\u1ea1n h\u01b0\u1edbng d\u1eabn tr\u00ecnh duy\u1ec7t \u0111\u1ec3 n\u00f3 prefetch nh\u1eefng \u0111o\u1ea1n m\u00e3 &#8216;theo y\u00eau c\u1ea7u&#8217;.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cach_trien_khai_relprefetch\"><\/span>C\u00e1ch tri\u1ec3n khai rel=prefetch<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>C\u00e1ch th\u1ee9c d\u1ec5 d\u00e0ng nh\u1ea5t \u0111\u1ec3 tri\u1ec3n khai prefetch l\u00e0 th\u00eam th\u1ebb &lt;link&gt; v\u00e0o ph\u1ea7n &lt;head&gt; c\u1ee7a t\u00e0i li\u1ec7u:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;\n\t...\n\t&lt;link rel=\"prefetch\" href=\"index.html\" as=\"document\"&gt;\n\t...\n&lt;\/head&gt;<\/code><\/pre>\n\n\n\n<p>Thu\u1ed9c t\u00ednh as l\u00e0 kh\u00f4ng b\u1eaft bu\u1ed9c ph\u1ea3i c\u00f3, nh\u01b0ng \u0111\u01b0\u1ee3c khuy\u00ean l\u00e0 n\u00ean d\u00f9ng. N\u00f3 gi\u00fap tr\u00ecnh duy\u1ec7t thi\u1ebft l\u1eadp c\u00e1c header ch\u00ednh x\u00e1c, v\u00e0 x\u00e1c \u0111\u1ecbnh xem li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00e3 c\u00f3 trong cache hay ch\u01b0a. V\u00ed d\u1ee5 c\u00e1c gi\u00e1 tr\u1ecb cho thu\u1ed9c t\u00ednh n\u00e0y c\u00f3 th\u1ec3 bao g\u1ed3m: document, script, style, font, image, v\u00e2n v\u00e2n.<\/p>\n\n\n\n<p>B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n prefetch th\u00f4ng qua <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/Link\">link HTTP header<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Link: &lt;\/css\/style.css&gt;; rel=prefetch<\/code><\/pre>\n\n\n\n<p>L\u1ee3i \u00edch c\u1ee7a vi\u1ec7c ch\u1ec9 \u0111\u1ecbnh g\u1ee3i \u00fd prefetch trong HTTP header l\u00e0 tr\u00ecnh duy\u1ec7t kh\u00f4ng c\u1ea7n ph\u00e2n t\u00edch t\u00e0i li\u1ec7u \u0111\u1ec3 t\u00ecm g\u1ee3i \u00fd t\u00e0i nguy\u00ean, \u0111i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 n\u00f3 s\u1ebd gi\u00fap t\u1ed1c \u0111\u1ed9 website \u0111\u01b0\u1ee3c c\u1ea3i thi\u1ec7n h\u01a1n n\u1eefa trong m\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p, m\u1eb7c d\u00f9 m\u1ee9c \u0111\u1ed9 c\u1ea3i thi\u1ec7n kh\u00f4ng nhi\u1ec1u.<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#e9e9e9\">Prefetch \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 tr\u00ean <a href=\"https:\/\/caniuse.com\/#search=prefetch\">t\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t hi\u1ec7n \u0111\u1ea1i ngo\u1ea1i tr\u1eeb Safari<\/a>. B\u1ea1n c\u00f3 th\u1ec3 tri\u1ec3n khai k\u1ef9 thu\u1eadt d\u1ef1 ph\u00f2ng (fallback) cho Safari b\u1eb1ng c\u00e1c y\u00eau c\u1ea7u <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/XMLHttpRequest\">XHR<\/a> ho\u1eb7c <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API\">Fetch API<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Prefetch c\u00e1c module JavaScript v\u1edbi Webpack Magic Comments<\/h3>\n\n\n\n<p>Webpack cho ph\u00e9p b\u1ea1n prefetch c\u00e1c \u0111o\u1ea1n m\u00e3 cho c\u00e1c tuy\u1ebfn ho\u1eb7c ch\u1ee9c n\u0103ng m\u00e0 c\u00f3 m\u1ed9t l\u01b0\u1ee3ng ng\u01b0\u1eddi d\u00f9ng h\u1ee3p l\u00fd nh\u1ea5t \u0111\u1ecbnh s\u1ebd truy c\u1eadp ho\u1eb7c s\u1eed d\u1ee5ng s\u1edbm.<\/p>\n\n\n\n<p>\u0110o\u1ea1n m\u00e3 sau lazy-loads m\u1ed9t h\u00e0m s\u1eafp x\u1ebfp t\u1eeb <a href=\"https:\/\/lodash.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">th\u01b0 vi\u1ec7n lodash<\/a> \u0111\u1ec3 s\u1eafp x\u1ebfp m\u1ed9t nh\u00f3m s\u1ed1 s\u1ebd \u0111\u01b0\u1ee3c submit t\u1eeb m\u1ed9t form:<\/p>\n\n\n\n<p>Thay v\u00ec ch\u1edd \u0111\u1ee3i s\u1ef1 ki\u1ec7n &#8216;submit\/g\u1eedi&#8217; di\u1ec5n ra r\u1ed3i m\u1edbi t\u1ea3i ch\u1ee9c n\u0103ng n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 prefetch ngu\u1ed3n n\u00e0y \u0111\u1ec3 t\u0103ng c\u01a1 h\u1ed9i n\u00f3 c\u00f3 m\u1eb7t trong cache v\u00e0o th\u1eddi \u0111i\u1ec3m ng\u01b0\u1eddi d\u00f9ng th\u1ef1c s\u1ef1 submit form (qua \u0111\u00f3 t\u0103ng t\u1ed1c \u0111\u1ed9 x\u1eed l\u00fd). Webpack cho ph\u00e9p s\u1eed d\u1ee5ng <a href=\"https:\/\/webpack.js.org\/api\/module-methods\/#magic-comments\" target=\"_blank\" rel=\"noreferrer noopener\">magic comments<\/a> b\u00ean trong import():<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>form.addEventListener(\"submit\", e =&gt; {\n   e.preventDefault()\n   import(\/* webpackPrefetch: true *\/ 'lodash.sortby')\n         .then(module =&gt; module.default)\n         .then(sortInput())\n         .catch(err =&gt; { alert(err) });\n});<\/code><\/pre>\n\n\n\n<p>\u0110i\u1ec1u n\u00e0y n\u00f3i v\u1edbi webpack \u0111\u1ec3 n\u00f3 b\u01a1m th\u1ebb <em> &lt;link rel=\u201dprefetch\u201d&gt;<\/em> v\u00e0o trong t\u00e0i li\u1ec7u HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"prefetch\" as=\"script\" href=\"1.bundle.js\"&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Prefetch th\u00f4ng minh h\u01a1n v\u1edbi quicklink v\u00e0 Guess.js<\/h3>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 tri\u1ec3n khai k\u1ef9 thu\u1eadt prefetch th\u00f4ng minh h\u01a1n v\u1edbi c\u00e1c th\u01b0 vi\u1ec7n s\u1eed d\u1ee5ng prefetch ki\u1ec3u &#8216;under the hood&#8217;:<\/p>\n\n\n\n<ul>\n<li><a href=\"https:\/\/github.com\/GoogleChromeLabs\/quicklink\" target=\"_blank\" rel=\"noreferrer noopener\">Quicklink<\/a> s\u1eed d\u1ee5ng <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Intersection_Observer_API\" target=\"_blank\" rel=\"noreferrer noopener\">Intersection Observer API<\/a> \u0111\u1ec3 nh\u1eadn bi\u1ebft c\u00e1c li\u00ean k\u1ebft trong viewport (khung nh\u00ecn tr\u00ecnh duy\u1ec7t) v\u00e0 prefetch c\u00e1c link t\u00e0i nguy\u00ean trong th\u1eddi gian r\u1ea3nh r\u1ed7i (idle time). \u0110i\u1ec3m c\u1ed9ng: qucklink ch\u1ec9 n\u1eb7ng ch\u01b0a \u0111\u1ebfn 1 KB!<\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/guess-js\" target=\"_blank\" rel=\"noreferrer noopener\">Guess.js<\/a> s\u1eed d\u1ee5ng b\u00e1o c\u00e1o ph\u00e2n t\u00edch c\u1ee7a c\u00f4ng c\u1ee5 ki\u1ec3u nh\u01b0 Google Analytics \u0111\u1ec3 x\u00e2y d\u1ef1ng l\u00ean m\u1ed9t<a href=\"https:\/\/kiencang.net\/du-doan-prefetch\/\"> m\u00f4 h\u00ecnh d\u1ef1 \u0111o\u00e1n nh\u1eb1m prefetch th\u00f4ng minh h\u01a1n<\/a> ch\u1ec9 c\u00e1c li\u00ean k\u1ebft m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 kh\u1ea3 n\u0103ng cao s\u1ebd c\u1ea7n \u0111\u1ebfn.<\/li>\n<\/ul>\n\n\n\n<p>C\u1ea3 quicklink v\u00e0 Guess.js \u0111\u1ec1u s\u1eed d\u1ee5ng API Network Information \u0111\u1ec3 tr\u00e1nh prefetch n\u1ebfu ng\u01b0\u1eddi d\u00f9ng \u0111ang s\u1eed d\u1ee5ng m\u1ea1ng ch\u1eadm ch\u1ea1p ho\u1eb7c Save-Data \u0111ang \u0111\u01b0\u1ee3c b\u1eadt.<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#e9e9e9\">C\u00f4ng ty \u0111\u1ed3 u\u1ed1ng Jabong tri\u1ec3n khai prefetch v\u1edbi quicklink v\u00e0 \u0111\u1ea1t \u0111\u01b0\u1ee3c t\u1ed1c \u0111\u1ed9 t\u1ea3i trang x\u00e9t tr\u00ean kh\u00eda c\u1ea1nh t\u01b0\u01a1ng t\u00e1c (<a href=\"https:\/\/kiencang.net\/time-to-interactive-la-gi\/\">Time To Interactive<\/a>) nhanh h\u01a1n 2,7s tr\u00ean c\u00e1c trang \u0111\u01b0\u1ee3c truy c\u1eadp trong t\u01b0\u01a1ng lai.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Prefetch_kieu_%E2%80%98under_the_hood\"><\/span>Prefetch ki\u1ec3u &#8216;under the hood&#8217;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>C\u00e1c g\u1ee3i \u00fd t\u00e0i nguy\u00ean <strong>kh\u00f4ng ph\u1ea3i l\u00e0 h\u01b0\u1edbng d\u1eabn b\u1eaft bu\u1ed9c<\/strong> v\u00e0 n\u00f3 ph\u1ee5 thu\u1ed9c v\u00e0o tr\u00ecnh duy\u1ec7t quy\u1ebft \u0111\u1ecbnh xem n\u00f3 c\u00f3 \u0111\u01b0\u1ee3c th\u1ef1c thi hay kh\u00f4ng, v\u00e0 n\u1ebfu \u0111\u01b0\u1ee3c th\u00ec th\u1ef1c thi v\u00e0o l\u00fac n\u00e0o (decide if, and when, they get excuted).<\/p>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng prefetch nhi\u1ec1u l\u1ea7n tr\u00ean c\u00f9ng m\u1ed9t trang. Tr\u00ecnh duy\u1ec7t s\u1eafp h\u00e0ng t\u1ea5t c\u1ea3 c\u00e1c g\u1ee3i \u00fd v\u00e0 g\u1eedi y\u00eau c\u1ea7u t\u1eebng t\u00e0i nguy\u00ean khi trong th\u1eddi gian r\u1ea3nh r\u1ed7i. Trong Chrome, n\u1ebfu m\u1ed9t prefetch kh\u00f4ng ho\u00e0n th\u00e0nh t\u1ea3i v\u00e0 ng\u01b0\u1eddi d\u00f9ng \u0111i\u1ec1u h\u01b0\u1edbng \u0111\u1ebfn ch\u00ednh t\u00e0i nguy\u00ean \u0111ang \u0111\u01b0\u1ee3c t\u00ecm n\u1ea1p dang d\u1edf \u0111\u00f3 th\u00ec t\u1ea3i in-flight \u0111\u01b0\u1ee3c ch\u1ecdn l\u00e0m \u0111i\u1ec1u h\u01b0\u1edbng b\u1eb1ng tr\u00ecnh duy\u1ec7t (c\u00e1c tr\u00ecnh duy\u1ec7t kh\u00e1c c\u00f3 th\u1ec3 tri\u1ec3n khai \u0111i\u1ec1u n\u00e0y kh\u00f4ng gi\u1ed1ng nh\u01b0 v\u1eady).<\/p>\n\n\n\n<p>Prefetch di\u1ec5n ra \u1edf m\u1ee9c \u0111\u1ed9 \u01b0u ti\u00ean th\u1ea5p nh\u1ea5t (lowest priority), do v\u1eady prefetch t\u00e0i nguy\u00ean kh\u00f4ng c\u1ea1nh tranh b\u0103ng th\u00f4ng v\u1edbi c\u00e1c t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u trong trang hi\u1ec7n t\u1ea1i (trang m\u00e0 ng\u01b0\u1eddi d\u00f9ng \u0111ang duy\u1ec7t).<\/p>\n\n\n\n<p>Prefetch c\u00e1c file \u0111\u01b0\u1ee3c l\u01b0u tr\u1eef trong <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Caching\" target=\"_blank\" rel=\"noreferrer noopener\">HTTP cache<\/a>, ho\u1eb7c <a href=\"https:\/\/calendar.perfplanet.com\/2016\/a-tale-of-four-caches\/\" target=\"_blank\" rel=\"noreferrer noopener\">memory cache<\/a> (ph\u1ee5 thu\u1ed9c v\u00e0o li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 \u0111\u00e3 \u0111\u01b0\u1ee3c cache hay ch\u01b0a), trong kho\u1ea3ng th\u1eddi gian c\u00f2n t\u00f9y thu\u1ed9c v\u00e0o t\u1eebng tr\u00ecnh duy\u1ec7t. L\u1ea5y v\u00ed d\u1ee5, c\u00e1c t\u00e0i nguy\u00ean Chrome \u0111\u01b0\u1ee3c gi\u1eef trong kho\u1ea3ng n\u0103m ph\u00fat, sau \u0111\u00f3 th\u00ec c\u00e1c quy t\u1eafc cache-control th\u00f4ng th\u01b0\u1eddng cho t\u00e0i nguy\u00ean s\u1ebd \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Ket_luan\"><\/span>K\u1ebft lu\u1eadn<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>S\u1eed d\u1ee5ng prefetch c\u00f3 th\u1ec3 c\u1ea3i thi\u1ec7n r\u1ea5t t\u1ed1t th\u1eddi gian t\u1ea3i trang cho \u0111i\u1ec1u h\u01b0\u1edbng trong t\u01b0\u01a1ng lai v\u00e0 th\u1eadm ch\u00ed c\u00f3 th\u1ec3 l\u00e0m trang hi\u1ec3n th\u1ecb g\u1ea7n nh\u01b0 ngay l\u1eadp t\u1ee9c. Prefetch \u0111\u01b0\u1ee3c r\u1ea5t nhi\u1ec1u tr\u00ecnh duy\u1ec7t hi\u1ec7n \u0111\u1ea1i h\u1ed7 tr\u1ee3, \u0111i\u1ec1u \u0111\u00f3 l\u00e0m cho n\u00f3 tr\u1edf th\u00e0nh k\u1ef9 thu\u1eadt h\u1ea5p d\u1eabn \u0111\u1ec3 c\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m c\u1ee7a \u0111i\u1ec1u h\u01b0\u1edbng k\u1ebf ti\u1ebfp cho nhi\u1ec1u ng\u01b0\u1eddi d\u00f9ng. K\u1ef9 thu\u1eadt n\u00e0y y\u00eau c\u1ea7u t\u1ea3i nhi\u1ec1u d\u1eef li\u1ec7u h\u01a1n m\u00e0 c\u00f3 th\u1ec3 n\u00f3 kh\u00f4ng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng, v\u00ec th\u1ebf h\u00e3y t\u1ec9nh t\u00e1o khi b\u1ea1n s\u1eed d\u1ee5ng n\u00f3; ch\u1ec9 s\u1eed d\u1ee5ng prefetch khi c\u1ea7n thi\u1ebft m\u00e0 th\u00f4i, v\u00e0 l\u00fd t\u01b0\u1edfng nh\u1ea5t l\u00e0 tr\u00ean c\u00e1c m\u1ea1ng c\u00f3 k\u1ebft n\u1ed1i nhanh.<\/p>\n\n\n\n<p><em>(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: <a href=\"https:\/\/web.dev\/link-prefetch\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Prefetch resources to speed up future navigations<\/a>, t\u00e1c gi\u1ea3: Demian Renzulli)<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Bonus\"><\/span>Bonus<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>B\u1ea1n n\u00e0o \u0111ang d\u00f9ng WordPress v\u00e0 mu\u1ed1n t\u00edch h\u1ee3p <a href=\"https:\/\/kiencang.net\/plugin-flying-pages\/\">t\u00ednh n\u0103ng prefetch c\u00f3 th\u1ec3 d\u00f9ng plugin Flying Pages<\/a>. L\u01b0u \u00fd l\u00e0 c\u1ea3 RAM v\u00e0 CPU s\u1ebd t\u0103ng s\u1eed d\u1ee5ng do b\u1ea1n t\u1ea3i tr\u01b0\u1edbc c\u00e1c li\u00ean k\u1ebft, m\u1ee9c \u0111\u1ed9 t\u0103ng t\u00f9y thu\u1ed9c s\u1ed1 l\u01b0\u1ee3ng li\u00ean k\u1ebft b\u1ea1n mu\u1ed1n t\u1ea3i tr\u01b0\u1edbc, nh\u01b0ng c\u00f3 th\u1ec3 l\u00ean \u0111\u1ebfn g\u1ea5p \u0111\u00f4i ho\u1eb7c g\u1ea5p ba so v\u1edbi th\u00f4ng th\u01b0\u1eddng. Do v\u1eady n\u00f3 s\u1ebd kh\u00f4ng ph\u00f9 h\u1ee3p tr\u00ean hosting y\u1ebfu. N\u1ebfu b\u1ea1n d\u00f9ng c\u1ea3 CDN n\u1eefa (v\u1edbi ki\u1ec3u t\u00ednh ti\u1ec1n theo dung l\u01b0\u1ee3ng t\u1ea3i v\u1ec1), n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng l\u00e0m b\u1ea1n t\u1ed1n th\u00eam chi ph\u00ed \u0111\u00e1ng k\u1ec3.<\/p>\n\n\n\n<p>Ngo\u00e0i prefetch, b\u1ea1n n\u00ean t\u00ecm hi\u1ec3u th\u00eam c\u00e1c c\u01a1 ch\u1ebf &#8216;pre \/ g\u1ee3i \u00fd t\u00e0i nguy\u00ean&#8217; kh\u00e1c nh\u01b0 <a href=\"https:\/\/kiencang.net\/preconnect-dns-prefetch\/\">preconnect<\/a> v\u00e0 <a href=\"https:\/\/kiencang.net\/preload-tai-nguyen-quan-trong\/\">preload<\/a> \u1edf c\u00e1c link t\u01b0\u01a1ng \u1ee9ng.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong b\u00e0i vi\u1ebft n\u00e0y ch\u00fang ta s\u1ebd c\u00f9ng t\u00ecm hi\u1ec3u v\u1ec1 th\u1ebb rel=prefetch d\u00f9ng trong vi\u1ec7c g\u1ee3i \u00fd t\u00e0i nguy\u00ean (resource hints) v\u00e0 c\u00e1ch s\u1eed d\u1ee5ng n\u00f3. Nghi\u00ean c\u1ee9u ch\u1ec9 ra r\u1eb1ng t\u1ed1c \u0111\u1ed9 t\u1ea3i trang nhanh h\u01a1n \u0111em \u0111\u1ebfn h\u1ec7 qu\u1ea3 c\u00f3 l\u1ee3i l\u00e0 t\u1ef7 l\u1ec7 chuy\u1ec3n \u0111\u1ed5i cao h\u01a1n v\u00e0 t\u1ea5t nhi\u00ean: c\u00e1c &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[291],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Prefetch l\u00e0 g\u00ec? T\u00ecm n\u1ea1p tr\u01b0\u1edbc t\u00e0i nguy\u00ean \u0111\u1ec3 t\u0103ng t\u1ed1c c\u00e1c truy c\u1eadp k\u1ebf ti\u1ebfp c\u1ee7a ng\u01b0\u1eddi d\u00f9ng &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"description\" content=\"Prefetch l\u00e0 m\u1ed9t trong c\u00e1c c\u00e1ch t\u0103ng t\u1ed1c \u0111\u1ed9 website t\u1ed1t nh\u1ea5t m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 l\u00e0m. Tuy nhi\u00ean b\u1ea1n c\u1ea7n tri\u1ec3n khai n\u00f3 c\u1ea9n th\u1eadn \u0111\u1ec3 tr\u00e1nh l\u00e3ng ph\u00ed t\u00e0i nguy\u00ean v\u00e0 g\u00e2y qu\u00e1 t\u1ea3i cho m\u00e1y ch\u1ee7.\" \/>\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\/link-prefetch\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Prefetch l\u00e0 g\u00ec? T\u00ecm n\u1ea1p tr\u01b0\u1edbc t\u00e0i nguy\u00ean \u0111\u1ec3 t\u0103ng t\u1ed1c c\u00e1c truy c\u1eadp k\u1ebf ti\u1ebfp c\u1ee7a ng\u01b0\u1eddi d\u00f9ng &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"Prefetch l\u00e0 m\u1ed9t trong c\u00e1c c\u00e1ch t\u0103ng t\u1ed1c \u0111\u1ed9 website t\u1ed1t nh\u1ea5t m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 l\u00e0m. Tuy nhi\u00ean b\u1ea1n c\u1ea7n tri\u1ec3n khai n\u00f3 c\u1ea9n th\u1eadn \u0111\u1ec3 tr\u00e1nh l\u00e3ng ph\u00ed t\u00e0i nguy\u00ean v\u00e0 g\u00e2y qu\u00e1 t\u1ea3i cho m\u00e1y ch\u1ee7.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/link-prefetch\/\" \/>\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-07T21:27:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-01T05:20:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/prefetch-1024x529.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=\"15 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Prefetch l\u00e0 g\u00ec? T\u00ecm n\u1ea1p tr\u01b0\u1edbc t\u00e0i nguy\u00ean \u0111\u1ec3 t\u0103ng t\u1ed1c c\u00e1c truy c\u1eadp k\u1ebf ti\u1ebfp c\u1ee7a ng\u01b0\u1eddi d\u00f9ng &#8226; Ki\u1ebfn c\u00e0ng","description":"Prefetch l\u00e0 m\u1ed9t trong c\u00e1c c\u00e1ch t\u0103ng t\u1ed1c \u0111\u1ed9 website t\u1ed1t nh\u1ea5t m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 l\u00e0m. Tuy nhi\u00ean b\u1ea1n c\u1ea7n tri\u1ec3n khai n\u00f3 c\u1ea9n th\u1eadn \u0111\u1ec3 tr\u00e1nh l\u00e3ng ph\u00ed t\u00e0i nguy\u00ean v\u00e0 g\u00e2y qu\u00e1 t\u1ea3i cho m\u00e1y ch\u1ee7.","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\/link-prefetch\/","og_locale":"vi_VN","og_type":"article","og_title":"Prefetch l\u00e0 g\u00ec? T\u00ecm n\u1ea1p tr\u01b0\u1edbc t\u00e0i nguy\u00ean \u0111\u1ec3 t\u0103ng t\u1ed1c c\u00e1c truy c\u1eadp k\u1ebf ti\u1ebfp c\u1ee7a ng\u01b0\u1eddi d\u00f9ng &#8226; Ki\u1ebfn c\u00e0ng","og_description":"Prefetch l\u00e0 m\u1ed9t trong c\u00e1c c\u00e1ch t\u0103ng t\u1ed1c \u0111\u1ed9 website t\u1ed1t nh\u1ea5t m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 l\u00e0m. Tuy nhi\u00ean b\u1ea1n c\u1ea7n tri\u1ec3n khai n\u00f3 c\u1ea9n th\u1eadn \u0111\u1ec3 tr\u00e1nh l\u00e3ng ph\u00ed t\u00e0i nguy\u00ean v\u00e0 g\u00e2y qu\u00e1 t\u1ea3i cho m\u00e1y ch\u1ee7.","og_url":"https:\/\/kiencang.net\/link-prefetch\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2020-03-07T21:27:03+00:00","article_modified_time":"2023-09-01T05:20:56+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/prefetch-1024x529.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":"15 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/link-prefetch\/","url":"https:\/\/kiencang.net\/link-prefetch\/","name":"Prefetch l\u00e0 g\u00ec? T\u00ecm n\u1ea1p tr\u01b0\u1edbc t\u00e0i nguy\u00ean \u0111\u1ec3 t\u0103ng t\u1ed1c c\u00e1c truy c\u1eadp k\u1ebf ti\u1ebfp c\u1ee7a ng\u01b0\u1eddi d\u00f9ng &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2020-03-07T21:27:03+00:00","dateModified":"2023-09-01T05:20:56+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"description":"Prefetch l\u00e0 m\u1ed9t trong c\u00e1c c\u00e1ch t\u0103ng t\u1ed1c \u0111\u1ed9 website t\u1ed1t nh\u1ea5t m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 l\u00e0m. Tuy nhi\u00ean b\u1ea1n c\u1ea7n tri\u1ec3n khai n\u00f3 c\u1ea9n th\u1eadn \u0111\u1ec3 tr\u00e1nh l\u00e3ng ph\u00ed t\u00e0i nguy\u00ean v\u00e0 g\u00e2y qu\u00e1 t\u1ea3i cho m\u00e1y ch\u1ee7.","breadcrumb":{"@id":"https:\/\/kiencang.net\/link-prefetch\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/link-prefetch\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/link-prefetch\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"Prefetch l\u00e0 g\u00ec? T\u00ecm n\u1ea1p tr\u01b0\u1edbc t\u00e0i nguy\u00ean \u0111\u1ec3 t\u0103ng t\u1ed1c c\u00e1c truy c\u1eadp k\u1ebf ti\u1ebfp c\u1ee7a ng\u01b0\u1eddi d\u00f9ng"}]},{"@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\/16849"}],"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=16849"}],"version-history":[{"count":1,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16849\/revisions"}],"predecessor-version":[{"id":24715,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16849\/revisions\/24715"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=16849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=16849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=16849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}