{"id":16861,"date":"2020-03-16T07:09:41","date_gmt":"2020-03-16T00:09:41","guid":{"rendered":"https:\/\/kiencang.net\/?p=15239"},"modified":"2020-03-16T07:09:41","modified_gmt":"2020-03-16T00:09:41","slug":"tai-javascript-ben-thu-ba","status":"publish","type":"post","link":"https:\/\/kiencang.net\/tai-javascript-ben-thu-ba\/","title":{"rendered":"T\u1ea3i JavaScript c\u1ee7a b\u00ean th\u1ee9 ba hi\u1ec7u qu\u1ea3 h\u01a1n"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><em>H\u00e0ng ngo\u1ea1i th\u00ec th\u01b0\u1eddng ch\u1ea5t l\u01b0\u1ee3ng cao r\u1ed3i, nh\u01b0ng \u0111\u00f4i khi thu\u1ebf m\u00e1 v\u00e0o c\u0169ng kh\u00f4ng \u00edt.<\/em><\/p>\n\n\n<p>B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n tr\u00e1nh \u0111\u01b0\u1ee3c <a href=\"https:\/\/kiencang.net\/javascript-ben-thu-ba\/\" target=\"_blank\" rel=\"noreferrer noopener\">c\u00e1c c\u1ea1m b\u1eaby khi s\u1eed d\u1ee5ng JavaScript c\u1ee7a b\u00ean th\u1ee9 ba (third-party)<\/a> \u0111\u1ec3 c\u1ea3i thi\u1ec7n th\u1eddi gian t\u1ea3i (load time) v\u00e0 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng (user experience).<\/p>\n\n\n<p>N\u1ebfu <a href=\"https:\/\/kiencang.net\/xac-dinh-javascript-ben-thu-ba-cham-website\/\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript t\u1eeb b\u00ean th\u1ee9 ba l\u00e0m ch\u1eadm t\u1ed1c \u0111\u1ed9 t\u1ea3i trang<\/a> c\u1ee7a b\u1ea1n, b\u1ea1n c\u00f3 hai l\u1ef1a ch\u1ecdn \u0111\u1ec3 c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9, hi\u1ec7u su\u1ea5t:<\/p>\n\n\n<ul><li><strong>Lo\u1ea1i b\u1ecf n\u00f3<\/strong>, n\u1ebfu n\u00f3 kh\u00f4ng gi\u00fap t\u1ea1o ra gi\u00e1 tr\u1ecb r\u00f5 r\u00e0ng cho trang.<\/li><li>ho\u1eb7c <strong>T\u1ed1i \u01b0u h\u00f3a qu\u00e1 tr\u00ecnh t\u1ea3i<\/strong>.<\/li><\/ul>\n\n\n<p>B\u00e0i vi\u1ebft n\u00e0y gi\u1ea3i th\u00edch c\u00e1ch t\u1ed1i \u01b0u h\u00f3a qu\u00e1 tr\u00ecnh t\u1ea3i JavaScript c\u1ee7a b\u00ean th\u1ee9 ba b\u1eb1ng c\u00e1c k\u1ef9 thu\u1eadt sau:<\/p>\n\n\n<ol><li>S\u1eed d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh <em>async<\/em> v\u00e0 <em>defer<\/em> trong th\u1ebb <em>&lt;script><\/em> \u0111\u1ec3 t\u00e1c \u0111\u1ed9ng v\u00e0o ph\u01b0\u01a1ng th\u1ee9c t\u1ea3i v\u1ec1;<\/li><li>Th\u00e0nh l\u1eadp c\u00e1c k\u1ebft n\u1ed1i s\u1edbm (preconnect) \u0111\u1ebfn m\u00e1y ch\u1ee7 g\u1ed1c c\u1ea7n \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n \u0111\u1ec3 \u01b0u ti\u00ean cho c\u00e1c t\u00e0i nguy\u00ean quan tr\u1ecdng;<\/li><li>Lazy-loading (t\u1ea3i l\u01b0\u1eddi) \u0111\u1ec3 t\u00e0i nguy\u00ean kh\u00f4ng quan tr\u1ecdng kh\u00f4ng l\u00e0m \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn qu\u00e1 tr\u00ecnh hi\u1ec3n th\u1ecb ban \u0111\u1ea7u;<\/li><li>T\u1ed1i \u01b0u h\u00f3a c\u00e1ch b\u1ea1n ph\u1ee5c v\u1ee5 c\u00e1c JS c\u1ee7a b\u00ean th\u1ee9 ba.<\/li><\/ol>\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-6577d6d09d832\" ><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-6577d6d09d832\"  type=\"checkbox\" id=\"item-6577d6d09d832\"><\/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-javascript-ben-thu-ba\/#Su_dung_async_hoac_defer\" title=\"S\u1eed d\u1ee5ng async ho\u1eb7c defer\">S\u1eed d\u1ee5ng async ho\u1eb7c defer<\/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-javascript-ben-thu-ba\/#Thuc_hien_cac_ket_noi_som_khi_may_chu_goc_ben_ngoai_yeu_cau\" title=\"Th\u1ef1c hi\u1ec7n c\u00e1c k\u1ebft n\u1ed1i s\u1edbm khi m\u00e1y ch\u1ee7 g\u1ed1c b\u00ean ngo\u00e0i y\u00eau c\u1ea7u\">Th\u1ef1c hi\u1ec7n c\u00e1c k\u1ebft n\u1ed1i s\u1edbm khi m\u00e1y ch\u1ee7 g\u1ed1c b\u00ean ngo\u00e0i y\u00eau c\u1ea7u<\/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-javascript-ben-thu-ba\/#Lazy-load_cac_tai_nguyen_cua_ben_thu_ba\" title=\"Lazy-load c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a b\u00ean th\u1ee9 ba\">Lazy-load c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a b\u00ean th\u1ee9 ba<\/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-javascript-ben-thu-ba\/#Toi_uu_hoa_cach_ban_phuc_vu_cac_doan_ma_cua_ben_thu_ba\" title=\"T\u1ed1i \u01b0u h\u00f3a c\u00e1ch b\u1ea1n ph\u1ee5c v\u1ee5 c\u00e1c \u0111o\u1ea1n m\u00e3 c\u1ee7a b\u00ean th\u1ee9 ba\">T\u1ed1i \u01b0u h\u00f3a c\u00e1ch b\u1ea1n ph\u1ee5c v\u1ee5 c\u00e1c \u0111o\u1ea1n m\u00e3 c\u1ee7a b\u00ean th\u1ee9 ba<\/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\/tai-javascript-ben-thu-ba\/#Su_dung_dich_vu_workers_de_cache_doan_ma_tu_may_chu_cua_ben_thu_ba\" title=\"S\u1eed d\u1ee5ng d\u1ecbch v\u1ee5 workers \u0111\u1ec3 cache \u0111o\u1ea1n m\u00e3 t\u1eeb m\u00e1y ch\u1ee7 c\u1ee7a b\u00ean th\u1ee9 ba\">S\u1eed d\u1ee5ng d\u1ecbch v\u1ee5 workers \u0111\u1ec3 cache \u0111o\u1ea1n m\u00e3 t\u1eeb m\u00e1y ch\u1ee7 c\u1ee7a b\u00ean th\u1ee9 ba<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Su_dung_async_hoac_defer\"><\/span>S\u1eed d\u1ee5ng async ho\u1eb7c defer<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>Do c\u00e1c \u0111o\u1ea1n m\u00e3 t\u1ea3i \u0111\u1ed3ng b\u1ed9 (synchronous scripts) tr\u00ec ho\u00e3n <a href=\"https:\/\/kiencang.net\/dom-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">c\u1ea5u tr\u00fac DOM<\/a> v\u00e0 <a href=\"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/\" target=\"_blank\" rel=\"noreferrer noopener\">k\u1ebft xu\u1ea5t (render)<\/a>, b\u1ea1n lu\u00f4n lu\u00f4n c\u1ea7n ph\u1ea3i t\u1ea3i c\u00e1c \u0111o\u1ea1n m\u00e3 c\u1ee7a b\u00ean th\u1ee9 ba theo c\u00e1ch kh\u00f4ng \u0111\u1ed3ng b\u1ed9 (asynchronously) <em>tr\u1eeb khi \u0111o\u1ea1n m\u00e3 ph\u1ea3i ch\u1ea1y tr\u01b0\u1edbc khi trang \u0111\u01b0\u1ee3c k\u1ebft xu\u1ea5t<\/em>.<\/p>\n\n\n<p>C\u00e1c thu\u1ed9c t\u00ednh <a href=\"https:\/\/kiencang.net\/tai-javascript-defer-async\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>async<\/em> v\u00e0 <em>defer<\/em><\/a> n\u00f3i cho tr\u00ecnh duy\u1ec7t bi\u1ebft r\u1eb1ng n\u00f3 c\u00f3 th\u1ec3 ph\u00e2n t\u00edch c\u00fa ph\u00e1p (parsing) HTML trong khi t\u1ea3i JavaScript d\u01b0\u1edbi d\u1ea1ng n\u1ec1n, v\u00e0 r\u1ed3i th\u1ef1c thi JavaScript sau khi n\u00f3 t\u1ea3i xong. B\u1eb1ng c\u00e1ch n\u00e0y, \u0111o\u1ea1n m\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 kh\u00f4ng ch\u1eb7n c\u1ea5u tr\u00fac DOM v\u00e0 qu\u00e1 tr\u00ecnh k\u1ebft xu\u1ea5t trang. K\u1ebft qu\u1ea3 l\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y trang t\u1ea3i tr\u01b0\u1edbc khi t\u1ea5t c\u1ea3 \u0111o\u1ea1n m\u00e3 (JS) \u0111\u01b0\u1ee3c t\u1ea3i xong.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;script async src=\"script.js\"&gt;\n&lt;script defer src=\"script.js\"&gt;<\/code><\/pre>\n\n\n<p>S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa <em>async<\/em> v\u00e0 <em>defer<\/em> l\u00e0 <em>th\u1eddi \u0111i\u1ec3m ch\u00fang b\u1eaft \u0111\u1ea7u th\u1ef1c thi \u0111o\u1ea1n m\u00e3<\/em>.<\/p>\n\n\n<h3 class=\"wp-block-heading\">async<\/h3>\n\n\n<p>\u0110o\u1ea1n m\u00e3 JavaScript v\u1edbi thu\u1ed9c t\u00ednh <em>async<\/em> s\u1ebd \u0111\u01b0\u1ee3c th\u1ef1c thi ngay khi c\u00f3 c\u01a1 h\u1ed9i \u0111\u1ea7u ti\u00ean sau khi ch\u00fang ho\u00e0n t\u1ea5t t\u1ea3i xu\u1ed1ng v\u00e0 tr\u01b0\u1edbc s\u1ef1 ki\u1ec7n <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Events\/load\" target=\"_blank\" rel=\"noreferrer noopener\">load<\/a> c\u1ee7a window. \u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 \u0111o\u1ea1n m\u00e3 JavaScript v\u1edbi thu\u1ed9c t\u00ednh <em>async<\/em> s\u1ebd c\u00f3 th\u1ec3 (v\u00e0 g\u1ea7n nh\u01b0) kh\u00f4ng \u0111\u01b0\u1ee3c th\u1ef1c thi theo th\u1ee9 t\u1ef1 m\u00e0 n\u00f3 xu\u1ea5t hi\u1ec7n trong HTML. N\u00f3 c\u0169ng c\u00f3 ngh\u0129a l\u00e0 ch\u00fang <em>c\u00f3 th\u1ec3 l\u00e0m gi\u00e1n \u0111o\u1ea1n<\/em> qu\u00e1 tr\u00ecnh x\u00e2y d\u1ef1ng DOM n\u1ebfu ch\u00fang ho\u00e0n th\u00e0nh qu\u00e1 tr\u00ecnh t\u1ea3i trong khi qu\u00e1 tr\u00ecnh ph\u00e2n t\u00edch c\u00fa ph\u00e1p HTML th\u00ec v\u1eabn \u0111ang ti\u1ebfp di\u1ec5n.<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/async-javascript-1024x322.png\" alt=\"async JavaScript\" class=\"wp-image-15241\"\/><figcaption>Trong v\u00ed d\u1ee5 minh h\u1ecda \u1edf h\u00ecnh tr\u00ean, v\u1edbi thu\u1ed9c t\u00ednh async, \u0111o\u1ea1n m\u00e3 \u0111\u01b0\u1ee3c t\u00ecm n\u1ea1p (fetch) song song v\u1edbi qu\u00e1 tr\u00ecnh ph\u00e2n t\u00edch c\u00fa ph\u00e1p HTML v\u00e0 kh\u00f4ng l\u00e0m gi\u00e1n \u0111o\u1ea1n qu\u00e1 tr\u00ecnh \u0111\u00f3. Tuy nhi\u00ean khi JS t\u00ecm n\u1ea1p xong, m\u00e3 JS \u0111\u01b0\u1ee3c th\u1ef1c thi (execute), n\u00f3 s\u1ebd l\u00e0m gi\u00e1n \u0111o\u1ea1n (ch\u1eb7n \/ block) tr\u00ecnh ph\u00e2n t\u00edch c\u00fa ph\u00e1p (parsing) HTML<\/figcaption><\/figure>\n\n\n<p>Ch\u00fa th\u00edch:<\/p>\n\n\n<ul><li>parsing: ph\u00e2n t\u00edch c\u00fa ph\u00e1p;<\/li><li>blocked: ch\u1eb7n;<\/li><li>fetch: t\u00ecm n\u1ea1p;<\/li><li>execute: th\u1ef1c thi.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\">defer<\/h3>\n\n\n<p>C\u00e1c \u0111o\u1ea1n m\u00e3 JavaScript v\u1edbi thu\u1ed9c t\u00ednh <em>defer<\/em> \u0111\u01b0\u1ee3c th\u1ef1c thi sau khi qu\u00e1 tr\u00ecnh ph\u00e2n t\u00edch c\u00fa ph\u00e1p HTML l\u00e0m xong ho\u00e0n to\u00e0n, nh\u01b0ng tr\u01b0\u1edbc s\u1ef1 ki\u1ec7n <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Events\/DOMContentLoaded\" target=\"_blank\" rel=\"noreferrer noopener\">DOMContentLoaded<\/a>. <em>defer<\/em> \u0111\u1ea3m b\u1ea3o c\u00e1c \u0111o\u1ea1n m\u00e3 JavaScript s\u1ebd \u0111\u01b0\u1ee3c th\u1ef1c thi theo th\u1ee9 t\u1ef1 m\u00e0 ch\u00fang xu\u1ea5t hi\u1ec7n trong HTML v\u00e0 s\u1ebd kh\u00f4ng l\u00e0m ch\u1eb7n tr\u00ecnh ph\u00e2n t\u00edch c\u00fa ph\u00e1p.<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/defer-JS-1024x324.png\" alt=\"defer JavaScript\" class=\"wp-image-15242\"\/><figcaption>V\u1edbi defer th\u00ec JS c\u0169ng \u0111\u01b0\u1ee3c t\u00ecm n\u1ea1p song song v\u1edbi qu\u00e1 tr\u00ecnh ph\u00e2n t\u00edch c\u00fa ph\u00e1p HTML, nh\u01b0ng k\u1ec3 c\u1ea3 khi t\u00ecm n\u1ea1p xong, JS kh\u00f4ng \u0111\u01b0\u1ee3c th\u1ef1c thi ngay m\u00e0 ph\u1ea3i \u0111\u1ee3i tr\u00ecnh ph\u00e2n t\u00edch c\u00fa ph\u00e1p HTML ho\u00e0n th\u00e0nh (done!) r\u1ed3i th\u00ec JS m\u1edbi th\u1ef1c thi<\/figcaption><\/figure>\n\n\n<ul><li>S\u1eed d\u1ee5ng <em>async<\/em> n\u1ebfu \u0111i\u1ec1u quan tr\u1ecdng l\u00e0 ph\u1ea3i ch\u1ea1y (th\u1ef1c thi) \u0111o\u1ea1n m\u00e3 s\u1edbm trong qu\u00e1 tr\u00ecnh t\u1ea3i.<\/li><li>S\u1eed d\u1ee5ng <em>defer<\/em> cho c\u00e1c t\u00e0i nguy\u00ean \u00edt quan tr\u1ecdng h\u01a1n. V\u00ed d\u1ee5, <a href=\"https:\/\/kiencang.net\/youtube-tai-nang-nhu-the-nao\/\" target=\"_blank\" rel=\"noreferrer noopener\">m\u1ed9t tr\u00ecnh b\u1eadt video<\/a> n\u1eb1m d\u01b0\u1edbi <a href=\"https:\/\/kiencang.net\/uu-tien-noi-dung-hien-thi\/\" target=\"_blank\" rel=\"noreferrer noopener\">m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean<\/a>.<\/li><\/ul>\n\n\n<p>S\u1eed d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh n\u00e0y c\u00f3 th\u1ec3 \u1ea3nh h\u01b0\u1edfng \u0111\u00e1ng k\u1ec3 \u0111\u1ebfn vi\u1ec7c <a href=\"https:\/\/kiencang.net\/tang-toc-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">t\u0103ng t\u1ed1c \u0111\u1ed9 website<\/a>. L\u1ea5y v\u00ed d\u1ee5, Telegraph g\u1ea7n \u0111\u00e2y \u0111\u00e3 tr\u00ec ho\u00e3n t\u1ea5t c\u1ea3 c\u00e1c \u0111o\u1ea1n m\u00e3 c\u1ee7a h\u1ecd, bao g\u1ed3m c\u1ea3 qu\u1ea3ng c\u00e1o v\u00e0 m\u00e3 ph\u00e2n t\u00edch \u0111\u1ec3 c\u1ea3i thi\u1ec7n th\u1eddi gian t\u1ea3i qu\u1ea3ng c\u00e1o t\u00ednh tr\u00ean trung b\u00ecnh l\u00e0 4 gi\u00e2y.<\/p>\n\n\n<p class=\"has-luminous-vivid-amber-background-color has-background\">C\u00e1c \u0111o\u1ea1n m\u00e3 ph\u00e2n t\u00edch th\u01b0\u1eddng \u0111\u01b0\u1ee3c t\u1ea3i s\u1edbm h\u01a1n v\u00ec th\u1ebf b\u1ea1n s\u1ebd kh\u00f4ng l\u00e0m m\u1ea5t b\u1ea5t k\u1ef3 th\u00f4ng tin ph\u00e2n t\u00edch gi\u00e1 tr\u1ecb n\u00e0o. May m\u1eafn thay, c\u00f3 c\u00e1c m\u1eabu kh\u1edfi t\u1ea1o m\u00e3 ph\u00e2n t\u00edch theo ki\u1ec3u lazy trong khi v\u1eabn gi\u1eef l\u1ea1i d\u1eef li\u1ec7u t\u1ea3i trang s\u1edbm.<\/p>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Thuc_hien_cac_ket_noi_som_khi_may_chu_goc_ben_ngoai_yeu_cau\"><\/span>Th\u1ef1c hi\u1ec7n c\u00e1c k\u1ebft n\u1ed1i s\u1edbm khi m\u00e1y ch\u1ee7 g\u1ed1c b\u00ean ngo\u00e0i y\u00eau c\u1ea7u<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 ti\u1ebft ki\u1ec7m \u0111\u01b0\u1ee3c t\u1eeb 100-500 ms b\u1eb1ng c\u00e1ch <a href=\"https:\/\/kiencang.net\/preconnect-dns-prefetch\/\" target=\"_blank\" rel=\"noreferrer noopener\">th\u1ef1c hi\u1ec7n c\u00e1c k\u1ebft n\u1ed1i quan tr\u1ecdng s\u1edbm h\u01a1n \u0111\u1ebfn m\u00e1y ch\u1ee7 g\u1ed1c c\u1ee7a b\u00ean th\u1ee9 ba<\/a>.<\/p>\n\n\n<p>C\u00f3 hai ki\u1ec3u<em> &lt;link&gt;<\/em> c\u00f3 th\u1ec3 h\u1eefu \u00edch \u1edf \u0111\u00e2y:<\/p>\n\n\n<ul><li>preconnect;<\/li><li>dns-prefetch.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\">preconnect<\/h3>\n\n\n<p><em>&lt;link rel=&#8217;preconnect&#8217;&gt;<\/em> th\u00f4ng b\u00e1o v\u1edbi tr\u00ecnh duy\u1ec7t r\u1eb1ng trang c\u00f3 \u00fd \u0111\u1ecbnh th\u00e0nh l\u1eadp k\u1ebft n\u1ed1i t\u1edbi m\u00e1y ch\u1ee7 g\u1ed1c kh\u00e1c, v\u00e0 r\u1eb1ng b\u1ea1n mu\u1ed1n qu\u00e1 tr\u00ecnh n\u00e0y b\u1eaft \u0111\u1ea7u c\u00e0ng s\u1edbm c\u00e0ng t\u1ed1t. Khi y\u00eau c\u1ea7u m\u1ed9t ngu\u1ed3n t\u1eeb m\u1ed9t m\u00e1y ch\u1ee7 \u0111\u00e3 \u0111\u01b0\u1ee3c preconnect, qu\u00e1 tr\u00ecnh t\u1ea3i xu\u1ed1ng s\u1ebd \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u ngay l\u1eadp t\u1ee9c.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"preconnect\" href=\"https:\/\/cdn.example.com\"&gt;<\/code><\/pre>\n\n\n<p><strong>L\u01b0u \u00fd<\/strong>: Ch\u1ec9 preconnect t\u1edbi t\u00ean mi\u1ec1n quan tr\u1ecdng b\u1ea1n s\u1ebd s\u1eed d\u1ee5ng s\u1edbm, b\u1edfi v\u00ec tr\u00ecnh duy\u1ec7t \u0111\u00f3ng b\u1ea5t k\u1ef3 k\u1ebft n\u1ed1i n\u00e0o kh\u00f4ng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong v\u00f2ng 10 gi\u00e2y. C\u00e1c preconnect kh\u00f4ng c\u1ea7n thi\u1ebft c\u00f3 th\u1ec3 l\u00e0m tr\u00ec ho\u00e3n c\u00e1c t\u00e0i nguy\u00ean quan tr\u1ecdng kh\u00e1c, v\u00ec th\u1ebf c\u1ea7n gi\u1edbi h\u1ea1n s\u1ed1 l\u01b0\u1ee3ng c\u1ee7a c\u00e1c t\u00ean mi\u1ec1n \u0111\u01b0\u1ee3c preconnect v\u00e0 <a href=\"https:\/\/andydavies.me\/blog\/2019\/08\/07\/experimenting-with-link-rel-equals-preconnect-using-custom-script-injection-in-webpagetest\/\" target=\"_blank\" rel=\"noreferrer noopener\">ki\u1ec3m tra \u1ea3nh h\u01b0\u1edfng m\u00e0 preconnect t\u1ea1o ra sau \u0111\u00f3<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\">dns-prefetch<\/h3>\n\n\n<p><em>&lt;link rel=&#8217;dns-prefetch&#8217;&gt;<\/em> x\u1eed l\u00fd m\u1ed9t ph\u1ea7n nh\u1ecf h\u01a1n so v\u1edbi nh\u1eefng g\u00ec <em>&lt;link rel=&#8217;preconnect&#8217;&gt;<\/em> th\u1ef1c hi\u1ec7n. Th\u00e0nh l\u1eadp k\u1ebft n\u1ed1i (preconnect) li\u00ean quan \u0111\u1ebfn vi\u1ec7c <a href=\"https:\/\/kiencang.net\/toi-thieu-thoi-gian-tra-cuu-dns\/\" target=\"_blank\" rel=\"noreferrer noopener\">t\u00ecm ki\u1ebfm DNS<\/a> v\u00e0 TCP handshake, v\u00e0 b\u1ea3o m\u1eadt m\u00e1y ch\u1ee7 g\u1ed1c, \u0111\u00e0m ph\u00e1n TLS. C\u00f2n <em>dns-prefetch<\/em> ch\u1ec9 h\u01b0\u1edbng d\u1eabn tr\u00ecnh duy\u1ec7t ph\u00e2n gi\u1ea3i DNS c\u1ee7a m\u1ed9t t\u00ean mi\u1ec1n c\u1ee5 th\u1ec3 tr\u01b0\u1edbc khi n\u00f3 \u0111\u01b0\u1ee3c g\u1ecdi m\u1ed9t c\u00e1ch r\u00f5 r\u00e0ng.<\/p>\n\n\n<p>G\u1ee3i \u00fd <em>preconnect<\/em> \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng t\u1ed1t nh\u1ea5t ch\u1ec9 cho c\u00e1c k\u1ebft n\u1ed1i quan tr\u1ecdng nh\u1ea5t; v\u1edbi c\u00e1c t\u00ean mi\u1ec1n \u00edt quan tr\u1ecdng h\u01a1n c\u1ee7a b\u00ean th\u1ee9 ba, h\u00e3y s\u1eed d\u1ee5ng <em>&lt;link rel=&#8217;dns-prefetch&#8217;&gt;<\/em>.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"dns-prefetch\" href=\"http:\/\/example.com\"&gt;<\/code><\/pre>\n\n\n<p><a href=\"https:\/\/caniuse.com\/#search=dns-prefetch\" target=\"_blank\" rel=\"noreferrer noopener\">Tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3 cho dns-prefetch<\/a> h\u01a1i kh\u00e1c so v\u1edbi <a href=\"https:\/\/caniuse.com\/#search=preconnect\" target=\"_blank\" rel=\"noreferrer noopener\">tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3 preconnect<\/a>, v\u00ec th\u1ebf <em>dns-prefetch<\/em> c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c ph\u1ee5c v\u1ee5 nh\u01b0 l\u00e0 c\u00e1ch d\u1ef1 ph\u00f2ng cho c\u00e1c tr\u00ecnh duy\u1ec7t kh\u00f4ng h\u1ed7 tr\u1ee3 <em>preconnect<\/em>. S\u1eed d\u1ee5ng c\u00e1c th\u1ebb link t\u00e1ch bi\u1ec7t \u0111\u1ec3 tri\u1ec3n khai \u0111i\u1ec1u n\u00e0y theo c\u00e1ch an to\u00e0n:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"preconnect\" href=\"http:\/\/example.com\"&gt;\n&lt;link rel=\"dns-prefetch\" href=\"http:\/\/example.com\"&gt;<\/code><\/pre>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Lazy-load_cac_tai_nguyen_cua_ben_thu_ba\"><\/span>Lazy-load c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a b\u00ean th\u1ee9 ba<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>Nh\u00fang t\u00e0i nguy\u00ean c\u1ee7a b\u00ean th\u1ee9 ba c\u00f3 th\u1ec3 l\u00e0 nguy\u00ean nh\u00e2n \u0111\u00f3ng g\u00f3p l\u1edbn l\u00e0m ch\u1eadm t\u1ed1c \u0111\u1ed9 trang khi c\u1ea5u tr\u00fac c\u1ee7a n\u00f3 kh\u00f4ng \u1ed5n. N\u1ebfu ch\u00fang kh\u00f4ng quan tr\u1ecdng ho\u1eb7c n\u1eb1m d\u01b0\u1edbi <a href=\"https:\/\/kiencang.net\/man-hinh-dau-tien\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u0111\u01b0\u1eddng bi\u00ean fold<\/a> (ngh\u0129a l\u00e0, n\u1ebfu ng\u01b0\u1eddi d\u00f9ng ph\u1ea3i cu\u1ed9n chu\u1ed9t xu\u1ed1ng \u0111\u1ec3 xem ch\u00fang), <a href=\"https:\/\/kiencang.net\/lazy-load-anh-va-video\/\" target=\"_blank\" rel=\"noreferrer noopener\">lazy-loading<\/a> l\u00e0 c\u00e1ch t\u1ed1t \u0111\u1ec3 c\u1ea3i thi\u1ec7n ch\u1ec9 s\u1ed1 t\u1ed1c \u0111\u1ed9 trang. B\u1eb1ng c\u00e1ch n\u00e0y, ng\u01b0\u1eddi d\u00f9ng s\u1ebd nh\u1eadn \u0111\u01b0\u1ee3c n\u1ed9i dung ch\u00ednh c\u1ee7a trang nhanh h\u01a1n v\u00e0 c\u00f3 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng t\u1ed1t 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\/03\/lazy-load.png\" alt=\"lazy load\" class=\"wp-image-15244\"\/><\/figure><\/div>\n\n\n<p>M\u1ed9t c\u00e1ch ti\u1ebfp c\u1eadn hi\u1ec7u qu\u1ea3 l\u00e0 lazy-load n\u1ed9i dung c\u1ee7a b\u00ean th\u1ee9 ba sau khi n\u1ed9i dung ch\u00ednh \u0111\u01b0\u1ee3c t\u1ea3i. C\u00e1c qu\u1ea3ng c\u00e1o l\u00e0 \u1ee9ng c\u1eed vi\u00ean t\u1ed1t cho c\u00e1ch ti\u1ebfp c\u1eadn n\u00e0y.<\/p>\n\n\n<p>Qu\u1ea3ng c\u00e1o l\u00e0 ngu\u1ed3n thu quan tr\u1ecdng cho nhi\u1ec1u website, nh\u01b0ng ng\u01b0\u1eddi d\u00f9ng \u0111\u1ebfn website c\u1ee7a b\u1ea1n l\u00e0 v\u00ec n\u1ed9i dung. B\u1eb1ng c\u00e1ch lazy-loading qu\u1ea3ng c\u00e1o v\u00e0 ph\u00e2n ph\u1ed1i n\u1ed9i dung ch\u00ednh nhanh h\u01a1n, b\u1ea1n c\u00f3 th\u1ec3 l\u00e0m gia t\u0103ng t\u1ed5ng th\u1ec3 v\u1ec1 t\u1ef7 l\u1ec7 ph\u1ea7n tr\u0103m kh\u1ea3 n\u0103ng xem c\u1ee7a qu\u1ea3ng c\u00e1o. L\u1ea5y v\u00ed d\u1ee5, MediaVine chuy\u1ec3n sang lazy-loading qu\u1ea3ng c\u00e1o v\u00e0 nh\u1eadn th\u1ea5y c\u1ea3i thi\u1ec7n 200% t\u1ed1c \u0111\u1ed9 t\u1ea3i trang. DoubleClick c\u00f3 h\u01b0\u1edbng d\u1eabn v\u1ec1 c\u00e1ch lazy-load qu\u1ea3ng c\u00e1o trong <a href=\"https:\/\/support.google.com\/dfp_premium\/answer\/4578089#lazyloading\" target=\"_blank\" rel=\"noreferrer noopener\">t\u00e0i li\u1ec7u ch\u00ednh th\u1ee9c c\u1ee7a h\u1ecd<\/a>.<\/p>\n\n\n<p>M\u1ed9t c\u00e1ch ti\u1ebfp c\u1eadn thay th\u1ebf l\u00e0 t\u1ea3i n\u1ed9i dung c\u1ee7a b\u00ean th\u1ee9 ba ch\u1ec9 khi ng\u01b0\u1eddi d\u00f9ng cu\u1ed9n chu\u1ed9t xu\u1ed1ng khu v\u1ef1c \u0111\u00f3 c\u1ee7a trang.<\/p>\n\n\n<p><a href=\"https:\/\/developers.google.com\/web\/updates\/2016\/04\/intersectionobserver\">Intersection Observer<\/a> l\u00e0 m\u1ed9t API tr\u00ecnh duy\u1ec7t c\u00f3 kh\u1ea3 n\u0103ng nh\u1eadn bi\u1ebft hi\u1ec7u qu\u1ea3 khi n\u00e0o m\u1ed9t th\u00e0nh ph\u1ea7n \u0111i v\u00e0o ho\u1eb7c tho\u00e1t ra khung nh\u00ecn tr\u00ecnh duy\u1ec7t (browser&#8217;s viewport) v\u00e0 n\u00f3 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 tri\u1ec3n khai k\u1ef9 thu\u1eadt n\u00e0y. <a href=\"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p1\/\" target=\"_blank\" rel=\"noreferrer noopener\">lazysizes<\/a> l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n JavaScript ph\u1ed5 bi\u1ebfn \u0111\u1ec3 t\u1ea3i l\u01b0\u1eddi \u1ea3nh v\u00e0 iframe. N\u00f3 h\u1ed7 tr\u1ee3 m\u00e3 nh\u00fang YouTube v\u00e0 c\u00e1c widget. N\u00f3 c\u0169ng c\u00f3 t\u00f9y ch\u1ecdn h\u1ed7 tr\u1ee3 cho IntersectionObserver.<\/p>\n\n\n<p><strong>L\u01b0u \u00fd<\/strong>: C\u1ea7n c\u1ea9n th\u1eadn khi lazy-load c\u00e1c t\u00e0i nguy\u00ean b\u1eb1ng JavaScript. N\u1ebfu JavaScript g\u1eb7p l\u1ed7i khi t\u1ea3i, c\u00f3 th\u1ec3 do \u0111i\u1ec1u ki\u1ec7n m\u1ea1ng kh\u00f4ng \u1ed5n \u0111\u1ecbnh, c\u00e1c ngu\u1ed3n t\u00e0i nguy\u00ean c\u1ee7a b\u1ea1n s\u1ebd kh\u00f4ng \u0111\u01b0\u1ee3c t\u1ea3i m\u1ed9t ch\u00fat n\u00e0o.<\/p>\n\n\n<p>S\u1eed d\u1ee5ng <a href=\"https:\/\/kiencang.net\/native-lazy-loading-cho-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">thu\u1ed9c t\u00ednh loading cho vi\u1ec7c lazy-loading \u1ea3nh v\u00e0 iframe<\/a> l\u00e0 c\u00e1ch thay th\u1ebf t\u1ed1t cho c\u00e1c k\u1ef9 thu\u1eadt JavaScript, v\u00e0 n\u00f3 g\u1ea7n \u0111\u00e2y \u0111\u00e3 \u0111\u01b0\u1ee3c \u0111\u01b0a v\u00e0o trong Chrome 76!<\/p>\n\n\n<p>C\u1eadp nh\u1eadt: hi\u1ec7n r\u1ea5t nhi\u1ec1u tr\u00ecnh duy\u1ec7t l\u1edbn \u0111\u00e3 h\u1ed7 tr\u1ee3 thu\u1ed9c t\u00ednh loading, ngo\u00e0i ra WordPress c\u0169ng t\u1ef1 \u0111\u1ed9ng th\u00eam n\u00f3 v\u00e0o c\u00e1c \u1ea3nh.<\/p>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Toi_uu_hoa_cach_ban_phuc_vu_cac_doan_ma_cua_ben_thu_ba\"><\/span>T\u1ed1i \u01b0u h\u00f3a c\u00e1ch b\u1ea1n ph\u1ee5c v\u1ee5 c\u00e1c \u0111o\u1ea1n m\u00e3 c\u1ee7a b\u00ean th\u1ee9 ba<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<h3 class=\"wp-block-heading\">CDN hosting c\u1ee7a b\u00ean th\u1ee9 ba<\/h3>\n\n\n<p>\u0110i\u1ec1u n\u00e0y ph\u1ed5 bi\u1ebfn v\u1edbi c\u00e1c nh\u00e0 cung c\u1ea5p d\u1ecbch v\u1ee5 c\u1ee7a b\u00ean th\u1ee9 ba \u0111\u01b0a ra (c\u00e1c) URL c\u1ee7a file JavaScript m\u00e0 h\u1ecd host, th\u01b0\u1eddng l\u00e0 tr\u00ean <a href=\"https:\/\/kiencang.net\/cdn-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">m\u1ea1ng ph\u00e2n t\u00e1n n\u1ed9i dung (Content Delivery Network \/ CDN)<\/a>. L\u1ee3i \u00edch c\u1ee7a c\u00e1ch ti\u1ebfp c\u1eadn n\u00e0y l\u00e0 b\u1ea1n c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u nhanh ch\u00f3ng-ch\u1ec9 c\u1ea7n copy v\u00e0 paste URL- v\u00e0 kh\u00f4ng c\u1ea7n lo l\u1eafng \u0111\u1ebfn chi ph\u00ed b\u1ea3o tr\u00ec. Nh\u00e0 cung c\u1ea5p c\u1ee7a b\u00ean th\u1ee9 ba t\u1ef1 x\u1eed l\u00fd c\u1ea5u h\u00ecnh m\u00e1y ch\u1ee7 c\u1ee7a h\u1ecd v\u00e0 c\u1eadp nh\u1eadt m\u00e3.<\/p>\n\n\n<p>Nh\u01b0ng v\u00ec h\u1ecd kh\u00f4ng c\u00f3 c\u00f9ng g\u1ed1c v\u1edbi ph\u1ea7n c\u00f2n l\u1ea1i c\u1ee7a c\u00e1c t\u00e0i nguy\u00ean tr\u00ean trang c\u1ee7a b\u1ea1n, vi\u1ec7c t\u1ea3i file t\u1eeb CDN c\u00f4ng c\u1ed9ng \u0111i k\u00e8m v\u1edbi t\u1ed5n th\u1ea5t m\u1ea1ng k\u1ebft n\u1ed1i (network). Tr\u00ecnh duy\u1ec7t c\u1ea7n th\u1ef1c hi\u1ec7n t\u00ecm ki\u1ebfm DNS, th\u00e0nh l\u1eadp k\u1ebft n\u1ed1i HTTP m\u1edbi, v\u00e0 tr\u00ean m\u00e1y ch\u1ee7 g\u1ed1c b\u1ea3o m\u1eadt, n\u00f3 c\u1ea7n th\u1ef1c thi c\u1ea3 SSL handshake v\u1edbi m\u00e1y ch\u1ee7 c\u1ee7a nh\u00e0 cung c\u1ea5p.<\/p>\n\n\n<p>Khi b\u1ea1n s\u1eed d\u1ee5ng c\u00e1c file t\u1eeb m\u00e1y ch\u1ee7 c\u1ee7a b\u00ean th\u1ee9 ba, b\u1ea1n hi\u1ebfm khi c\u00f3 kh\u1ea3 n\u0103ng <a href=\"https:\/\/kiencang.net\/bo-nho-dem-trinh-duyet\/\" target=\"_blank\" rel=\"noreferrer noopener\">t\u1ef1 ch\u1ee7 caching<\/a>. D\u1ef1a v\u00e0o ng\u01b0\u1eddi kh\u00e1c v\u1ec1 chi\u1ebfn l\u01b0\u1ee3c caching c\u00f3 th\u1ec3 l\u00e0 nguy\u00ean nh\u00e2n khi\u1ebfn \u0111o\u1ea1n m\u00e3 kh\u00f4ng c\u1ea7n thi\u1ebft ph\u1ea3i t\u00ecm n\u1ea1p l\u1ea1i qu\u00e1 th\u01b0\u1eddng xuy\u00ean.<\/p>\n\n\n<h3 class=\"wp-block-heading\">T\u1ef1 host c\u00e1c \u0111o\u1ea1n m\u00e3 c\u1ee7a b\u00ean th\u1ee9 ba<\/h3>\n\n\n<p>T\u1ef1 host c\u00e1c \u0111o\u1ea1n m\u00e3 c\u1ee7a b\u00ean th\u1ee9 ba l\u00e0 m\u1ed9t t\u00f9y ch\u1ecdn gi\u00fap b\u1ea1n c\u00f3 nhi\u1ec1u quy\u1ec1n h\u01a1n v\u1edbi qu\u00e1 tr\u00ecnh t\u1ea3i JavaScript. B\u1eb1ng c\u00e1ch t\u1ef1 host, b\u1ea1n c\u00f3 th\u1ec3:<\/p>\n\n\n<ul><li>Gi\u1ea3m th\u1eddi gian t\u00ecm ki\u1ebfm DNS v\u00e0 v\u00f2ng kh\u1ee9 h\u1ed3i;<\/li><li>C\u1ea3i thi\u1ec7n <a href=\"https:\/\/kiencang.net\/tim-hieu-http-caching\/\" target=\"_blank\" rel=\"noreferrer noopener\">header HTTP caching<\/a>;<\/li><li>T\u1eadn d\u1ee5ng l\u1ee3i th\u1ebf c\u1ee7a m\u00e1y ch\u1ee7 HTTP\/2.<\/li><\/ul>\n\n\n<p>L\u1ea5y v\u00ed d\u1ee5, Casper \u0111\u00e3 gi\u1ea3m \u0111\u01b0\u1ee3c 1,7 gi\u00e2y th\u1eddi gian t\u1ea3i trang b\u1eb1ng c\u00e1ch t\u1ef1 host c\u00e1c \u0111o\u1ea1n m\u00e3 ki\u1ec3m tra A\/B. <\/p>\n\n\n<p>Tuy nhi\u00ean self-hosting (t\u1ef1 host) c\u00f3 th\u1ec3 c\u00f3 m\u1ed9t nh\u01b0\u1ee3c \u0111i\u1ec3m l\u1edbn: c\u00e1c \u0111o\u1ea1n m\u00e3 c\u00f3 th\u1ec3 l\u1ed7i th\u1eddi v\u00e0 kh\u00f4ng \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt t\u1ef1 \u0111\u1ed9ng khi API thay \u0111\u1ed5i ho\u1eb7c m\u1ed9t v\u1ea5n \u0111\u1ec1 b\u1ea3o m\u1eadt n\u00e0o \u0111\u00f3 \u0111\u01b0\u1ee3c s\u1eeda ch\u1eefa.<\/p>\n\n\n<p><strong>L\u01b0u \u00fd<\/strong>: C\u1eadp nh\u1eadt c\u00e1c \u0111o\u1ea1n m\u00e3 theo c\u00e1ch th\u1ee7 c\u00f4ng c\u00f3 th\u1ec3 b\u1ed5 sung th\u00eam nhi\u1ec1u chi ph\u00ed ng\u1ea7m v\u00e0o qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n c\u1ee7a b\u1ea1n v\u00e0 b\u1ea1n c\u00f3 th\u1ec3 b\u1ecf l\u1ee1 c\u00e1c c\u1eadp nh\u1eadt quan tr\u1ecdng. N\u1ebfu b\u1ea1n kh\u00f4ng s\u1eed d\u1ee5ng CDN hosting \u0111\u1ec3 ph\u1ee5c v\u1ee5 t\u1ea5t c\u1ea3 c\u00e1c t\u00e0i nguy\u00ean, b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 b\u1ecf l\u1ee1 ki\u1ec3u caching m\u00e1y ch\u1ee7 bi\u00ean (edge caching) v\u00e0 ph\u1ea3i t\u1ed1i \u01b0u h\u00f3a n\u00e9n m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n.<\/p>\n\n\n<p>P\/S: M\u1ed9t v\u00ed d\u1ee5 v\u1ec1 t\u1ef1 host JS trong WordPress \u0111\u00f3 l\u00e0 c\u00e1c \u0111o\u1ea1n m\u00e3 ph\u00e2n t\u00edch website c\u1ee7a Google Analytics. B\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o c\u00e1ch <a href=\"https:\/\/kiencang.net\/plugin-caos-google-analytics\/\" target=\"_blank\" rel=\"noreferrer noopener\">plugin CAOS<\/a> l\u00e0m \u0111i\u1ec1u n\u00e0y.<\/p>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Su_dung_dich_vu_workers_de_cache_doan_ma_tu_may_chu_cua_ben_thu_ba\"><\/span>S\u1eed d\u1ee5ng d\u1ecbch v\u1ee5 workers \u0111\u1ec3 cache \u0111o\u1ea1n m\u00e3 t\u1eeb m\u00e1y ch\u1ee7 c\u1ee7a b\u00ean th\u1ee9 ba<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>M\u1ed9t c\u00e1ch kh\u00e1c \u0111\u1ec3 t\u1ef1 host cho ph\u00e9p b\u1ea1n ki\u1ec3m so\u00e1t b\u1ed9 nh\u1edb \u0111\u1ec7m t\u1ed1t h\u01a1n trong khi v\u1eabn nh\u1eadn \u0111\u01b0\u1ee3c l\u1ee3i \u00edch CDN c\u1ee7a b\u00ean th\u1ee9 ba \u0111\u00f3 l\u00e0 <a href=\"https:\/\/developers.google.com\/web\/tools\/workbox\/guides\/handle-third-party-requests\" target=\"_blank\" rel=\"noreferrer noopener\">s\u1eed d\u1ee5ng d\u1ecbch v\u1ee5 worker \u0111\u1ec3 cache \u0111o\u1ea1n m\u00e3 t\u1eeb m\u00e1y ch\u1ee7 c\u1ee7a b\u00ean th\u1ee9 ba<\/a>. \u0110i\u1ec1u n\u00e0y cho ph\u00e9p b\u1ea1n l\u00e0m ch\u1ee7 t\u1ea7n su\u1ea5t \u0111o\u1ea1n m\u00e3 t\u00ecm n\u1ea1p l\u1ea1i (re-fetch) t\u1eeb m\u1ea1ng k\u1ebft n\u1ed1i v\u00e0 l\u00e0m n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng t\u1ea1o ra m\u1ed9t chi\u1ebfn l\u01b0\u1ee3c t\u1ea3i \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh c\u00e1c y\u00eau c\u1ea7u t\u1eeb t\u00e0i nguy\u00ean c\u1ee7a b\u00ean th\u1ee9 ba kh\u00f4ng quan tr\u1ecdng cho \u0111\u1ebfn khi trang \u0111\u1ea1t \u0111\u1ebfn th\u1eddi \u0111i\u1ec3m &#8216;key user \/ quan tr\u1ecdng v\u1edbi ng\u01b0\u1eddi d\u1ee5ng&#8217;. S\u1eed d\u1ee5ng preconnect \u0111\u1ec3 thi\u1ebft l\u1eadp c\u00e1c k\u1ebft n\u1ed1i s\u1edbm trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y c\u0169ng c\u00f3 th\u1ec3 gi\u00fap gi\u1ea3m thi\u1ec3u \u1ea3nh h\u01b0\u1edfng m\u1ea1ng \u1edf m\u1ed9t m\u1ee9c \u0111\u1ed9 n\u00e0o \u0111\u00f3.<\/p>\n\n\n<p>PS: Cloudflare m\u1edbi \u0111\u00e2y tri\u1ec3n khi d\u1ecbch v\u1ee5 <a href=\"https:\/\/kiencang.net\/automatic-platform-optimization-hoat-dong\/\" target=\"_blank\" rel=\"noreferrer noopener\">Automatic Platform Optimization c\u00f3 kh\u1ea3 cache font c\u1ee7a b\u00ean th\u1ee9 ba nh\u01b0 Google Fonts<\/a>.<\/p>\n\n\n<p><em>(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: Efficiently load third-party JavaScript, t\u00e1c gi\u1ea3: Milica Mihajlija, trang web[.]dev)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>H\u00e0ng ngo\u1ea1i th\u00ec th\u01b0\u1eddng ch\u1ea5t l\u01b0\u1ee3ng cao r\u1ed3i, nh\u01b0ng \u0111\u00f4i khi thu\u1ebf m\u00e1 v\u00e0o c\u0169ng kh\u00f4ng \u00edt. B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n tr\u00e1nh \u0111\u01b0\u1ee3c c\u00e1c c\u1ea1m b\u1eaby khi s\u1eed d\u1ee5ng JavaScript c\u1ee7a b\u00ean th\u1ee9 ba (third-party) \u0111\u1ec3 c\u1ea3i thi\u1ec7n th\u1eddi gian t\u1ea3i (load time) v\u00e0 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng (user experience). N\u1ebfu JavaScript t\u1eeb &hellip;<\/p>\n","protected":false},"author":1,"featured_media":18127,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[272],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>T\u1ea3i JavaScript c\u1ee7a b\u00ean th\u1ee9 ba hi\u1ec7u qu\u1ea3 h\u01a1n &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"description\" content=\"JavaScript c\u1ee7a b\u00ean th\u1ee9 ba th\u01b0\u1eddng l\u00e0 t\u00e0i nguy\u00ean n\u1eb7ng l\u00e0m ch\u1eadm website, n\u00f3 c\u0169ng l\u00e0 th\u00e0nh ph\u1ea7n kh\u00f3 t\u1ed1i \u01b0u h\u01a1n. B\u00e0i vi\u1ebft n\u00e0y chia s\u1ebb 4 bi\u1ec7n ph\u00e1p c\u0103n b\u1ea3n \u0111\u1ec3 h\u1ea1n ch\u1ebf \u1ea3nh h\u01b0\u1edfng c\u1ee7a n\u00f3.\" \/>\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-javascript-ben-thu-ba\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"T\u1ea3i JavaScript c\u1ee7a b\u00ean th\u1ee9 ba hi\u1ec7u qu\u1ea3 h\u01a1n &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"JavaScript c\u1ee7a b\u00ean th\u1ee9 ba th\u01b0\u1eddng l\u00e0 t\u00e0i nguy\u00ean n\u1eb7ng l\u00e0m ch\u1eadm website, n\u00f3 c\u0169ng l\u00e0 th\u00e0nh ph\u1ea7n kh\u00f3 t\u1ed1i \u01b0u h\u01a1n. B\u00e0i vi\u1ebft n\u00e0y chia s\u1ebb 4 bi\u1ec7n ph\u00e1p c\u0103n b\u1ea3n \u0111\u1ec3 h\u1ea1n ch\u1ebf \u1ea3nh h\u01b0\u1edfng c\u1ee7a n\u00f3.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/tai-javascript-ben-thu-ba\/\" \/>\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-16T00:09:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/hang-xuat-khau.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"401\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"T\u1ea3i JavaScript c\u1ee7a b\u00ean th\u1ee9 ba hi\u1ec7u qu\u1ea3 h\u01a1n &#8226; Ki\u1ebfn c\u00e0ng","description":"JavaScript c\u1ee7a b\u00ean th\u1ee9 ba th\u01b0\u1eddng l\u00e0 t\u00e0i nguy\u00ean n\u1eb7ng l\u00e0m ch\u1eadm website, n\u00f3 c\u0169ng l\u00e0 th\u00e0nh ph\u1ea7n kh\u00f3 t\u1ed1i \u01b0u h\u01a1n. B\u00e0i vi\u1ebft n\u00e0y chia s\u1ebb 4 bi\u1ec7n ph\u00e1p c\u0103n b\u1ea3n \u0111\u1ec3 h\u1ea1n ch\u1ebf \u1ea3nh h\u01b0\u1edfng c\u1ee7a n\u00f3.","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-javascript-ben-thu-ba\/","og_locale":"vi_VN","og_type":"article","og_title":"T\u1ea3i JavaScript c\u1ee7a b\u00ean th\u1ee9 ba hi\u1ec7u qu\u1ea3 h\u01a1n &#8226; Ki\u1ebfn c\u00e0ng","og_description":"JavaScript c\u1ee7a b\u00ean th\u1ee9 ba th\u01b0\u1eddng l\u00e0 t\u00e0i nguy\u00ean n\u1eb7ng l\u00e0m ch\u1eadm website, n\u00f3 c\u0169ng l\u00e0 th\u00e0nh ph\u1ea7n kh\u00f3 t\u1ed1i \u01b0u h\u01a1n. B\u00e0i vi\u1ebft n\u00e0y chia s\u1ebb 4 bi\u1ec7n ph\u00e1p c\u0103n b\u1ea3n \u0111\u1ec3 h\u1ea1n ch\u1ebf \u1ea3nh h\u01b0\u1edfng c\u1ee7a n\u00f3.","og_url":"https:\/\/kiencang.net\/tai-javascript-ben-thu-ba\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2020-03-16T00:09:41+00:00","og_image":[{"width":640,"height":401,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/hang-xuat-khau.jpg","type":"image\/jpeg"}],"author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"11 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/tai-javascript-ben-thu-ba\/","url":"https:\/\/kiencang.net\/tai-javascript-ben-thu-ba\/","name":"T\u1ea3i JavaScript c\u1ee7a b\u00ean th\u1ee9 ba hi\u1ec7u qu\u1ea3 h\u01a1n &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2020-03-16T00:09:41+00:00","dateModified":"2020-03-16T00:09:41+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"description":"JavaScript c\u1ee7a b\u00ean th\u1ee9 ba th\u01b0\u1eddng l\u00e0 t\u00e0i nguy\u00ean n\u1eb7ng l\u00e0m ch\u1eadm website, n\u00f3 c\u0169ng l\u00e0 th\u00e0nh ph\u1ea7n kh\u00f3 t\u1ed1i \u01b0u h\u01a1n. B\u00e0i vi\u1ebft n\u00e0y chia s\u1ebb 4 bi\u1ec7n ph\u00e1p c\u0103n b\u1ea3n \u0111\u1ec3 h\u1ea1n ch\u1ebf \u1ea3nh h\u01b0\u1edfng c\u1ee7a n\u00f3.","breadcrumb":{"@id":"https:\/\/kiencang.net\/tai-javascript-ben-thu-ba\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/tai-javascript-ben-thu-ba\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/tai-javascript-ben-thu-ba\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"T\u1ea3i JavaScript c\u1ee7a b\u00ean th\u1ee9 ba hi\u1ec7u qu\u1ea3 h\u01a1n"}]},{"@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\/16861"}],"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=16861"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16861\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/18127"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=16861"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=16861"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=16861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}