{"id":16873,"date":"2020-04-06T20:48:17","date_gmt":"2020-04-06T13:48:17","guid":{"rendered":"https:\/\/kiencang.net\/?p=15933"},"modified":"2020-04-06T20:48:17","modified_gmt":"2020-04-06T13:48:17","slug":"trai-nghiem-link-preconnect","status":"publish","type":"post","link":"https:\/\/kiencang.net\/trai-nghiem-link-preconnect\/","title":{"rendered":"Tr\u1ea3i nghi\u1ec7m th\u1ef1c t\u1ebf v\u1edbi link rel=preconnect, s\u1eed d\u1ee5ng Script t\u00f9y ch\u1ec9nh b\u01a1m v\u00e0o WebPageTest"},"content":{"rendered":"\n<p>V\u00e0i l\u1eddi c\u1ee7a ng\u01b0\u1eddi d\u1ecbch: B\u00e0i vi\u1ebft n\u00e0y minh h\u1ecda cho m\u1ed9t <strong>th\u1ef1c t\u1ebf<\/strong> l\u00e0 kh\u00f4ng ph\u1ea3i b\u1ea1n c\u1ee9 preconnect \u0111\u1ebfn t\u1ea5t c\u1ea3 c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a b\u00ean th\u1ee9 ba l\u00e0 s\u1ebd gi\u00fap trang c\u1ee7a b\u1ea1n t\u1ea3i nhanh h\u01a1n ho\u1eb7c\/v\u00e0 hi\u1ec3n th\u1ecb nhanh h\u01a1n cho ng\u01b0\u1eddi d\u00f9ng. \u0110i\u1ec1u n\u00e0y l\u00e0 m\u1ed9t l\u1eddi c\u1ea3nh t\u1ec9nh cho ch\u00fang ta, v\u00e0 preconnect c\u0169ng gi\u1ed1ng nh\u01b0 m\u1ecdi th\u1ee9 kh\u00e1c, l\u1ea1m d\u1ee5ng n\u00f3 kh\u00f4ng h\u1ec1 t\u1ed1t (\u01b0u ti\u00ean m\u1ecdi th\u1ee9, ngh\u0129a l\u00e0 kh\u00f4ng c\u00f3 \u01b0u ti\u00ean n\u00e0o h\u1ebft). C\u00e1ch ph\u00f2ng tr\u00e1nh \u0111i\u1ec1u n\u00e0y l\u00e0 tr\u01b0\u1edbc h\u1ebft b\u1ea1n ph\u1ea3i x\u00e1c \u0111\u1ecbnh r\u00f5 nh\u1eefng g\u00ec quan tr\u1ecdng v\u1edbi website, k\u1ebft n\u1ed1i tr\u01b0\u1edbc \u0111\u1ebfn c\u00e1c t\u00e0i nguy\u00ean qu\u1ea3ng c\u00e1o ch\u1eb3ng h\u1ea1n, ch\u1ec9 l\u00e0 \u0111i\u1ec1u n\u00ean l\u00e0m n\u1ebfu b\u1ea1n cho l\u00e0 n\u00ean nh\u01b0 th\u1ebf, c\u00f2n n\u1ebfu kh\u00f4ng, ch\u1eafc ch\u1eafn n\u00f3 s\u1ebd l\u00e0m ch\u1eadm trang \u00edt nhi\u1ec1u. M\u1ed9t l\u1eddi nh\u1eafc nh\u1edf kh\u00e1c c\u0169ng kh\u00f4ng k\u00e9m ph\u1ea7n quan tr\u1ecdng, ngay c\u1ea3 khi kh\u00e1 ch\u1eafc m\u1ea9m r\u1ed3i, th\u00ec s\u1ef1 c\u1ea3i ti\u1ebfn hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 ph\u1ea3i \u0111\u01b0\u1ee3c ch\u1ee9ng minh tr\u00ean th\u1ef1c t\u1ebf th\u00f4ng qua c\u00e1c b\u00e0i ki\u1ec3m tra ch\u1ee9 kh\u00f4ng ch\u1ec9 kh\u1eb3ng \u0111\u1ecbnh tr\u00ean l\u00fd thuy\u1ebft thu\u1ea7n t\u00fay (gi\u1ed1ng slogan c\u1ee7a trang Ki\u1ebfn c\u00e0ng gh\u00ea!). N\u00f3i c\u00e1ch kh\u00e1c ch\u00fang ta s\u1ebd ph\u1ea3i <a href=\"https:\/\/kiencang.net\/cach-do-toc-do-website\/\" target=\"_blank\" rel=\"noreferrer noopener\">h\u1ecdc h\u1ecfi th\u00eam v\u1ec1 c\u00e1ch ki\u1ec3m tra, \u0111o \u0111\u1ea1c t\u1ed1c \u0111\u1ed9 sao cho \u0111\u00fang<\/a> (chuy\u1ec7n n\u00e0y c\u0169ng ch\u1eb3ng ph\u1ea3i d\u1ec5 nh\u01b0 pha m\u1ef3 t\u00f4m \u0111\u00e2u). OK, gi\u1edd ch\u00fang ta b\u1eaft \u0111\u1ea7u nh\u00e9.<\/p>\n\n\n<p>&#8212;<\/p>\n\n\n<p>S\u1eed d\u1ee5ng <a href=\"https:\/\/kiencang.net\/preconnect-dns-prefetch\/\" target=\"_blank\" rel=\"noreferrer noopener\">ki\u1ec3u g\u1ee3i \u00fd t\u00e0i nguy\u00ean preconnect<\/a> l\u00e0 c\u00e1ch hay \u0111\u1ec3 t\u0103ng t\u1ed1c n\u1ed9i dung c\u00f3 ngu\u1ed3n g\u1ed1c t\u1eeb b\u00ean th\u1ee9 ba (third-party origins) &#8211; n\u00f3 c\u00f3 chi ph\u00ed ng\u1ea7m t\u01b0\u01a1ng \u0111\u1ed1i th\u1ea5p (low overhead), d\u00f9 v\u1eady n\u00f3 kh\u00f4ng ho\u00e0n to\u00e0n mi\u1ec5n ph\u00ed \u0111\u00e2u, v\u00e0 \u01b0u \u0111i\u1ec3m l\u00e0 th\u01b0\u1eddng \u0111\u01b0\u1ee3c tri\u1ec3n khai \u0111\u01b0\u1ee3c m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng.<\/p>\n\n\n<p>\u0110\u00f4i khi n\u00f3 t\u1ea1o ra \u0111\u01b0\u1ee3c c\u1ea3i ti\u1ebfn nh\u1ecf, v\u00e0 \u0111\u00f4i khi l\u00e0 nh\u1eefng c\u00e1i ti\u1ebfn th\u1ef1c s\u1ef1 \u1ea5n t\u01b0\u1ee3ng!<\/p>\n\n\n<p>C\u00e1c tr\u00ecnh duy\u1ec7t th\u01b0\u1eddng ch\u1ec9 t\u1ea1o k\u1ebft n\u1ed1i t\u1edbi m\u00e1y ch\u1ee7 g\u1ed1c ngay tr\u01b0\u1edbc khi ch\u00fang y\u00eau c\u1ea7u m\u1ed9t t\u00e0i nguy\u00ean t\u1eeb \u0111\u00f3, v\u00ec th\u1ebf v\u1edbi c\u00e1c t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n sau n\u00e0y, ch\u1eb3ng h\u1ea1n nh\u01b0 \u1ea3nh n\u1ec1n trong CSS, fonts, ho\u1eb7c c\u00e1c \u0111o\u1ea1n m\u00e3 JS b\u01a1m v\u00e0o, ho\u1eb7c c\u00e1c t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c xem l\u00e0 c\u00f3 m\u1ee9c \u0111\u1ed9 \u01b0u ti\u00ean th\u1ea5p, nh\u01b0 c\u00e1ch Chrome \u0111\u1ed1i x\u1eed v\u1edbi \u1ea3nh, s\u1ef1 tr\u00ec ho\u00e3n trong vi\u1ec7c t\u1ea1o k\u1ebft n\u1ed1i tr\u1edf th\u00e0nh m\u1ed9t ph\u1ea7n c\u1ee7a <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 path) cho ngu\u1ed3n t\u00e0i nguy\u00ean.<\/p>\n\n\n<p>Preconnect cho ph\u00e9p ch\u00fang ta t\u1ea1o ra k\u1ebft n\u1ed1i s\u1edbm &#8211; lo\u1ea1i n\u00f3 kh\u1ecfi tuy\u1ebfn hi\u1ec3n th\u1ecb quan tr\u1ecdng cho t\u00e0i nguy\u00ean, cho ph\u00e9p t\u00e0i nguy\u00ean t\u1ea3i v\u1ec1 s\u1edbm h\u01a1n (loaded sooner) v\u00e0 qua \u0111\u00f3 hy v\u1ecdng l\u00e0 s\u1ebd c\u00f3 \u0111\u01b0\u1ee3c s\u1ef1 c\u1ea3i thi\u1ec7n t\u1ed5ng th\u1ec3 v\u1ec1 kh\u00eda c\u1ea1nh hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 c\u1ee7a trang.<\/p>\n\n\n<p>Tri\u1ec3n khai preconnect th\u01b0\u1eddng l\u00e0 c\u1ea3i ti\u1ebfn \u0111\u1ea7u ti\u00ean t\u00f4i khuy\u00ean kh\u00e1ch h\u00e0ng th\u1ef1c hi\u1ec7n, nh\u01b0ng t\u00f4i ch\u01b0a bao gi\u1edd ho\u00e0n to\u00e0n h\u00e0i l\u00f2ng v\u1edbi qu\u00e1 tr\u00ecnh x\u1eed l\u00fd c\u1ee7a m\u00ecnh&#8230;<\/p>\n\n\n<p><a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\/\" target=\"_blank\" rel=\"noreferrer noopener\">Lighthouse<\/a> cung c\u1ea5p m\u1ed9t s\u1ed1 khuy\u1ebfn ngh\u1ecb v\u1ec1 c\u00e1c m\u00e1y ch\u1ee7 g\u1ed1c c\u1ea7n preconnect, nh\u01b0ng t\u00f4i c\u00f3 xu h\u01b0\u1edbng k\u1ebft h\u1ee3p c\u1ea3 <a href=\"https:\/\/www.webpagetest.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">WebPageTest<\/a> v\u00e0 DevTools \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh \u1ee9ng c\u1eed vi\u00ean ti\u1ec1m n\u0103ng.<\/p>\n\n\n<p>Khi t\u00f4i \u0111\u01b0a ra khuy\u1ebfn ngh\u1ecb cho kh\u00e1ch h\u00e0ng c\u1ee7a m\u00ecnh, \u0111\u1ed9i ng\u0169 l\u1eadp tr\u00ecnh vi\u00ean c\u1ee7a h\u1ecd s\u1ebd tri\u1ec3n khai c\u00e1c h\u01b0\u1edbng d\u1eabn preconnect v\u00e0 ch\u00fang t\u00f4i th\u01b0\u1eddng ki\u1ec3m tra \u1ea3nh h\u01b0\u1edfng tr\u00ean m\u00f4i tr\u01b0\u1eddng ti\u1ec1n s\u1ea3n ph\u1ea7m (pre-production) v\u00e0 th\u1ef1c hi\u1ec7n \u0111i\u1ec1u ch\u1ec9nh th\u00eam n\u1ebfu th\u1ea5y c\u1ea7n thi\u1ebft.<\/p>\n\n\n<p>N\u1ebfu t\u00f4i ng\u1ed3i ngay b\u00ean \u0111\u1ed9i ph\u00e1t tri\u1ec3n c\u1ee7a h\u1ecd, quy tr\u00ecnh l\u1eb7p l\u1ea1i n\u00e0y c\u00f3 th\u1ec3 di\u1ec5n ra nhanh ch\u00f3ng, nh\u01b0ng n\u1ebfu kh\u00e1ch h\u00e0ng s\u1eed d\u1ee5ng \u0111\u1ed9i ng\u0169 ph\u00e1t tri\u1ec3n b\u00ean ngo\u00e0i, ho\u1eb7c c\u00e1c \u0111\u1ed9i ng\u0169 ki\u1ec3u offshore (l\u00e0m vi\u1ec7c \u1edf c\u00e1c thi\u00ean \u0111\u01b0\u1eddng thu\u1ebf), quy tr\u00ecnh n\u00e0y c\u00f3 th\u1ec3 m\u1ea5t nhi\u1ec1u th\u1eddi gian h\u01a1n.<\/p>\n\n\n<p>\u0110i\u1ec1u t\u00f4i mu\u1ed1n l\u00e0m l\u00e0 bi\u1ec7n ph\u00e1p n\u00e0o \u0111\u1ea5y m\u00e0 t\u00f4i c\u00f3 th\u1ec3 th\u1eed nghi\u1ec7m, \u0111\u00e1nh gi\u00e1 c\u00e1c t\u00f9y ch\u1ecdn v\u00e0 ch\u1ee9ng minh \u0111\u01b0\u1ee3c l\u1ee3i \u00edch tr\u01b0\u1edbc khi kh\u00e1ch h\u00e0ng cam k\u1ebft bi\u1ebfn c\u00e1c l\u1eddi khuy\u00ean c\u1ee7a t\u00f4i th\u00e0nh m\u00e3 tr\u00ean trang c\u1ee7a h\u1ecd.<\/p>\n\n\n<p>Sau \u0111\u00f3 t\u00f4i nh\u1edb ra r\u1eb1ng WebPageTest c\u00f3 kh\u1ea3 n\u0103ng b\u01a1m m\u00e3 t\u00f9y bi\u1ebfn v\u00e0o trong trang c\u1ea7n ki\u1ec3m tra&#8230; T\u00f4i c\u00f3 th\u1ec3 t\u1ea1o m\u1ed9t script (JS) \u0111\u1ec3 th\u00eam c\u00e1c ch\u1ec9 th\u1ecb preconnect v\u00e0 xem \u1ea3nh h\u01b0\u1edfng c\u1ee7a c\u00e1c t\u00f9y ch\u1ecdn kh\u00e1c nhau l\u00ean t\u1ed1c \u0111\u1ed9 trang.<\/p>\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-6577d65bc170f\" ><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-6577d65bc170f\"  type=\"checkbox\" id=\"item-6577d65bc170f\"><\/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\/trai-nghiem-link-preconnect\/#Bom_ma_vao_trang\" title=\"B\u01a1m m\u00e3 v\u00e0o trang\">B\u01a1m m\u00e3 v\u00e0o trang<\/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\/trai-nghiem-link-preconnect\/#Dua_no_vao_hanh_dong\" title=\"\u0110\u01b0a n\u00f3 v\u00e0o h\u00e0nh \u0111\u1ed9ng\">\u0110\u01b0a n\u00f3 v\u00e0o h\u00e0nh \u0111\u1ed9ng<\/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\/trai-nghiem-link-preconnect\/#Su_dung_preconnect_mot_cach_co_chon_loc\" title=\"S\u1eed d\u1ee5ng preconnect m\u1ed9t c\u00e1ch c\u00f3 ch\u1ecdn l\u1ecdc\">S\u1eed d\u1ee5ng preconnect m\u1ed9t c\u00e1ch c\u00f3 ch\u1ecdn l\u1ecdc<\/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\/trai-nghiem-link-preconnect\/#Vai_suy_nghi_cuoi\" title=\"V\u00e0i suy ngh\u0129 cu\u1ed1i\">V\u00e0i suy ngh\u0129 cu\u1ed1i<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Bom_ma_vao_trang\"><\/span>B\u01a1m m\u00e3 v\u00e0o trang<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>T\u1ea1i ph\u1ea7n cu\u1ed1i c\u1ee7a tab Advanced (n\u00e2ng cao), c\u00f3 m\u1ed9t text box (h\u1ed9p v\u0103n b\u1ea3n) \u0111\u01b0\u1ee3c g\u00e1n nh\u00e3n l\u00e0 Inject Script, b\u1ea5t k\u1ef3 script n\u00e0o \u0111\u01b0\u1ee3c \u0111\u1eb7t \u1edf \u0111\u00e2y s\u1ebd \u0111\u01b0\u1ee3c b\u01a1m v\u00e0o trang ngay sau khi n\u00f3 b\u1eaft \u0111\u1ea7u t\u1ea3i.<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/wpt-advanced-settings.png\" alt=\"c\u00e0i \u0111\u1eb7t n\u00e2ng cao\" class=\"wp-image-15936\"\/><\/figure><\/div>\n\n\n<p>\u0110o\u1ea1n m\u00e3 t\u00f4i s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o c\u00e1c ph\u1ea7n t\u1eed <em>&lt;link rel=precoonect<\/em> l\u1eb7p xung quanh m\u1ed9t m\u1ea3ng c\u1ee7a chu\u1ed7i m\u00e1y ch\u1ee7 g\u1ed1c, th\u00eam t\u1eebng ph\u1ea7n t\u1eed link v\u00e0o m\u1ed9t ph\u1ea7n t\u00e0i li\u1ec7u, v\u00e0 r\u1ed3i th\u00eam ph\u1ea7n t\u00e0i li\u1ec7u \u0111\u00f3 v\u00e0o DOM.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>(function () {\n   var entries = &#91;\n       {'href': 'https:\/\/res.cloudinary.com'}\n   ];\n   var fragment = document.createDocumentFragment();\n   for(entry of entries) {\n       var link = document.createElement('link');\n       link.rel = 'preconnect';\n       link.href = entry.href;\n       if(entry.hasOwnProperty('crossOrigin')) {\n               link.crossOrigin = entry.crossOrigin;\n       }\n       fragment.appendChild(link);\n   }\n   document.head.appendChild(fragment);\n   performance.mark('wpt.injectEnd'); \/\/ Not essential\n})();<\/code><\/pre>\n\n\n<p>P\/S: \u0111\u1eebng l\u0103n t\u0103n n\u1ebfu b\u1ea1n kh\u00f4ng hi\u1ec3u r\u00f5 r\u00e0ng t\u1eebng d\u00f2ng m\u00e3, c\u00e1c t\u1eeb kh\u00f3a b\u00ean tr\u00ean, t\u00f4i c\u0169ng kh\u00f4ng hi\u1ec3u l\u1eafm \u0111\u00e2u! Quan tr\u1ecdng b\u1ea1n bi\u1ebft \u00fd ngh\u0129a c\u1ee7a n\u00f3 d\u00f9ng \u0111\u1ec3 l\u00e0m g\u00ec l\u00e0 \u0111\u01b0\u1ee3c.<\/p>\n\n\n<p>Nhi\u1ec1u m\u00e1y ch\u1ee7 g\u1ed1c h\u01a1n c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c th\u00eam v\u00e0o m\u1ea3ng array n\u1ebfu c\u1ea7n thi\u1ebft, v\u00e0 n\u1ebfu m\u1ed9t m\u00e1y ch\u1ee7 g\u1ed1c ph\u1ee5c v\u1ee5 font th\u00ec ch\u00fang ta c\u0169ng n\u00ean th\u00eam thu\u1ed9c t\u00ednh <em>crossOrigin: &#8216;anonymous&#8217;<\/em> v\u00e0o.<\/p>\n\n\n<p>L\u1ea5y v\u00ed d\u1ee5, n\u1ebfu c\u1ea3 \u1ea3nh v\u00e0 font c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c host tr\u00ean m\u00e1y ch\u1ee7 c\u1ee7a <a href=\"https:\/\/cloudinary.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudinary<\/a>, m\u1ee5c nh\u1eadp \u0111\u1ea7u ti\u00ean s\u1ebd t\u1ea1o ra m\u1ed9t k\u1ebft n\u1ed1i t\u1edbi \u1ea3nh, v\u00e0 m\u1ee5c nh\u1eadp th\u1ee9 hai t\u1ea1o ra m\u1ed9t k\u1ebft n\u1ed1i t\u1edbi font.<\/p>\n\n\n<pre class=\"wp-block-code\"><code> var entries = &#91;\n       {'href': 'https:\/\/res.cloudinary.com'},\n       {'href': 'https:\/\/res.cloudinary.com', 'crossOrigin': 'anonymous'}\n   ];<\/code><\/pre>\n\n\n<p>T\u00f4i \u0111\u00e3 \u0111\u00f3ng g\u00f3i \u0111o\u1ea1n script v\u00e0o trong IIFE \u0111\u1ec3 gi\u1edbi h\u1ea1n ph\u1ea1m vi c\u00e1c bi\u1ebfn c\u1ee7a n\u00f3, v\u00e0 tr\u00e1nh xung \u0111\u1ed9t v\u1edbi b\u1ea5t k\u1ef3 c\u00e1i n\u00e0o \u0111\u00e3 t\u1ed3n t\u1ea1i tr\u00ean trang.<\/p>\n\n\n<p>Khi Pat gi\u1edbi thi\u1ec7u t\u00ednh n\u0103ng script injection, anh \u0111\u00e3 m\u00f4 t\u1ea3 n\u00f3 l\u00e0 &#8216;a bit racey \/ m\u1ed9t ch\u00fat ch\u1ee7ng t\u1ed9c&#8217;. B\u1ea1n kh\u00f4ng th\u1ec3 \u0111\u1ea3m b\u1ea3o ch\u1eafc ch\u1eafn khi n\u00e0o n\u00f3 \u0111\u01b0\u1ee3c th\u1ef1c thi, v\u00ec th\u1ebf t\u00f4i bao g\u1ed3m th\u00eam \u0111\u00e1nh d\u1ea5u hi\u1ec7u su\u1ea5t \u0111\u1ec3 ghi l\u1ea1i th\u1eddi \u0111i\u1ec3m \u0111o\u1ea1n m\u00e3 th\u1ef1c thi xong.<\/p>\n\n\n<p>C\u0169ng v\u1eady, khi kh\u00f4ng c\u00f3 b\u1eb1ng ch\u1ee9ng v\u1ec1 vi\u1ec7c preconnect lu\u00f4n lu\u00f4n gi\u00fap c\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t, ph\u1ea7n m\u00e3 \u0111\u00e1nh d\u1ea5u l\u00e0 m\u1ed9t b\u1ea3o \u0111\u1ea3m t\u1ed1t r\u1eb1ng t\u00f4i th\u1ef1c s\u1ef1 \u0111\u00e3 \u0111\u01b0a m\u00e3 t\u00f9y ch\u1ec9nh preconnect v\u00e0o trang!<\/p>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Dua_no_vao_hanh_dong\"><\/span>\u0110\u01b0a n\u00f3 v\u00e0o h\u00e0nh \u0111\u1ed9ng<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>V\u1eady kh\u00e1c bi\u1ec7t n\u00e0o preconnect c\u00f3 th\u1ec3 t\u1ea1o ra?<\/p>\n\n\n<p>T\u00f4i s\u1eed d\u1ee5ng HTTP Archive \u0111\u1ec3 t\u00ecm m\u1ed9t v\u00e0i trang s\u1eed d\u1ee5ng Cloudinary (d\u1ecbch v\u1ee5 CDN ch\u1ea5t l\u01b0\u1ee3ng cao chuy\u00ean v\u1ec1 media) cho \u1ea3nh c\u1ee7a h\u1ecd v\u00e0 ki\u1ec3m tra khi h\u1ecd <strong>KH\u00d4NG<\/strong> c\u00f3 preconnect v\u00e0 khi <strong>C\u00d3<\/strong> preconnect b\u1eb1ng c\u00e1ch b\u01a1m \u0111o\u1ea1n m\u00e3 JavaScript v\u00e0o.<\/p>\n\n\n<p>M\u1ed7i ki\u1ec3m tra bao g\u1ed3m ch\u00edn l\u1ea7n ch\u1ea1y, s\u1eed d\u1ee5ng Chrome \u0111\u1ec3 m\u00f4 ph\u1ecfng thi\u1ebft b\u1ecb di \u0111\u1ed9ng, v\u00e0 profile c\u1ee7a m\u1ea1ng k\u1ebft n\u1ed1i.<\/p>\n\n\n<p>C\u00f3 m\u1ed9t s\u1ef1 c\u1ea3i thi\u1ec7n \u0111\u00e1ng ch\u00fa \u00fd trong trang \u0111\u1ea7u ti\u00ean (<a href=\"https:\/\/www.digitaladventures.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.digitaladventures.com\/<\/a>), v\u1edbi \u1ea3nh n\u1ec1n ch\u1ec9nh \u0111\u01b0\u1ee3c t\u1ea3i s\u01a1m h\u01a1n n\u1eeda gi\u00e2y (chu\u1ed7i h\u00ecnh \u1edf tr\u00ean) so v\u1edbi trang kh\u00f4ng c\u00f3 preconnect (chu\u1ed7i h\u00ecnh \u1edf d\u01b0\u1edbi).<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/digitaladventures-co-khong-preconnect.png\" alt=\"trang c\u00f3 v\u00e0 kh\u00f4ng c\u00f3 preconnect\" class=\"wp-image-15938\"\/><figcaption>H\u00ecnh \u1edf tr\u00ean c\u00f3 precoonect, h\u00ecnh \u1edf d\u01b0\u1edbi kh\u00f4ng c\u00f3 preconnect<\/figcaption><\/figure><\/div>\n\n\n<p>So s\u00e1nh c\u00e1c b\u1ea3ng waterfall: kho\u1ea3ng c\u00e1ch gi\u1eefa ph\u1ea7n k\u1ebft th\u00fac trong vi\u1ec7c t\u1ea1o k\u1ebft n\u1ed1i m\u1ea1ng v\u00e0 ph\u1ea7n b\u1eaft \u0111\u1ea7u trong vi\u1ec7c y\u00eau c\u1ea7u \u1ea3nh cho th\u1ea5y preconnect \u0111\u00e3 khuy\u1ebfn kh\u00edch Chrome k\u1ebft n\u1ed1i s\u1edbm h\u01a1n so v\u1edbi \u0111\u1ec3 n\u00f3 th\u1ef1c hi\u1ec7n theo m\u1eb7c \u0111\u1ecbnh.<\/p>\n\n\n<p>V\u00e0 b\u1eb1ng c\u00e1ch lo\u1ea1i b\u1ecf thi\u1ebft l\u1eadp k\u1ebft n\u1ed1i m\u1ea1ng t\u1eeb tuy\u1ebfn hi\u1ec3n th\u1ecb quan tr\u1ecdng, Chrome c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u t\u00ecm n\u1ea1p c\u00e1c \u1ea3nh s\u1edbm h\u01a1n.<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/digitaladventures-preconnect.png\" alt=\"preconnect v\u1edbi cloudinary\" class=\"wp-image-15943\"\/><figcaption>C\u00f3 preconnect v\u1edbi Cloudinary<\/figcaption><\/figure><\/div>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/digitaladventures-before.png\" alt=\"Kh\u00f4ng preconnect v\u1edbi Cloudinary\" class=\"wp-image-15944\"\/><figcaption>Kh\u00f4ng preconnect v\u1edbi Cloudinary<\/figcaption><\/figure><\/div>\n\n\n<p>B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 l\u01b0u \u00fd \u0111\u1ebfn vi\u1ec7c thi\u1ebft l\u1eadp k\u1ebft n\u1ed1i di\u1ec5n ra s\u1edbm h\u01a1n trong ki\u1ec3m tra v\u1edbi preconnect, \u0111\u00e2y l\u00e0 \u0111i\u1ec1u t\u00f4i th\u01b0\u1eddng th\u1ea5y v\u00e0 nghi ng\u1edd n\u00f3 l\u00e0 do tranh ch\u1ea5p m\u1ea1ng th\u1ea5p h\u01a1n v\u00e0o th\u1eddi \u0111i\u1ec3m trang b\u1eaft \u0111\u1ea7u t\u1ea3i.<\/p>\n\n\n<p>N\u1ebfu b\u1ea1n mu\u1ed1n t\u1ef1 m\u00ecnh ki\u1ec3m tra k\u1ebft qu\u1ea3, d\u01b0\u1edbi \u0111\u00e2y l\u00e0 li\u00ean k\u1ebft \u0111\u1ebfn ch\u1ebf \u0111\u1ed9 xem so s\u00e1nh, click v\u00e0o nh\u00e3n \u1edf b\u00ean tr\u00e1i c\u1ee7a filmstrip s\u1ebd \u0111\u01b0a b\u1ea1n \u0111\u1ebfn l\u1ea7n ch\u1ea1y trung b\u00ecnh cho m\u1ed7i ki\u1ec3m tra:<\/p>\n\n\n<p><a href=\"https:\/\/www.webpagetest.org\/video\/compare.php?tests=190807_MR_41322698cc9e8666e96fe0a856204dbe,190807_AD_d1e711f0158521f9f872f86890508711\">https:\/\/www.webpagete<\/a><a href=\"https:\/\/www.webpagetest.org\/video\/compare.php?tests=190807_MR_41322698cc9e8666e96fe0a856204dbe,190807_AD_d1e711f0158521f9f872f86890508711\" target=\"_blank\" rel=\"noreferrer noopener\">s<\/a><a href=\"https:\/\/www.webpagetest.org\/video\/compare.php?tests=190807_MR_41322698cc9e8666e96fe0a856204dbe,190807_AD_d1e711f0158521f9f872f86890508711\">t.org\/video\/compare.php?tests=190807<\/a><\/p>\n\n\n<p>V\u1edbi trang th\u1ee9 hai (<a href=\"https:\/\/hydeparkpicturehouse.co.uk\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/hydeparkpicturehouse.co.uk\/<\/a>), c\u00f3 r\u1ea5t \u00edt s\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa hai l\u1ea7n ki\u1ec3m tra &#8211; c\u00f3 m\u1ed9t s\u1ef1 kh\u00e1c bi\u1ec7t nh\u1ecf g\u1ea7n l\u00fac b\u1eaft \u0111\u1ea7u c\u1ee7a filmtrip do ph\u1ea3n h\u1ed3i m\u00e1y ch\u1ee7 nhanh h\u01a1n trong ki\u1ec3m tra c\u00f3 preconnect (thanh menu \u1edf ph\u00eda cu\u1ed1i trang xu\u1ea5t hi\u1ec7n nhanh h\u01a1n).<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/hydeparkpicturehouse-filmstrip.png\" alt=\"ki\u1ec3m tra preconnect v\u1edbi trang th\u1ee9 hai\" class=\"wp-image-15947\"\/><figcaption>Trang \u0111\u1ea7u c\u00f3 preconnect, trong khi trang b\u00ean d\u01b0\u1edbi th\u00ec kh\u00f4ng<\/figcaption><\/figure><\/div>\n\n\n<p>Nh\u01b0ng v\u1ec1 t\u1ed5ng th\u1ec3 preconnect kh\u00f4ng c\u00f3 b\u1ea5t k\u1ef3 \u1ea3nh h\u01b0\u1edfng n\u00e0o m\u1ed9t khi Chrome kh\u00e1m ph\u00e1 ra \u1ea3nh, n\u00f3 ngay l\u1eadp t\u1ee9c \u01b0u ti\u00ean y\u00eau c\u1ea7u t\u00ecm n\u1ea1p cho n\u00f3.<\/p>\n\n\n<p>Trong b\u1ea3ng waterfall c\u00f3 preconnect, b\u1ea1n s\u1ebd th\u1ea5y Chrome b\u1eaft \u0111\u1ea7u t\u1ea1o k\u1ebft n\u1ed1i th\u1eadm ch\u00ed l\u00e0 tr\u01b0\u1edbc khi \u0111o\u1ea1n m\u00e3 b\u01a1m v\u00e0o \u0111\u1ec3 th\u1ef1c hi\u1ec7n nhi\u1ec7m v\u1ee5 preconnect \u0111\u01b0\u1ee3c th\u1ef1c thi &#8211; thanh d\u1ecdc m\u00e0u t\u00edm cho m\u1ee5c \u0111\u00edch \u0111\u00e1nh d\u1ea5u th\u1eddi gian th\u1ef1c t\u1ebf di\u1ec5n ra sau t\u00ecm ki\u1ebfm DNS cho Cloudinary.<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/hydeparkpicturehouse-preconnect.png\" alt=\"C\u00f3 preconnect t\u1edbi Cloudinary\" class=\"wp-image-15951\"\/><figcaption>C\u00f3 preconnect t\u1edbi Cloudinary<\/figcaption><\/figure>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/hydeparkpicturehouse-before.png\" alt=\"Kh\u00f4ng c\u00f3 preconnect t\u1edbi Cloudinary\" class=\"wp-image-15952\"\/><figcaption>Kh\u00f4ng c\u00f3 preconnect t\u1edbi Cloudinary<\/figcaption><\/figure>\n\n\n<p>M\u1ed9t l\u1ea7n n\u1eefa, \u0111\u01b0\u1eddng link b\u00ean d\u01b0\u1edbi \u0111\u00e2y so s\u00e1nh gi\u1eefa hai ki\u1ec3m tra n\u1ebfu b\u1ea1n mu\u1ed1n t\u1ef1 kh\u00e1m ph\u00e1 th\u00eam:<\/p>\n\n\n<p><a href=\"https:\/\/www.webpagetest.org\/video\/compare.php?tests=190807_CP_c4385658104d23097b2084d15f7b3903,190807_0N_6d3eed6797303b7a4243e00335159125\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.webpagetest.org\/video\/compare.php?tests=190807_CP<\/a><\/p>\n\n\n<p>C\u00f3 nhi\u1ec1u t\u00f9y ch\u1ecdn kh\u00e1c \u0111\u1ec3 c\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t cho c\u1ea3 hai trang v\u1eeba test v\u00e0 n\u1ebfu ch\u00fang \u0111\u01b0\u1ee3c tri\u1ec3n khai, preconnect c\u00f3 th\u1ec3 tr\u1edf th\u00e0nh quan tr\u1ecdng h\u01a1n ho\u1eb7c b\u1edbt quan tr\u1ecdng \u0111i &#8211; \u0111\u1ec3 ph\u00e1t hi\u1ec7n ra \u0111i\u1ec1u \u0111\u00f3 th\u00ec ki\u1ec3m tra ch\u00ednh l\u00e0 y\u1ebfu t\u1ed1 ch\u00eca kh\u00f3a.<\/p>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Su_dung_preconnect_mot_cach_co_chon_loc\"><\/span>S\u1eed d\u1ee5ng preconnect m\u1ed9t c\u00e1ch c\u00f3 ch\u1ecdn l\u1ecdc<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>\u0110em \u0111\u1ebfn c\u1ea3i thi\u1ec7n \u0111\u1ebfn 0,5 gi\u00e2y trong ki\u1ec3m tra \u0111\u1ea7u ti\u00ean, b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb c\u00e1m d\u1ed7 b\u1edfi tuy\u00ean b\u1ed1: &#8220;preconnect t\u1ea5t c\u1ea3 m\u1ecdi th\u1ee9, n\u00f3 qu\u00e1 t\u1ed1t!&#8221;, nh\u01b0ng t\u00f4i ph\u1ea3i can b\u1ea1n l\u1ea1i &#8211; \u00edt nh\u1ea5t l\u00e0 cho \u0111\u1ebfn khi th\u1ef1c hi\u1ec7n c\u00e1c ki\u1ec3m tra k\u1ef9 l\u01b0\u1ee1ng.<\/p>\n\n\n<p>C\u00e1c tr\u00ecnh duy\u1ec7t c\u00f3 c\u00e1c gi\u1edbi h\u1ea1n v\u1ec1 s\u1ed1 l\u01b0\u1ee3ng y\u00eau c\u1ea7u DNS \u0111\u1ed3ng th\u1eddi m\u00e0 ch\u00fang c\u00f3 th\u1ec3 t\u1ea1o, v\u00e0 vi\u1ec7c t\u1ea1o m\u1ed9t k\u1ebft n\u1ed1i HTTP m\u1edbi c\u00f3 th\u1ec3 y\u00eau c\u1ea7u x\u00e1c th\u1ef1c \u0111\u1ec3 t\u00ecm n\u1ea1p, v\u00e0 c\u00e1c x\u00e1c th\u1ef1c n\u00e0y c\u00f3 th\u1ec3 <em>c\u1ea1nh tranh v\u1edbi c\u00e1c t\u00e0i nguy\u00ean kh\u00e1c quan tr\u1ecdng h\u01a1n<\/em> trong vi\u1ec7c k\u1ebft n\u1ed1i m\u1ea1ng.<\/p>\n\n\n<p>Th\u1eadm ch\u00ed ngay c\u1ea3 khi kh\u00f4ng ph\u1ea3i ch\u1ecbu y\u00eau c\u1ea7u TLS ng\u1ea7m \u1ea9n, vi\u1ec7c b\u1ed5 sung th\u00eam preconnect c\u00f3 th\u1ec3 th\u1ef1c s\u1ef1 l\u00e0m m\u1ecdi th\u1ee9 ch\u1eadm \u0111i c\u0169ng nh\u01b0 n\u00f3 c\u00f3 th\u1ec3 thay \u0111\u1ed5i th\u1ee9 t\u1ef1 c\u00e1c ngu\u1ed3n t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c l\u1ea5y, c\u00e1i c\u00f3 th\u1ec3 l\u00e0m gia t\u0103ng c\u1ea1nh tranh cho m\u1ea1ng ho\u1eb7c <a href=\"https:\/\/kiencang.net\/toi-thieu-cong-viec-luong-chinh\/\" target=\"_blank\" rel=\"noreferrer noopener\">lu\u1ed3ng ch\u00ednh<\/a> (mean thread) c\u1ee7a tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n<p>T\u00f4i th\u1eed ch\u1ea1y l\u1ea1i ki\u1ec3m tra cho trang <a href=\"https:\/\/www.digitaladventures.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.digitaladventures.com\/<\/a> v\u1edbi vi\u1ec7c b\u1ed5 sung th\u00eam nhi\u1ec1u preconnect h\u01a1n:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>  var entries = &#91;\n       {'href': 'https:\/\/res.cloudinary.com'},\n       {'href': 'https:\/\/connect.facebook.net'},\n       {'href': 'https:\/\/www.google-analytics.com'},\n       {'href': 'https:\/\/cdnjs.cloudflare.com'},\n       {'href': 'https:\/\/client.crisp.chat'},\n       {'href': 'https:\/\/www.googleadservices.com'},\n       {'href': 'https:\/\/www.gstatic.com'}\n   ];<\/code><\/pre>\n\n\n<p>V\u00e0 k\u1ebft qu\u1ea3 ki\u1ec3m tra cho th\u1ea5y, v\u1edbi nhi\u1ec1u preconnect nh\u01b0 v\u1eady (c\u00e1i \u1edf tr\u00ean) l\u00e0m trang ch\u1eadm \u0111i m\u1ed9t ch\u00fat so v\u1edbi ch\u1ec9 c\u00f3 m\u1ed9t preconnect (h\u00ecnh \u1edf d\u01b0\u1edbi) &#8211; trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y, qua nhi\u1ec1u th\u1eed nghi\u1ec7m, t\u00f4i th\u1ea5y \u1ea3nh n\u1ec1n render ch\u1eadm h\u01a1n 100ms, nh\u01b0ng t\u00f4i \u0111\u00e3 th\u1ea5y nhi\u1ec1u v\u00ed d\u1ee5 th\u1eadm ch\u00ed c\u00f2n t\u1ec7 h\u1ea1i h\u01a1n.<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/digitaladventures-qua-nhieu-preconnects-filmstrip.png\" alt=\"qu\u00e1 nhi\u1ec1u preconnect\" class=\"wp-image-15957\"\/><figcaption>H\u00ecnh \u1edf tr\u00ean c\u00f3 nhi\u1ec1u preconnect, h\u00ecnh b\u00ean d\u01b0\u1edbi ch\u1ec9 c\u00f3 m\u1ed9t preconnect<\/figcaption><\/figure>\n\n\n<p>M\u1ed9t l\u1ea7n n\u1eefa, \u0111\u00e2y l\u00e0 so s\u00e1nh gi\u1eefa hai ki\u1ec3m tra n\u1ebfu b\u1ea1n mu\u1ed1n kh\u00e1m ph\u00e1 th\u00eam: <a href=\"https:\/\/www.webpagetest.org\/video\/compare.php?tests=190807_2B_7f2d2f22147f6207e64bf04ce7e06f1a,190807_MR_41322698cc9e8666e96fe0a856204dbe\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.webpagetest.org\/video\/compare.php?tests=190807_2B<\/a><\/p>\n\n\n<p>Ch\u00fang ta c\u00f3 th\u1ec3 tinh ch\u1ec9nh danh s\u00e1ch preconnect \u0111\u1ec3 ph\u00e1t hi\u1ec7n ra c\u00e1i n\u00e0o th\u1ef1c s\u1ef1 gi\u00fap trang t\u1ea3i nhanh h\u01a1n, c\u00f2n c\u00e1i n\u00e0o s\u1ebd l\u00e0m n\u00f3 ch\u1eadm \u0111i, nh\u01b0ng t\u00f4i s\u1ebd \u0111\u1ec3 n\u00f3 l\u1ea1i nh\u01b0 m\u1ed9t d\u1ea1ng b\u00e0i t\u1eadp n\u1ebfu b\u1ea1n mu\u1ed1n th\u1eed.<\/p>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Vai_suy_nghi_cuoi\"><\/span>V\u00e0i suy ngh\u0129 cu\u1ed1i<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>Trong b\u00e0i vi\u1ebft n\u00e0y t\u00f4i t\u1eadp trung v\u00e0o hai trang s\u1eed d\u1ee5ng Cloudinary, nh\u01b0ng t\u00f4i mong ch\u1edd th\u1ea5y k\u1ebft qu\u1ea3 t\u01b0\u01a1ng t\u1ef1 v\u1edbi b\u1ea5t k\u1ef3 trang n\u00e0o host \u1ea3nh c\u1ee7a h\u1ecd th\u00f4ng qua b\u00ean th\u1ee9 ba, ch\u1eb3ng h\u1ea1n nh\u01b0 <a href=\"https:\/\/www.imgix.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Imgix<\/a>, <a href=\"https:\/\/kraken.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Kraken.io<\/a>, <a href=\"https:\/\/aws.amazon.com\/vi\/cloudfront\/\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudfront<\/a>, v\u00e2n v\u00e2n.<\/p>\n\n\n<p>V\u00e0 t\u1eeb nh\u1eefng g\u00ec t\u00f4i \u0111\u00e3 th\u1ea5y t\u1eeb tr\u01b0\u1edbc \u0111\u1ebfn nay, t\u00f4i ngh\u0129 c\u00f3 nhi\u1ec1u trang host \u1ea3nh c\u1ee7a h\u1ecd th\u00f4ng qua d\u1ecbch v\u1ee5 c\u1ee7a b\u00ean th\u1ee9 ba s\u1ebd th\u1ea5y hi\u1ec7u su\u1ea5t \u0111\u01b0\u1ee3c c\u1ea3i thi\u1ec7n n\u1ebfu tr\u00ecnh duy\u1ec7t t\u1ef1 \u0111\u1ed9ng th\u1ef1c hi\u1ec7n k\u1ebft n\u1ed1i s\u1edbm h\u01a1n. T\u00f4i c\u00f3 th\u1ec3 n\u00f3i v\u1eady v\u00ec t\u00f4i v\u1eeba ho\u00e0n th\u00e0nh ph\u00e2n t\u00edch d\u1eef li\u1ec7u t\u1eeb 2000 b\u00e0i ki\u1ec3m tra t\u00f4i th\u1ef1c hi\u1ec7n v\u00e0o cu\u1ed1i tu\u1ea7n v\u1eeba r\u1ed3i.<\/p>\n\n\n<p>Tr\u01b0\u1eddng h\u1ee3p t\u1ef1 \u0111\u1ed9ng th\u1ef1c hi\u1ec7n preconnect cho c\u00e1c ngu\u1ed3n t\u00e0i nguy\u00ean kh\u00f4ng ph\u1ea3i l\u00e0 \u1ea3nh c\u00f3 th\u1ec3 c\u00f3 \u00edt nhi\u1ec1u l\u1eabn l\u1ed7n h\u01a1n &#8211; k\u1ebft xu\u1ea5t c\u00e1c ngu\u1ed3n t\u00e0i nguy\u00ean ch\u1eb7n hi\u1ec3n th\u1ecb c\u00f3 xu h\u01b0\u1edbng y\u00eau c\u1ea7u \u01b0u ti\u00ean \u1edf m\u1ee9c \u0111\u1ed9 cao do v\u1eady kh\u00f4ng b\u1ecb tr\u00ec ho\u00e3n trong vi\u1ec7c t\u1ea1o k\u1ebft n\u1ed1i, v\u00e0 th\u1eadm ch\u00ed \u0111\u1ed1i v\u1edbi c\u00e1c t\u00e0i nguy\u00ean c\u00f3 m\u1ee9c \u0111\u1ed9 \u01b0u ti\u00ean th\u1ea5p h\u01a1n ch\u1eb3ng h\u1ea1n nh\u01b0 c\u00e1c m\u00e3 JS <a href=\"https:\/\/kiencang.net\/tai-javascript-defer-async\/\" target=\"_blank\" rel=\"noreferrer noopener\">kh\u00f4ng \u0111\u1ed3ng b\u1ed9 (async)<\/a>, t\u1ea3i ch\u00fang s\u1edbm h\u01a1n \u0111\u1ed3ng ngh\u0129a v\u1edbi vi\u1ec7c tr\u00ecnh duy\u1ec7t s\u1ebd c\u1ed1 g\u1eafng th\u1ef1c thi ch\u00fang s\u1edbm h\u01a1n, m\u00e0 \u0111i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 l\u1ef1a ch\u1ecdn \u0111\u00fang ho\u1eb7c sai.<\/p>\n\n\n<p>Preconnect l\u00e0 t\u00ednh n\u0103ng hay nh\u01b0ng do s\u1ef1 ph\u1ee9c t\u1ea1p trong c\u00e1ch tr\u00ecnh duy\u1ec7t \u01b0u ti\u00ean t\u00e0i nguy\u00ean, v\u00e0 do th\u00f3i quen c\u1ee7a ch\u00fang ta x\u00e2y d\u1ef1ng trang d\u1ef1a tr\u00ean c\u00e1c ngu\u1ed3n t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c ph\u00e2n t\u00e1n qua nhi\u1ec1u m\u00e1y ch\u1ee7 g\u1ed1c, cho n\u00ean kh\u00f4ng d\u1ec5 d\u00e0ng g\u00ec \u0111\u1ec3 lu\u00f4n th\u1ef1c hi\u1ec7n ch\u00ednh x\u00e1c nhi\u1ec7m v\u1ee5 n\u00e0y.<\/p>\n\n\n<p>S\u1eed d\u1ee5ng t\u00ednh n\u0103ng b\u01a1m m\u00e3 trong WebPageTest cho ph\u00e9p t\u00f4i th\u1eed nghi\u1ec7m, kh\u00e1m ph\u00e1 s\u1ef1 ph\u1ee9c t\u1ea1p trong vi\u1ec7c n\u00ean k\u1ebft n\u1ed1i v\u1edbi m\u00e1y ch\u1ee7 g\u1ed1c n\u00e0o, c\u00f2n m\u00e1y ch\u1ee7 g\u1ed1c n\u00e0o th\u00ec kh\u00f4ng n\u00ean k\u1ebft n\u1ed1i, v\u00e0 \u0111\u00e1nh gi\u00e1 \u0111\u01b0\u1ee3c c\u00e1c k\u1ebft qu\u1ea3 tr\u01b0\u1edbc khi t\u00f4i khuy\u1ebfn ngh\u1ecb kh\u00e1ch h\u00e0ng thay \u0111\u1ed5i m\u00e3 c\u1ee7a h\u1ecd.<\/p>\n\n\n<p><em>(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: Experimenting With Link Rel=preconnect Using Custom Script Injection in WebPageTest, c\u1ee7a t\u00e1c gi\u1ea3: Andy Davies, trang: andydavies[.]me)<\/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 minh h\u1ecda cho m\u1ed9t th\u1ef1c t\u1ebf l\u00e0 kh\u00f4ng ph\u1ea3i b\u1ea1n c\u1ee9 preconnect \u0111\u1ebfn t\u1ea5t c\u1ea3 c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a b\u00ean th\u1ee9 ba l\u00e0 s\u1ebd gi\u00fap trang c\u1ee7a b\u1ea1n t\u1ea3i nhanh h\u01a1n ho\u1eb7c\/v\u00e0 hi\u1ec3n th\u1ecb nhanh h\u01a1n cho ng\u01b0\u1eddi d\u00f9ng. \u0110i\u1ec1u n\u00e0y l\u00e0 m\u1ed9t l\u1eddi c\u1ea3nh t\u1ec9nh cho &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>Tr\u1ea3i nghi\u1ec7m th\u1ef1c t\u1ebf v\u1edbi link rel=preconnect, s\u1eed d\u1ee5ng Script t\u00f9y ch\u1ec9nh b\u01a1m v\u00e0o WebPageTest &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"description\" content=\"B\u00e0i vi\u1ebft n\u00e0y minh h\u1ecda cho th\u1ef1c t\u1ebf l\u00e0 kh\u00f4ng ph\u1ea3i b\u1ea1n c\u1ee9 preconnect \u0111\u1ebfn t\u1ea5t c\u1ea3 c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a b\u00ean th\u1ee9 ba l\u00e0 s\u1ebd gi\u00fap trang c\u1ee7a b\u1ea1n t\u1ea3i nhanh h\u01a1n ho\u1eb7c hi\u1ec3n th\u1ecb nhanh h\u01a1n cho ng\u01b0\u1eddi d\u00f9ng.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/trai-nghiem-link-preconnect\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tr\u1ea3i nghi\u1ec7m th\u1ef1c t\u1ebf v\u1edbi link rel=preconnect, s\u1eed d\u1ee5ng Script t\u00f9y ch\u1ec9nh b\u01a1m v\u00e0o WebPageTest &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"B\u00e0i vi\u1ebft n\u00e0y minh h\u1ecda cho th\u1ef1c t\u1ebf l\u00e0 kh\u00f4ng ph\u1ea3i b\u1ea1n c\u1ee9 preconnect \u0111\u1ebfn t\u1ea5t c\u1ea3 c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a b\u00ean th\u1ee9 ba l\u00e0 s\u1ebd gi\u00fap trang c\u1ee7a b\u1ea1n t\u1ea3i nhanh h\u01a1n ho\u1eb7c hi\u1ec3n th\u1ecb nhanh h\u01a1n cho ng\u01b0\u1eddi d\u00f9ng.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/trai-nghiem-link-preconnect\/\" \/>\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-06T13:48:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/wpt-advanced-settings.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=\"18 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tr\u1ea3i nghi\u1ec7m th\u1ef1c t\u1ebf v\u1edbi link rel=preconnect, s\u1eed d\u1ee5ng Script t\u00f9y ch\u1ec9nh b\u01a1m v\u00e0o WebPageTest &#8226; Ki\u1ebfn c\u00e0ng","description":"B\u00e0i vi\u1ebft n\u00e0y minh h\u1ecda cho th\u1ef1c t\u1ebf l\u00e0 kh\u00f4ng ph\u1ea3i b\u1ea1n c\u1ee9 preconnect \u0111\u1ebfn t\u1ea5t c\u1ea3 c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a b\u00ean th\u1ee9 ba l\u00e0 s\u1ebd gi\u00fap trang c\u1ee7a b\u1ea1n t\u1ea3i nhanh h\u01a1n ho\u1eb7c hi\u1ec3n th\u1ecb nhanh h\u01a1n cho ng\u01b0\u1eddi d\u00f9ng.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kiencang.net\/trai-nghiem-link-preconnect\/","og_locale":"vi_VN","og_type":"article","og_title":"Tr\u1ea3i nghi\u1ec7m th\u1ef1c t\u1ebf v\u1edbi link rel=preconnect, s\u1eed d\u1ee5ng Script t\u00f9y ch\u1ec9nh b\u01a1m v\u00e0o WebPageTest &#8226; Ki\u1ebfn c\u00e0ng","og_description":"B\u00e0i vi\u1ebft n\u00e0y minh h\u1ecda cho th\u1ef1c t\u1ebf l\u00e0 kh\u00f4ng ph\u1ea3i b\u1ea1n c\u1ee9 preconnect \u0111\u1ebfn t\u1ea5t c\u1ea3 c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a b\u00ean th\u1ee9 ba l\u00e0 s\u1ebd gi\u00fap trang c\u1ee7a b\u1ea1n t\u1ea3i nhanh h\u01a1n ho\u1eb7c hi\u1ec3n th\u1ecb nhanh h\u01a1n cho ng\u01b0\u1eddi d\u00f9ng.","og_url":"https:\/\/kiencang.net\/trai-nghiem-link-preconnect\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2020-04-06T13:48:17+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/wpt-advanced-settings.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/trai-nghiem-link-preconnect\/","url":"https:\/\/kiencang.net\/trai-nghiem-link-preconnect\/","name":"Tr\u1ea3i nghi\u1ec7m th\u1ef1c t\u1ebf v\u1edbi link rel=preconnect, s\u1eed d\u1ee5ng Script t\u00f9y ch\u1ec9nh b\u01a1m v\u00e0o WebPageTest &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2020-04-06T13:48:17+00:00","dateModified":"2020-04-06T13:48:17+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"description":"B\u00e0i vi\u1ebft n\u00e0y minh h\u1ecda cho th\u1ef1c t\u1ebf l\u00e0 kh\u00f4ng ph\u1ea3i b\u1ea1n c\u1ee9 preconnect \u0111\u1ebfn t\u1ea5t c\u1ea3 c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a b\u00ean th\u1ee9 ba l\u00e0 s\u1ebd gi\u00fap trang c\u1ee7a b\u1ea1n t\u1ea3i nhanh h\u01a1n ho\u1eb7c hi\u1ec3n th\u1ecb nhanh h\u01a1n cho ng\u01b0\u1eddi d\u00f9ng.","breadcrumb":{"@id":"https:\/\/kiencang.net\/trai-nghiem-link-preconnect\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/trai-nghiem-link-preconnect\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/trai-nghiem-link-preconnect\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"Tr\u1ea3i nghi\u1ec7m th\u1ef1c t\u1ebf v\u1edbi link rel=preconnect, s\u1eed d\u1ee5ng Script t\u00f9y ch\u1ec9nh b\u01a1m v\u00e0o WebPageTest"}]},{"@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\/16873"}],"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=16873"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16873\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=16873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=16873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=16873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}