{"id":16851,"date":"2020-03-08T19:47:36","date_gmt":"2020-03-08T12:47:36","guid":{"rendered":"https:\/\/kiencang.net\/?p=14910"},"modified":"2020-03-08T19:47:36","modified_gmt":"2020-03-08T12:47:36","slug":"so-sanh-preconnect-preload-prefetch","status":"publish","type":"post","link":"https:\/\/kiencang.net\/so-sanh-preconnect-preload-prefetch\/","title":{"rendered":"So s\u00e1nh preconnect, preload v\u00e0 prefetch"},"content":{"rendered":"\n

Trong b\u00e0i vi\u1ebft ng\u1eafn n\u00e0y t\u00f4i s\u1ebd so s\u00e1nh 3 c\u00f4ng c\u1ee5 ‘pre \/ t\u1ea3i tr\u01b0\u1edbc’ c\u01a1 b\u1ea3n gi\u00fap t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9, hi\u1ec7u su\u1ea5t website:<\/p>\n\n\n

<\/td>preconnect<\/a><\/strong><\/td>preload<\/a><\/strong><\/td>prefetch<\/a><\/strong><\/td><\/tr>
M\u1ee5c \u0111\u00edch<\/td>K\u1ebft n\u1ed1i s\u1edbm v\u1edbi c\u00e1c m\u00e1y ch\u1ee7 b\u00ean ngo\u00e0i<\/td>T\u1ea3i tr\u01b0\u1edbc c\u00e1c t\u00e0i nguy\u00ean quan tr\u1ecdng cho phi\u00ean duy\u1ec7t web hi\u1ec7n t\u1ea1i<\/td>T\u1ea3i tr\u01b0\u1edbc c\u00e1c t\u00e0i nguy\u00ean cho phi\u00ean duy\u1ec7t web k\u1ebf ti\u1ebfp trong t\u01b0\u01a1ng lai g\u1ea7n<\/td><\/tr>
C\u01a1 ch\u1ebf<\/td>Th\u1ef1c hi\u1ec7n t\u1ea3i song song t\u00ecm ki\u1ebfm DNS, k\u1ebft n\u1ed1i b\u1ea3o m\u1eadt qua \u0111\u00f3 gi\u1ea3m \u0111\u01b0\u1ee3c \u0111\u1ed9 tr\u1ec5 m\u1ea1ng do ph\u1ea3i th\u1ef1c hi\u1ec7n l\u1ea7n l\u01b0\u1ee3t<\/td>Nh\u1edd vi\u1ec7c t\u1ea3i tr\u01b0\u1edbc c\u00e1c t\u00e0i nguy\u00ean quan tr\u1ecdng, website c\u00f3 kh\u1ea3 n\u0103ng \u0111\u01b0\u1ee3c t\u01b0\u01a1ng t\u00e1c s\u1edbm h\u01a1n<\/td>C\u00e1c phi\u00ean truy c\u1eadp k\u1ebf ti\u1ebfp c\u00f3 kh\u1ea3 n\u0103ng \u0111\u1ea1t \u0111\u01b0\u1ee3c t\u1ed1c \u0111\u1ed9 cao g\u1ea7n nh\u01b0 ngay l\u1eadp t\u1ee9c v\u00ec t\u00e0i nguy\u00ean \u0111\u00e3 \u0111\u01b0\u1ee3c cache s\u1eb5n trong tr\u00ecnh duy\u1ec7t<\/td><\/tr>
M\u1ee9c \u0111\u1ed9 kh\u00f3 tri\u1ec3n khai<\/td>D\u1ec5<\/td>Trung b\u00ecnh<\/td>Kh\u00f3<\/td><\/tr>
\u01afu \u0111i\u1ec3m<\/td>Kh\u00f4ng t\u1ed1n t\u00e0i nguy\u00ean m\u00e1y ch\u1ee7, d\u1ec5 tri\u1ec3n khai<\/td>Kh\u00f4ng t\u1ed1n t\u00e0i nguy\u00ean m\u00e1y ch\u1ee7, kh\u00f4ng kh\u00f3 tri\u1ec3n khai<\/td>Cho t\u1ed1c \u0111\u1ed9 duy\u1ec7t web c\u1ee7a trang k\u1ebf ti\u1ebfp r\u1ea5t cao<\/td><\/tr>
Nh\u01b0\u1ee3c \u0111i\u1ec3m<\/td>Ch\u1ec9 c\u1ea3i thi\u1ec7n \u0111\u01b0\u1ee3c t\u1ed1c \u0111\u1ed9 \u1edf m\u1ee9c trung b\u00ecnh<\/td>V\u1ec1 b\u1ea3n ch\u1ea5t l\u00e0 c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 nh\u1eadn th\u1ee9c, kh\u00f4ng ph\u1ea3i t\u0103ng t\u1ed1c \u0111\u1ed9 thu\u1ea7n t\u00fay<\/td>G\u00e2y l\u00e3ng ph\u00ed t\u00e0i nguy\u00ean \u00edt nhi\u1ec1u, y\u00eau c\u1ea7u hosting c\u00f3 th\u00f4ng s\u1ed1 t\u1ed1t h\u01a1n so v\u1edbi kh\u00f4ng d\u00f9ng <\/td><\/tr>
C\u00f4ng c\u1ee5 th\u1ef1c hi\u1ec7n <\/td>C\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n th\u1ee7 c\u00f4ng b\u1eb1ng c\u00e1ch ch\u00e8n th\u1ebb link tr\u01b0\u1edbc th\u1ebb \u0111\u00f3ng header <\/td>C\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n th\u1ee7 c\u00f4ng b\u1eb1ng c\u00e1ch ch\u00e8n th\u1ebb link tr\u01b0\u1edbc th\u1ebb \u0111\u00f3ng header <\/td>Th\u01b0\u1eddng ph\u1ea3i th\u00f4ng qua c\u00f4ng c\u1ee5 \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf chuy\u00ean nghi\u1ec7p \u0111\u1ec3 cho k\u1ebft qu\u1ea3 t\u1ed1i \u01b0u, ch\u1eb3ng h\u1ea1n nh\u01b0 k\u1ebft h\u1ee3p v\u1edbi c\u00f4ng c\u1ee5 ph\u00e2n t\u00edch Google Analytics \u0111\u1ec3 d\u1ef1 \u0111o\u00e1n prefetch ch\u00ednh x\u00e1c h\u01a1n<\/a><\/td><\/tr>
T\u1ef7 l\u1ec7 h\u1ed7 tr\u1ee3 c\u1ee7a tr\u00ecnh duy\u1ec7t (*)<\/td>91,5%<\/td>86,3%<\/td>80,6%<\/td><\/tr>
Kh\u00e1c bi\u1ec7t c\u0103n b\u1ea3n<\/td>Kh\u00f4ng li\u00ean quan \u0111\u1ebfn bandwidth, ch\u1ec9 thu\u1ea7n t\u00f9y t\u00ecm ki\u1ebfm DNS v\u00e0 k\u1ebft n\u1ed1i https (n\u1ebfu c\u00f3). Ch\u1ec9 \u00e1p d\u1ee5ng cho c\u00e1c t\u00e0i nguy\u00ean b\u00ean ngo\u00e0i host g\u1ed1c. Kh\u00f4ng ph\u1ea3i l\u00e0 ch\u1ec9 th\u1ecb m\u00e0 tr\u00ecnh duy\u1ec7t b\u1eaft bu\u1ed9c ph\u1ea3i th\u1ef1c hi\u1ec7n<\/td>Li\u00ean quan nhi\u1ec1u \u0111\u1ebfn bandwith, \u00e1p d\u1ee5ng cho c\u1ea3 t\u00e0i nguy\u00ean trong l\u1eabn ngo\u00e0i host g\u1ed1c. Ch\u1ec9 d\u00f9ng cho phi\u00ean l\u00e0m vi\u1ec7c hi\u1ec7n t\u1ea1i. L\u00e0 ch\u1ec9 th\u1ecb m\u00e0 tr\u00ecnh duy\u1ec7t b\u1eaft bu\u1ed9c ph\u1ea3i th\u1ef1c hi\u1ec7n<\/td>Li\u00ean quan nhi\u1ec1u \u0111\u1ebfn bandwidth, \u00e1p d\u1ee5ng cho c\u1ea3 t\u00e0i nguy\u00ean trong l\u1eabn ngo\u00e0i host g\u1ed1c. Ch\u1ec9 d\u00f9ng cho phi\u1ebfn duy\u1ec7t web k\u1ebf ti\u1ebfp. M\u1ee9c \u0111\u1ed9 \u01b0u ti\u00ean th\u1ea5p h\u01a1n preload. Kh\u00f4ng ph\u1ea3i l\u00e0 ch\u1ec9 th\u1ecb m\u00e0 tr\u00ecnh duy\u1ec7t b\u1eaft bu\u1ed9c ph\u1ea3i th\u1ef1c hi\u1ec7n <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n

(*) D\u1ef1a tr\u00ean th\u1ed1ng k\u00ea c\u1ee7a trang CanIuse.com<\/a> v\u00e0o ng\u00e0y 8\/3\/2020<\/p>\n\n\n

Ti\u1ec1n t\u1ed1 ‘pre’ trong c\u00e1c thu\u1eadt ng\u1eef tr\u00ean ch\u1ec9 \u0111\u1ebfn h\u00e0nh \u0111\u1ed9ng ‘t\u1ea3i tr\u01b0\u1edbc’ v\u00e0 l\u00e0 c\u00e1c k\u1ef9 thu\u1eadt m\u1edbi \u0111\u01b0\u1ee3c ph\u00e1t tri\u1ec3n trong v\u00e0i n\u0103m tr\u1edf l\u1ea1i \u0111\u00e2y.<\/p>\n\n\n

Preconnect<\/strong>: gi\u00fap th\u1ef1c hi\u1ec7n t\u00ecm ki\u1ebfm DNS v\u00e0 k\u1ebft n\u1ed1i b\u1ea3o m\u1eadt https tr\u01b0\u1edbc cho c\u00e1c t\u00e0i nguy\u00ean quan tr\u1ecdng c\u1ee7a b\u00ean th\u1ee9 ba, v\u00ed d\u1ee5 nh\u01b0 Google Analystics, Facebook, YouTube, CDN. Preconnect t\u0103ng t\u1ed1c nh\u1edd vi\u1ec7c th\u1ef1c hi\u1ec7n song song c\u00e1c t\u00ecm ki\u1ebfm DNS, k\u1ebft n\u1ed1i b\u1ea3o m\u1eadt thay v\u00ec th\u1ef1c hi\u1ec7n l\u1ea7n l\u01b0\u1ee3t. N\u1ebfu website c\u1ee7a b\u1ea1n ph\u1ea3i c\u1eady nh\u1edd \u0111\u1ebfn nhi\u1ec1u t\u00e0i nguy\u00ean c\u1ee7a b\u00ean th\u1ee9 ba, preconnect c\u00f3 th\u1ec3 gi\u00fap c\u1ea3i thi\u1ec7n th\u1eddi gian \u0111\u00e1ng k\u1ec3, ch\u1eb3ng h\u1ea1n trong m\u1ed9t th\u1eed nghi\u1ec7m li\u00ean quan \u0111\u1ebfn Google fonts, preconnect \u0111\u00e3 gi\u00fap gi\u1ea3m th\u1eddi gian t\u1ea3i h\u01a1n 0,5 gi\u00e2y (cho d\u00f9 m\u1ea1ng l\u01b0\u1edbi CDN c\u1ee7a Google c\u00f3 ch\u1ea5t l\u01b0\u1ee3ng r\u1ea5t cao). Kh\u00f4ng gi\u1ed1ng prefetch, tri\u1ec3n khai preconnect kh\u00f4ng l\u00e0m b\u1ea1n ph\u1ea3i n\u00e2ng c\u1ea5p hosting, d\u00f9 n\u00f3 c\u00f3 l\u00e0m t\u0103ng s\u1eed d\u1ee5ng RAM m\u1ed9t ch\u00fat trong qu\u00e1 tr\u00ecnh x\u1eed l\u00fd.<\/p>\n\n\n

Preload<\/strong>: gi\u00fap t\u1ea3i tr\u01b0\u1edbc c\u00e1c t\u00e0i nguy\u00ean quan tr\u1ecdng trong phi\u00ean hi\u1ec7n t\u1ea1i, ch\u1eb3ng h\u1ea1n nh\u01b0 font, JS v\u00e0 CSS quan tr\u1ecdng c\u1ea7n t\u1ea3i c\u00e0ng s\u1edbm c\u00e0ng t\u1ed1t. S\u1ef1 kh\u00e1c bi\u1ec7t c\u0103n b\u1ea3n gi\u1eefa preload v\u00e0 prefetch l\u00e0 preload t\u1ea3i t\u00e0i nguy\u00ean cho phi\u00ean hi\u1ec7n t\u1ea1i, trong khi prefetch l\u00e0 cho phi\u00ean t\u01b0\u01a1ng lai (c\u00e1i c\u00f3 th\u1ec3 kh\u00f4ng x\u1ea3y ra), prefetch do v\u1eady c\u00f3 nguy c\u01a1 kh\u00f3 tr\u00e1nh l\u00e0 g\u00e2y l\u00e3ng ph\u00ed t\u00e0i nguy\u00ean n\u1ebfu ng\u01b0\u1eddi d\u00f9ng kh\u00f4ng s\u1eed d\u1ee5ng t\u00e0i nguy\u00ean t\u00ecm n\u1ea1p tr\u01b0\u1edbc, trong khi preload th\u00ec kh\u00f4ng. Khi s\u1eed d\u1ee5ng preload b\u1ea1n c\u0169ng kh\u00f4ng c\u1ea7n n\u00e2ng c\u1ea5p hosting.<\/p>\n\n\n

Prefetch<\/strong>: gi\u00fap t\u1ea3i tr\u01b0\u1edbc c\u00e1c li\u00ean k\u1ebft m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 kh\u1ea3 n\u0103ng truy c\u1eadp trong click k\u1ebf ti\u1ebfp, n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng gi\u00fap trang web c\u00f3 t\u1ed1c \u0111\u1ed9 truy c\u1eadp cao g\u1ea7n nh\u01b0 ngay l\u1eadp t\u1ee9c. Prefetch s\u1ebd \u0111\u1ee3i tr\u00ecnh duy\u1ec7t t\u1ea3i xong n\u1ed9i dung c\u1ee7a phi\u00ean hi\u1ec7n t\u1ea1i (current navigation), \u0111\u1ee3i \u0111\u1ebfn khi r\u1ea3nh r\u1ed7i m\u1edbi t\u1ea3i c\u00e1c li\u00ean k\u1ebft kh\u00e1c m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 truy c\u1eadp ti\u1ebfp (future navagation). Do v\u1eady prefetch kh\u00f4ng c\u1ea1nh tranh b\u0103ng th\u00f4ng v\u1edbi phi\u00ean hi\u1ec7n t\u1ea1i. Tuy nhi\u00ean prefetch kh\u00f4ng ph\u00f9 h\u1ee3p tr\u00ean c\u00e1c m\u1ea1ng c\u00f3 k\u1ebft n\u1ed1i ch\u1eadm th\u00ed d\u1ee5 nh\u01b0 wifi ch\u1eadp ch\u1eddn, \u0111\u1ee9t c\u00e1p, ngo\u00e0i ra tri\u1ec3n khai prefetch l\u00e0m m\u00e1y ch\u1ee7 g\u1ed1c ho\u1ea1t \u0111\u1ed9ng v\u1ea5t v\u1ea3 h\u01a1n, c\u00f3 th\u1ec3 g\u1ea5p \u0111\u00f4i ho\u1eb7c g\u1ea5p ba t\u00f9y thu\u1ed9c v\u00e0o s\u1ed1 l\u01b0\u1ee3ng li\u00ean k\u1ebft b\u1ea1n mu\u1ed1n t\u1ea3i tr\u01b0\u1edbc- n\u00f3i c\u00e1ch kh\u00e1c b\u1ea1n th\u01b0\u1eddng s\u1ebd ph\u1ea3i n\u00e2ng c\u1ea5p hosting kh\u00f4ng \u00edt th\u00ec nhi\u1ec1u. \u0110\u00e2y l\u00e0 c\u00e1i gi\u00e1 ph\u1ea3i tr\u1ea3 ch\u1ea5p nh\u1eadn \u0111\u01b0\u1ee3c n\u1ebfu view c\u1ee7a b\u1ea1n c\u00f3 gi\u00e1 tr\u1ecb th\u01b0\u01a1ng m\u1ea1i cao, v\u00ed d\u1ee5 nh\u01b0 tr\u00ean trang th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed (website b\u00e1n h\u00e0ng).<\/p>\n\n\n

Trong c\u00e1c k\u1ef9 thu\u1eadt tr\u00ean, preconnect d\u1ec5 tri\u1ec3n khai nh\u1ea5t, c\u00f2n prefetch kh\u00f3 l\u00e0m nh\u1ea5t. L\u00fd t\u01b0\u1edfng nh\u1ea5t th\u00ec prefetch n\u00ean \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n tr\u00ean c\u00e1c m\u1ea1ng c\u00f3 k\u1ebft n\u1ed1i nhanh v\u00e0 k\u1ebft h\u1ee3p v\u1edbi c\u00f4ng c\u1ee5 th\u1ed1ng k\u00ea ph\u00e2n t\u00edch c\u00e1ch ng\u01b0\u1eddi d\u00f9ng s\u1eed d\u1ee5ng website nh\u01b0 Google Analytics \u0111\u1ec3 vi\u1ec7c d\u1ef1 \u0111o\u00e1n truy c\u1eadp ti\u1ebfp theo \u0111\u01b0\u1ee3c ch\u00ednh x\u00e1c h\u01a1n, nh\u1edd \u0111\u00f3 h\u1ea1n ch\u1ebf t\u1ed1i \u0111a l\u00e3ng ph\u00ed t\u00e0i nguy\u00ean.<\/p>\n\n\n

V\u1edbi nh\u1eefng ai s\u1eed d\u1ee5ng WordPress, b\u1ea1n c\u00f3 th\u1ec3 t\u00edch h\u1ee3p prefetch th\u00f4ng qua plugin Flying Pages<\/a>, n\u00f3 s\u1ebd t\u1ea3i tr\u01b0\u1edbc li\u00ean k\u1ebft n\u1ebfu li\u00ean k\u1ebft \u0111\u00f3 \u0111i v\u00e0o khung nh\u00ecn tr\u00ecnh duy\u1ec7t (viewport) ho\u1eb7c\/v\u00e0 khi ng\u01b0\u1eddi d\u00f9ng hover qua li\u00ean k\u1ebft. Ngo\u00e0i ra n\u00f3 c\u0169ng c\u00f3 kh\u1ea3 n\u0103ng nh\u1eadn bi\u1ebft hosting qu\u00e1 t\u1ea3i \u0111\u1ec3 tr\u00e1nh prefetch g\u00e2y t\u00e1c d\u1ee5ng ng\u01b0\u1ee3c.<\/p>\n\n\n

B\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o c\u00e1c b\u00e0i vi\u1ebft m\u00e0 t\u00f4i d\u1ecbch v\u1ec1 nh\u1eefng k\u1ef9 thu\u1eadt n\u00e0y th\u00f4ng qua c\u00e1c b\u00e0i d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n