{"id":14765,"date":"2020-03-04T22:59:38","date_gmt":"2020-03-04T15:59:38","guid":{"rendered":"https:\/\/kiencang.net\/?p=14765"},"modified":"2020-03-04T22:59:38","modified_gmt":"2020-03-04T15:59:38","slug":"preload-preconnect-prefetch","status":"publish","type":"post","link":"https:\/\/kiencang.net\/preload-preconnect-prefetch\/","title":{"rendered":"C\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 website b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng preload, preconnect, prefetch"},"content":{"rendered":"\n

Ng\u00e0y h\u00f4m nay t\u00f4i s\u1ebd tr\u00ecnh b\u00e0y m\u1ed9t v\u00e0i k\u1ef9 thu\u1eadt \u0111\u01a1n gi\u1ea3n \u0111\u1ec3 gi\u00fap website c\u1ee7a b\u1ea1n t\u1ea3i nhanh h\u01a1n<\/a>.<\/p>\n\n\n

\u0110\u1ea7u ti\u00ean, ch\u00fang ta c\u1ea7n bi\u1ebft preload, preconnect v\u00e0 prefetch l\u00e0 g\u00ec \u0111\u00e3.<\/p>\n\n\n

Preload<\/a><\/strong> – Khi ch\u00fang ta s\u1eed d\u1ee5ng preload trong tag link, tr\u00ecnh duy\u1ec7t s\u1ebd ti\u1ebfn h\u00e0nh t\u00ecm n\u1ea1p s\u1edbm y\u00eau c\u1ea7u \u0111\u1ec3 c\u00f3 \u0111\u01b0\u1ee3c t\u00e0i nguy\u00ean m\u00e0 website c\u1ea7n. C\u00e1i n\u00e0y \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng ch\u1ee7 y\u1ebfu v\u00e0o c\u00e1c t\u00e0i nguy\u00ean c\u00f3 m\u1ee9c \u0111\u1ed9 \u01b0u ti\u00ean cao trong phi\u00ean l\u00e0m vi\u1ec7c hi\u1ec7n t\u1ea1i<\/em>, b\u1ea5t k\u1ec3 n\u00f3 l\u00e0 t\u00e0i nguy\u00ean thu\u1ed9c hosting g\u1ed1c hay c\u1ee7a b\u00ean th\u1ee9 ba (thirt-party).<\/p>\n\n\n

Preconnect<\/a><\/strong> – N\u00f3 gi\u1ea3i gi\u00fap quy\u1ebft v\u1ea5n \u0111\u1ec1 tra c\u1ee9u DNS<\/a> v\u00e0 TCP handshaking\/https. Ch\u1ec9 d\u00e0nh cho t\u00e0i nguy\u00ean c\u1ee7a b\u00ean th\u1ee9 ba, k\u1ec3 c\u1ea3 l\u00e0 CDN<\/a> (ki\u1ec3u cdn.ten-mien-cua-ban.com), n\u00f3 kh\u00f4ng c\u1ea7n thi\u1ebft cho c\u00e1c t\u00e0i nguy\u00ean thu\u1ed9c host g\u1ed1c.<\/p>\n\n\n

DNS-Preconnect<\/strong> – N\u00f3 ch\u1ec9 gi\u00fap gi\u1ea3i quy\u1ebft tra c\u1ee9u DNS v\u00e0 c\u0169ng ch\u1ec9 d\u00e0nh cho t\u00e0i nguy\u00ean c\u1ee7a b\u00ean th\u1ee9 ba. C\u00e1i n\u00e0y k\u00e9m h\u01a1n so v\u1edbi preconnect l\u00e0 n\u00f3 kh\u00f4ng th\u1ef1c hi\u1ec7n c\u00e1c v\u1ea5n \u0111\u1ec1 li\u00ean quan \u0111\u1ebfn k\u1ebft n\u1ed1i tr\u01b0\u1edbc, h\u00ecnh th\u00e0nh li\u00ean k\u1ebft b\u1ea3o m\u1eadt (https).<\/p>\n\n\n

Prefetch<\/a><\/strong> – N\u00f3 gi\u00fap t\u00ecm n\u1ea1p tr\u01b0\u1edbc c\u00e1c ngu\u1ed3n t\u00e0i nguy\u00ean v\u00e0 \u0111\u01b0a n\u00f3 v\u00e0o trong cache tr\u00ecnh duy\u1ec7t \u0111\u1ec3 khi ng\u01b0\u1eddi d\u00f9ng c\u1ea7n t\u00e0i nguy\u00ean th\u00ec tr\u00ecnh duy\u1ec7t s\u1ebd l\u1ea5y t\u1eeb \u0111\u00e2y thay v\u00ec ph\u1ea3i th\u1ef1c hi\u1ec7n y\u00eau c\u1ea7u theo th\u1eddi gian th\u1ef1c. \u0110i\u1ec3m kh\u00e1c bi\u1ec7t v\u1edbi preload l\u00e0 vi\u1ec7c t\u00ecm n\u1ea1p tr\u01b0\u1edbc n\u00e0y \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n khi r\u1ea3nh r\u1ed7i trong phi\u00ean hi\u1ec7n t\u1ea1i, v\u00e0 c\u00e1c t\u00e0i nguy\u00ean t\u00ecm n\u1ea1p tr\u01b0\u1edbc l\u00e0 d\u00e0nh cho l\u01b0\u1ee3t gh\u00e9 th\u0103m\/click k\u1ebf ti\u1ebfp<\/strong> ch\u1ee9 kh\u00f4ng ph\u1ea3i hi\u1ec7n t\u1ea1i. H\u1ec7 qu\u1ea3 l\u00e0 n\u1ebfu \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng c\u1ea9n tr\u1ecdng, trang website s\u1ebd t\u1ea3i nhanh h\u01a1n r\u1ea5t nhi\u1ec1u, v\u00ec n\u1ed9i dung m\u00e0 ng\u01b0\u1eddi d\u00f9ng truy c\u1eadp trong t\u01b0\u01a1ng lai \u0111\u00e3 \u0111\u01b0\u1ee3c cache<\/em>. \u0110\u00e2y l\u00e0 c\u00e1ch m\u00e0 plugin Flying Pages<\/a> \u00e1p d\u1ee5ng.<\/p>\n\n\n

T\u00f4i ngh\u0129 b\u1ea1n c\u00f3 th\u1ec3 v\u1eabn c\u1ea3m th\u1ea5y l\u1eabn l\u1ed9n gi\u1eefa preload v\u00e0 prefetch. M\u1ed9t \u0111i\u1ec3m kh\u00e1c bi\u1ec7t quan tr\u1ecdng l\u00e0 preload \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho c\u00e1c t\u00e0i nguy\u00ean c\u00f3 m\u1ee9c \u0111\u1ed9 \u01b0u ti\u00ean cao, c\u00f2n prefetch \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho c\u00e1c t\u00e0i nguy\u00ean c\u00f3 m\u1ee9c \u0111\u1ed9 \u01b0u ti\u00ean th\u1ea5p.<\/p>\n\n\n

Gi\u1edd ch\u00fang ta s\u1ebd xem v\u00ed d\u1ee5 trong th\u1ef1c t\u1ebf.<\/p>\n\n\n

M\u1eb7c \u0111\u1ecbnh th\u00ec website vuejs<\/em> c\u1ee7a t\u00f4i (t\u00e1c gi\u1ea3 g\u1ed1c b\u00e0i ti\u1ebfng Anh) kh\u00f4ng s\u1eed d\u1ee5ng b\u1ea5t c\u1ee9 ph\u01b0\u01a1ng th\u1ee9c n\u00e0o b\u00ean tr\u00ean.<\/p>\n\n\n

Gi\u1edd ch\u00fang ta ki\u1ec3m tra hi\u1ec7u su\u1ea5t c\u1ee7a trang b\u1eb1ng c\u00f4ng c\u1ee5 Chrome Audits (lighthouse).<\/p>\n\n\n

\"hi\u1ec7u
Hi\u1ec7u su\u1ea5t c\u1ee7a trang VueJS<\/figcaption><\/figure><\/div>\n\n\n

B\u1ea1n c\u00f3 th\u1ea5y hi\u1ec7u su\u1ea5t c\u1ee7a trang \u0111ang \u1edf m\u1ed1c 43%.<\/p>\n\n\n

\n
\n

M\u1ee5c l\u1ee5c<\/p>\n