{"id":16852,"date":"2020-03-09T23:40:43","date_gmt":"2020-03-09T16:40:43","guid":{"rendered":"https:\/\/kiencang.net\/?p=14927"},"modified":"2022-08-25T22:17:51","modified_gmt":"2022-08-25T15:17:51","slug":"preload-tai-nguyen-quan-trong","status":"publish","type":"post","link":"https:\/\/kiencang.net\/preload-tai-nguyen-quan-trong\/","title":{"rendered":"Preload c\u00e1c t\u00e0i nguy\u00ean quan tr\u1ecdng \u0111\u1ec3 t\u0103ng t\u1ed1c \u0111\u1ed9 website"},"content":{"rendered":"\n<p>Khi b\u1ea1n <a href=\"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/\" target=\"_blank\" rel=\"noreferrer noopener\">m\u1edf m\u1ed9t trang web, tr\u00ecnh duy\u1ec7t s\u1ebd g\u1eedi c\u00e1c y\u00eau c\u1ea7u t\u00e0i li\u1ec7u HTML \u0111\u1ebfn m\u00e1y ch\u1ee7 (server)<\/a>, ph\u00e2n t\u00edch n\u1ed9i dung c\u1ee7a n\u00f3, v\u00e0 g\u1eedi c\u00e1c y\u00eau c\u1ea7u ri\u00eang cho b\u1ea5t k\u1ef3 ngu\u1ed3n t\u00e0i nguy\u00ean n\u00e0o \u0111\u01b0\u1ee3c tham chi\u1ebfu \u0111\u1ebfn (referenced resource). <\/p>\n\n\n\n<p>L\u00e0 ng\u01b0\u1eddi l\u1eadp tr\u00ecnh, b\u1ea1n c\u1ea7n bi\u1ebft v\u1ec1 t\u1ea5t c\u1ea3 c\u00e1c ngu\u1ed3n t\u00e0i nguy\u00ean m\u00e0 trang c\u1ee7a b\u1ea1n c\u1ea7n v\u00e0 c\u00e1i n\u00e0o trong s\u1ed1 \u0111\u00f3 l\u00e0 quan tr\u1ecdng nh\u1ea5t (most important). B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng hi\u1ec3u bi\u1ebft \u0111\u00f3 \u0111\u1ec3 y\u00eau c\u1ea7u c\u00e1c t\u00e0i nguy\u00ean quan tr\u1ecdng (critical resources) tr\u01b0\u1edbc v\u00e0 qua \u0111\u00f3 gi\u00fap t\u0103ng t\u1ed1c qu\u00e1 tr\u00ecnh t\u1ea3i. B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u1ea3i th\u00edch c\u00e1ch \u0111\u1ec3 l\u00e0m \u0111i\u1ec1u \u0111\u00f3 v\u1edbi th\u1ebb <code>&lt;link rel=\"preload\"&gt;<\/code>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\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-6577d65c8ba35\" ><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-6577d65c8ba35\"  type=\"checkbox\" id=\"item-6577d65c8ba35\"><\/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\/preload-tai-nguyen-quan-trong\/#1_Cach_preload_lam_viec\" title=\"#1. C\u00e1ch preload l\u00e0m vi\u1ec7c\">#1. C\u00e1ch preload l\u00e0m vi\u1ec7c<\/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\/preload-tai-nguyen-quan-trong\/#2_Cac_ung_dung_thuc_te\" title=\"#2. C\u00e1c \u1ee9ng d\u1ee5ng th\u1ef1c t\u1ebf\">#2. C\u00e1c \u1ee9ng d\u1ee5ng th\u1ef1c t\u1ebf<\/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\/preload-tai-nguyen-quan-trong\/#3_Cach_trien_khai_relpreload\" title=\"#3. C\u00e1ch tri\u1ec3n khai rel=preload\">#3. C\u00e1ch tri\u1ec3n khai rel=preload<\/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\/preload-tai-nguyen-quan-trong\/#4_Ket_luan\" title=\"#4. K\u1ebft lu\u1eadn\">#4. 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-5\" href=\"https:\/\/kiencang.net\/preload-tai-nguyen-quan-trong\/#5_Vi_du_demo\" title=\"#5. V\u00ed d\u1ee5 demo\">#5. V\u00ed d\u1ee5 demo<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\" id=\"cach-preload-lam-vi\u1ec7c\"><span class=\"ez-toc-section\" id=\"1_Cach_preload_lam_viec\"><\/span>#1. C\u00e1ch preload l\u00e0m vi\u1ec7c<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Preload ph\u00f9 h\u1ee3p nh\u1ea5t v\u1edbi c\u00e1c ki\u1ec3u t\u00e0i nguy\u00ean quan tr\u1ecdng nh\u01b0ng l\u1ea1i th\u01b0\u1eddng \u0111\u01b0\u1ee3c tr\u00ecnh duy\u1ec7t ph\u00e1t hi\u1ec7n mu\u1ed9n.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/waterfall-truoc.png\" alt=\"waterfall c\u1ee7a trang\" class=\"wp-image-14928\"\/><figcaption>Trong v\u00ed d\u1ee5 n\u00e0y, font Pacifico \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong CSS v\u1edbi <a href=\"https:\/\/kiencang.net\/nhung-font-web-font-face\/\" target=\"_blank\" rel=\"noreferrer noopener\">quy t\u1eafc @font-face<\/a>. Do v\u1eady, th\u00f4ng th\u01b0\u1eddng tr\u00ecnh duy\u1ec7t ch\u1ec9 t\u1ea3i \u0111\u01b0\u1ee3c file font sau khi n\u00f3 \u0111\u00e3 t\u1ea3i v\u00e0 ph\u00e2n t\u00edch xong CSS<\/figcaption><\/figure><\/div>\n\n\n<p>B\u1eb1ng c\u00e1ch preload m\u1ed9t t\u00e0i nguy\u00ean nh\u1ea5t \u0111\u1ecbnh, b\u1ea1n n\u00f3i v\u1edbi tr\u00ecnh duy\u1ec7t r\u1eb1ng b\u1ea1n mu\u1ed1n <em>t\u00ecm n\u1ea1p n\u00f3 s\u1edbm h\u01a1n so v\u1edbi \u0111\u1ec3 tr\u00ecnh duy\u1ec7t t\u1ef1 ph\u00e1t hi\u1ec7n ra t\u00e0i nguy\u00ean \u0111\u1ea5y theo m\u1eb7c \u0111\u1ecbnh th\u00f4ng th\u01b0\u1eddng<\/em>, b\u1edfi v\u00ec b\u1ea1n ch\u1eafc ch\u1eafn r\u1eb1ng n\u00f3 quan tr\u1ecdng cho trang hi\u1ec7n \u0111ang \u0111\u01b0\u1ee3c duy\u1ec7t.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/network-waterfall-sau-do.png\" alt=\"waterfall sau \u0111\u00f3\" class=\"wp-image-14929\"\/><figcaption>Trong v\u00ed d\u1ee5 n\u00e0y, font Pacifico \u0111\u01b0\u1ee3c preload (t\u1ea3i tr\u01b0\u1edbc), v\u00ec th\u1ebf vi\u1ec7c t\u1ea3i font di\u1ec5n ra song song (parallel) v\u1edbi t\u1ea3i CSS (stylesheet). Font t\u00f9y ch\u1ec9nh \u0111\u01b0\u1ee3c t\u1ea3i tr\u01b0\u1edbc gi\u00fap tr\u00e1nh hi\u1ec7n t\u01b0\u1ee3ng FOIT, \u0111\u1ec3 <a href=\"https:\/\/kiencang.net\/dam-bao-van-ban-hien-thi\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u0111\u1ea3m b\u1ea3o v\u0103n b\u1ea3n v\u1eabn hi\u1ec3n th\u1ecb trong khi font t\u1ea3i v\u1ec1<\/a><\/figcaption><\/figure><\/div>\n\n\n<p>Chu\u1ed7i y\u00eau c\u1ea7u quan tr\u1ecdng th\u1ec3 hi\u1ec7n th\u1ee9 t\u1ef1 c\u1ee7a c\u00e1c t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c tr\u00ecnh duy\u1ec7t \u01b0u ti\u00ean v\u00e0 t\u00ecm n\u1ea1p. Lighthouse x\u00e1c \u0111\u1ecbnh c\u00e1c t\u00e0i nguy\u00ean \u1edf c\u1ea5p \u0111\u1ed9 th\u1ee9 ba c\u1ee7a chu\u1ed7i n\u00e0y l\u00e0 \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n mu\u1ed9n. B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng tr\u00ecnh ki\u1ec3m tra <a href=\"https:\/\/web.dev\/uses-rel-preload\" target=\"_blank\" rel=\"noreferrer noopener\">Preload key requests<\/a> \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh t\u00e0i nguy\u00ean n\u00e0o n\u00ean preload.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/cac-yeu-cau-preload.png\" alt=\"C\u00e1c y\u00eau c\u1ea7u preload\" class=\"wp-image-14935\"\/><\/figure>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 preload c\u00e1c t\u00e0i nguy\u00ean b\u1eb1ng c\u00e1ch th\u00eam th\u1ebb <code>&lt;link><\/code> \u0111i k\u00e8m <code>rel='preload'<\/code> v\u00e0o ph\u1ea7n <code>&lt;head><\/code> c\u1ee7a t\u00e0i li\u1ec7u HTML, v\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"preload\" as=\"script\" href=\"critical.js\"&gt;<\/code><\/pre>\n\n\n\n<p>Tr\u00ecnh duy\u1ec7t s\u1ebd cache c\u00e1c t\u00e0i nguy\u00ean \u0111\u00e3 \u0111\u01b0\u1ee3c preload, v\u00ec th\u1ebf ch\u00fang c\u00f3 kh\u1ea3 n\u0103ng \u0111\u01b0\u1ee3c cung c\u1ea5p ngay l\u1eadp t\u1ee9c khi tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ebfn (n\u00f3i c\u00e1ch kh\u00e1c, n\u00f3 ch\u1ec9 t\u1ea3i xu\u1ed1ng, v\u00e0 v\u1eabn ch\u01b0a th\u1ef1c thi m\u00e3 JS ho\u1eb7c \u00e1p d\u1ee5ng CSS sau khi t\u1ea3i xong, \u0111i\u1ec1u n\u00e0y r\u1ea5t quan tr\u1ecdng \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o website ho\u1ea1t \u0111\u1ed9ng \u0111\u00fang nh\u01b0 mong mu\u1ed1n).<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#dddddd\">Sau khi tri\u1ec3n khai preload, nhi\u1ec1u trang, bao g\u1ed3m <a href=\"https:\/\/medium.com\/reloading\/preload-prefetch-and-priorities-in-chrome-776165961bbf\" target=\"_blank\" rel=\"noreferrer noopener\">Shopfy, Finacial Time v\u00e0 Treebo nh\u1eadn th\u1ea5y trang c\u1ee7a h\u1ecd c\u1ea3i thi\u1ec7n 1s<\/a> d\u01b0\u1edbi kh\u00eda c\u1ea1nh <a href=\"https:\/\/kiencang.net\/chi-so-hieu-suat-nguoi-dung\/\" target=\"_blank\" rel=\"noreferrer noopener\">c\u00e1c ch\u1ec9 s\u1ed1 t\u1ed1c \u0111\u1ed9 t\u1eadp trung v\u00e0o ng\u01b0\u1eddi d\u00f9ng cu\u1ed1i<\/a>, ch\u1eb3ng h\u1ea1n nh\u01b0 th\u1eddi gian t\u01b0\u01a1ng t\u00e1c (<a href=\"https:\/\/kiencang.net\/time-to-interactive-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Time To Interactive<\/a>) v\u00e0 th\u1eddi gian th\u1ea5y n\u1ed9i dung \u0111\u1ea7u ti\u00ean tr\u00ean trang (<a href=\"https:\/\/kiencang.net\/first-contentful-paint-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">First Contentful Paint<\/a>).<\/p>\n\n\n\n<p>C\u00e1c g\u1ee3i \u00fd t\u00e0i nguy\u00ean kh\u00e1c, ch\u1eb3ng h\u1ea1n nh\u01b0 <a href=\"https:\/\/kiencang.net\/su-dung-preconnect\/\" target=\"_blank\" rel=\"noreferrer noopener\">preconnect<\/a> v\u00e0 <a href=\"https:\/\/kiencang.net\/link-prefetch\/\" target=\"_blank\" rel=\"noreferrer noopener\">prefetch<\/a> \u0111\u01b0\u1ee3c <em>th\u1ef1c thi khi tr\u00ecnh duy\u1ec7t th\u1ea5y ph\u00f9 h\u1ee3p<\/em>. Ng\u01b0\u1ee3c l\u1ea1i preload l\u00e0 <em>ch\u1ec9 th\u1ecb b\u1eaft bu\u1ed9c<\/em> (mandatory) \u0111\u1ed1i v\u1edbi tr\u00ecnh duy\u1ec7t. C\u00e1c tr\u00ecnh duy\u1ec7t hi\u1ec7n \u0111\u1ea1i th\u1ef1c hi\u1ec7n kh\u00e1 t\u1ed1t nhi\u1ec7m v\u1ee5 \u01b0u ti\u00ean c\u00e1c t\u00e0i nguy\u00ean, \u0111\u00f3 l\u00e0 l\u00fd do v\u00ec sao b\u1ea1n ph\u1ea3i s\u1eed d\u1ee5ng preload h\u1ebft s\u1ee9c th\u1eadn tr\u1ecdng, <em>ch\u1ec9 n\u00ean preload c\u00e1c t\u00e0i nguy\u00ean quan tr\u1ecdng nh\u1ea5t m\u00e0 th\u00f4i<\/em>.<\/p>\n\n\n\n<p>C\u00e1c t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c preload nh\u01b0ng l\u1ea1i kh\u00f4ng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng s\u1ebd g\u1eedi \u0111i c\u1ea3nh b\u00e1o trong Chrome, kho\u1ea3ng th\u1eddi gian \u0111\u1ec3 n\u00f3 x\u00e9t t\u00e0i nguy\u00ean c\u00f3 \u0111\u01b0\u1ee3c d\u00f9ng hay kh\u00f4ng l\u00e0 kho\u1ea3ng 3 gi\u00e2y sau khi s\u1ef1 ki\u1ec7n <em>load<\/em> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/canh-bao-cua-console-1024x292.png\" alt=\"C\u1ea3nh b\u00e1o c\u1ee7a console\" class=\"wp-image-14934\"\/><figcaption>Th\u00f4ng b\u00e1o \u1edf tr\u00ean n\u00f3i r\u1eb1ng: T\u00e0i nguy\u00ean 1tcvlsq \u0111\u00e3 \u0111\u01b0\u1ee3c g\u1eafn thu\u1ed9c t\u00ednh preload nh\u01b0ng l\u1ea1i kh\u00f4ng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng v\u00e0i gi\u00e2y sau khi n\u00f3 \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t t\u1ea3i xu\u1ed1ng. H\u00e3y \u0111\u1ea3m b\u1ea3o l\u00e0 b\u1ea1n kh\u00f4ng preload c\u00e1c t\u00e0i nguy\u00ean kh\u00f4ng \u0111\u01b0\u1ee3c d\u00f9ng.<\/figcaption><\/figure>\n\n\n\n<p>L\u01b0u \u00fd: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#Browser_compatibility\" target=\"_blank\" rel=\"noreferrer noopener\">Preload \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3<\/a> tr\u00ean t\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t hi\u1ec7n \u0111\u1ea1i, ngo\u1ea1i tr\u1eeb FireFox.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cac-\u1ee9ng-d\u1ee5ng-th\u1ef1c-t\u1ebf\"><span class=\"ez-toc-section\" id=\"2_Cac_ung_dung_thuc_te\"><\/span>#2. C\u00e1c \u1ee9ng d\u1ee5ng th\u1ef1c t\u1ebf<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"preload-cac-tai-nguyen-d\u01b0\u1ee3c-d\u1ecbnh-nghia-ben-trong-css\">Preload c\u00e1c t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a b\u00ean trong CSS<\/h3>\n\n\n\n<p>C\u00e1c font \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a b\u1eb1ng quy t\u1eafc <em>@font-face<\/em> ho\u1eb7c c\u00e1c \u1ea3nh n\u1ec1n (background) \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong file CSS s\u1ebd kh\u00f4ng \u0111\u01b0\u1ee3c tr\u00ecnh duy\u1ec7t bi\u1ebft t\u1edbi cho \u0111\u1ebfn khi tr\u00ecnh duy\u1ec7t t\u1ea3i v\u00e0 ph\u00e2n t\u00edch xong c\u00e1c file CSS. Preload c\u00e1c t\u00e0i nguy\u00ean n\u00e0y \u0111\u1ea3m b\u1ea3o ch\u00fang \u0111\u01b0\u1ee3c t\u00ecm n\u1ea1p tr\u01b0\u1edbc khi c\u00e1c file CSS t\u1ea3i xong.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"preload-cac-file-css\">Preload c\u00e1c file CSS<\/h3>\n\n\n\n<p>N\u1ebfu b\u1ea1n \u0111ang \u00e1p d\u1ee5ng c\u00e1ch ti\u1ebfp c\u1eadn d\u00f9ng <a href=\"https:\/\/kiencang.net\/critical-css-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">critical CSS<\/a>, t\u1ee9c l\u00e0 b\u1ea1n chia CSS c\u1ee7a trang th\u00e0nh hai ph\u1ea7n. Critical CSS \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 render <a href=\"https:\/\/kiencang.net\/uu-tien-noi-dung-hien-thi\/\" target=\"_blank\" rel=\"noreferrer noopener\">n\u1ed9i dung thu\u1ed9c v\u1ec1 m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean<\/a>, n\u00f3 \u0111\u01b0\u1ee3c inline (n\u1ed9i tuy\u1ebfn) v\u00e0o trong th\u1ebb <em>&lt;head&gt;<\/em> c\u1ee7a t\u00e0i li\u1ec7u, c\u00f2n non-critical CSS th\u01b0\u1eddng \u0111\u01b0\u1ee3c <a href=\"https:\/\/kiencang.net\/ly-giai-don-gian-ve-lazy-load\/\" target=\"_blank\" rel=\"noreferrer noopener\">lazy-load<\/a> b\u1eb1ng JavaScript. Vi\u1ec7c ph\u1ea3i \u0111\u1ee3i JavaScript th\u1ef1c thi tr\u01b0\u1edbc khi t\u1ea3i v\u1ec1 CSS kh\u00f4ng quan tr\u1ecdng (non-critical) c\u00f3 th\u1ec3 l\u00e0 nguy\u00ean nh\u00e2n g\u00e2y tr\u00ec ho\u00e3n vi\u1ec7c render khi ng\u01b0\u1eddi d\u00f9ng cu\u1ed9n chu\u1ed9t, v\u00ec th\u1ebf \u00fd t\u01b0\u1edfng t\u1ed1t l\u00e0 s\u1eed d\u1ee5ng <em>&lt;link rel=&#8221;preload&#8221;&gt;<\/em> \u0111\u1ec3 t\u1ea3i n\u00f3 xu\u1ed1ng s\u1edbm h\u01a1n.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/css-preload.png\" alt=\"M\u1ed9t file CSS tr\u00ean Ki\u1ebfn c\u00e0ng \u0111\u01b0\u1ee3c preload\" class=\"wp-image-14938\"\/><figcaption>M\u1ed9t file CSS tr\u00ean Ki\u1ebfn c\u00e0ng \u0111\u01b0\u1ee3c preload<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"preload-cac-file-javascript\">Preload c\u00e1c file JavaScript<\/h3>\n\n\n\n<p>Do c\u00e1c tr\u00ecnh duy\u1ec7t kh\u00f4ng th\u1ef1c thi c\u00e1c t\u1ec7p \u0111\u01b0\u1ee3c preload (n\u00f3 ch\u1ec9 t\u1ea3i tr\u01b0\u1edbc v\u1ec1 v\u00e0 \u0111\u01b0a v\u00e0o trong cache), n\u00ean preload r\u1ea5t h\u1eefu \u00edch trong vi\u1ec7c <em>t\u00e1ch t\u00ecm n\u1ea1p ra kh\u1ecfi th\u1ef1c thi<\/em>, \u0111i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 c\u1ea3i thi\u1ec7n c\u00e1c s\u1ed1 li\u1ec7u nh\u01b0 <a href=\"https:\/\/kiencang.net\/time-to-interactive-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Time To Interactive<\/a> (Th\u1eddi gian cho ph\u00e9p t\u01b0\u01a1ng t\u00e1c). Preload ho\u1ea1t \u0111\u1ed9ng t\u1ed1t nh\u1ea5t khi b\u1ea1n chia JavaScript th\u00e0nh nhi\u1ec1u t\u1ec7p, v\u00e0 ch\u1ec9 preload c\u00e1c t\u1ec7p quan tr\u1ecdng.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cach-tri\u1ec3n-khai-rel-preload\"><span class=\"ez-toc-section\" id=\"3_Cach_trien_khai_relpreload\"><\/span>#3. C\u00e1ch tri\u1ec3n khai rel=preload<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>C\u00e1ch \u0111\u01a1n gi\u1ea3n nh\u1ea5t \u0111\u1ec3 tri\u1ec3n khai preload 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  &lt;link rel=\"preload\" as=\"script\" href=\"critical.js\"&gt;\n&lt;\/head&gt;<\/code><\/pre>\n\n\n\n<p>Vi\u1ec7c cung c\u1ea5p th\u00eam thu\u1ed9c t\u00ednh <em>as<\/em> gi\u00fap tr\u00ecnh duy\u1ec7t thi\u1ebft l\u1eadp \u01b0u ti\u00ean cho t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c t\u00ecm n\u1ea1p d\u1ef1a tr\u00ean ki\u1ec3u c\u1ee7a n\u00f3, thi\u1ebft l\u1eadp \u0111\u00fang c\u00e1c header, v\u00e0 ph\u00e1t hi\u1ec7n li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 \u0111\u00e3 c\u00f3 s\u1eb5n trong cache hay l\u00e0 ch\u01b0a? C\u00e1c gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c ch\u1ea5p nh\u1eadn cho thu\u1ed9c t\u00ednh n\u00e0y bao g\u1ed3m: script, style, font, image, v\u00e0 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/link#Attributes\" target=\"_blank\" rel=\"noreferrer noopener\">m\u1ed9t s\u1ed1 c\u00e1i kh\u00e1c<\/a>.<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#dddddd\">B\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o <a href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit\" target=\"_blank\" rel=\"noreferrer noopener\">t\u00e0i li\u1ec7u v\u1ec1 \u01b0u ti\u00ean v\u00e0 l\u00ean l\u1ecbch c\u00e1c ngu\u1ed3n t\u00e0i nguy\u00ean trong Chrome<\/a> \u0111\u1ec3 bi\u1ebft c\u00e1ch tr\u00ecnh duy\u1ec7t thi\u1ebft l\u1eadp \u01b0u ti\u00ean cho c\u00e1c ki\u1ec3u t\u00e0i nguy\u00ean kh\u00e1c nhau nh\u01b0 th\u1ebf n\u00e0o.<\/p>\n\n\n\n<p><strong>L\u01b0u \u00fd<\/strong>: Vi\u1ec7c b\u1ecf qua thu\u1ed9c t\u00ednh <em>as<\/em>, ho\u1eb7c c\u00f3 gi\u00e1 tr\u1ecb kh\u00f4ng h\u1ee3p l\u1ec7 t\u01b0\u01a1ng \u0111\u01b0\u01a1ng v\u1edbi y\u00eau c\u1ea7u XHR, l\u00e0m cho tr\u00ecnh duy\u1ec7t kh\u00f4ng bi\u1ebft n\u1ed9i dung g\u00ec \u0111\u01b0\u1ee3c t\u00ecm n\u1ea1p, v\u00ec th\u1ebf n\u00f3 kh\u00f4ng th\u1ec3 x\u00e1c \u0111\u1ecbnh m\u1ee9c \u0111\u1ed9 \u01b0u ti\u00ean ch\u00ednh x\u00e1c \u0111\u01b0\u1ee3c. N\u00f3 c\u0169ng c\u00f3 th\u1ec3 l\u00e0 nguy\u00ean nh\u00e2n khi\u1ebfn m\u1ed9t s\u1ed1 t\u00e0i nguy\u00ean, ch\u1eb3ng h\u1ea1n nh\u01b0 <em>script<\/em> b\u1ecb t\u00ecm n\u1ea1p \u0111\u1ebfn hai l\u1ea7n.<\/p>\n\n\n\n<p>M\u1ed9t s\u1ed1 ki\u1ec3u t\u00e0i nguy\u00ean, ch\u1eb3ng h\u1ea1n nh\u01b0 font, \u0111\u01b0\u1ee3c t\u1ea3i trong ch\u1ebf \u0111\u1ed9 anonymous (v\u00f4 danh). V\u1edbi nh\u1eefng ki\u1ec3u t\u00e0i nguy\u00ean nh\u01b0 v\u1eady, b\u1ea1n ph\u1ea3i thi\u1ebft l\u1eadp thu\u1ed9c t\u00ednh <em>crossorigin<\/em> k\u00e8m theo preload:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"preload\" href=\"ComicSans.woff2\" as=\"font\" type=\"font\/woff2\" crossorigin&gt;<\/code><\/pre>\n\n\n\n<p>Ch\u00fa \u00fd: Preload font n\u1ebfu kh\u00f4ng c\u00f3 thu\u1ed9c t\u00ednh crossorigin s\u1ebd ph\u1ea3i t\u00ecm n\u1ea1p hai l\u1ea7n!<\/p>\n\n\n\n<p>Ph\u1ea7n t\u1eed <em>&lt;link&gt;<\/em> c\u0169ng ch\u1ea5p nh\u1eadn thu\u1ed9c t\u00ednh<em> type<\/em>, c\u00e1i bao g\u1ed3m MIME type c\u1ee7a t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c li\u00ean k\u1ebft. C\u00e1c tr\u00ecnh duy\u1ec7t s\u1eed d\u1ee5ng gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh type \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o r\u1eb1ng c\u00e1c t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c preload ch\u1ec9 khi ki\u1ec3u file c\u1ee7a ch\u00fang \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3. N\u1ebfu tr\u00ecnh duy\u1ec7t kh\u00f4ng h\u1ed7 tr\u1ee3 m\u1ed9t ki\u1ec3u t\u00e0i nguy\u00ean c\u1ee5 th\u1ec3 n\u00e0o \u0111\u00f3, n\u00f3 s\u1ebd b\u1ecf qua th\u1ebb <em>&lt;link rel=&#8221;preload&#8221;&gt;<\/em>.<\/p>\n\n\n\n<p>B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 preload b\u1ea5t c\u1ee9 ki\u1ec3u t\u00e0i nguy\u00ean n\u00e0o th\u00f4ng qua Link HTTP header:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Link: &lt;\/css\/style.css&gt;; rel=\"preload\"; as=\"style\"<\/code><\/pre>\n\n\n\n<p>M\u1ed9t l\u1ee3i th\u1ebf c\u1ee7a vi\u1ec7c ch\u1ec9 \u0111\u1ecbnh preload th\u00f4ng qua HTTP Header l\u00e0 tr\u00ecnh duy\u1ec7t kh\u00f4ng c\u1ea7n ph\u1ea3i ph\u00e2n t\u00edch t\u00e0i li\u1ec7u \u0111\u1ec3 kh\u00e1m ph\u00e1 ra n\u00f3, \u0111i\u1ec1u \u0111\u00f3 c\u00f3 th\u1ec3 gi\u00fap b\u1ea1n c\u00f3 \u0111\u01b0\u1ee3c c\u1ea3i thi\u1ec7n nh\u1ecf trong m\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"preload-module-javascript-b\u1eb1ng-webpack\">Preload module JavaScript b\u1eb1ng webpack<\/h3>\n\n\n\n<p>N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng module bundler cho vi\u1ec7c x\u00e2y d\u1ef1ng c\u00e1c t\u1ec7p c\u1ee7a \u1ee9ng d\u1ee5ng, b\u1ea1n c\u1ea7n ki\u1ec3m tra xem n\u00f3 c\u00f3 h\u1ed7 tr\u1ee3 t\u00ednh n\u0103ng injection c\u1ee7a th\u1ebb preload hay kh\u00f4ng. V\u1edbi <a href=\"https:\/\/webpack.js.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">webpack<\/a> t\u1eeb phi\u00ean b\u1ea3n 4.6.0 tr\u1edf \u0111i, preload \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 th\u00f4ng qua 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>import(_\/* webpackPreload: true *\/_ \"CriticalChunk\")<\/code><\/pre>\n\n\n\n<p>N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng phi\u00ean b\u1ea3n webpack c\u0169 h\u01a1n, b\u1ea1n c\u1ea7n s\u1eed d\u1ee5ng plugin c\u1ee7a b\u00ean th\u1ee9 ba c\u00f3 t\u00ean <a href=\"https:\/\/github.com\/GoogleChromeLabs\/preload-webpack-plugin\" target=\"_blank\" rel=\"noreferrer noopener\">preload-webpack-plugin<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"k\u1ebft-lu\u1eadn\"><span class=\"ez-toc-section\" id=\"4_Ket_luan\"><\/span>#4. K\u1ebft lu\u1eadn<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u0110\u1ec3 c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 t\u1ea3i trang, b\u1ea1n n\u00ean preload c\u00e1c t\u00e0i nguy\u00ean quan tr\u1ecdng m\u00e0 n\u1ebfu theo c\u00e1ch th\u00f4ng th\u01b0\u1eddng n\u00f3 s\u1ebd b\u1ecb ph\u00e1t hi\u1ec7n mu\u1ed9n trong tr\u00ecnh duy\u1ec7t (c\u00f3 th\u1ec3 v\u00ec n\u00f3 \u1ea9n trong c\u00e1c file CSS, ho\u1eb7c n\u00f3 c\u00f3 v\u1ecb tr\u00ed th\u1ea5p trong file HTML, v\u00e2n v\u00e2n). Preload m\u1ecdi th\u1ee9 s\u1ebd ph\u1ea3n t\u00e1c d\u1ee5ng do v\u1eady b\u1ea1n ph\u1ea3i d\u00f9ng preload m\u1ed9t c\u00e1ch c\u1ea9n tr\u1ecdng v\u00e0 <a href=\"https:\/\/kiencang.net\/trai-nghiem-link-preconnect\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u0111o \u0111\u1ea1c \u1ea3nh h\u01b0\u1edfng c\u1ee7a n\u00f3 trong th\u1ebf gi\u1edbi th\u1ef1c<\/a> (real-world).<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"vi-d\u1ee5-demo\"><span class=\"ez-toc-section\" id=\"5_Vi_du_demo\"><\/span>#5. V\u00ed d\u1ee5 demo<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Ph\u1ea7n n\u00e0y t\u00f4i (ng\u01b0\u1eddi d\u1ecbch) th\u00eam v\u00e0o \u0111\u1ec3 ch\u00fang ta d\u1ec5 hi\u1ec3u, v\u00e0 d\u1ec5 ki\u1ec3m tra h\u01a1n. T\u00f4i t\u1ea1o 2 trang c\u00f3 n\u1ed9i dung gi\u1ed1ng h\u1ec7t nhau, ch\u1ec9 kh\u00e1c l\u00e0 m\u1ed9t trang c\u00f3 preload, c\u00f2n m\u1ed9t trang th\u00ec kh\u00f4ng.<\/p>\n\n\n\n<p>M\u00f4 h\u00ecnh th\u1ebf n\u00e0y: t\u00f4i t\u1ea1o trang v\u1edbi hai <a href=\"https:\/\/kiencang.net\/font-tuy-chinh\/\" target=\"_blank\" rel=\"noreferrer noopener\">font t\u00f9y ch\u1ec9nh<\/a> v\u00e0 m\u1ed9t \u1ea3nh n\u1ec1n l\u00e0m background, trong \u0111\u00f3 c\u1ea3 hai t\u00e0i nguy\u00ean n\u00e0y \u0111\u1ec1u n\u1eb1m trong CSS. \u0110i\u1ec1u \u0111\u00f3 c\u00f3 ngh\u0129a l\u00e0, theo m\u1eb7c \u0111\u1ecbnh, tr\u00ecnh duy\u1ec7t s\u1ebd ph\u1ea3i t\u1ea3i CSS v\u00e0 ph\u00e2n t\u00edch c\u00fa ph\u00e1p xong th\u00ec m\u1edbi t\u1ea3i font t\u00f9y ch\u1ec9nh v\u00e0 \u1ea3nh background \u0111\u01b0\u1ee3c. Trang th\u00f4ng th\u01b0\u1eddng s\u1ebd gi\u1eef nguy\u00ean c\u1ea5u tr\u00fac nh\u01b0 v\u1eeba m\u00f4 t\u1ea3, c\u00f2n v\u1edbi trang c\u00f3 preload, t\u00f4i ch\u1ee7 \u0111\u1ed9ng preload c\u1ea3 ba t\u00e0i nguy\u00ean (g\u1ed3m hai font v\u00e0 m\u1ed9t \u1ea3nh) \u0111\u1ec3 xem s\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa ch\u00fang nh\u01b0 th\u1ebf n\u00e0o.<\/p>\n\n\n\n<p>Trang t\u1ea3i theo m\u1eb7c \u0111\u1ecbnh: <a href=\"https:\/\/static.kiencang.net\/2020\/normal-font-bg.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/static.kiencang.net\/2020\/normal-font-bg.html<\/a><\/p>\n\n\n\n<p>Trang preload tr\u01b0\u1edbc t\u00e0i nguy\u00ean: <a href=\"https:\/\/static.kiencang.net\/2020\/preload-font-bg.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/static.kiencang.net\/2020\/preload-font-bg.html<\/a><\/p>\n\n\n\n<p>\u0110o\u1ea1n m\u00e3 m\u1eabu preload (khi tri\u1ec3n khai b\u1ea1n n\u00ean \u0111\u1ec3 \u00fd \u0111\u1ebfn t\u1ea5t c\u1ea3 c\u00e1c thu\u1ed9c t\u00ednh l\u00e0 <em>rel<\/em>, <em>href<\/em>, <em>as<\/em>, <em>type<\/em> v\u00e0 <em>crossorigin<\/em>):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"preload\" href=\"fonts\/thu-phap.ttf\" as=\"font\" type=\"font\/ttf\" crossorigin&gt;\n&lt;link rel=\"preload\" href=\"fonts\/tap-viet.ttf\" as=\"font\" type=\"font\/ttf\" crossorigin&gt;\n&lt;link rel=\"preload\" href=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/video-lazy-load.png\" as=\"image\" type=\"image\/png\"&gt;\n&lt;link rel='stylesheet' href='https:\/\/static.kiencang.net\/2020\/css\/normal-font-bg.css' type='text\/css' media='all' \/&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3 ki\u1ec3m tra v\u1edbi DevTools (Lighthouse) tr\u00ean Chrome:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/tai-thong-thuong.png\" alt=\"trang t\u1ea3i th\u00f4ng th\u01b0\u1eddng\" class=\"wp-image-16046\"\/><figcaption>Tr\u00ean trang t\u1ea3i th\u00f4ng th\u01b0\u1eddng, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y file CSS ph\u1ea3i t\u1ea3i v\u00e0 ph\u00e2n t\u00edch xong th\u00ec hai font v\u00e0 \u1ea3nh n\u1ec1n m\u1edbi t\u1ea3i v\u1ec1<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/preload-tai-nguyen.png\" alt=\"trang c\u00f3 preload\" class=\"wp-image-16047\"\/><figcaption>Tr\u00ean trang c\u00f3 preload, b\u1ea1n th\u1ea5y c\u1ea3 4 t\u00e0i nguy\u00ean l\u00e0 hai font, css v\u00e0 \u1ea3nh n\u1ec1n c\u00f9ng t\u1ea3i v\u1ec1 c\u00f9ng m\u1ed9t l\u00fac<\/figcaption><\/figure>\n\n\n\n<p>V\u00ec 2 trang gi\u1ed1ng y nhau (ngo\u1ea1i tr\u1eeb kh\u00e1c bi\u1ec7t v\u1ec1 preload) n\u00ean s\u1ed1 l\u01b0\u1ee3ng request (6), dung l\u01b0\u1ee3ng t\u1ea3i v\u1ec1 (180\/240) \u0111\u1ec1u gi\u1ed1ng nhau. \u0110i\u1ec3m kh\u00e1c bi\u1ec7t d\u1ec5 th\u1ea5y l\u00e0 th\u1eddi gian t\u1ea3i v\u1ec1 (Finish) c\u1ee7a trang c\u00f3 preload \u00edt h\u01a1n (ngh\u0129a l\u00e0 t\u1ed1t h\u01a1n, ch\u1ec9 1,80s so v\u1edbi 2,24s, m\u1ed7i l\u1ea7n ki\u1ec3m tra con s\u1ed1 n\u00e0y s\u1ebd thay \u0111\u1ed5i do n\u00f3 c\u00f2n ph\u1ee5 thu\u1ed9c v\u00e0o \u0111i\u1ec1u ki\u1ec7n k\u1ebft n\u1ed1i m\u1ea1ng, nh\u01b0ng nh\u00ecn chung trang c\u00f3 preload s\u1ebd t\u1ea3i nhanh h\u01a1n).<\/p>\n\n\n\n<p>T\u1ea1i sao trang c\u00f3 preload t\u1ea3i nhanh h\u01a1n: H\u00e3y t\u01b0\u1edfng t\u01b0\u1ee3ng c\u00e1ch t\u1ea3i website gi\u1ed1ng nh\u01b0 x\u00e2y m\u1ed9t c\u0103n nh\u00e0, CSS ch\u00ednh b\u1ea3n thi\u1ebft k\u1ebf b\u1ea1n thu\u00ea ki\u1ebfn tr\u00fac s\u01b0 v\u1ebd. C\u00f2n \u1ea3nh, font gi\u1ed1ng nh\u01b0 nguy\u00ean v\u1eadt li\u1ec7u x\u00e2y n\u00ean c\u0103n nh\u00e0. R\u1ea5t h\u1ee3p l\u00fd khi ch\u00fang ta c\u1ea7n c\u00f3 b\u1ea3n thi\u1ebft k\u1ebf trong tay th\u00ec m\u1edbi bi\u1ebft n\u00ean mua nguy\u00ean v\u1eadt li\u1ec7u n\u00e0o, s\u1ed1 l\u01b0\u1ee3ng bao nhi\u00eau, nh\u01b0ng th\u01b0\u1eddng b\u1ea1n \u0111\u00e3 n\u1eafm r\u00f5 c\u00e1c v\u1eadt li\u1ec7u c\u0103n b\u1ea3n c\u1ea7n x\u00e2y c\u0103n nh\u00e0 r\u1ed3i. Nh\u01b0 v\u1eady s\u1ebd nhanh h\u01a1n n\u1ebfu \u0111\u1ed3ng th\u1eddi, v\u00e0o kho\u1ea3ng th\u1eddi gian ch\u1edd \u0111\u1ee3i b\u1ea3n thi\u1ebft k\u1ebf \u0111\u01b0\u1ee3c chuy\u1ec3n t\u1eeb S\u00e0i G\u00f2n v\u1ec1 H\u00e0 N\u1ed9i (h\u1ecfa t\u1ed1c th\u00ec c\u0169ng ph\u1ea3i m\u1ea5t 1 ng\u00e0y), th\u00ec l\u00fac \u1ea5y b\u1ea1n c\u0169ng nh\u1eadp lu\u00f4n v\u1eadt li\u1ec7u c\u1ea7n thi\u1ebft nh\u01b0 xi m\u0103ng, \u0111\u00e1, m\u1ea1t, c\u00e1t, s\u1eaft th\u00e9p. Th\u1eddi gian ti\u1ebft ki\u1ec7m \u0111\u01b0\u1ee3c l\u00e0 nh\u1edd b\u1ea1n kh\u00f4ng ph\u1ea3i ch\u1edd \u0111\u1ee3i b\u1ea3n thi\u1ebft k\u1ebf v\u1ec1 r\u1ed3i m\u1edbi mua v\u1eadt li\u1ec7u (m\u1ea5t th\u00eam \u00edt nh\u1ea5t m\u1ed9t ng\u00e0y). Khi v\u1eadt li\u1ec7u c\u00f3 s\u1eb5n, v\u00e0 b\u1ea3n thi\u1ebft k\u1ebf v\u1ec1, b\u1ea1n b\u1eaft tay v\u00e0o x\u00e2y nh\u00e0 lu\u00f4n.<\/p>\n\n\n\n<p>C\u00f3 th\u1ec3 c\u00f3 m\u1ed9t sai l\u1ea7m nh\u1ecf trong th\u1ee9 t\u1ef1 preload, ban \u0111\u1ea7u n\u00f3 th\u1ebf n\u00e0y:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/thu-tu-preload-1024x66.png\" alt=\"th\u1ee9 t\u1ef1 preload\" class=\"wp-image-16052\"\/><figcaption>file CSS \u0111\u01b0\u1ee3c t\u00f4i \u0111\u1ec3 \u1edf d\u01b0\u1edbi c\u00f9ng<\/figcaption><\/figure>\n\n\n\n<p>Theo thi\u1ebft k\u1ebf c\u1ee7a trang th\u00ec font <em>thu-phap.ttf<\/em> v\u00e0 \u1ea3nh background n\u1eb1m trong m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean, trong khi font <em>tap-viet.ttf<\/em> d\u00f9ng trong m\u00e0n h\u00ecnh th\u1ee9 hai, n\u00ean \u0111\u00e1ng ra <em>tap-viet.ttf <\/em>s\u1ebd ph\u1ea3i \u1edf d\u01b0\u1edbi c\u00f9ng. Ngo\u00e0i ra, t\u00f4i th\u1eed \u0111\u1ec3 file CSS l\u00ean tr\u00ean c\u00f9ng xem th\u1ee9 t\u1ef1 t\u1ea3i c\u00f3 thay \u0111\u1ed5i g\u00ec kh\u00f4ng, m\u00e3 thay \u0111\u1ed5i nh\u01b0 sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel='stylesheet' href='https:\/\/static.kiencang.net\/2020\/css\/normal-font-bg.css' type='text\/css' media='all' \/&gt;\n&lt;link rel=\"preload\" href=\"fonts\/thu-phap.ttf\" as=\"font\" type=\"font\/ttf\" crossorigin&gt;\n&lt;link rel=\"preload\" href=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/video-lazy-load.png\" as=\"image\" type=\"image\/png\"&gt;\n&lt;link rel=\"preload\" href=\"fonts\/tap-viet.ttf\" as=\"font\" type=\"font\/ttf\" crossorigin&gt;<\/code><\/pre>\n\n\n\n<p>Trang demo: <a href=\"https:\/\/static.kiencang.net\/2020\/thu-tu-preload1.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/static.kiencang.net\/2020\/thu-tu-preload1.html<\/a><\/p>\n\n\n\n<p>K\u1ebft qu\u1ea3 l\u00e0 th\u1ee9 t\u1ef1 t\u1ea3i v\u1ec1 t\u00e0i nguy\u00ean \u0111\u00e3 thay \u0111\u1ed5i theo ch\u1ec9 d\u1eabn, nh\u01b0ng file CSS v\u1eabn t\u1ea3i v\u1ec1 cu\u1ed1i c\u00f9ng (\u0111i\u1ec1u n\u00e0y l\u00e0m ch\u00fang ta nh\u1edb l\u1ea1i r\u1eb1ng ch\u1ec9 th\u1ecb preload l\u00e0 ch\u1ec9 th\u1ecb b\u1eaft bu\u1ed9c, v\u00e0 tr\u00ecnh duy\u1ec7t tu\u00e2n th\u1ee7 \u0111i\u1ec1u n\u00e0y b\u1eb1ng c\u00e1ch t\u1ea3i c\u00e1c t\u00e0i nguy\u00ean preload tr\u01b0\u1edbc ngay c\u1ea3 khi CSS \u0111\u01b0\u1ee3c \u0111\u1eb7t \u1edf tr\u00ean c\u00f9ng trong t\u00e0i li\u1ec7u HTML):<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/thu-tu-thay-doi.png\" alt=\"th\u1ee9 t\u1ef1 t\u00e0i nguy\u00ean t\u1ea3i v\u1ec1 \u0111\u00e3 thay \u0111\u1ed5i, nh\u01b0ng file CSS v\u1eabn \u1edf cu\u1ed1i\" class=\"wp-image-16055\"\/><\/figure><\/div>\n\n\n<p>T\u00f4i ngh\u0129 \u0111\u1ec3 file CSS \u1edf cu\u1ed1i s\u1ebd h\u1ee3p l\u00fd h\u01a1n, v\u00ec d\u00f9 sao ph\u1ea3i \u0111\u1ee7 nguy\u00ean v\u1eadt li\u1ec7u th\u00ec m\u1edbi x\u00e2y nh\u00e0 d\u1ef1a tr\u00ean b\u1ea3n thi\u1ebft k\u1ebf \u0111\u01b0\u1ee3c, ng\u01b0\u1ee3c l\u1ea1i c\u00f3 b\u1ea3n thi\u1ebft k\u1ebf m\u00e0 ch\u01b0a c\u00f3 nguy\u00ean v\u1eadt li\u1ec7u th\u00ec b\u1ea1n c\u0169ng ch\u01b0a th\u1ec3 l\u00e0m g\u00ec c\u1ea3.<\/p>\n\n\n\n<p><em>(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft Preload critical assets to improve loading speed, t\u00e1c gi\u1ea3: Houssein Djirdeh v\u00e0 Milica Mihajlija, website: web[.]dev)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Khi b\u1ea1n m\u1edf m\u1ed9t trang web, tr\u00ecnh duy\u1ec7t s\u1ebd g\u1eedi c\u00e1c y\u00eau c\u1ea7u t\u00e0i li\u1ec7u HTML \u0111\u1ebfn m\u00e1y ch\u1ee7 (server), ph\u00e2n t\u00edch n\u1ed9i dung c\u1ee7a n\u00f3, v\u00e0 g\u1eedi c\u00e1c y\u00eau c\u1ea7u ri\u00eang cho b\u1ea5t k\u1ef3 ngu\u1ed3n t\u00e0i nguy\u00ean n\u00e0o \u0111\u01b0\u1ee3c tham chi\u1ebfu \u0111\u1ebfn (referenced resource). L\u00e0 ng\u01b0\u1eddi l\u1eadp tr\u00ecnh, b\u1ea1n c\u1ea7n bi\u1ebft v\u1ec1 t\u1ea5t c\u1ea3 &hellip;<\/p>\n","protected":false},"author":1,"featured_media":21362,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[282,291],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Preload c\u00e1c t\u00e0i nguy\u00ean quan tr\u1ecdng \u0111\u1ec3 t\u0103ng t\u1ed1c \u0111\u1ed9 website &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"description\" content=\"C\u00e1c t\u00e0i nguy\u00ean kh\u00f4ng c\u00f3 vai tr\u00f2 nh\u01b0 nhau, m\u1ed9t s\u1ed1 quan tr\u1ecdng h\u01a1n nhi\u1ec1u c\u00e1i kh\u00e1c. B\u1eb1ng c\u00e1ch preload v\u00e0i t\u00e0i nguy\u00ean quan tr\u1ecdng nh\u1ea5t, b\u1ea1n gi\u00fap t\u0103ng t\u1ed1c website.\" \/>\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\/preload-tai-nguyen-quan-trong\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Preload c\u00e1c t\u00e0i nguy\u00ean quan tr\u1ecdng \u0111\u1ec3 t\u0103ng t\u1ed1c \u0111\u1ed9 website &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"C\u00e1c t\u00e0i nguy\u00ean kh\u00f4ng c\u00f3 vai tr\u00f2 nh\u01b0 nhau, m\u1ed9t s\u1ed1 quan tr\u1ecdng h\u01a1n nhi\u1ec1u c\u00e1i kh\u00e1c. B\u1eb1ng c\u00e1ch preload v\u00e0i t\u00e0i nguy\u00ean quan tr\u1ecdng nh\u1ea5t, b\u1ea1n gi\u00fap t\u0103ng t\u1ed1c website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/preload-tai-nguyen-quan-trong\/\" \/>\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-09T16:40:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-25T15:17:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/preload-tai-nguyen-quan-trong.png\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"359\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/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=\"12 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Preload c\u00e1c t\u00e0i nguy\u00ean quan tr\u1ecdng \u0111\u1ec3 t\u0103ng t\u1ed1c \u0111\u1ed9 website &#8226; Ki\u1ebfn c\u00e0ng","description":"C\u00e1c t\u00e0i nguy\u00ean kh\u00f4ng c\u00f3 vai tr\u00f2 nh\u01b0 nhau, m\u1ed9t s\u1ed1 quan tr\u1ecdng h\u01a1n nhi\u1ec1u c\u00e1i kh\u00e1c. B\u1eb1ng c\u00e1ch preload v\u00e0i t\u00e0i nguy\u00ean quan tr\u1ecdng nh\u1ea5t, b\u1ea1n gi\u00fap t\u0103ng t\u1ed1c website.","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\/preload-tai-nguyen-quan-trong\/","og_locale":"vi_VN","og_type":"article","og_title":"Preload c\u00e1c t\u00e0i nguy\u00ean quan tr\u1ecdng \u0111\u1ec3 t\u0103ng t\u1ed1c \u0111\u1ed9 website &#8226; Ki\u1ebfn c\u00e0ng","og_description":"C\u00e1c t\u00e0i nguy\u00ean kh\u00f4ng c\u00f3 vai tr\u00f2 nh\u01b0 nhau, m\u1ed9t s\u1ed1 quan tr\u1ecdng h\u01a1n nhi\u1ec1u c\u00e1i kh\u00e1c. B\u1eb1ng c\u00e1ch preload v\u00e0i t\u00e0i nguy\u00ean quan tr\u1ecdng nh\u1ea5t, b\u1ea1n gi\u00fap t\u0103ng t\u1ed1c website.","og_url":"https:\/\/kiencang.net\/preload-tai-nguyen-quan-trong\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2020-03-09T16:40:43+00:00","article_modified_time":"2022-08-25T15:17:51+00:00","og_image":[{"width":640,"height":359,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/preload-tai-nguyen-quan-trong.png","type":"image\/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":"12 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/preload-tai-nguyen-quan-trong\/","url":"https:\/\/kiencang.net\/preload-tai-nguyen-quan-trong\/","name":"Preload c\u00e1c t\u00e0i nguy\u00ean quan tr\u1ecdng \u0111\u1ec3 t\u0103ng t\u1ed1c \u0111\u1ed9 website &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2020-03-09T16:40:43+00:00","dateModified":"2022-08-25T15:17:51+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"description":"C\u00e1c t\u00e0i nguy\u00ean kh\u00f4ng c\u00f3 vai tr\u00f2 nh\u01b0 nhau, m\u1ed9t s\u1ed1 quan tr\u1ecdng h\u01a1n nhi\u1ec1u c\u00e1i kh\u00e1c. B\u1eb1ng c\u00e1ch preload v\u00e0i t\u00e0i nguy\u00ean quan tr\u1ecdng nh\u1ea5t, b\u1ea1n gi\u00fap t\u0103ng t\u1ed1c website.","breadcrumb":{"@id":"https:\/\/kiencang.net\/preload-tai-nguyen-quan-trong\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/preload-tai-nguyen-quan-trong\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/preload-tai-nguyen-quan-trong\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"Preload c\u00e1c t\u00e0i nguy\u00ean quan tr\u1ecdng \u0111\u1ec3 t\u0103ng t\u1ed1c \u0111\u1ed9 website"}]},{"@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\/16852"}],"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=16852"}],"version-history":[{"count":2,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16852\/revisions"}],"predecessor-version":[{"id":23170,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16852\/revisions\/23170"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/21362"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=16852"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=16852"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=16852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}