{"id":14085,"date":"2019-12-21T09:50:20","date_gmt":"2019-12-21T09:50:20","guid":{"rendered":"https:\/\/kiencang.net\/?p=14085"},"modified":"2019-12-21T09:50:20","modified_gmt":"2019-12-21T09:50:20","slug":"waterfall-toc-do-website","status":"publish","type":"post","link":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","title":{"rendered":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website"},"content":{"rendered":"\n
T\u00f3m t\u1eaft<\/strong>: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website<\/a>.<\/p>\n\n\nL\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m th\u1ea5y qu\u00e1 s\u1ee9c kh\u00f3 hi\u1ec3u – th\u1eadm ch\u00ed c\u00f2n c\u00f3 c\u1ea3m gi\u00e1c s\u1ee3 h\u00e3i khi m\u1edbi nh\u00ecn qua l\u1ea7n \u0111\u1ea7u.<\/p>\n\n\nTrong ph\u1ea7n m\u1edf \u0111\u1ea7u c\u1ee7a chu\u1ed7i b\u00e0i vi\u1ebft v\u1ec1 b\u1ea3ng Waterfall, b\u1ea1n s\u1ebd \u0111\u01b0\u1ee3c t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng thanh (bar), d\u00f2ng (line), v\u00e0 m\u00e0u s\u1eafc c\u1ee7a ch\u00fang, hy v\u1ecdng r\u1eb1ng b\u00e0i n\u00e0y s\u1ebd gi\u00fap b\u1ea1n hi\u1ec3u r\u00f5 h\u01a1n b\u00e1o c\u00e1o c\u1ee7a GTmetrix<\/a> (m\u1ed9t c\u00f4ng c\u1ee5 ch\u1ea5t l\u01b0\u1ee3ng trong l\u0129nh v\u1ef1c \u0111\u00e1nh gi\u00e1 t\u1ed1c \u0111\u1ed9 t\u1ea3i trang).<\/p>\n\n\nL\u01b0u \u00fd<\/strong>: H\u01b0\u1edbng d\u1eabn n\u00e0y ch\u1ee7 y\u1ebfu h\u01b0\u1edbng t\u1edbi b\u1ea3ng Waterfall m\u00e0 b\u1ea1n th\u1ea5y trong k\u1ebft qu\u1ea3 ph\u00e2n t\u00edch c\u1ee7a GTmetrix – m\u00e0u s\u1eafc, h\u00ecnh d\u00e1ng, v\u00e0 thu\u1eadt ng\u1eef c\u00f3 th\u1ec3 kh\u00e1c \u1edf nh\u1eefng b\u1ea3ng Waterfall do c\u00e1c c\u00f4ng c\u1ee5 kh\u00e1c ph\u00e2n t\u00edch (nh\u01b0 trong c\u00f4ng c\u1ee5 DevTools c\u1ee7a Google Chrome), nh\u01b0ng \u00fd t\u01b0\u1edfng ch\u1ee7 \u0111\u1ea1o \u0111\u01b0\u1ee3c n\u00eau \u1edf \u0111\u00e2y th\u00ec chung cho t\u1ea5t c\u1ea3.<\/p>\n\n\n\n\nM\u1ee5c l\u1ee5c<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/label><\/a><\/span><\/div>\nWaterfall l\u00e0 g\u00ec?<\/a><\/li>Waterfall c\u00f3 \u00edch l\u1ee3i g\u00ec?<\/a><\/li>Tr\u00e1nh c\u1ea3m th\u1ea5y ng\u1ed9p<\/a><\/li>Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i<\/a><\/li>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/a><\/li>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/a><\/li><\/ul><\/nav><\/div>\n<\/span>Waterfall l\u00e0 g\u00ec?<\/span><\/h2>\n\n\nN\u00f3 ch\u00ednh l\u00e0 c\u00e1i n\u00e0y:\n<\/figure>\n\n\n B\u1ea3ng Waterfall c\u1ee7a GTmetrix<\/figcaption><\/figure>\n<\/p>\n\n\nB\u1ea3ng tr\u00ean hi\u1ec3n th\u1ecb h\u00e0nh vi t\u1ea3i v\u1ec1 c\u1ee7a t\u1eebng y\u00eau c\u1ea7u (request-by-request) tr\u00ean website c\u1ee7a b\u1ea1n. T\u1eebng th\u00e0nh ph\u1ea7n m\u00e3 (JavaScript, CSS), file media (\u1ea3nh, \u00e2m thanh, video), v\u00e0\/ho\u1eb7c c\u00e1c ngu\u1ed3n c\u1ee7a b\u00ean th\u1ee9 ba (third-party)<\/a> tr\u00ean trang \u0111\u1ec1u \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb \u1edf \u0111\u00e2y.<\/p>\n\n\n<\/span>Waterfall c\u00f3 \u00edch l\u1ee3i g\u00ec?<\/span><\/h2>\n\n\nV\u00ec b\u1ea3ng Waterfall h\u00ecnh \u1ea3nh h\u00f3a h\u00e0nh vi t\u1ea3i v\u1ec1 n\u00ean b\u1ea1n nh\u00ecn \u0111\u01b0\u1ee3c chi ti\u1ebft c\u00e1ch c\u00e1c y\u00eau c\u1ea7u download v\u1ec1 theo th\u1ee9 t\u1ef1. Th\u1eddi gian th\u1ef1c thi c\u1ee7a c\u00e1c y\u00eau c\u1ea7u c\u0169ng \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb, v\u1edbi \u0111\u1ed9 d\u00e0i thanh thay \u0111\u1ed5i t\u01b0\u01a1ng \u1ee9ng v\u1edbi \u0111\u1ed9 d\u00e0i c\u1ee7a t\u1eebng y\u00eau c\u1ea7u, l\u01b0\u1ee3t t\u1ea3i, v\u00e0\/ho\u1eb7c th\u1eddi gian th\u1ef1c thi.<\/p>\n\n\nT\u1ea5t c\u1ea3 d\u1eef li\u1ec7u n\u00e0y h\u01b0\u1edbng \u0111\u1ebfn vi\u1ec7c h\u1ed7 tr\u1ee3 gi\u1ea3i quy\u1ebft c\u00e1c r\u1eafc r\u1ed1i v\u1ec1 hi\u1ec7u su\u1ea5t (t\u1ed1c \u0111\u1ed9 website) c\u0169ng nh\u01b0 c\u00e1c v\u1ea5n \u0111\u1ec1 c\u1ee7a trang n\u00f3i chung.<\/p>\n\n\nTh\u1ef1c s\u1ef1 l\u00e0 t\u1ed5ng th\u1ec3 trang th\u00ec c\u00f2n c\u00f3 r\u1ea5t nhi\u1ec1u th\u1ee9 kh\u00e1c n\u1eefa, nh\u01b0ng n\u1ebfu b\u1ea1n s\u1eafp x\u1ebfp c\u00e1c th\u1ee9 theo t\u1eebng ph\u1ea7n th\u00ec n\u00f3 c\u0169ng kh\u00f4ng qu\u00e1 t\u1ec7 \u0111\u00e2u.<\/p>\n\n\n<\/span>Tr\u00e1nh c\u1ea3m th\u1ea5y ng\u1ed9p<\/span><\/h2>\n\n\nCh\u00fang ta s\u1ebd b\u1eaft \u0111\u1ea7u v\u1edbi vi\u1ec7c xem x\u00e9t t\u1eebng ph\u1ea7n, d\u00f2ng v\u00e0 m\u00e0u s\u1eafc c\u00f3 \u00fd ngh\u0129a nh\u01b0 th\u1ebf n\u00e0o.<\/p>\n\n\nB\u1ea3ng Waterfall \u0111\u01b0\u1ee3c chia th\u00e0nh c\u00e1c c\u1ed9t – v\u00ed d\u1ee5 nh\u01b0 h\u00ecnh b\u00ean d\u01b0\u1edbi b\u1ea1n th\u1ea5y n\u0103m c\u1ed9t:\n<\/figure>\n\n\n C\u00e1c c\u1ed9t trong b\u1ea3ng Waterfall: t\u00ean file, m\u00e3 tr\u1ea1ng th\u00e1i, file g\u1ed1c, k\u00edch c\u1ee1 file, th\u1eddi gian t\u1ea3i trong timeline (d\u00f2ng th\u1eddi gian)<\/figcaption><\/figure>\n<\/p>\n\n\nD\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng g\u00ec b\u1ea1n s\u1ebd th\u1ea5y, nh\u00ecn t\u1eeb tr\u00e1i qua ph\u1ea3i:<\/p>\n\n\n1. T\u00ean file<\/h3>\n\n\n\u0110\u00e2y l\u00e0 t\u00ean c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c t\u1ea3i b\u1edfi tr\u00ecnh duy\u1ec7t web. Trong b\u1ea3ng Waterfall, n\u00f3 bao g\u1ed3m ti\u1ec1n t\u1ed1 HTTP – th\u01b0\u1eddng l\u00e0 GET ho\u1eb7c POST (n\u00f3i chung b\u1ea1n kh\u00f4ng c\u1ea7n lo l\u1eafng \u0111\u1ebfn ti\u1ec1n t\u1ed1 n\u00e0y).\n<\/figure>\n\n\n T\u00ean file c\u1ee7a c\u00e1c t\u00e0i nguy\u00ean tr\u00ean trang web c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb trong c\u1ed9t \u0111\u1ea7u ti\u00ean<\/figcaption><\/figure>\n<\/p>\n\n\n\u0110\u00f4i khi tr\u00f4ng ch\u00fang kh\u00e1 b\u1eeba b\u1ed9n v\u00e0 \u0111\u00e1ng s\u1ee3. B\u1ea1n c\u1ed1 g\u1eafng \u0111\u1eebng qu\u00e1 b\u1eadn t\u00e2m v\u1ec1 n\u00f3. Trong th\u1ef1c t\u1ebf, b\u1ea1n c\u00f3 th\u1ec3 kh\u00f4ng nh\u1ea5t thi\u1ebft ph\u1ea3i bi\u1ebft t\u1eebng file n\u00e0y l\u00e0 g\u00ec ngay l\u1eadp t\u1ee9c.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nHover chu\u1ed9t qua t\u00ean file s\u1ebd gi\u00fap b\u1ea1n bi\u1ebft \u0111\u01b0\u1ee3c \u0111\u01b0\u1eddng d\u1eabn \u0111\u1ea7y \u0111\u1ee7 (full path) c\u1ee7a file. Ctrl + click s\u1ebd t\u1ea3i file tr\u00ean m\u1ed9t tab kh\u00e1c. \u0110i\u1ec1u n\u00e0y c\u00f3 \u00edch trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n mu\u1ed1n xem ch\u00ednh x\u00e1c file \u0111ang \u0111\u01b0\u1ee3c tham chi\u1ebfu l\u00e0 g\u00ec.<\/p>\n<\/div><\/div><\/div>\n\n\nKhi duy\u1ec7t qua danh s\u00e1ch, b\u1ea1n n\u00ean t\u1eadp trung v\u00e0o ph\u1ea7n \u0111u\u00f4i m\u1edf r\u1ed9ng c\u1ee7a file. N\u1ebfu file c\u00f3 \u0111u\u00f4i “.jpg” v\u00e0 “.png” s\u1ebd l\u00e0 c\u00e1c t\u00e0i nguy\u00ean \u1ea3nh, .css l\u00e0 t\u00e0i nguy\u00ean stylesheets. File “.js” l\u00e0 JavaScript, v\u00e2n v\u00e2n.<\/p>\n\n\nNgo\u00e0i ra b\u1ea1n n\u00ean \u0111\u1ec3 \u00fd c\u00e1c t\u1eeb kh\u00f3a trong t\u00ean file, \u0111i\u1ec1u n\u00e0y gi\u00fap b\u1ea1n ph\u00e1t hi\u1ec7n ch\u00fang c\u00f3 ngu\u1ed3n g\u1ed1c t\u1eeb \u0111\u00e2u.<\/p>\n\n\n<\/figure>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 ph\u00e1t hi\u1ec7n ra plugin n\u00e0o \u0111\u1ea5y l\u00e0 nguy\u00ean nh\u00e2n g\u00e2y ch\u1eadm website b\u1eb1ng c\u00e1ch nh\u00ecn v\u00e0o t\u00ean file – trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y l\u00e0 plugin JetPack<\/a>.<\/p>\n\n\nL\u1ea5y v\u00ed d\u1ee5, n\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng WordPress<\/a>, b\u1ea1n c\u00f3 th\u1ec3 nh\u1eadn ra t\u00ean c\u1ee7a plugin m\u00e0 b\u1ea1n \u0111\u00e3 c\u00e0i, ho\u1eb7c t\u00ean c\u1ee7a giao di\u1ec7n b\u1ea1n \u0111ang d\u00f9ng.<\/p>\n\n\n2. Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP<\/h3>\n\n\nTr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP t\u1ea1o th\u00e0nh m\u00e3 tr\u1ea1ng th\u00e1i (status code) v\u00e0 th\u00f4ng b\u00e1o m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecdc \u0111\u01b0\u1ee3c (v\u00ed d\u1ee5 l\u1ed7i 404 kh\u00f4ng t\u00ecm th\u1ea5y trang). Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i \u0111\u01b0\u1ee3c tr\u1ea3 v\u1ec1 t\u1eeb m\u00e1y ch\u1ee7 v\u00e0 n\u00f3i cho tr\u00ecnh duy\u1ec7t bi\u1ebft li\u1ec7u y\u00eau c\u1ea7u nh\u1eafm \u0111\u1ebfn t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3 th\u00e0nh c\u00f4ng hay l\u00e0 kh\u00f4ng.<\/p>\n\n\nY\u00eau c\u1ea7u th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 1xx\/2xx\/3xx<\/strong>\n<\/figure>\n\n\n M\u00e3 tr\u1ea1ng th\u00e1i c\u1ee7a website n\u00ean ch\u1ee7 y\u1ebfu l\u00e0 200<\/figcaption><\/figure>\n<\/p>\n\n\n1xx<\/strong> – Th\u00f4ng tin – b\u1ea1n hi\u1ebfm khi th\u1ea5y n\u00f3 trong b\u1ea3ng Waterfall<\/li>2xx<\/strong> – Th\u00e0nh c\u00f4ng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c x\u00e1c nh\u1eadn l\u00e0 \u0111\u00e3 th\u00e0nh c\u00f4ng (h\u1ea7u h\u1ebft s\u1ebd l\u00e0 m\u00e3 200)<\/li>3xx<\/strong> – Chuy\u1ec3n h\u01b0\u1edbng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c chuy\u1ec3n h\u01b0\u1edbng (chuy\u1ec3n h\u01b0\u1edbng 301<\/a> l\u00e0 ph\u1ed5 bi\u1ebfn nh\u1ea5t)<\/li><\/ul>\n\n\nY\u00eau c\u1ea7u kh\u00f4ng th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 4xx\/5xx<\/strong>\n<\/figure>\n\n\n B\u1ea3ng Waterfall s\u1ebd nhanh ch\u00f3ng ph\u00e1t hi\u1ec7n ra c\u00e1c y\u00eau c\u1ea7u b\u1ecb l\u1ed7i tr\u00ean trang<\/figcaption><\/figure>\n<\/p>\n\n\n4xx<\/strong> – l\u1ed7i client – \u0111\u00e2y l\u00e0 l\u1ed7i di\u1ec5n ra khi th\u1ef1c hi\u1ec7n y\u00eau c\u1ea7u (l\u1ed7i 404 file kh\u00f4ng t\u00ecm th\u1ea5y, l\u1ed7i 401 truy c\u1eadp kh\u00f4ng \u0111\u01b0\u1ee3c ph\u00e9p, l\u1ed7i 403 b\u1ecb c\u1ea5m, v\u00e2n v\u00e2n)<\/li>5xx<\/strong> – l\u1ed7i server – m\u00e1y ch\u1ee7 g\u1eb7p th\u1ea5t b\u1ea1i khi x\u1eed l\u00fd y\u00eau c\u1ea7u (l\u1ed7i m\u00e1y ch\u1ee7 n\u1ed9i b\u1ed9 500, l\u1ed7i d\u1ecbch v\u1ee5 kh\u00f4ng kh\u1ea3 d\u1ee5ng 503, v\u00e2n v\u00e2n)<\/li><\/ul>\n\n\n3. File g\u1ed1c<\/h3>\n\n\n\u0110\u00e2y l\u00e0 v\u1ecb tr\u00ed m\u00e0 file \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng nhi\u1ec1u t\u00e0i nguy\u00ean t\u1eeb b\u00ean th\u1ee9 ba (ch\u1eb3ng h\u1ea1n m\u00e3 nh\u00fang YouTube<\/a>, widget c\u1ee7a Facebook, v\u00e2n v\u00e2n) th\u00ec \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd th\u1ea5y hostname c\u1ee7a ch\u00fang kh\u00f4ng \u0111\u1ebfn t\u1eeb host g\u1ed1c c\u1ee7a b\u1ea1n. <\/figure>\n\n\n File g\u1ed1c cho b\u1ea1n bi\u1ebft t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb n\u01a1i n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng CDN<\/a>, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y nhi\u1ec1u file\/t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb c\u00f9ng ngu\u1ed3n – \u0111\u00e2y c\u0169ng l\u00e0 m\u1ed9t c\u00e1ch \u0111\u1ec3 bi\u1ebft CDN c\u1ee7a b\u1ea1n \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh ch\u00ednh x\u00e1c hay ch\u01b0a.<\/p>\n\n\n<\/div><\/div><\/div>\n\n\n4. K\u00edch c\u1ee1 file<\/h3>\n\n\nC\u00e1i t\u00ean n\u00f3i l\u00ean t\u1ea5t c\u1ea3, \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean. T\u1ed5ng k\u00edch c\u1ee1 file c\u1ee7a t\u1ea5t c\u1ea3 c\u00e1c y\u00eau c\u1ea7u t\u1ea1o th\u00e0nh T\u1ed5ng dung l\u01b0\u1ee3ng trang<\/strong>. Gi\u00e1 tr\u1ecb n\u00e0y c\u00e0ng nh\u1ecf, trang c\u1ee7a b\u1ea1n c\u00e0ng t\u1ea3i nhanh h\u01a1n.\n<\/figure>\n\n\n C\u1ed9t k\u00edch c\u1ee1 file trong b\u1ea3ng Waterfall<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n th\u1ea5y file c\u00f3 k\u00edch c\u1ee1 l\u1edbn (th\u01b0\u1eddng hay x\u1ea3y ra v\u1edbi \u1ea3nh, file \u00e2m thanh, video), b\u1ea1n c\u1ea7n \u01b0u ti\u00ean s\u1eeda n\u00f3 tr\u01b0\u1edbc, tr\u01b0\u1edbc khi t\u00ecm hi\u1ec3u c\u00e1c ph\u1ea7n ti\u1ebfp theo trong b\u1ea3ng Waterfall.<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u c\u00e1c plugin gi\u00fap t\u1ed1i \u01b0u h\u00f3a \u1ea3nh tr\u00ean trang Chim C\u1eaft \u1edf \u0111\u00e2y<\/a>. Ngo\u00e0i ra l\u00e0 ph\u1ea7n l\u00fd thuy\u1ebft v\u1ec1 t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng \u1ea3nh<\/a> n\u1ebfu b\u1ea1n mu\u1ed1n t\u00ecm hi\u1ec3u s\u00e2u h\u01a1n n\u1eefa.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure><\/div>\n\n\nHover qua ph\u1ea7n th\u00f4ng tin size \u0111\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 th\u1ef1c \/ uncompressed v\u00e0 k\u00edch c\u1ee1 \u0111\u00e3 \u0111\u01b0\u1ee3c n\u00e9n (n\u1ebfu n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng n\u00e9n \/ compressed, trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y ch\u1ee7 y\u1ebfu l\u00e0 file CSS v\u00e0 JS).<\/p>\n<\/div><\/div><\/div>\n\n\n5. Th\u1eddi gian t\u1ea3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 ph\u1ea7n tr\u00ean b\u1ea3ng Waterfall cho bi\u1ebft th\u1eddi gian t\u1ea3i c\u1ee5 th\u1ec3 c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n, y\u00eau c\u1ea7u tr\u00ean trang.<\/p>\n\n\n\u0110\u00e2y s\u1ebd l\u00e0 n\u01a1i b\u1ea1n c\u1ea7n b\u1ecf nhi\u1ec1u th\u1eddi gian t\u00ecm hi\u1ec3u nh\u1ea5t<\/strong> trong b\u1ea3ng Waterfall!<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00f4 h\u00ecnh thanh x\u1ebfp d\u1ea1ng th\u00e1c m\u00f4 t\u1ea3 c\u00e1ch trang c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 – c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 ph\u1ea7n l\u1edbn \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n trong khu v\u1ef1c n\u00e0y. Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u c\u1ee5 th\u1ec3 h\u01a1n trong ph\u1ea7n n\u00f3i v\u1ec1 Request timings.<\/p>\n\n\n<\/span>Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i<\/span><\/h2>\n\n\nClick v\u00e0o y\u00eau c\u1ea7u s\u1ebd ti\u1ebft l\u1ed9 th\u00f4ng tin ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i (Request\/Response header). Ch\u00fang bao g\u1ed3m th\u00f4ng tin \u0111a d\u1ea1ng, \u0111\u1ea7y \u0111\u1ee7 li\u00ean quan \u0111\u1ebfn c\u00e1ch t\u00e0i nguy\u00ean c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c ph\u1ee5c v\u1ee5.<\/p>\n\n\nCh\u00fang t\u00f4i d\u1ef1 \u0111\u1ecbnh t\u00ecm hi\u1ec3u ch\u1ee7 \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i chi ti\u1ebft h\u01a1n trong b\u00e0i vi\u1ebft kh\u00e1c. Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang t\u00f4i ch\u1ec9 tr\u00ecnh b\u00e0y ng\u1eafn g\u1ecdn m\u1ed9t s\u1ed1 m\u1ee5c ch\u00ednh trong m\u1ed7i ph\u1ea7n:<\/p>\n\n\nTi\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u<\/h3>\n\n\nCh\u00fang l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server. V\u1edbi ng\u01b0\u1eddi m\u1edbi, th\u01b0\u1eddng b\u1ea1n kh\u00f4ng c\u00f3 g\u00ec \u0111\u1ec3 l\u00e0m trong ph\u1ea7n ti\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u l\u00e0 ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server<\/figcaption><\/figure>\n<\/p>\n\n\nTi\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i<\/h3>\n\n\nPh\u1ea3n h\u1ed3i l\u00e0 nh\u1eefng ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i, v\u00e0 \u0111\u00f4i khi l\u00e0 ch\u00eca kh\u00f3a trong vi\u1ec7c ch\u1ea9n \u0111o\u00e1n c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i cho tr\u00ecnh duy\u1ec7t<\/figcaption><\/figure>\n<\/p>\n\n\nV\u1ec1 c\u01a1 b\u1ea3n, ch\u00fang bi\u1ec3u th\u1ecb c\u1ea5u h\u00ecnh, c\u00e0i \u0111\u1eb7t, ho\u1eb7c thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c y\u00eau c\u1ea7u.<\/p>\n\n\nV\u1edbi ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i, b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3:<\/p>\n\n\n\u0110\u01b0\u1ee3c n\u00e9n hay l\u00e0 kh\u00f4ng (v\u00ed d\u1ee5 gzip)<\/li>Cache<\/li>\u0110\u01b0\u1ee3c ph\u1ee5c v\u1ee5 th\u00f4ng qua CDN (hit\/miss\/revalidated)<\/li>Keep-Alive \u0111\u01b0\u1ee3c b\u1eadt<\/li>Ph\u1ee5c v\u1ee5 th\u00f4ng qua HTTP\/2<\/li>Chuy\u1ec3n h\u01b0\u1edbng n\u1ed9i b\u1ed9 (v\u00ed d\u1ee5 HGST)<\/li><\/ul>\n\n\n\nM\u1eb9o: N\u1ebfu b\u00e1o c\u00e1o GTmetrix cho th\u1ea5y b\u1ea1n c\u00f3 \u0111i\u1ec3m k\u00e9m cho nh\u1eefng khuy\u1ebfn ngh\u1ecb \u1edf tr\u00ean, ki\u1ec3m tra ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i s\u1ebd c\u00f3 kh\u1ea3 n\u0103ng ti\u1ebft l\u1ed9 nhi\u1ec1u chi ti\u1ebft gi\u00fap b\u1ea1n bi\u1ebft l\u00fd do v\u00ec sao.<\/p>\n<\/div><\/div><\/div>\n\n\n<\/span>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/span><\/h2>\n\n\nH\u00e3y c\u00f9ng quan s\u00e1t b\u1ea3ng Waterfall t\u1ed1i gi\u1ea3n d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n s\u1ebd ngay l\u1eadp t\u1ee9c \u0111\u1ec3 \u00fd th\u1ea5y t\u1eebng y\u00eau c\u1ea7u c\u00f3 m\u1ed9t b\u1ed9 thanh m\u00e0u t\u01b0\u01a1ng \u1ee9ng \u1edf b\u00ean ph\u1ea3i.<\/p>\n\n\nN\u00f3i ng\u1eafn g\u1ecdn th\u00ec t\u1eebng m\u00e0u \u0111\u1ea1i di\u1ec7n cho m\u1ed9t ph\u1ea7n kh\u00e1c nhau trong qu\u00e1 tr\u00ecnh t\u1ea3i c\u1ee7a m\u1ed9t ngu\u1ed3n c\u1ee5 th\u1ec3.<\/p>\n\n\nCh\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng m\u00e0u ngay sau \u0111\u00e2y:<\/p>\n\n\nM\u00e0u n\u00e2u – ch\u1eb7n<\/h3>\n\n\nCh\u1eb7n (blocking) l\u00e0 th\u1eddi gian m\u00e0 y\u00eau c\u1ea7u ph\u1ea3i \u0111\u1ee3i trong h\u00e0ng ch\u1edd tr\u00ecnh duy\u1ec7t (browser’s queue) \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u kh\u1edfi \u0111\u1ed9ng m\u1ed9t y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ch\u1eb7n ng\u0103n c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo \u0111\u01b0\u1ee3c x\u1eed l\u00fd<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00f9ng nhau g\u00e2y ra th\u1eddi gian ch\u1eb7n bao g\u1ed3m:<\/p>\n\n\nCh\u1edd \u0111\u1ee3i k\u1ebft n\u1ed1i c\u00f3 s\u1eb5n.<\/li>T\u1ea3i\/th\u1ef1c thi JavaScript ho\u1eb7c CSS (m\u1eb7c d\u00f9 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u00e3 th\u00f4ng minh h\u01a1n trong vi\u1ec7c t\u1ed1i thi\u1ec3u h\u00f3a ch\u00fang).<\/li>Th\u1eddi gian k\u1ebft n\u1ed1i SSL (th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian k\u1ebft n\u1ed1i \/ connection time)<\/li>X\u00e1c th\u1ef1c HTTP (y\u00eau c\u1ea7u b\u1ed5 sung c\u1ea7n thi\u1ebft \u0111\u1ec3 thi\u1ebft l\u1eadp x\u00e1c th\u1ef1c).<\/li><\/ul>\n\n\nM\u00e0u xanh x\u00e1m – Tra c\u1ee9u DNS<\/h3>\n\n\nTr\u01b0\u1edbc khi k\u1ebft n\u1ed1i \u0111\u1ebfn server \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh, hostname c\u1ea7n ph\u00e2n gi\u1ea3i th\u00e0nh IP – \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 t\u00ecm ki\u1ebfm\/tra c\u1ee9u DNS<\/a> (lookup).\n<\/figure>\n\n\n Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\nM\u00e0u xanh l\u00e1 c\u00e2y – K\u1ebft n\u1ed1i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n<\/figure><\/div>\n\n\nL\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m th\u1ea5y qu\u00e1 s\u1ee9c kh\u00f3 hi\u1ec3u – th\u1eadm ch\u00ed c\u00f2n c\u00f3 c\u1ea3m gi\u00e1c s\u1ee3 h\u00e3i khi m\u1edbi nh\u00ecn qua l\u1ea7n \u0111\u1ea7u.<\/p>\n\n\n
Trong ph\u1ea7n m\u1edf \u0111\u1ea7u c\u1ee7a chu\u1ed7i b\u00e0i vi\u1ebft v\u1ec1 b\u1ea3ng Waterfall, b\u1ea1n s\u1ebd \u0111\u01b0\u1ee3c t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng thanh (bar), d\u00f2ng (line), v\u00e0 m\u00e0u s\u1eafc c\u1ee7a ch\u00fang, hy v\u1ecdng r\u1eb1ng b\u00e0i n\u00e0y s\u1ebd gi\u00fap b\u1ea1n hi\u1ec3u r\u00f5 h\u01a1n b\u00e1o c\u00e1o c\u1ee7a GTmetrix<\/a> (m\u1ed9t c\u00f4ng c\u1ee5 ch\u1ea5t l\u01b0\u1ee3ng trong l\u0129nh v\u1ef1c \u0111\u00e1nh gi\u00e1 t\u1ed1c \u0111\u1ed9 t\u1ea3i trang).<\/p>\n\n\nL\u01b0u \u00fd<\/strong>: H\u01b0\u1edbng d\u1eabn n\u00e0y ch\u1ee7 y\u1ebfu h\u01b0\u1edbng t\u1edbi b\u1ea3ng Waterfall m\u00e0 b\u1ea1n th\u1ea5y trong k\u1ebft qu\u1ea3 ph\u00e2n t\u00edch c\u1ee7a GTmetrix – m\u00e0u s\u1eafc, h\u00ecnh d\u00e1ng, v\u00e0 thu\u1eadt ng\u1eef c\u00f3 th\u1ec3 kh\u00e1c \u1edf nh\u1eefng b\u1ea3ng Waterfall do c\u00e1c c\u00f4ng c\u1ee5 kh\u00e1c ph\u00e2n t\u00edch (nh\u01b0 trong c\u00f4ng c\u1ee5 DevTools c\u1ee7a Google Chrome), nh\u01b0ng \u00fd t\u01b0\u1edfng ch\u1ee7 \u0111\u1ea1o \u0111\u01b0\u1ee3c n\u00eau \u1edf \u0111\u00e2y th\u00ec chung cho t\u1ea5t c\u1ea3.<\/p>\n\n\n\n\nM\u1ee5c l\u1ee5c<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/label><\/a><\/span><\/div>\nWaterfall l\u00e0 g\u00ec?<\/a><\/li>Waterfall c\u00f3 \u00edch l\u1ee3i g\u00ec?<\/a><\/li>Tr\u00e1nh c\u1ea3m th\u1ea5y ng\u1ed9p<\/a><\/li>Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i<\/a><\/li>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/a><\/li>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/a><\/li><\/ul><\/nav><\/div>\n<\/span>Waterfall l\u00e0 g\u00ec?<\/span><\/h2>\n\n\nN\u00f3 ch\u00ednh l\u00e0 c\u00e1i n\u00e0y:\n<\/figure>\n\n\n B\u1ea3ng Waterfall c\u1ee7a GTmetrix<\/figcaption><\/figure>\n<\/p>\n\n\nB\u1ea3ng tr\u00ean hi\u1ec3n th\u1ecb h\u00e0nh vi t\u1ea3i v\u1ec1 c\u1ee7a t\u1eebng y\u00eau c\u1ea7u (request-by-request) tr\u00ean website c\u1ee7a b\u1ea1n. T\u1eebng th\u00e0nh ph\u1ea7n m\u00e3 (JavaScript, CSS), file media (\u1ea3nh, \u00e2m thanh, video), v\u00e0\/ho\u1eb7c c\u00e1c ngu\u1ed3n c\u1ee7a b\u00ean th\u1ee9 ba (third-party)<\/a> tr\u00ean trang \u0111\u1ec1u \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb \u1edf \u0111\u00e2y.<\/p>\n\n\n<\/span>Waterfall c\u00f3 \u00edch l\u1ee3i g\u00ec?<\/span><\/h2>\n\n\nV\u00ec b\u1ea3ng Waterfall h\u00ecnh \u1ea3nh h\u00f3a h\u00e0nh vi t\u1ea3i v\u1ec1 n\u00ean b\u1ea1n nh\u00ecn \u0111\u01b0\u1ee3c chi ti\u1ebft c\u00e1ch c\u00e1c y\u00eau c\u1ea7u download v\u1ec1 theo th\u1ee9 t\u1ef1. Th\u1eddi gian th\u1ef1c thi c\u1ee7a c\u00e1c y\u00eau c\u1ea7u c\u0169ng \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb, v\u1edbi \u0111\u1ed9 d\u00e0i thanh thay \u0111\u1ed5i t\u01b0\u01a1ng \u1ee9ng v\u1edbi \u0111\u1ed9 d\u00e0i c\u1ee7a t\u1eebng y\u00eau c\u1ea7u, l\u01b0\u1ee3t t\u1ea3i, v\u00e0\/ho\u1eb7c th\u1eddi gian th\u1ef1c thi.<\/p>\n\n\nT\u1ea5t c\u1ea3 d\u1eef li\u1ec7u n\u00e0y h\u01b0\u1edbng \u0111\u1ebfn vi\u1ec7c h\u1ed7 tr\u1ee3 gi\u1ea3i quy\u1ebft c\u00e1c r\u1eafc r\u1ed1i v\u1ec1 hi\u1ec7u su\u1ea5t (t\u1ed1c \u0111\u1ed9 website) c\u0169ng nh\u01b0 c\u00e1c v\u1ea5n \u0111\u1ec1 c\u1ee7a trang n\u00f3i chung.<\/p>\n\n\nTh\u1ef1c s\u1ef1 l\u00e0 t\u1ed5ng th\u1ec3 trang th\u00ec c\u00f2n c\u00f3 r\u1ea5t nhi\u1ec1u th\u1ee9 kh\u00e1c n\u1eefa, nh\u01b0ng n\u1ebfu b\u1ea1n s\u1eafp x\u1ebfp c\u00e1c th\u1ee9 theo t\u1eebng ph\u1ea7n th\u00ec n\u00f3 c\u0169ng kh\u00f4ng qu\u00e1 t\u1ec7 \u0111\u00e2u.<\/p>\n\n\n<\/span>Tr\u00e1nh c\u1ea3m th\u1ea5y ng\u1ed9p<\/span><\/h2>\n\n\nCh\u00fang ta s\u1ebd b\u1eaft \u0111\u1ea7u v\u1edbi vi\u1ec7c xem x\u00e9t t\u1eebng ph\u1ea7n, d\u00f2ng v\u00e0 m\u00e0u s\u1eafc c\u00f3 \u00fd ngh\u0129a nh\u01b0 th\u1ebf n\u00e0o.<\/p>\n\n\nB\u1ea3ng Waterfall \u0111\u01b0\u1ee3c chia th\u00e0nh c\u00e1c c\u1ed9t – v\u00ed d\u1ee5 nh\u01b0 h\u00ecnh b\u00ean d\u01b0\u1edbi b\u1ea1n th\u1ea5y n\u0103m c\u1ed9t:\n<\/figure>\n\n\n C\u00e1c c\u1ed9t trong b\u1ea3ng Waterfall: t\u00ean file, m\u00e3 tr\u1ea1ng th\u00e1i, file g\u1ed1c, k\u00edch c\u1ee1 file, th\u1eddi gian t\u1ea3i trong timeline (d\u00f2ng th\u1eddi gian)<\/figcaption><\/figure>\n<\/p>\n\n\nD\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng g\u00ec b\u1ea1n s\u1ebd th\u1ea5y, nh\u00ecn t\u1eeb tr\u00e1i qua ph\u1ea3i:<\/p>\n\n\n1. T\u00ean file<\/h3>\n\n\n\u0110\u00e2y l\u00e0 t\u00ean c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c t\u1ea3i b\u1edfi tr\u00ecnh duy\u1ec7t web. Trong b\u1ea3ng Waterfall, n\u00f3 bao g\u1ed3m ti\u1ec1n t\u1ed1 HTTP – th\u01b0\u1eddng l\u00e0 GET ho\u1eb7c POST (n\u00f3i chung b\u1ea1n kh\u00f4ng c\u1ea7n lo l\u1eafng \u0111\u1ebfn ti\u1ec1n t\u1ed1 n\u00e0y).\n<\/figure>\n\n\n T\u00ean file c\u1ee7a c\u00e1c t\u00e0i nguy\u00ean tr\u00ean trang web c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb trong c\u1ed9t \u0111\u1ea7u ti\u00ean<\/figcaption><\/figure>\n<\/p>\n\n\n\u0110\u00f4i khi tr\u00f4ng ch\u00fang kh\u00e1 b\u1eeba b\u1ed9n v\u00e0 \u0111\u00e1ng s\u1ee3. B\u1ea1n c\u1ed1 g\u1eafng \u0111\u1eebng qu\u00e1 b\u1eadn t\u00e2m v\u1ec1 n\u00f3. Trong th\u1ef1c t\u1ebf, b\u1ea1n c\u00f3 th\u1ec3 kh\u00f4ng nh\u1ea5t thi\u1ebft ph\u1ea3i bi\u1ebft t\u1eebng file n\u00e0y l\u00e0 g\u00ec ngay l\u1eadp t\u1ee9c.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nHover chu\u1ed9t qua t\u00ean file s\u1ebd gi\u00fap b\u1ea1n bi\u1ebft \u0111\u01b0\u1ee3c \u0111\u01b0\u1eddng d\u1eabn \u0111\u1ea7y \u0111\u1ee7 (full path) c\u1ee7a file. Ctrl + click s\u1ebd t\u1ea3i file tr\u00ean m\u1ed9t tab kh\u00e1c. \u0110i\u1ec1u n\u00e0y c\u00f3 \u00edch trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n mu\u1ed1n xem ch\u00ednh x\u00e1c file \u0111ang \u0111\u01b0\u1ee3c tham chi\u1ebfu l\u00e0 g\u00ec.<\/p>\n<\/div><\/div><\/div>\n\n\nKhi duy\u1ec7t qua danh s\u00e1ch, b\u1ea1n n\u00ean t\u1eadp trung v\u00e0o ph\u1ea7n \u0111u\u00f4i m\u1edf r\u1ed9ng c\u1ee7a file. N\u1ebfu file c\u00f3 \u0111u\u00f4i “.jpg” v\u00e0 “.png” s\u1ebd l\u00e0 c\u00e1c t\u00e0i nguy\u00ean \u1ea3nh, .css l\u00e0 t\u00e0i nguy\u00ean stylesheets. File “.js” l\u00e0 JavaScript, v\u00e2n v\u00e2n.<\/p>\n\n\nNgo\u00e0i ra b\u1ea1n n\u00ean \u0111\u1ec3 \u00fd c\u00e1c t\u1eeb kh\u00f3a trong t\u00ean file, \u0111i\u1ec1u n\u00e0y gi\u00fap b\u1ea1n ph\u00e1t hi\u1ec7n ch\u00fang c\u00f3 ngu\u1ed3n g\u1ed1c t\u1eeb \u0111\u00e2u.<\/p>\n\n\n<\/figure>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 ph\u00e1t hi\u1ec7n ra plugin n\u00e0o \u0111\u1ea5y l\u00e0 nguy\u00ean nh\u00e2n g\u00e2y ch\u1eadm website b\u1eb1ng c\u00e1ch nh\u00ecn v\u00e0o t\u00ean file – trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y l\u00e0 plugin JetPack<\/a>.<\/p>\n\n\nL\u1ea5y v\u00ed d\u1ee5, n\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng WordPress<\/a>, b\u1ea1n c\u00f3 th\u1ec3 nh\u1eadn ra t\u00ean c\u1ee7a plugin m\u00e0 b\u1ea1n \u0111\u00e3 c\u00e0i, ho\u1eb7c t\u00ean c\u1ee7a giao di\u1ec7n b\u1ea1n \u0111ang d\u00f9ng.<\/p>\n\n\n2. Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP<\/h3>\n\n\nTr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP t\u1ea1o th\u00e0nh m\u00e3 tr\u1ea1ng th\u00e1i (status code) v\u00e0 th\u00f4ng b\u00e1o m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecdc \u0111\u01b0\u1ee3c (v\u00ed d\u1ee5 l\u1ed7i 404 kh\u00f4ng t\u00ecm th\u1ea5y trang). Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i \u0111\u01b0\u1ee3c tr\u1ea3 v\u1ec1 t\u1eeb m\u00e1y ch\u1ee7 v\u00e0 n\u00f3i cho tr\u00ecnh duy\u1ec7t bi\u1ebft li\u1ec7u y\u00eau c\u1ea7u nh\u1eafm \u0111\u1ebfn t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3 th\u00e0nh c\u00f4ng hay l\u00e0 kh\u00f4ng.<\/p>\n\n\nY\u00eau c\u1ea7u th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 1xx\/2xx\/3xx<\/strong>\n<\/figure>\n\n\n M\u00e3 tr\u1ea1ng th\u00e1i c\u1ee7a website n\u00ean ch\u1ee7 y\u1ebfu l\u00e0 200<\/figcaption><\/figure>\n<\/p>\n\n\n1xx<\/strong> – Th\u00f4ng tin – b\u1ea1n hi\u1ebfm khi th\u1ea5y n\u00f3 trong b\u1ea3ng Waterfall<\/li>2xx<\/strong> – Th\u00e0nh c\u00f4ng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c x\u00e1c nh\u1eadn l\u00e0 \u0111\u00e3 th\u00e0nh c\u00f4ng (h\u1ea7u h\u1ebft s\u1ebd l\u00e0 m\u00e3 200)<\/li>3xx<\/strong> – Chuy\u1ec3n h\u01b0\u1edbng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c chuy\u1ec3n h\u01b0\u1edbng (chuy\u1ec3n h\u01b0\u1edbng 301<\/a> l\u00e0 ph\u1ed5 bi\u1ebfn nh\u1ea5t)<\/li><\/ul>\n\n\nY\u00eau c\u1ea7u kh\u00f4ng th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 4xx\/5xx<\/strong>\n<\/figure>\n\n\n B\u1ea3ng Waterfall s\u1ebd nhanh ch\u00f3ng ph\u00e1t hi\u1ec7n ra c\u00e1c y\u00eau c\u1ea7u b\u1ecb l\u1ed7i tr\u00ean trang<\/figcaption><\/figure>\n<\/p>\n\n\n4xx<\/strong> – l\u1ed7i client – \u0111\u00e2y l\u00e0 l\u1ed7i di\u1ec5n ra khi th\u1ef1c hi\u1ec7n y\u00eau c\u1ea7u (l\u1ed7i 404 file kh\u00f4ng t\u00ecm th\u1ea5y, l\u1ed7i 401 truy c\u1eadp kh\u00f4ng \u0111\u01b0\u1ee3c ph\u00e9p, l\u1ed7i 403 b\u1ecb c\u1ea5m, v\u00e2n v\u00e2n)<\/li>5xx<\/strong> – l\u1ed7i server – m\u00e1y ch\u1ee7 g\u1eb7p th\u1ea5t b\u1ea1i khi x\u1eed l\u00fd y\u00eau c\u1ea7u (l\u1ed7i m\u00e1y ch\u1ee7 n\u1ed9i b\u1ed9 500, l\u1ed7i d\u1ecbch v\u1ee5 kh\u00f4ng kh\u1ea3 d\u1ee5ng 503, v\u00e2n v\u00e2n)<\/li><\/ul>\n\n\n3. File g\u1ed1c<\/h3>\n\n\n\u0110\u00e2y l\u00e0 v\u1ecb tr\u00ed m\u00e0 file \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng nhi\u1ec1u t\u00e0i nguy\u00ean t\u1eeb b\u00ean th\u1ee9 ba (ch\u1eb3ng h\u1ea1n m\u00e3 nh\u00fang YouTube<\/a>, widget c\u1ee7a Facebook, v\u00e2n v\u00e2n) th\u00ec \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd th\u1ea5y hostname c\u1ee7a ch\u00fang kh\u00f4ng \u0111\u1ebfn t\u1eeb host g\u1ed1c c\u1ee7a b\u1ea1n. <\/figure>\n\n\n File g\u1ed1c cho b\u1ea1n bi\u1ebft t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb n\u01a1i n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng CDN<\/a>, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y nhi\u1ec1u file\/t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb c\u00f9ng ngu\u1ed3n – \u0111\u00e2y c\u0169ng l\u00e0 m\u1ed9t c\u00e1ch \u0111\u1ec3 bi\u1ebft CDN c\u1ee7a b\u1ea1n \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh ch\u00ednh x\u00e1c hay ch\u01b0a.<\/p>\n\n\n<\/div><\/div><\/div>\n\n\n4. K\u00edch c\u1ee1 file<\/h3>\n\n\nC\u00e1i t\u00ean n\u00f3i l\u00ean t\u1ea5t c\u1ea3, \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean. T\u1ed5ng k\u00edch c\u1ee1 file c\u1ee7a t\u1ea5t c\u1ea3 c\u00e1c y\u00eau c\u1ea7u t\u1ea1o th\u00e0nh T\u1ed5ng dung l\u01b0\u1ee3ng trang<\/strong>. Gi\u00e1 tr\u1ecb n\u00e0y c\u00e0ng nh\u1ecf, trang c\u1ee7a b\u1ea1n c\u00e0ng t\u1ea3i nhanh h\u01a1n.\n<\/figure>\n\n\n C\u1ed9t k\u00edch c\u1ee1 file trong b\u1ea3ng Waterfall<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n th\u1ea5y file c\u00f3 k\u00edch c\u1ee1 l\u1edbn (th\u01b0\u1eddng hay x\u1ea3y ra v\u1edbi \u1ea3nh, file \u00e2m thanh, video), b\u1ea1n c\u1ea7n \u01b0u ti\u00ean s\u1eeda n\u00f3 tr\u01b0\u1edbc, tr\u01b0\u1edbc khi t\u00ecm hi\u1ec3u c\u00e1c ph\u1ea7n ti\u1ebfp theo trong b\u1ea3ng Waterfall.<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u c\u00e1c plugin gi\u00fap t\u1ed1i \u01b0u h\u00f3a \u1ea3nh tr\u00ean trang Chim C\u1eaft \u1edf \u0111\u00e2y<\/a>. Ngo\u00e0i ra l\u00e0 ph\u1ea7n l\u00fd thuy\u1ebft v\u1ec1 t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng \u1ea3nh<\/a> n\u1ebfu b\u1ea1n mu\u1ed1n t\u00ecm hi\u1ec3u s\u00e2u h\u01a1n n\u1eefa.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure><\/div>\n\n\nHover qua ph\u1ea7n th\u00f4ng tin size \u0111\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 th\u1ef1c \/ uncompressed v\u00e0 k\u00edch c\u1ee1 \u0111\u00e3 \u0111\u01b0\u1ee3c n\u00e9n (n\u1ebfu n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng n\u00e9n \/ compressed, trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y ch\u1ee7 y\u1ebfu l\u00e0 file CSS v\u00e0 JS).<\/p>\n<\/div><\/div><\/div>\n\n\n5. Th\u1eddi gian t\u1ea3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 ph\u1ea7n tr\u00ean b\u1ea3ng Waterfall cho bi\u1ebft th\u1eddi gian t\u1ea3i c\u1ee5 th\u1ec3 c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n, y\u00eau c\u1ea7u tr\u00ean trang.<\/p>\n\n\n\u0110\u00e2y s\u1ebd l\u00e0 n\u01a1i b\u1ea1n c\u1ea7n b\u1ecf nhi\u1ec1u th\u1eddi gian t\u00ecm hi\u1ec3u nh\u1ea5t<\/strong> trong b\u1ea3ng Waterfall!<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00f4 h\u00ecnh thanh x\u1ebfp d\u1ea1ng th\u00e1c m\u00f4 t\u1ea3 c\u00e1ch trang c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 – c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 ph\u1ea7n l\u1edbn \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n trong khu v\u1ef1c n\u00e0y. Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u c\u1ee5 th\u1ec3 h\u01a1n trong ph\u1ea7n n\u00f3i v\u1ec1 Request timings.<\/p>\n\n\n<\/span>Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i<\/span><\/h2>\n\n\nClick v\u00e0o y\u00eau c\u1ea7u s\u1ebd ti\u1ebft l\u1ed9 th\u00f4ng tin ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i (Request\/Response header). Ch\u00fang bao g\u1ed3m th\u00f4ng tin \u0111a d\u1ea1ng, \u0111\u1ea7y \u0111\u1ee7 li\u00ean quan \u0111\u1ebfn c\u00e1ch t\u00e0i nguy\u00ean c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c ph\u1ee5c v\u1ee5.<\/p>\n\n\nCh\u00fang t\u00f4i d\u1ef1 \u0111\u1ecbnh t\u00ecm hi\u1ec3u ch\u1ee7 \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i chi ti\u1ebft h\u01a1n trong b\u00e0i vi\u1ebft kh\u00e1c. Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang t\u00f4i ch\u1ec9 tr\u00ecnh b\u00e0y ng\u1eafn g\u1ecdn m\u1ed9t s\u1ed1 m\u1ee5c ch\u00ednh trong m\u1ed7i ph\u1ea7n:<\/p>\n\n\nTi\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u<\/h3>\n\n\nCh\u00fang l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server. V\u1edbi ng\u01b0\u1eddi m\u1edbi, th\u01b0\u1eddng b\u1ea1n kh\u00f4ng c\u00f3 g\u00ec \u0111\u1ec3 l\u00e0m trong ph\u1ea7n ti\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u l\u00e0 ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server<\/figcaption><\/figure>\n<\/p>\n\n\nTi\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i<\/h3>\n\n\nPh\u1ea3n h\u1ed3i l\u00e0 nh\u1eefng ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i, v\u00e0 \u0111\u00f4i khi l\u00e0 ch\u00eca kh\u00f3a trong vi\u1ec7c ch\u1ea9n \u0111o\u00e1n c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i cho tr\u00ecnh duy\u1ec7t<\/figcaption><\/figure>\n<\/p>\n\n\nV\u1ec1 c\u01a1 b\u1ea3n, ch\u00fang bi\u1ec3u th\u1ecb c\u1ea5u h\u00ecnh, c\u00e0i \u0111\u1eb7t, ho\u1eb7c thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c y\u00eau c\u1ea7u.<\/p>\n\n\nV\u1edbi ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i, b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3:<\/p>\n\n\n\u0110\u01b0\u1ee3c n\u00e9n hay l\u00e0 kh\u00f4ng (v\u00ed d\u1ee5 gzip)<\/li>Cache<\/li>\u0110\u01b0\u1ee3c ph\u1ee5c v\u1ee5 th\u00f4ng qua CDN (hit\/miss\/revalidated)<\/li>Keep-Alive \u0111\u01b0\u1ee3c b\u1eadt<\/li>Ph\u1ee5c v\u1ee5 th\u00f4ng qua HTTP\/2<\/li>Chuy\u1ec3n h\u01b0\u1edbng n\u1ed9i b\u1ed9 (v\u00ed d\u1ee5 HGST)<\/li><\/ul>\n\n\n\nM\u1eb9o: N\u1ebfu b\u00e1o c\u00e1o GTmetrix cho th\u1ea5y b\u1ea1n c\u00f3 \u0111i\u1ec3m k\u00e9m cho nh\u1eefng khuy\u1ebfn ngh\u1ecb \u1edf tr\u00ean, ki\u1ec3m tra ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i s\u1ebd c\u00f3 kh\u1ea3 n\u0103ng ti\u1ebft l\u1ed9 nhi\u1ec1u chi ti\u1ebft gi\u00fap b\u1ea1n bi\u1ebft l\u00fd do v\u00ec sao.<\/p>\n<\/div><\/div><\/div>\n\n\n<\/span>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/span><\/h2>\n\n\nH\u00e3y c\u00f9ng quan s\u00e1t b\u1ea3ng Waterfall t\u1ed1i gi\u1ea3n d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n s\u1ebd ngay l\u1eadp t\u1ee9c \u0111\u1ec3 \u00fd th\u1ea5y t\u1eebng y\u00eau c\u1ea7u c\u00f3 m\u1ed9t b\u1ed9 thanh m\u00e0u t\u01b0\u01a1ng \u1ee9ng \u1edf b\u00ean ph\u1ea3i.<\/p>\n\n\nN\u00f3i ng\u1eafn g\u1ecdn th\u00ec t\u1eebng m\u00e0u \u0111\u1ea1i di\u1ec7n cho m\u1ed9t ph\u1ea7n kh\u00e1c nhau trong qu\u00e1 tr\u00ecnh t\u1ea3i c\u1ee7a m\u1ed9t ngu\u1ed3n c\u1ee5 th\u1ec3.<\/p>\n\n\nCh\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng m\u00e0u ngay sau \u0111\u00e2y:<\/p>\n\n\nM\u00e0u n\u00e2u – ch\u1eb7n<\/h3>\n\n\nCh\u1eb7n (blocking) l\u00e0 th\u1eddi gian m\u00e0 y\u00eau c\u1ea7u ph\u1ea3i \u0111\u1ee3i trong h\u00e0ng ch\u1edd tr\u00ecnh duy\u1ec7t (browser’s queue) \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u kh\u1edfi \u0111\u1ed9ng m\u1ed9t y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ch\u1eb7n ng\u0103n c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo \u0111\u01b0\u1ee3c x\u1eed l\u00fd<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00f9ng nhau g\u00e2y ra th\u1eddi gian ch\u1eb7n bao g\u1ed3m:<\/p>\n\n\nCh\u1edd \u0111\u1ee3i k\u1ebft n\u1ed1i c\u00f3 s\u1eb5n.<\/li>T\u1ea3i\/th\u1ef1c thi JavaScript ho\u1eb7c CSS (m\u1eb7c d\u00f9 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u00e3 th\u00f4ng minh h\u01a1n trong vi\u1ec7c t\u1ed1i thi\u1ec3u h\u00f3a ch\u00fang).<\/li>Th\u1eddi gian k\u1ebft n\u1ed1i SSL (th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian k\u1ebft n\u1ed1i \/ connection time)<\/li>X\u00e1c th\u1ef1c HTTP (y\u00eau c\u1ea7u b\u1ed5 sung c\u1ea7n thi\u1ebft \u0111\u1ec3 thi\u1ebft l\u1eadp x\u00e1c th\u1ef1c).<\/li><\/ul>\n\n\nM\u00e0u xanh x\u00e1m – Tra c\u1ee9u DNS<\/h3>\n\n\nTr\u01b0\u1edbc khi k\u1ebft n\u1ed1i \u0111\u1ebfn server \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh, hostname c\u1ea7n ph\u00e2n gi\u1ea3i th\u00e0nh IP – \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 t\u00ecm ki\u1ebfm\/tra c\u1ee9u DNS<\/a> (lookup).\n<\/figure>\n\n\n Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\nM\u00e0u xanh l\u00e1 c\u00e2y – K\u1ebft n\u1ed1i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n<\/figure><\/div>\n\n\nL\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
L\u01b0u \u00fd<\/strong>: H\u01b0\u1edbng d\u1eabn n\u00e0y ch\u1ee7 y\u1ebfu h\u01b0\u1edbng t\u1edbi b\u1ea3ng Waterfall m\u00e0 b\u1ea1n th\u1ea5y trong k\u1ebft qu\u1ea3 ph\u00e2n t\u00edch c\u1ee7a GTmetrix – m\u00e0u s\u1eafc, h\u00ecnh d\u00e1ng, v\u00e0 thu\u1eadt ng\u1eef c\u00f3 th\u1ec3 kh\u00e1c \u1edf nh\u1eefng b\u1ea3ng Waterfall do c\u00e1c c\u00f4ng c\u1ee5 kh\u00e1c ph\u00e2n t\u00edch (nh\u01b0 trong c\u00f4ng c\u1ee5 DevTools c\u1ee7a Google Chrome), nh\u01b0ng \u00fd t\u01b0\u1edfng ch\u1ee7 \u0111\u1ea1o \u0111\u01b0\u1ee3c n\u00eau \u1edf \u0111\u00e2y th\u00ec chung cho t\u1ea5t c\u1ea3.<\/p>\n\n\n\n\nM\u1ee5c l\u1ee5c<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/label><\/a><\/span><\/div>\nWaterfall l\u00e0 g\u00ec?<\/a><\/li>Waterfall c\u00f3 \u00edch l\u1ee3i g\u00ec?<\/a><\/li>Tr\u00e1nh c\u1ea3m th\u1ea5y ng\u1ed9p<\/a><\/li>Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i<\/a><\/li>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/a><\/li>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/a><\/li><\/ul><\/nav><\/div>\n<\/span>Waterfall l\u00e0 g\u00ec?<\/span><\/h2>\n\n\nN\u00f3 ch\u00ednh l\u00e0 c\u00e1i n\u00e0y:\n<\/figure>\n\n\n B\u1ea3ng Waterfall c\u1ee7a GTmetrix<\/figcaption><\/figure>\n<\/p>\n\n\nB\u1ea3ng tr\u00ean hi\u1ec3n th\u1ecb h\u00e0nh vi t\u1ea3i v\u1ec1 c\u1ee7a t\u1eebng y\u00eau c\u1ea7u (request-by-request) tr\u00ean website c\u1ee7a b\u1ea1n. T\u1eebng th\u00e0nh ph\u1ea7n m\u00e3 (JavaScript, CSS), file media (\u1ea3nh, \u00e2m thanh, video), v\u00e0\/ho\u1eb7c c\u00e1c ngu\u1ed3n c\u1ee7a b\u00ean th\u1ee9 ba (third-party)<\/a> tr\u00ean trang \u0111\u1ec1u \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb \u1edf \u0111\u00e2y.<\/p>\n\n\n<\/span>Waterfall c\u00f3 \u00edch l\u1ee3i g\u00ec?<\/span><\/h2>\n\n\nV\u00ec b\u1ea3ng Waterfall h\u00ecnh \u1ea3nh h\u00f3a h\u00e0nh vi t\u1ea3i v\u1ec1 n\u00ean b\u1ea1n nh\u00ecn \u0111\u01b0\u1ee3c chi ti\u1ebft c\u00e1ch c\u00e1c y\u00eau c\u1ea7u download v\u1ec1 theo th\u1ee9 t\u1ef1. Th\u1eddi gian th\u1ef1c thi c\u1ee7a c\u00e1c y\u00eau c\u1ea7u c\u0169ng \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb, v\u1edbi \u0111\u1ed9 d\u00e0i thanh thay \u0111\u1ed5i t\u01b0\u01a1ng \u1ee9ng v\u1edbi \u0111\u1ed9 d\u00e0i c\u1ee7a t\u1eebng y\u00eau c\u1ea7u, l\u01b0\u1ee3t t\u1ea3i, v\u00e0\/ho\u1eb7c th\u1eddi gian th\u1ef1c thi.<\/p>\n\n\nT\u1ea5t c\u1ea3 d\u1eef li\u1ec7u n\u00e0y h\u01b0\u1edbng \u0111\u1ebfn vi\u1ec7c h\u1ed7 tr\u1ee3 gi\u1ea3i quy\u1ebft c\u00e1c r\u1eafc r\u1ed1i v\u1ec1 hi\u1ec7u su\u1ea5t (t\u1ed1c \u0111\u1ed9 website) c\u0169ng nh\u01b0 c\u00e1c v\u1ea5n \u0111\u1ec1 c\u1ee7a trang n\u00f3i chung.<\/p>\n\n\nTh\u1ef1c s\u1ef1 l\u00e0 t\u1ed5ng th\u1ec3 trang th\u00ec c\u00f2n c\u00f3 r\u1ea5t nhi\u1ec1u th\u1ee9 kh\u00e1c n\u1eefa, nh\u01b0ng n\u1ebfu b\u1ea1n s\u1eafp x\u1ebfp c\u00e1c th\u1ee9 theo t\u1eebng ph\u1ea7n th\u00ec n\u00f3 c\u0169ng kh\u00f4ng qu\u00e1 t\u1ec7 \u0111\u00e2u.<\/p>\n\n\n<\/span>Tr\u00e1nh c\u1ea3m th\u1ea5y ng\u1ed9p<\/span><\/h2>\n\n\nCh\u00fang ta s\u1ebd b\u1eaft \u0111\u1ea7u v\u1edbi vi\u1ec7c xem x\u00e9t t\u1eebng ph\u1ea7n, d\u00f2ng v\u00e0 m\u00e0u s\u1eafc c\u00f3 \u00fd ngh\u0129a nh\u01b0 th\u1ebf n\u00e0o.<\/p>\n\n\nB\u1ea3ng Waterfall \u0111\u01b0\u1ee3c chia th\u00e0nh c\u00e1c c\u1ed9t – v\u00ed d\u1ee5 nh\u01b0 h\u00ecnh b\u00ean d\u01b0\u1edbi b\u1ea1n th\u1ea5y n\u0103m c\u1ed9t:\n<\/figure>\n\n\n C\u00e1c c\u1ed9t trong b\u1ea3ng Waterfall: t\u00ean file, m\u00e3 tr\u1ea1ng th\u00e1i, file g\u1ed1c, k\u00edch c\u1ee1 file, th\u1eddi gian t\u1ea3i trong timeline (d\u00f2ng th\u1eddi gian)<\/figcaption><\/figure>\n<\/p>\n\n\nD\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng g\u00ec b\u1ea1n s\u1ebd th\u1ea5y, nh\u00ecn t\u1eeb tr\u00e1i qua ph\u1ea3i:<\/p>\n\n\n1. T\u00ean file<\/h3>\n\n\n\u0110\u00e2y l\u00e0 t\u00ean c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c t\u1ea3i b\u1edfi tr\u00ecnh duy\u1ec7t web. Trong b\u1ea3ng Waterfall, n\u00f3 bao g\u1ed3m ti\u1ec1n t\u1ed1 HTTP – th\u01b0\u1eddng l\u00e0 GET ho\u1eb7c POST (n\u00f3i chung b\u1ea1n kh\u00f4ng c\u1ea7n lo l\u1eafng \u0111\u1ebfn ti\u1ec1n t\u1ed1 n\u00e0y).\n<\/figure>\n\n\n T\u00ean file c\u1ee7a c\u00e1c t\u00e0i nguy\u00ean tr\u00ean trang web c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb trong c\u1ed9t \u0111\u1ea7u ti\u00ean<\/figcaption><\/figure>\n<\/p>\n\n\n\u0110\u00f4i khi tr\u00f4ng ch\u00fang kh\u00e1 b\u1eeba b\u1ed9n v\u00e0 \u0111\u00e1ng s\u1ee3. B\u1ea1n c\u1ed1 g\u1eafng \u0111\u1eebng qu\u00e1 b\u1eadn t\u00e2m v\u1ec1 n\u00f3. Trong th\u1ef1c t\u1ebf, b\u1ea1n c\u00f3 th\u1ec3 kh\u00f4ng nh\u1ea5t thi\u1ebft ph\u1ea3i bi\u1ebft t\u1eebng file n\u00e0y l\u00e0 g\u00ec ngay l\u1eadp t\u1ee9c.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nHover chu\u1ed9t qua t\u00ean file s\u1ebd gi\u00fap b\u1ea1n bi\u1ebft \u0111\u01b0\u1ee3c \u0111\u01b0\u1eddng d\u1eabn \u0111\u1ea7y \u0111\u1ee7 (full path) c\u1ee7a file. Ctrl + click s\u1ebd t\u1ea3i file tr\u00ean m\u1ed9t tab kh\u00e1c. \u0110i\u1ec1u n\u00e0y c\u00f3 \u00edch trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n mu\u1ed1n xem ch\u00ednh x\u00e1c file \u0111ang \u0111\u01b0\u1ee3c tham chi\u1ebfu l\u00e0 g\u00ec.<\/p>\n<\/div><\/div><\/div>\n\n\nKhi duy\u1ec7t qua danh s\u00e1ch, b\u1ea1n n\u00ean t\u1eadp trung v\u00e0o ph\u1ea7n \u0111u\u00f4i m\u1edf r\u1ed9ng c\u1ee7a file. N\u1ebfu file c\u00f3 \u0111u\u00f4i “.jpg” v\u00e0 “.png” s\u1ebd l\u00e0 c\u00e1c t\u00e0i nguy\u00ean \u1ea3nh, .css l\u00e0 t\u00e0i nguy\u00ean stylesheets. File “.js” l\u00e0 JavaScript, v\u00e2n v\u00e2n.<\/p>\n\n\nNgo\u00e0i ra b\u1ea1n n\u00ean \u0111\u1ec3 \u00fd c\u00e1c t\u1eeb kh\u00f3a trong t\u00ean file, \u0111i\u1ec1u n\u00e0y gi\u00fap b\u1ea1n ph\u00e1t hi\u1ec7n ch\u00fang c\u00f3 ngu\u1ed3n g\u1ed1c t\u1eeb \u0111\u00e2u.<\/p>\n\n\n<\/figure>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 ph\u00e1t hi\u1ec7n ra plugin n\u00e0o \u0111\u1ea5y l\u00e0 nguy\u00ean nh\u00e2n g\u00e2y ch\u1eadm website b\u1eb1ng c\u00e1ch nh\u00ecn v\u00e0o t\u00ean file – trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y l\u00e0 plugin JetPack<\/a>.<\/p>\n\n\nL\u1ea5y v\u00ed d\u1ee5, n\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng WordPress<\/a>, b\u1ea1n c\u00f3 th\u1ec3 nh\u1eadn ra t\u00ean c\u1ee7a plugin m\u00e0 b\u1ea1n \u0111\u00e3 c\u00e0i, ho\u1eb7c t\u00ean c\u1ee7a giao di\u1ec7n b\u1ea1n \u0111ang d\u00f9ng.<\/p>\n\n\n2. Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP<\/h3>\n\n\nTr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP t\u1ea1o th\u00e0nh m\u00e3 tr\u1ea1ng th\u00e1i (status code) v\u00e0 th\u00f4ng b\u00e1o m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecdc \u0111\u01b0\u1ee3c (v\u00ed d\u1ee5 l\u1ed7i 404 kh\u00f4ng t\u00ecm th\u1ea5y trang). Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i \u0111\u01b0\u1ee3c tr\u1ea3 v\u1ec1 t\u1eeb m\u00e1y ch\u1ee7 v\u00e0 n\u00f3i cho tr\u00ecnh duy\u1ec7t bi\u1ebft li\u1ec7u y\u00eau c\u1ea7u nh\u1eafm \u0111\u1ebfn t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3 th\u00e0nh c\u00f4ng hay l\u00e0 kh\u00f4ng.<\/p>\n\n\nY\u00eau c\u1ea7u th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 1xx\/2xx\/3xx<\/strong>\n<\/figure>\n\n\n M\u00e3 tr\u1ea1ng th\u00e1i c\u1ee7a website n\u00ean ch\u1ee7 y\u1ebfu l\u00e0 200<\/figcaption><\/figure>\n<\/p>\n\n\n1xx<\/strong> – Th\u00f4ng tin – b\u1ea1n hi\u1ebfm khi th\u1ea5y n\u00f3 trong b\u1ea3ng Waterfall<\/li>2xx<\/strong> – Th\u00e0nh c\u00f4ng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c x\u00e1c nh\u1eadn l\u00e0 \u0111\u00e3 th\u00e0nh c\u00f4ng (h\u1ea7u h\u1ebft s\u1ebd l\u00e0 m\u00e3 200)<\/li>3xx<\/strong> – Chuy\u1ec3n h\u01b0\u1edbng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c chuy\u1ec3n h\u01b0\u1edbng (chuy\u1ec3n h\u01b0\u1edbng 301<\/a> l\u00e0 ph\u1ed5 bi\u1ebfn nh\u1ea5t)<\/li><\/ul>\n\n\nY\u00eau c\u1ea7u kh\u00f4ng th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 4xx\/5xx<\/strong>\n<\/figure>\n\n\n B\u1ea3ng Waterfall s\u1ebd nhanh ch\u00f3ng ph\u00e1t hi\u1ec7n ra c\u00e1c y\u00eau c\u1ea7u b\u1ecb l\u1ed7i tr\u00ean trang<\/figcaption><\/figure>\n<\/p>\n\n\n4xx<\/strong> – l\u1ed7i client – \u0111\u00e2y l\u00e0 l\u1ed7i di\u1ec5n ra khi th\u1ef1c hi\u1ec7n y\u00eau c\u1ea7u (l\u1ed7i 404 file kh\u00f4ng t\u00ecm th\u1ea5y, l\u1ed7i 401 truy c\u1eadp kh\u00f4ng \u0111\u01b0\u1ee3c ph\u00e9p, l\u1ed7i 403 b\u1ecb c\u1ea5m, v\u00e2n v\u00e2n)<\/li>5xx<\/strong> – l\u1ed7i server – m\u00e1y ch\u1ee7 g\u1eb7p th\u1ea5t b\u1ea1i khi x\u1eed l\u00fd y\u00eau c\u1ea7u (l\u1ed7i m\u00e1y ch\u1ee7 n\u1ed9i b\u1ed9 500, l\u1ed7i d\u1ecbch v\u1ee5 kh\u00f4ng kh\u1ea3 d\u1ee5ng 503, v\u00e2n v\u00e2n)<\/li><\/ul>\n\n\n3. File g\u1ed1c<\/h3>\n\n\n\u0110\u00e2y l\u00e0 v\u1ecb tr\u00ed m\u00e0 file \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng nhi\u1ec1u t\u00e0i nguy\u00ean t\u1eeb b\u00ean th\u1ee9 ba (ch\u1eb3ng h\u1ea1n m\u00e3 nh\u00fang YouTube<\/a>, widget c\u1ee7a Facebook, v\u00e2n v\u00e2n) th\u00ec \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd th\u1ea5y hostname c\u1ee7a ch\u00fang kh\u00f4ng \u0111\u1ebfn t\u1eeb host g\u1ed1c c\u1ee7a b\u1ea1n. <\/figure>\n\n\n File g\u1ed1c cho b\u1ea1n bi\u1ebft t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb n\u01a1i n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng CDN<\/a>, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y nhi\u1ec1u file\/t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb c\u00f9ng ngu\u1ed3n – \u0111\u00e2y c\u0169ng l\u00e0 m\u1ed9t c\u00e1ch \u0111\u1ec3 bi\u1ebft CDN c\u1ee7a b\u1ea1n \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh ch\u00ednh x\u00e1c hay ch\u01b0a.<\/p>\n\n\n<\/div><\/div><\/div>\n\n\n4. K\u00edch c\u1ee1 file<\/h3>\n\n\nC\u00e1i t\u00ean n\u00f3i l\u00ean t\u1ea5t c\u1ea3, \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean. T\u1ed5ng k\u00edch c\u1ee1 file c\u1ee7a t\u1ea5t c\u1ea3 c\u00e1c y\u00eau c\u1ea7u t\u1ea1o th\u00e0nh T\u1ed5ng dung l\u01b0\u1ee3ng trang<\/strong>. Gi\u00e1 tr\u1ecb n\u00e0y c\u00e0ng nh\u1ecf, trang c\u1ee7a b\u1ea1n c\u00e0ng t\u1ea3i nhanh h\u01a1n.\n<\/figure>\n\n\n C\u1ed9t k\u00edch c\u1ee1 file trong b\u1ea3ng Waterfall<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n th\u1ea5y file c\u00f3 k\u00edch c\u1ee1 l\u1edbn (th\u01b0\u1eddng hay x\u1ea3y ra v\u1edbi \u1ea3nh, file \u00e2m thanh, video), b\u1ea1n c\u1ea7n \u01b0u ti\u00ean s\u1eeda n\u00f3 tr\u01b0\u1edbc, tr\u01b0\u1edbc khi t\u00ecm hi\u1ec3u c\u00e1c ph\u1ea7n ti\u1ebfp theo trong b\u1ea3ng Waterfall.<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u c\u00e1c plugin gi\u00fap t\u1ed1i \u01b0u h\u00f3a \u1ea3nh tr\u00ean trang Chim C\u1eaft \u1edf \u0111\u00e2y<\/a>. Ngo\u00e0i ra l\u00e0 ph\u1ea7n l\u00fd thuy\u1ebft v\u1ec1 t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng \u1ea3nh<\/a> n\u1ebfu b\u1ea1n mu\u1ed1n t\u00ecm hi\u1ec3u s\u00e2u h\u01a1n n\u1eefa.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure><\/div>\n\n\nHover qua ph\u1ea7n th\u00f4ng tin size \u0111\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 th\u1ef1c \/ uncompressed v\u00e0 k\u00edch c\u1ee1 \u0111\u00e3 \u0111\u01b0\u1ee3c n\u00e9n (n\u1ebfu n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng n\u00e9n \/ compressed, trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y ch\u1ee7 y\u1ebfu l\u00e0 file CSS v\u00e0 JS).<\/p>\n<\/div><\/div><\/div>\n\n\n5. Th\u1eddi gian t\u1ea3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 ph\u1ea7n tr\u00ean b\u1ea3ng Waterfall cho bi\u1ebft th\u1eddi gian t\u1ea3i c\u1ee5 th\u1ec3 c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n, y\u00eau c\u1ea7u tr\u00ean trang.<\/p>\n\n\n\u0110\u00e2y s\u1ebd l\u00e0 n\u01a1i b\u1ea1n c\u1ea7n b\u1ecf nhi\u1ec1u th\u1eddi gian t\u00ecm hi\u1ec3u nh\u1ea5t<\/strong> trong b\u1ea3ng Waterfall!<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00f4 h\u00ecnh thanh x\u1ebfp d\u1ea1ng th\u00e1c m\u00f4 t\u1ea3 c\u00e1ch trang c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 – c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 ph\u1ea7n l\u1edbn \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n trong khu v\u1ef1c n\u00e0y. Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u c\u1ee5 th\u1ec3 h\u01a1n trong ph\u1ea7n n\u00f3i v\u1ec1 Request timings.<\/p>\n\n\n<\/span>Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i<\/span><\/h2>\n\n\nClick v\u00e0o y\u00eau c\u1ea7u s\u1ebd ti\u1ebft l\u1ed9 th\u00f4ng tin ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i (Request\/Response header). Ch\u00fang bao g\u1ed3m th\u00f4ng tin \u0111a d\u1ea1ng, \u0111\u1ea7y \u0111\u1ee7 li\u00ean quan \u0111\u1ebfn c\u00e1ch t\u00e0i nguy\u00ean c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c ph\u1ee5c v\u1ee5.<\/p>\n\n\nCh\u00fang t\u00f4i d\u1ef1 \u0111\u1ecbnh t\u00ecm hi\u1ec3u ch\u1ee7 \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i chi ti\u1ebft h\u01a1n trong b\u00e0i vi\u1ebft kh\u00e1c. Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang t\u00f4i ch\u1ec9 tr\u00ecnh b\u00e0y ng\u1eafn g\u1ecdn m\u1ed9t s\u1ed1 m\u1ee5c ch\u00ednh trong m\u1ed7i ph\u1ea7n:<\/p>\n\n\nTi\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u<\/h3>\n\n\nCh\u00fang l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server. V\u1edbi ng\u01b0\u1eddi m\u1edbi, th\u01b0\u1eddng b\u1ea1n kh\u00f4ng c\u00f3 g\u00ec \u0111\u1ec3 l\u00e0m trong ph\u1ea7n ti\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u l\u00e0 ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server<\/figcaption><\/figure>\n<\/p>\n\n\nTi\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i<\/h3>\n\n\nPh\u1ea3n h\u1ed3i l\u00e0 nh\u1eefng ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i, v\u00e0 \u0111\u00f4i khi l\u00e0 ch\u00eca kh\u00f3a trong vi\u1ec7c ch\u1ea9n \u0111o\u00e1n c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i cho tr\u00ecnh duy\u1ec7t<\/figcaption><\/figure>\n<\/p>\n\n\nV\u1ec1 c\u01a1 b\u1ea3n, ch\u00fang bi\u1ec3u th\u1ecb c\u1ea5u h\u00ecnh, c\u00e0i \u0111\u1eb7t, ho\u1eb7c thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c y\u00eau c\u1ea7u.<\/p>\n\n\nV\u1edbi ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i, b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3:<\/p>\n\n\n\u0110\u01b0\u1ee3c n\u00e9n hay l\u00e0 kh\u00f4ng (v\u00ed d\u1ee5 gzip)<\/li>Cache<\/li>\u0110\u01b0\u1ee3c ph\u1ee5c v\u1ee5 th\u00f4ng qua CDN (hit\/miss\/revalidated)<\/li>Keep-Alive \u0111\u01b0\u1ee3c b\u1eadt<\/li>Ph\u1ee5c v\u1ee5 th\u00f4ng qua HTTP\/2<\/li>Chuy\u1ec3n h\u01b0\u1edbng n\u1ed9i b\u1ed9 (v\u00ed d\u1ee5 HGST)<\/li><\/ul>\n\n\n\nM\u1eb9o: N\u1ebfu b\u00e1o c\u00e1o GTmetrix cho th\u1ea5y b\u1ea1n c\u00f3 \u0111i\u1ec3m k\u00e9m cho nh\u1eefng khuy\u1ebfn ngh\u1ecb \u1edf tr\u00ean, ki\u1ec3m tra ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i s\u1ebd c\u00f3 kh\u1ea3 n\u0103ng ti\u1ebft l\u1ed9 nhi\u1ec1u chi ti\u1ebft gi\u00fap b\u1ea1n bi\u1ebft l\u00fd do v\u00ec sao.<\/p>\n<\/div><\/div><\/div>\n\n\n<\/span>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/span><\/h2>\n\n\nH\u00e3y c\u00f9ng quan s\u00e1t b\u1ea3ng Waterfall t\u1ed1i gi\u1ea3n d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n s\u1ebd ngay l\u1eadp t\u1ee9c \u0111\u1ec3 \u00fd th\u1ea5y t\u1eebng y\u00eau c\u1ea7u c\u00f3 m\u1ed9t b\u1ed9 thanh m\u00e0u t\u01b0\u01a1ng \u1ee9ng \u1edf b\u00ean ph\u1ea3i.<\/p>\n\n\nN\u00f3i ng\u1eafn g\u1ecdn th\u00ec t\u1eebng m\u00e0u \u0111\u1ea1i di\u1ec7n cho m\u1ed9t ph\u1ea7n kh\u00e1c nhau trong qu\u00e1 tr\u00ecnh t\u1ea3i c\u1ee7a m\u1ed9t ngu\u1ed3n c\u1ee5 th\u1ec3.<\/p>\n\n\nCh\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng m\u00e0u ngay sau \u0111\u00e2y:<\/p>\n\n\nM\u00e0u n\u00e2u – ch\u1eb7n<\/h3>\n\n\nCh\u1eb7n (blocking) l\u00e0 th\u1eddi gian m\u00e0 y\u00eau c\u1ea7u ph\u1ea3i \u0111\u1ee3i trong h\u00e0ng ch\u1edd tr\u00ecnh duy\u1ec7t (browser’s queue) \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u kh\u1edfi \u0111\u1ed9ng m\u1ed9t y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ch\u1eb7n ng\u0103n c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo \u0111\u01b0\u1ee3c x\u1eed l\u00fd<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00f9ng nhau g\u00e2y ra th\u1eddi gian ch\u1eb7n bao g\u1ed3m:<\/p>\n\n\nCh\u1edd \u0111\u1ee3i k\u1ebft n\u1ed1i c\u00f3 s\u1eb5n.<\/li>T\u1ea3i\/th\u1ef1c thi JavaScript ho\u1eb7c CSS (m\u1eb7c d\u00f9 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u00e3 th\u00f4ng minh h\u01a1n trong vi\u1ec7c t\u1ed1i thi\u1ec3u h\u00f3a ch\u00fang).<\/li>Th\u1eddi gian k\u1ebft n\u1ed1i SSL (th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian k\u1ebft n\u1ed1i \/ connection time)<\/li>X\u00e1c th\u1ef1c HTTP (y\u00eau c\u1ea7u b\u1ed5 sung c\u1ea7n thi\u1ebft \u0111\u1ec3 thi\u1ebft l\u1eadp x\u00e1c th\u1ef1c).<\/li><\/ul>\n\n\nM\u00e0u xanh x\u00e1m – Tra c\u1ee9u DNS<\/h3>\n\n\nTr\u01b0\u1edbc khi k\u1ebft n\u1ed1i \u0111\u1ebfn server \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh, hostname c\u1ea7n ph\u00e2n gi\u1ea3i th\u00e0nh IP – \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 t\u00ecm ki\u1ebfm\/tra c\u1ee9u DNS<\/a> (lookup).\n<\/figure>\n\n\n Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\nM\u00e0u xanh l\u00e1 c\u00e2y – K\u1ebft n\u1ed1i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n<\/figure><\/div>\n\n\nL\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
M\u1ee5c l\u1ee5c<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/label><\/a><\/span><\/div>\nWaterfall l\u00e0 g\u00ec?<\/a><\/li>Waterfall c\u00f3 \u00edch l\u1ee3i g\u00ec?<\/a><\/li>Tr\u00e1nh c\u1ea3m th\u1ea5y ng\u1ed9p<\/a><\/li>Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i<\/a><\/li>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/a><\/li>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/a><\/li><\/ul><\/nav><\/div>\n<\/span>Waterfall l\u00e0 g\u00ec?<\/span><\/h2>\n\n\nN\u00f3 ch\u00ednh l\u00e0 c\u00e1i n\u00e0y:\n<\/figure>\n\n\n B\u1ea3ng Waterfall c\u1ee7a GTmetrix<\/figcaption><\/figure>\n<\/p>\n\n\nB\u1ea3ng tr\u00ean hi\u1ec3n th\u1ecb h\u00e0nh vi t\u1ea3i v\u1ec1 c\u1ee7a t\u1eebng y\u00eau c\u1ea7u (request-by-request) tr\u00ean website c\u1ee7a b\u1ea1n. T\u1eebng th\u00e0nh ph\u1ea7n m\u00e3 (JavaScript, CSS), file media (\u1ea3nh, \u00e2m thanh, video), v\u00e0\/ho\u1eb7c c\u00e1c ngu\u1ed3n c\u1ee7a b\u00ean th\u1ee9 ba (third-party)<\/a> tr\u00ean trang \u0111\u1ec1u \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb \u1edf \u0111\u00e2y.<\/p>\n\n\n<\/span>Waterfall c\u00f3 \u00edch l\u1ee3i g\u00ec?<\/span><\/h2>\n\n\nV\u00ec b\u1ea3ng Waterfall h\u00ecnh \u1ea3nh h\u00f3a h\u00e0nh vi t\u1ea3i v\u1ec1 n\u00ean b\u1ea1n nh\u00ecn \u0111\u01b0\u1ee3c chi ti\u1ebft c\u00e1ch c\u00e1c y\u00eau c\u1ea7u download v\u1ec1 theo th\u1ee9 t\u1ef1. Th\u1eddi gian th\u1ef1c thi c\u1ee7a c\u00e1c y\u00eau c\u1ea7u c\u0169ng \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb, v\u1edbi \u0111\u1ed9 d\u00e0i thanh thay \u0111\u1ed5i t\u01b0\u01a1ng \u1ee9ng v\u1edbi \u0111\u1ed9 d\u00e0i c\u1ee7a t\u1eebng y\u00eau c\u1ea7u, l\u01b0\u1ee3t t\u1ea3i, v\u00e0\/ho\u1eb7c th\u1eddi gian th\u1ef1c thi.<\/p>\n\n\nT\u1ea5t c\u1ea3 d\u1eef li\u1ec7u n\u00e0y h\u01b0\u1edbng \u0111\u1ebfn vi\u1ec7c h\u1ed7 tr\u1ee3 gi\u1ea3i quy\u1ebft c\u00e1c r\u1eafc r\u1ed1i v\u1ec1 hi\u1ec7u su\u1ea5t (t\u1ed1c \u0111\u1ed9 website) c\u0169ng nh\u01b0 c\u00e1c v\u1ea5n \u0111\u1ec1 c\u1ee7a trang n\u00f3i chung.<\/p>\n\n\nTh\u1ef1c s\u1ef1 l\u00e0 t\u1ed5ng th\u1ec3 trang th\u00ec c\u00f2n c\u00f3 r\u1ea5t nhi\u1ec1u th\u1ee9 kh\u00e1c n\u1eefa, nh\u01b0ng n\u1ebfu b\u1ea1n s\u1eafp x\u1ebfp c\u00e1c th\u1ee9 theo t\u1eebng ph\u1ea7n th\u00ec n\u00f3 c\u0169ng kh\u00f4ng qu\u00e1 t\u1ec7 \u0111\u00e2u.<\/p>\n\n\n<\/span>Tr\u00e1nh c\u1ea3m th\u1ea5y ng\u1ed9p<\/span><\/h2>\n\n\nCh\u00fang ta s\u1ebd b\u1eaft \u0111\u1ea7u v\u1edbi vi\u1ec7c xem x\u00e9t t\u1eebng ph\u1ea7n, d\u00f2ng v\u00e0 m\u00e0u s\u1eafc c\u00f3 \u00fd ngh\u0129a nh\u01b0 th\u1ebf n\u00e0o.<\/p>\n\n\nB\u1ea3ng Waterfall \u0111\u01b0\u1ee3c chia th\u00e0nh c\u00e1c c\u1ed9t – v\u00ed d\u1ee5 nh\u01b0 h\u00ecnh b\u00ean d\u01b0\u1edbi b\u1ea1n th\u1ea5y n\u0103m c\u1ed9t:\n<\/figure>\n\n\n C\u00e1c c\u1ed9t trong b\u1ea3ng Waterfall: t\u00ean file, m\u00e3 tr\u1ea1ng th\u00e1i, file g\u1ed1c, k\u00edch c\u1ee1 file, th\u1eddi gian t\u1ea3i trong timeline (d\u00f2ng th\u1eddi gian)<\/figcaption><\/figure>\n<\/p>\n\n\nD\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng g\u00ec b\u1ea1n s\u1ebd th\u1ea5y, nh\u00ecn t\u1eeb tr\u00e1i qua ph\u1ea3i:<\/p>\n\n\n1. T\u00ean file<\/h3>\n\n\n\u0110\u00e2y l\u00e0 t\u00ean c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c t\u1ea3i b\u1edfi tr\u00ecnh duy\u1ec7t web. Trong b\u1ea3ng Waterfall, n\u00f3 bao g\u1ed3m ti\u1ec1n t\u1ed1 HTTP – th\u01b0\u1eddng l\u00e0 GET ho\u1eb7c POST (n\u00f3i chung b\u1ea1n kh\u00f4ng c\u1ea7n lo l\u1eafng \u0111\u1ebfn ti\u1ec1n t\u1ed1 n\u00e0y).\n<\/figure>\n\n\n T\u00ean file c\u1ee7a c\u00e1c t\u00e0i nguy\u00ean tr\u00ean trang web c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb trong c\u1ed9t \u0111\u1ea7u ti\u00ean<\/figcaption><\/figure>\n<\/p>\n\n\n\u0110\u00f4i khi tr\u00f4ng ch\u00fang kh\u00e1 b\u1eeba b\u1ed9n v\u00e0 \u0111\u00e1ng s\u1ee3. B\u1ea1n c\u1ed1 g\u1eafng \u0111\u1eebng qu\u00e1 b\u1eadn t\u00e2m v\u1ec1 n\u00f3. Trong th\u1ef1c t\u1ebf, b\u1ea1n c\u00f3 th\u1ec3 kh\u00f4ng nh\u1ea5t thi\u1ebft ph\u1ea3i bi\u1ebft t\u1eebng file n\u00e0y l\u00e0 g\u00ec ngay l\u1eadp t\u1ee9c.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nHover chu\u1ed9t qua t\u00ean file s\u1ebd gi\u00fap b\u1ea1n bi\u1ebft \u0111\u01b0\u1ee3c \u0111\u01b0\u1eddng d\u1eabn \u0111\u1ea7y \u0111\u1ee7 (full path) c\u1ee7a file. Ctrl + click s\u1ebd t\u1ea3i file tr\u00ean m\u1ed9t tab kh\u00e1c. \u0110i\u1ec1u n\u00e0y c\u00f3 \u00edch trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n mu\u1ed1n xem ch\u00ednh x\u00e1c file \u0111ang \u0111\u01b0\u1ee3c tham chi\u1ebfu l\u00e0 g\u00ec.<\/p>\n<\/div><\/div><\/div>\n\n\nKhi duy\u1ec7t qua danh s\u00e1ch, b\u1ea1n n\u00ean t\u1eadp trung v\u00e0o ph\u1ea7n \u0111u\u00f4i m\u1edf r\u1ed9ng c\u1ee7a file. N\u1ebfu file c\u00f3 \u0111u\u00f4i “.jpg” v\u00e0 “.png” s\u1ebd l\u00e0 c\u00e1c t\u00e0i nguy\u00ean \u1ea3nh, .css l\u00e0 t\u00e0i nguy\u00ean stylesheets. File “.js” l\u00e0 JavaScript, v\u00e2n v\u00e2n.<\/p>\n\n\nNgo\u00e0i ra b\u1ea1n n\u00ean \u0111\u1ec3 \u00fd c\u00e1c t\u1eeb kh\u00f3a trong t\u00ean file, \u0111i\u1ec1u n\u00e0y gi\u00fap b\u1ea1n ph\u00e1t hi\u1ec7n ch\u00fang c\u00f3 ngu\u1ed3n g\u1ed1c t\u1eeb \u0111\u00e2u.<\/p>\n\n\n<\/figure>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 ph\u00e1t hi\u1ec7n ra plugin n\u00e0o \u0111\u1ea5y l\u00e0 nguy\u00ean nh\u00e2n g\u00e2y ch\u1eadm website b\u1eb1ng c\u00e1ch nh\u00ecn v\u00e0o t\u00ean file – trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y l\u00e0 plugin JetPack<\/a>.<\/p>\n\n\nL\u1ea5y v\u00ed d\u1ee5, n\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng WordPress<\/a>, b\u1ea1n c\u00f3 th\u1ec3 nh\u1eadn ra t\u00ean c\u1ee7a plugin m\u00e0 b\u1ea1n \u0111\u00e3 c\u00e0i, ho\u1eb7c t\u00ean c\u1ee7a giao di\u1ec7n b\u1ea1n \u0111ang d\u00f9ng.<\/p>\n\n\n2. Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP<\/h3>\n\n\nTr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP t\u1ea1o th\u00e0nh m\u00e3 tr\u1ea1ng th\u00e1i (status code) v\u00e0 th\u00f4ng b\u00e1o m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecdc \u0111\u01b0\u1ee3c (v\u00ed d\u1ee5 l\u1ed7i 404 kh\u00f4ng t\u00ecm th\u1ea5y trang). Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i \u0111\u01b0\u1ee3c tr\u1ea3 v\u1ec1 t\u1eeb m\u00e1y ch\u1ee7 v\u00e0 n\u00f3i cho tr\u00ecnh duy\u1ec7t bi\u1ebft li\u1ec7u y\u00eau c\u1ea7u nh\u1eafm \u0111\u1ebfn t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3 th\u00e0nh c\u00f4ng hay l\u00e0 kh\u00f4ng.<\/p>\n\n\nY\u00eau c\u1ea7u th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 1xx\/2xx\/3xx<\/strong>\n<\/figure>\n\n\n M\u00e3 tr\u1ea1ng th\u00e1i c\u1ee7a website n\u00ean ch\u1ee7 y\u1ebfu l\u00e0 200<\/figcaption><\/figure>\n<\/p>\n\n\n1xx<\/strong> – Th\u00f4ng tin – b\u1ea1n hi\u1ebfm khi th\u1ea5y n\u00f3 trong b\u1ea3ng Waterfall<\/li>2xx<\/strong> – Th\u00e0nh c\u00f4ng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c x\u00e1c nh\u1eadn l\u00e0 \u0111\u00e3 th\u00e0nh c\u00f4ng (h\u1ea7u h\u1ebft s\u1ebd l\u00e0 m\u00e3 200)<\/li>3xx<\/strong> – Chuy\u1ec3n h\u01b0\u1edbng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c chuy\u1ec3n h\u01b0\u1edbng (chuy\u1ec3n h\u01b0\u1edbng 301<\/a> l\u00e0 ph\u1ed5 bi\u1ebfn nh\u1ea5t)<\/li><\/ul>\n\n\nY\u00eau c\u1ea7u kh\u00f4ng th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 4xx\/5xx<\/strong>\n<\/figure>\n\n\n B\u1ea3ng Waterfall s\u1ebd nhanh ch\u00f3ng ph\u00e1t hi\u1ec7n ra c\u00e1c y\u00eau c\u1ea7u b\u1ecb l\u1ed7i tr\u00ean trang<\/figcaption><\/figure>\n<\/p>\n\n\n4xx<\/strong> – l\u1ed7i client – \u0111\u00e2y l\u00e0 l\u1ed7i di\u1ec5n ra khi th\u1ef1c hi\u1ec7n y\u00eau c\u1ea7u (l\u1ed7i 404 file kh\u00f4ng t\u00ecm th\u1ea5y, l\u1ed7i 401 truy c\u1eadp kh\u00f4ng \u0111\u01b0\u1ee3c ph\u00e9p, l\u1ed7i 403 b\u1ecb c\u1ea5m, v\u00e2n v\u00e2n)<\/li>5xx<\/strong> – l\u1ed7i server – m\u00e1y ch\u1ee7 g\u1eb7p th\u1ea5t b\u1ea1i khi x\u1eed l\u00fd y\u00eau c\u1ea7u (l\u1ed7i m\u00e1y ch\u1ee7 n\u1ed9i b\u1ed9 500, l\u1ed7i d\u1ecbch v\u1ee5 kh\u00f4ng kh\u1ea3 d\u1ee5ng 503, v\u00e2n v\u00e2n)<\/li><\/ul>\n\n\n3. File g\u1ed1c<\/h3>\n\n\n\u0110\u00e2y l\u00e0 v\u1ecb tr\u00ed m\u00e0 file \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng nhi\u1ec1u t\u00e0i nguy\u00ean t\u1eeb b\u00ean th\u1ee9 ba (ch\u1eb3ng h\u1ea1n m\u00e3 nh\u00fang YouTube<\/a>, widget c\u1ee7a Facebook, v\u00e2n v\u00e2n) th\u00ec \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd th\u1ea5y hostname c\u1ee7a ch\u00fang kh\u00f4ng \u0111\u1ebfn t\u1eeb host g\u1ed1c c\u1ee7a b\u1ea1n. <\/figure>\n\n\n File g\u1ed1c cho b\u1ea1n bi\u1ebft t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb n\u01a1i n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng CDN<\/a>, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y nhi\u1ec1u file\/t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb c\u00f9ng ngu\u1ed3n – \u0111\u00e2y c\u0169ng l\u00e0 m\u1ed9t c\u00e1ch \u0111\u1ec3 bi\u1ebft CDN c\u1ee7a b\u1ea1n \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh ch\u00ednh x\u00e1c hay ch\u01b0a.<\/p>\n\n\n<\/div><\/div><\/div>\n\n\n4. K\u00edch c\u1ee1 file<\/h3>\n\n\nC\u00e1i t\u00ean n\u00f3i l\u00ean t\u1ea5t c\u1ea3, \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean. T\u1ed5ng k\u00edch c\u1ee1 file c\u1ee7a t\u1ea5t c\u1ea3 c\u00e1c y\u00eau c\u1ea7u t\u1ea1o th\u00e0nh T\u1ed5ng dung l\u01b0\u1ee3ng trang<\/strong>. Gi\u00e1 tr\u1ecb n\u00e0y c\u00e0ng nh\u1ecf, trang c\u1ee7a b\u1ea1n c\u00e0ng t\u1ea3i nhanh h\u01a1n.\n<\/figure>\n\n\n C\u1ed9t k\u00edch c\u1ee1 file trong b\u1ea3ng Waterfall<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n th\u1ea5y file c\u00f3 k\u00edch c\u1ee1 l\u1edbn (th\u01b0\u1eddng hay x\u1ea3y ra v\u1edbi \u1ea3nh, file \u00e2m thanh, video), b\u1ea1n c\u1ea7n \u01b0u ti\u00ean s\u1eeda n\u00f3 tr\u01b0\u1edbc, tr\u01b0\u1edbc khi t\u00ecm hi\u1ec3u c\u00e1c ph\u1ea7n ti\u1ebfp theo trong b\u1ea3ng Waterfall.<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u c\u00e1c plugin gi\u00fap t\u1ed1i \u01b0u h\u00f3a \u1ea3nh tr\u00ean trang Chim C\u1eaft \u1edf \u0111\u00e2y<\/a>. Ngo\u00e0i ra l\u00e0 ph\u1ea7n l\u00fd thuy\u1ebft v\u1ec1 t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng \u1ea3nh<\/a> n\u1ebfu b\u1ea1n mu\u1ed1n t\u00ecm hi\u1ec3u s\u00e2u h\u01a1n n\u1eefa.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure><\/div>\n\n\nHover qua ph\u1ea7n th\u00f4ng tin size \u0111\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 th\u1ef1c \/ uncompressed v\u00e0 k\u00edch c\u1ee1 \u0111\u00e3 \u0111\u01b0\u1ee3c n\u00e9n (n\u1ebfu n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng n\u00e9n \/ compressed, trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y ch\u1ee7 y\u1ebfu l\u00e0 file CSS v\u00e0 JS).<\/p>\n<\/div><\/div><\/div>\n\n\n5. Th\u1eddi gian t\u1ea3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 ph\u1ea7n tr\u00ean b\u1ea3ng Waterfall cho bi\u1ebft th\u1eddi gian t\u1ea3i c\u1ee5 th\u1ec3 c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n, y\u00eau c\u1ea7u tr\u00ean trang.<\/p>\n\n\n\u0110\u00e2y s\u1ebd l\u00e0 n\u01a1i b\u1ea1n c\u1ea7n b\u1ecf nhi\u1ec1u th\u1eddi gian t\u00ecm hi\u1ec3u nh\u1ea5t<\/strong> trong b\u1ea3ng Waterfall!<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00f4 h\u00ecnh thanh x\u1ebfp d\u1ea1ng th\u00e1c m\u00f4 t\u1ea3 c\u00e1ch trang c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 – c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 ph\u1ea7n l\u1edbn \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n trong khu v\u1ef1c n\u00e0y. Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u c\u1ee5 th\u1ec3 h\u01a1n trong ph\u1ea7n n\u00f3i v\u1ec1 Request timings.<\/p>\n\n\n<\/span>Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i<\/span><\/h2>\n\n\nClick v\u00e0o y\u00eau c\u1ea7u s\u1ebd ti\u1ebft l\u1ed9 th\u00f4ng tin ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i (Request\/Response header). Ch\u00fang bao g\u1ed3m th\u00f4ng tin \u0111a d\u1ea1ng, \u0111\u1ea7y \u0111\u1ee7 li\u00ean quan \u0111\u1ebfn c\u00e1ch t\u00e0i nguy\u00ean c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c ph\u1ee5c v\u1ee5.<\/p>\n\n\nCh\u00fang t\u00f4i d\u1ef1 \u0111\u1ecbnh t\u00ecm hi\u1ec3u ch\u1ee7 \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i chi ti\u1ebft h\u01a1n trong b\u00e0i vi\u1ebft kh\u00e1c. Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang t\u00f4i ch\u1ec9 tr\u00ecnh b\u00e0y ng\u1eafn g\u1ecdn m\u1ed9t s\u1ed1 m\u1ee5c ch\u00ednh trong m\u1ed7i ph\u1ea7n:<\/p>\n\n\nTi\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u<\/h3>\n\n\nCh\u00fang l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server. V\u1edbi ng\u01b0\u1eddi m\u1edbi, th\u01b0\u1eddng b\u1ea1n kh\u00f4ng c\u00f3 g\u00ec \u0111\u1ec3 l\u00e0m trong ph\u1ea7n ti\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u l\u00e0 ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server<\/figcaption><\/figure>\n<\/p>\n\n\nTi\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i<\/h3>\n\n\nPh\u1ea3n h\u1ed3i l\u00e0 nh\u1eefng ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i, v\u00e0 \u0111\u00f4i khi l\u00e0 ch\u00eca kh\u00f3a trong vi\u1ec7c ch\u1ea9n \u0111o\u00e1n c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i cho tr\u00ecnh duy\u1ec7t<\/figcaption><\/figure>\n<\/p>\n\n\nV\u1ec1 c\u01a1 b\u1ea3n, ch\u00fang bi\u1ec3u th\u1ecb c\u1ea5u h\u00ecnh, c\u00e0i \u0111\u1eb7t, ho\u1eb7c thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c y\u00eau c\u1ea7u.<\/p>\n\n\nV\u1edbi ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i, b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3:<\/p>\n\n\n\u0110\u01b0\u1ee3c n\u00e9n hay l\u00e0 kh\u00f4ng (v\u00ed d\u1ee5 gzip)<\/li>Cache<\/li>\u0110\u01b0\u1ee3c ph\u1ee5c v\u1ee5 th\u00f4ng qua CDN (hit\/miss\/revalidated)<\/li>Keep-Alive \u0111\u01b0\u1ee3c b\u1eadt<\/li>Ph\u1ee5c v\u1ee5 th\u00f4ng qua HTTP\/2<\/li>Chuy\u1ec3n h\u01b0\u1edbng n\u1ed9i b\u1ed9 (v\u00ed d\u1ee5 HGST)<\/li><\/ul>\n\n\n\nM\u1eb9o: N\u1ebfu b\u00e1o c\u00e1o GTmetrix cho th\u1ea5y b\u1ea1n c\u00f3 \u0111i\u1ec3m k\u00e9m cho nh\u1eefng khuy\u1ebfn ngh\u1ecb \u1edf tr\u00ean, ki\u1ec3m tra ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i s\u1ebd c\u00f3 kh\u1ea3 n\u0103ng ti\u1ebft l\u1ed9 nhi\u1ec1u chi ti\u1ebft gi\u00fap b\u1ea1n bi\u1ebft l\u00fd do v\u00ec sao.<\/p>\n<\/div><\/div><\/div>\n\n\n<\/span>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/span><\/h2>\n\n\nH\u00e3y c\u00f9ng quan s\u00e1t b\u1ea3ng Waterfall t\u1ed1i gi\u1ea3n d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n s\u1ebd ngay l\u1eadp t\u1ee9c \u0111\u1ec3 \u00fd th\u1ea5y t\u1eebng y\u00eau c\u1ea7u c\u00f3 m\u1ed9t b\u1ed9 thanh m\u00e0u t\u01b0\u01a1ng \u1ee9ng \u1edf b\u00ean ph\u1ea3i.<\/p>\n\n\nN\u00f3i ng\u1eafn g\u1ecdn th\u00ec t\u1eebng m\u00e0u \u0111\u1ea1i di\u1ec7n cho m\u1ed9t ph\u1ea7n kh\u00e1c nhau trong qu\u00e1 tr\u00ecnh t\u1ea3i c\u1ee7a m\u1ed9t ngu\u1ed3n c\u1ee5 th\u1ec3.<\/p>\n\n\nCh\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng m\u00e0u ngay sau \u0111\u00e2y:<\/p>\n\n\nM\u00e0u n\u00e2u – ch\u1eb7n<\/h3>\n\n\nCh\u1eb7n (blocking) l\u00e0 th\u1eddi gian m\u00e0 y\u00eau c\u1ea7u ph\u1ea3i \u0111\u1ee3i trong h\u00e0ng ch\u1edd tr\u00ecnh duy\u1ec7t (browser’s queue) \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u kh\u1edfi \u0111\u1ed9ng m\u1ed9t y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ch\u1eb7n ng\u0103n c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo \u0111\u01b0\u1ee3c x\u1eed l\u00fd<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00f9ng nhau g\u00e2y ra th\u1eddi gian ch\u1eb7n bao g\u1ed3m:<\/p>\n\n\nCh\u1edd \u0111\u1ee3i k\u1ebft n\u1ed1i c\u00f3 s\u1eb5n.<\/li>T\u1ea3i\/th\u1ef1c thi JavaScript ho\u1eb7c CSS (m\u1eb7c d\u00f9 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u00e3 th\u00f4ng minh h\u01a1n trong vi\u1ec7c t\u1ed1i thi\u1ec3u h\u00f3a ch\u00fang).<\/li>Th\u1eddi gian k\u1ebft n\u1ed1i SSL (th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian k\u1ebft n\u1ed1i \/ connection time)<\/li>X\u00e1c th\u1ef1c HTTP (y\u00eau c\u1ea7u b\u1ed5 sung c\u1ea7n thi\u1ebft \u0111\u1ec3 thi\u1ebft l\u1eadp x\u00e1c th\u1ef1c).<\/li><\/ul>\n\n\nM\u00e0u xanh x\u00e1m – Tra c\u1ee9u DNS<\/h3>\n\n\nTr\u01b0\u1edbc khi k\u1ebft n\u1ed1i \u0111\u1ebfn server \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh, hostname c\u1ea7n ph\u00e2n gi\u1ea3i th\u00e0nh IP – \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 t\u00ecm ki\u1ebfm\/tra c\u1ee9u DNS<\/a> (lookup).\n<\/figure>\n\n\n Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\nM\u00e0u xanh l\u00e1 c\u00e2y – K\u1ebft n\u1ed1i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n<\/figure><\/div>\n\n\nL\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
N\u00f3 ch\u00ednh l\u00e0 c\u00e1i n\u00e0y:\n<\/figure>\n\n\n B\u1ea3ng Waterfall c\u1ee7a GTmetrix<\/figcaption><\/figure>\n<\/p>\n\n\nB\u1ea3ng tr\u00ean hi\u1ec3n th\u1ecb h\u00e0nh vi t\u1ea3i v\u1ec1 c\u1ee7a t\u1eebng y\u00eau c\u1ea7u (request-by-request) tr\u00ean website c\u1ee7a b\u1ea1n. T\u1eebng th\u00e0nh ph\u1ea7n m\u00e3 (JavaScript, CSS), file media (\u1ea3nh, \u00e2m thanh, video), v\u00e0\/ho\u1eb7c c\u00e1c ngu\u1ed3n c\u1ee7a b\u00ean th\u1ee9 ba (third-party)<\/a> tr\u00ean trang \u0111\u1ec1u \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb \u1edf \u0111\u00e2y.<\/p>\n\n\n<\/span>Waterfall c\u00f3 \u00edch l\u1ee3i g\u00ec?<\/span><\/h2>\n\n\nV\u00ec b\u1ea3ng Waterfall h\u00ecnh \u1ea3nh h\u00f3a h\u00e0nh vi t\u1ea3i v\u1ec1 n\u00ean b\u1ea1n nh\u00ecn \u0111\u01b0\u1ee3c chi ti\u1ebft c\u00e1ch c\u00e1c y\u00eau c\u1ea7u download v\u1ec1 theo th\u1ee9 t\u1ef1. Th\u1eddi gian th\u1ef1c thi c\u1ee7a c\u00e1c y\u00eau c\u1ea7u c\u0169ng \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb, v\u1edbi \u0111\u1ed9 d\u00e0i thanh thay \u0111\u1ed5i t\u01b0\u01a1ng \u1ee9ng v\u1edbi \u0111\u1ed9 d\u00e0i c\u1ee7a t\u1eebng y\u00eau c\u1ea7u, l\u01b0\u1ee3t t\u1ea3i, v\u00e0\/ho\u1eb7c th\u1eddi gian th\u1ef1c thi.<\/p>\n\n\nT\u1ea5t c\u1ea3 d\u1eef li\u1ec7u n\u00e0y h\u01b0\u1edbng \u0111\u1ebfn vi\u1ec7c h\u1ed7 tr\u1ee3 gi\u1ea3i quy\u1ebft c\u00e1c r\u1eafc r\u1ed1i v\u1ec1 hi\u1ec7u su\u1ea5t (t\u1ed1c \u0111\u1ed9 website) c\u0169ng nh\u01b0 c\u00e1c v\u1ea5n \u0111\u1ec1 c\u1ee7a trang n\u00f3i chung.<\/p>\n\n\nTh\u1ef1c s\u1ef1 l\u00e0 t\u1ed5ng th\u1ec3 trang th\u00ec c\u00f2n c\u00f3 r\u1ea5t nhi\u1ec1u th\u1ee9 kh\u00e1c n\u1eefa, nh\u01b0ng n\u1ebfu b\u1ea1n s\u1eafp x\u1ebfp c\u00e1c th\u1ee9 theo t\u1eebng ph\u1ea7n th\u00ec n\u00f3 c\u0169ng kh\u00f4ng qu\u00e1 t\u1ec7 \u0111\u00e2u.<\/p>\n\n\n<\/span>Tr\u00e1nh c\u1ea3m th\u1ea5y ng\u1ed9p<\/span><\/h2>\n\n\nCh\u00fang ta s\u1ebd b\u1eaft \u0111\u1ea7u v\u1edbi vi\u1ec7c xem x\u00e9t t\u1eebng ph\u1ea7n, d\u00f2ng v\u00e0 m\u00e0u s\u1eafc c\u00f3 \u00fd ngh\u0129a nh\u01b0 th\u1ebf n\u00e0o.<\/p>\n\n\nB\u1ea3ng Waterfall \u0111\u01b0\u1ee3c chia th\u00e0nh c\u00e1c c\u1ed9t – v\u00ed d\u1ee5 nh\u01b0 h\u00ecnh b\u00ean d\u01b0\u1edbi b\u1ea1n th\u1ea5y n\u0103m c\u1ed9t:\n<\/figure>\n\n\n C\u00e1c c\u1ed9t trong b\u1ea3ng Waterfall: t\u00ean file, m\u00e3 tr\u1ea1ng th\u00e1i, file g\u1ed1c, k\u00edch c\u1ee1 file, th\u1eddi gian t\u1ea3i trong timeline (d\u00f2ng th\u1eddi gian)<\/figcaption><\/figure>\n<\/p>\n\n\nD\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng g\u00ec b\u1ea1n s\u1ebd th\u1ea5y, nh\u00ecn t\u1eeb tr\u00e1i qua ph\u1ea3i:<\/p>\n\n\n1. T\u00ean file<\/h3>\n\n\n\u0110\u00e2y l\u00e0 t\u00ean c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c t\u1ea3i b\u1edfi tr\u00ecnh duy\u1ec7t web. Trong b\u1ea3ng Waterfall, n\u00f3 bao g\u1ed3m ti\u1ec1n t\u1ed1 HTTP – th\u01b0\u1eddng l\u00e0 GET ho\u1eb7c POST (n\u00f3i chung b\u1ea1n kh\u00f4ng c\u1ea7n lo l\u1eafng \u0111\u1ebfn ti\u1ec1n t\u1ed1 n\u00e0y).\n<\/figure>\n\n\n T\u00ean file c\u1ee7a c\u00e1c t\u00e0i nguy\u00ean tr\u00ean trang web c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb trong c\u1ed9t \u0111\u1ea7u ti\u00ean<\/figcaption><\/figure>\n<\/p>\n\n\n\u0110\u00f4i khi tr\u00f4ng ch\u00fang kh\u00e1 b\u1eeba b\u1ed9n v\u00e0 \u0111\u00e1ng s\u1ee3. B\u1ea1n c\u1ed1 g\u1eafng \u0111\u1eebng qu\u00e1 b\u1eadn t\u00e2m v\u1ec1 n\u00f3. Trong th\u1ef1c t\u1ebf, b\u1ea1n c\u00f3 th\u1ec3 kh\u00f4ng nh\u1ea5t thi\u1ebft ph\u1ea3i bi\u1ebft t\u1eebng file n\u00e0y l\u00e0 g\u00ec ngay l\u1eadp t\u1ee9c.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nHover chu\u1ed9t qua t\u00ean file s\u1ebd gi\u00fap b\u1ea1n bi\u1ebft \u0111\u01b0\u1ee3c \u0111\u01b0\u1eddng d\u1eabn \u0111\u1ea7y \u0111\u1ee7 (full path) c\u1ee7a file. Ctrl + click s\u1ebd t\u1ea3i file tr\u00ean m\u1ed9t tab kh\u00e1c. \u0110i\u1ec1u n\u00e0y c\u00f3 \u00edch trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n mu\u1ed1n xem ch\u00ednh x\u00e1c file \u0111ang \u0111\u01b0\u1ee3c tham chi\u1ebfu l\u00e0 g\u00ec.<\/p>\n<\/div><\/div><\/div>\n\n\nKhi duy\u1ec7t qua danh s\u00e1ch, b\u1ea1n n\u00ean t\u1eadp trung v\u00e0o ph\u1ea7n \u0111u\u00f4i m\u1edf r\u1ed9ng c\u1ee7a file. N\u1ebfu file c\u00f3 \u0111u\u00f4i “.jpg” v\u00e0 “.png” s\u1ebd l\u00e0 c\u00e1c t\u00e0i nguy\u00ean \u1ea3nh, .css l\u00e0 t\u00e0i nguy\u00ean stylesheets. File “.js” l\u00e0 JavaScript, v\u00e2n v\u00e2n.<\/p>\n\n\nNgo\u00e0i ra b\u1ea1n n\u00ean \u0111\u1ec3 \u00fd c\u00e1c t\u1eeb kh\u00f3a trong t\u00ean file, \u0111i\u1ec1u n\u00e0y gi\u00fap b\u1ea1n ph\u00e1t hi\u1ec7n ch\u00fang c\u00f3 ngu\u1ed3n g\u1ed1c t\u1eeb \u0111\u00e2u.<\/p>\n\n\n<\/figure>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 ph\u00e1t hi\u1ec7n ra plugin n\u00e0o \u0111\u1ea5y l\u00e0 nguy\u00ean nh\u00e2n g\u00e2y ch\u1eadm website b\u1eb1ng c\u00e1ch nh\u00ecn v\u00e0o t\u00ean file – trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y l\u00e0 plugin JetPack<\/a>.<\/p>\n\n\nL\u1ea5y v\u00ed d\u1ee5, n\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng WordPress<\/a>, b\u1ea1n c\u00f3 th\u1ec3 nh\u1eadn ra t\u00ean c\u1ee7a plugin m\u00e0 b\u1ea1n \u0111\u00e3 c\u00e0i, ho\u1eb7c t\u00ean c\u1ee7a giao di\u1ec7n b\u1ea1n \u0111ang d\u00f9ng.<\/p>\n\n\n2. Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP<\/h3>\n\n\nTr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP t\u1ea1o th\u00e0nh m\u00e3 tr\u1ea1ng th\u00e1i (status code) v\u00e0 th\u00f4ng b\u00e1o m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecdc \u0111\u01b0\u1ee3c (v\u00ed d\u1ee5 l\u1ed7i 404 kh\u00f4ng t\u00ecm th\u1ea5y trang). Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i \u0111\u01b0\u1ee3c tr\u1ea3 v\u1ec1 t\u1eeb m\u00e1y ch\u1ee7 v\u00e0 n\u00f3i cho tr\u00ecnh duy\u1ec7t bi\u1ebft li\u1ec7u y\u00eau c\u1ea7u nh\u1eafm \u0111\u1ebfn t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3 th\u00e0nh c\u00f4ng hay l\u00e0 kh\u00f4ng.<\/p>\n\n\nY\u00eau c\u1ea7u th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 1xx\/2xx\/3xx<\/strong>\n<\/figure>\n\n\n M\u00e3 tr\u1ea1ng th\u00e1i c\u1ee7a website n\u00ean ch\u1ee7 y\u1ebfu l\u00e0 200<\/figcaption><\/figure>\n<\/p>\n\n\n1xx<\/strong> – Th\u00f4ng tin – b\u1ea1n hi\u1ebfm khi th\u1ea5y n\u00f3 trong b\u1ea3ng Waterfall<\/li>2xx<\/strong> – Th\u00e0nh c\u00f4ng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c x\u00e1c nh\u1eadn l\u00e0 \u0111\u00e3 th\u00e0nh c\u00f4ng (h\u1ea7u h\u1ebft s\u1ebd l\u00e0 m\u00e3 200)<\/li>3xx<\/strong> – Chuy\u1ec3n h\u01b0\u1edbng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c chuy\u1ec3n h\u01b0\u1edbng (chuy\u1ec3n h\u01b0\u1edbng 301<\/a> l\u00e0 ph\u1ed5 bi\u1ebfn nh\u1ea5t)<\/li><\/ul>\n\n\nY\u00eau c\u1ea7u kh\u00f4ng th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 4xx\/5xx<\/strong>\n<\/figure>\n\n\n B\u1ea3ng Waterfall s\u1ebd nhanh ch\u00f3ng ph\u00e1t hi\u1ec7n ra c\u00e1c y\u00eau c\u1ea7u b\u1ecb l\u1ed7i tr\u00ean trang<\/figcaption><\/figure>\n<\/p>\n\n\n4xx<\/strong> – l\u1ed7i client – \u0111\u00e2y l\u00e0 l\u1ed7i di\u1ec5n ra khi th\u1ef1c hi\u1ec7n y\u00eau c\u1ea7u (l\u1ed7i 404 file kh\u00f4ng t\u00ecm th\u1ea5y, l\u1ed7i 401 truy c\u1eadp kh\u00f4ng \u0111\u01b0\u1ee3c ph\u00e9p, l\u1ed7i 403 b\u1ecb c\u1ea5m, v\u00e2n v\u00e2n)<\/li>5xx<\/strong> – l\u1ed7i server – m\u00e1y ch\u1ee7 g\u1eb7p th\u1ea5t b\u1ea1i khi x\u1eed l\u00fd y\u00eau c\u1ea7u (l\u1ed7i m\u00e1y ch\u1ee7 n\u1ed9i b\u1ed9 500, l\u1ed7i d\u1ecbch v\u1ee5 kh\u00f4ng kh\u1ea3 d\u1ee5ng 503, v\u00e2n v\u00e2n)<\/li><\/ul>\n\n\n3. File g\u1ed1c<\/h3>\n\n\n\u0110\u00e2y l\u00e0 v\u1ecb tr\u00ed m\u00e0 file \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng nhi\u1ec1u t\u00e0i nguy\u00ean t\u1eeb b\u00ean th\u1ee9 ba (ch\u1eb3ng h\u1ea1n m\u00e3 nh\u00fang YouTube<\/a>, widget c\u1ee7a Facebook, v\u00e2n v\u00e2n) th\u00ec \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd th\u1ea5y hostname c\u1ee7a ch\u00fang kh\u00f4ng \u0111\u1ebfn t\u1eeb host g\u1ed1c c\u1ee7a b\u1ea1n. <\/figure>\n\n\n File g\u1ed1c cho b\u1ea1n bi\u1ebft t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb n\u01a1i n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng CDN<\/a>, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y nhi\u1ec1u file\/t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb c\u00f9ng ngu\u1ed3n – \u0111\u00e2y c\u0169ng l\u00e0 m\u1ed9t c\u00e1ch \u0111\u1ec3 bi\u1ebft CDN c\u1ee7a b\u1ea1n \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh ch\u00ednh x\u00e1c hay ch\u01b0a.<\/p>\n\n\n<\/div><\/div><\/div>\n\n\n4. K\u00edch c\u1ee1 file<\/h3>\n\n\nC\u00e1i t\u00ean n\u00f3i l\u00ean t\u1ea5t c\u1ea3, \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean. T\u1ed5ng k\u00edch c\u1ee1 file c\u1ee7a t\u1ea5t c\u1ea3 c\u00e1c y\u00eau c\u1ea7u t\u1ea1o th\u00e0nh T\u1ed5ng dung l\u01b0\u1ee3ng trang<\/strong>. Gi\u00e1 tr\u1ecb n\u00e0y c\u00e0ng nh\u1ecf, trang c\u1ee7a b\u1ea1n c\u00e0ng t\u1ea3i nhanh h\u01a1n.\n<\/figure>\n\n\n C\u1ed9t k\u00edch c\u1ee1 file trong b\u1ea3ng Waterfall<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n th\u1ea5y file c\u00f3 k\u00edch c\u1ee1 l\u1edbn (th\u01b0\u1eddng hay x\u1ea3y ra v\u1edbi \u1ea3nh, file \u00e2m thanh, video), b\u1ea1n c\u1ea7n \u01b0u ti\u00ean s\u1eeda n\u00f3 tr\u01b0\u1edbc, tr\u01b0\u1edbc khi t\u00ecm hi\u1ec3u c\u00e1c ph\u1ea7n ti\u1ebfp theo trong b\u1ea3ng Waterfall.<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u c\u00e1c plugin gi\u00fap t\u1ed1i \u01b0u h\u00f3a \u1ea3nh tr\u00ean trang Chim C\u1eaft \u1edf \u0111\u00e2y<\/a>. Ngo\u00e0i ra l\u00e0 ph\u1ea7n l\u00fd thuy\u1ebft v\u1ec1 t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng \u1ea3nh<\/a> n\u1ebfu b\u1ea1n mu\u1ed1n t\u00ecm hi\u1ec3u s\u00e2u h\u01a1n n\u1eefa.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure><\/div>\n\n\nHover qua ph\u1ea7n th\u00f4ng tin size \u0111\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 th\u1ef1c \/ uncompressed v\u00e0 k\u00edch c\u1ee1 \u0111\u00e3 \u0111\u01b0\u1ee3c n\u00e9n (n\u1ebfu n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng n\u00e9n \/ compressed, trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y ch\u1ee7 y\u1ebfu l\u00e0 file CSS v\u00e0 JS).<\/p>\n<\/div><\/div><\/div>\n\n\n5. Th\u1eddi gian t\u1ea3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 ph\u1ea7n tr\u00ean b\u1ea3ng Waterfall cho bi\u1ebft th\u1eddi gian t\u1ea3i c\u1ee5 th\u1ec3 c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n, y\u00eau c\u1ea7u tr\u00ean trang.<\/p>\n\n\n\u0110\u00e2y s\u1ebd l\u00e0 n\u01a1i b\u1ea1n c\u1ea7n b\u1ecf nhi\u1ec1u th\u1eddi gian t\u00ecm hi\u1ec3u nh\u1ea5t<\/strong> trong b\u1ea3ng Waterfall!<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00f4 h\u00ecnh thanh x\u1ebfp d\u1ea1ng th\u00e1c m\u00f4 t\u1ea3 c\u00e1ch trang c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 – c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 ph\u1ea7n l\u1edbn \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n trong khu v\u1ef1c n\u00e0y. Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u c\u1ee5 th\u1ec3 h\u01a1n trong ph\u1ea7n n\u00f3i v\u1ec1 Request timings.<\/p>\n\n\n<\/span>Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i<\/span><\/h2>\n\n\nClick v\u00e0o y\u00eau c\u1ea7u s\u1ebd ti\u1ebft l\u1ed9 th\u00f4ng tin ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i (Request\/Response header). Ch\u00fang bao g\u1ed3m th\u00f4ng tin \u0111a d\u1ea1ng, \u0111\u1ea7y \u0111\u1ee7 li\u00ean quan \u0111\u1ebfn c\u00e1ch t\u00e0i nguy\u00ean c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c ph\u1ee5c v\u1ee5.<\/p>\n\n\nCh\u00fang t\u00f4i d\u1ef1 \u0111\u1ecbnh t\u00ecm hi\u1ec3u ch\u1ee7 \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i chi ti\u1ebft h\u01a1n trong b\u00e0i vi\u1ebft kh\u00e1c. Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang t\u00f4i ch\u1ec9 tr\u00ecnh b\u00e0y ng\u1eafn g\u1ecdn m\u1ed9t s\u1ed1 m\u1ee5c ch\u00ednh trong m\u1ed7i ph\u1ea7n:<\/p>\n\n\nTi\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u<\/h3>\n\n\nCh\u00fang l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server. V\u1edbi ng\u01b0\u1eddi m\u1edbi, th\u01b0\u1eddng b\u1ea1n kh\u00f4ng c\u00f3 g\u00ec \u0111\u1ec3 l\u00e0m trong ph\u1ea7n ti\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u l\u00e0 ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server<\/figcaption><\/figure>\n<\/p>\n\n\nTi\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i<\/h3>\n\n\nPh\u1ea3n h\u1ed3i l\u00e0 nh\u1eefng ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i, v\u00e0 \u0111\u00f4i khi l\u00e0 ch\u00eca kh\u00f3a trong vi\u1ec7c ch\u1ea9n \u0111o\u00e1n c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i cho tr\u00ecnh duy\u1ec7t<\/figcaption><\/figure>\n<\/p>\n\n\nV\u1ec1 c\u01a1 b\u1ea3n, ch\u00fang bi\u1ec3u th\u1ecb c\u1ea5u h\u00ecnh, c\u00e0i \u0111\u1eb7t, ho\u1eb7c thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c y\u00eau c\u1ea7u.<\/p>\n\n\nV\u1edbi ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i, b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3:<\/p>\n\n\n\u0110\u01b0\u1ee3c n\u00e9n hay l\u00e0 kh\u00f4ng (v\u00ed d\u1ee5 gzip)<\/li>Cache<\/li>\u0110\u01b0\u1ee3c ph\u1ee5c v\u1ee5 th\u00f4ng qua CDN (hit\/miss\/revalidated)<\/li>Keep-Alive \u0111\u01b0\u1ee3c b\u1eadt<\/li>Ph\u1ee5c v\u1ee5 th\u00f4ng qua HTTP\/2<\/li>Chuy\u1ec3n h\u01b0\u1edbng n\u1ed9i b\u1ed9 (v\u00ed d\u1ee5 HGST)<\/li><\/ul>\n\n\n\nM\u1eb9o: N\u1ebfu b\u00e1o c\u00e1o GTmetrix cho th\u1ea5y b\u1ea1n c\u00f3 \u0111i\u1ec3m k\u00e9m cho nh\u1eefng khuy\u1ebfn ngh\u1ecb \u1edf tr\u00ean, ki\u1ec3m tra ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i s\u1ebd c\u00f3 kh\u1ea3 n\u0103ng ti\u1ebft l\u1ed9 nhi\u1ec1u chi ti\u1ebft gi\u00fap b\u1ea1n bi\u1ebft l\u00fd do v\u00ec sao.<\/p>\n<\/div><\/div><\/div>\n\n\n<\/span>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/span><\/h2>\n\n\nH\u00e3y c\u00f9ng quan s\u00e1t b\u1ea3ng Waterfall t\u1ed1i gi\u1ea3n d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n s\u1ebd ngay l\u1eadp t\u1ee9c \u0111\u1ec3 \u00fd th\u1ea5y t\u1eebng y\u00eau c\u1ea7u c\u00f3 m\u1ed9t b\u1ed9 thanh m\u00e0u t\u01b0\u01a1ng \u1ee9ng \u1edf b\u00ean ph\u1ea3i.<\/p>\n\n\nN\u00f3i ng\u1eafn g\u1ecdn th\u00ec t\u1eebng m\u00e0u \u0111\u1ea1i di\u1ec7n cho m\u1ed9t ph\u1ea7n kh\u00e1c nhau trong qu\u00e1 tr\u00ecnh t\u1ea3i c\u1ee7a m\u1ed9t ngu\u1ed3n c\u1ee5 th\u1ec3.<\/p>\n\n\nCh\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng m\u00e0u ngay sau \u0111\u00e2y:<\/p>\n\n\nM\u00e0u n\u00e2u – ch\u1eb7n<\/h3>\n\n\nCh\u1eb7n (blocking) l\u00e0 th\u1eddi gian m\u00e0 y\u00eau c\u1ea7u ph\u1ea3i \u0111\u1ee3i trong h\u00e0ng ch\u1edd tr\u00ecnh duy\u1ec7t (browser’s queue) \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u kh\u1edfi \u0111\u1ed9ng m\u1ed9t y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ch\u1eb7n ng\u0103n c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo \u0111\u01b0\u1ee3c x\u1eed l\u00fd<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00f9ng nhau g\u00e2y ra th\u1eddi gian ch\u1eb7n bao g\u1ed3m:<\/p>\n\n\nCh\u1edd \u0111\u1ee3i k\u1ebft n\u1ed1i c\u00f3 s\u1eb5n.<\/li>T\u1ea3i\/th\u1ef1c thi JavaScript ho\u1eb7c CSS (m\u1eb7c d\u00f9 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u00e3 th\u00f4ng minh h\u01a1n trong vi\u1ec7c t\u1ed1i thi\u1ec3u h\u00f3a ch\u00fang).<\/li>Th\u1eddi gian k\u1ebft n\u1ed1i SSL (th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian k\u1ebft n\u1ed1i \/ connection time)<\/li>X\u00e1c th\u1ef1c HTTP (y\u00eau c\u1ea7u b\u1ed5 sung c\u1ea7n thi\u1ebft \u0111\u1ec3 thi\u1ebft l\u1eadp x\u00e1c th\u1ef1c).<\/li><\/ul>\n\n\nM\u00e0u xanh x\u00e1m – Tra c\u1ee9u DNS<\/h3>\n\n\nTr\u01b0\u1edbc khi k\u1ebft n\u1ed1i \u0111\u1ebfn server \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh, hostname c\u1ea7n ph\u00e2n gi\u1ea3i th\u00e0nh IP – \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 t\u00ecm ki\u1ebfm\/tra c\u1ee9u DNS<\/a> (lookup).\n<\/figure>\n\n\n Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\nM\u00e0u xanh l\u00e1 c\u00e2y – K\u1ebft n\u1ed1i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n<\/figure><\/div>\n\n\nL\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
B\u1ea3ng Waterfall c\u1ee7a GTmetrix<\/figcaption><\/figure>\n<\/p>\n\n\n
B\u1ea3ng tr\u00ean hi\u1ec3n th\u1ecb h\u00e0nh vi t\u1ea3i v\u1ec1 c\u1ee7a t\u1eebng y\u00eau c\u1ea7u (request-by-request) tr\u00ean website c\u1ee7a b\u1ea1n. T\u1eebng th\u00e0nh ph\u1ea7n m\u00e3 (JavaScript, CSS), file media (\u1ea3nh, \u00e2m thanh, video), v\u00e0\/ho\u1eb7c c\u00e1c ngu\u1ed3n c\u1ee7a b\u00ean th\u1ee9 ba (third-party)<\/a> tr\u00ean trang \u0111\u1ec1u \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb \u1edf \u0111\u00e2y.<\/p>\n\n\n<\/span>Waterfall c\u00f3 \u00edch l\u1ee3i g\u00ec?<\/span><\/h2>\n\n\nV\u00ec b\u1ea3ng Waterfall h\u00ecnh \u1ea3nh h\u00f3a h\u00e0nh vi t\u1ea3i v\u1ec1 n\u00ean b\u1ea1n nh\u00ecn \u0111\u01b0\u1ee3c chi ti\u1ebft c\u00e1ch c\u00e1c y\u00eau c\u1ea7u download v\u1ec1 theo th\u1ee9 t\u1ef1. Th\u1eddi gian th\u1ef1c thi c\u1ee7a c\u00e1c y\u00eau c\u1ea7u c\u0169ng \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb, v\u1edbi \u0111\u1ed9 d\u00e0i thanh thay \u0111\u1ed5i t\u01b0\u01a1ng \u1ee9ng v\u1edbi \u0111\u1ed9 d\u00e0i c\u1ee7a t\u1eebng y\u00eau c\u1ea7u, l\u01b0\u1ee3t t\u1ea3i, v\u00e0\/ho\u1eb7c th\u1eddi gian th\u1ef1c thi.<\/p>\n\n\nT\u1ea5t c\u1ea3 d\u1eef li\u1ec7u n\u00e0y h\u01b0\u1edbng \u0111\u1ebfn vi\u1ec7c h\u1ed7 tr\u1ee3 gi\u1ea3i quy\u1ebft c\u00e1c r\u1eafc r\u1ed1i v\u1ec1 hi\u1ec7u su\u1ea5t (t\u1ed1c \u0111\u1ed9 website) c\u0169ng nh\u01b0 c\u00e1c v\u1ea5n \u0111\u1ec1 c\u1ee7a trang n\u00f3i chung.<\/p>\n\n\nTh\u1ef1c s\u1ef1 l\u00e0 t\u1ed5ng th\u1ec3 trang th\u00ec c\u00f2n c\u00f3 r\u1ea5t nhi\u1ec1u th\u1ee9 kh\u00e1c n\u1eefa, nh\u01b0ng n\u1ebfu b\u1ea1n s\u1eafp x\u1ebfp c\u00e1c th\u1ee9 theo t\u1eebng ph\u1ea7n th\u00ec n\u00f3 c\u0169ng kh\u00f4ng qu\u00e1 t\u1ec7 \u0111\u00e2u.<\/p>\n\n\n<\/span>Tr\u00e1nh c\u1ea3m th\u1ea5y ng\u1ed9p<\/span><\/h2>\n\n\nCh\u00fang ta s\u1ebd b\u1eaft \u0111\u1ea7u v\u1edbi vi\u1ec7c xem x\u00e9t t\u1eebng ph\u1ea7n, d\u00f2ng v\u00e0 m\u00e0u s\u1eafc c\u00f3 \u00fd ngh\u0129a nh\u01b0 th\u1ebf n\u00e0o.<\/p>\n\n\nB\u1ea3ng Waterfall \u0111\u01b0\u1ee3c chia th\u00e0nh c\u00e1c c\u1ed9t – v\u00ed d\u1ee5 nh\u01b0 h\u00ecnh b\u00ean d\u01b0\u1edbi b\u1ea1n th\u1ea5y n\u0103m c\u1ed9t:\n<\/figure>\n\n\n C\u00e1c c\u1ed9t trong b\u1ea3ng Waterfall: t\u00ean file, m\u00e3 tr\u1ea1ng th\u00e1i, file g\u1ed1c, k\u00edch c\u1ee1 file, th\u1eddi gian t\u1ea3i trong timeline (d\u00f2ng th\u1eddi gian)<\/figcaption><\/figure>\n<\/p>\n\n\nD\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng g\u00ec b\u1ea1n s\u1ebd th\u1ea5y, nh\u00ecn t\u1eeb tr\u00e1i qua ph\u1ea3i:<\/p>\n\n\n1. T\u00ean file<\/h3>\n\n\n\u0110\u00e2y l\u00e0 t\u00ean c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c t\u1ea3i b\u1edfi tr\u00ecnh duy\u1ec7t web. Trong b\u1ea3ng Waterfall, n\u00f3 bao g\u1ed3m ti\u1ec1n t\u1ed1 HTTP – th\u01b0\u1eddng l\u00e0 GET ho\u1eb7c POST (n\u00f3i chung b\u1ea1n kh\u00f4ng c\u1ea7n lo l\u1eafng \u0111\u1ebfn ti\u1ec1n t\u1ed1 n\u00e0y).\n<\/figure>\n\n\n T\u00ean file c\u1ee7a c\u00e1c t\u00e0i nguy\u00ean tr\u00ean trang web c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb trong c\u1ed9t \u0111\u1ea7u ti\u00ean<\/figcaption><\/figure>\n<\/p>\n\n\n\u0110\u00f4i khi tr\u00f4ng ch\u00fang kh\u00e1 b\u1eeba b\u1ed9n v\u00e0 \u0111\u00e1ng s\u1ee3. B\u1ea1n c\u1ed1 g\u1eafng \u0111\u1eebng qu\u00e1 b\u1eadn t\u00e2m v\u1ec1 n\u00f3. Trong th\u1ef1c t\u1ebf, b\u1ea1n c\u00f3 th\u1ec3 kh\u00f4ng nh\u1ea5t thi\u1ebft ph\u1ea3i bi\u1ebft t\u1eebng file n\u00e0y l\u00e0 g\u00ec ngay l\u1eadp t\u1ee9c.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nHover chu\u1ed9t qua t\u00ean file s\u1ebd gi\u00fap b\u1ea1n bi\u1ebft \u0111\u01b0\u1ee3c \u0111\u01b0\u1eddng d\u1eabn \u0111\u1ea7y \u0111\u1ee7 (full path) c\u1ee7a file. Ctrl + click s\u1ebd t\u1ea3i file tr\u00ean m\u1ed9t tab kh\u00e1c. \u0110i\u1ec1u n\u00e0y c\u00f3 \u00edch trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n mu\u1ed1n xem ch\u00ednh x\u00e1c file \u0111ang \u0111\u01b0\u1ee3c tham chi\u1ebfu l\u00e0 g\u00ec.<\/p>\n<\/div><\/div><\/div>\n\n\nKhi duy\u1ec7t qua danh s\u00e1ch, b\u1ea1n n\u00ean t\u1eadp trung v\u00e0o ph\u1ea7n \u0111u\u00f4i m\u1edf r\u1ed9ng c\u1ee7a file. N\u1ebfu file c\u00f3 \u0111u\u00f4i “.jpg” v\u00e0 “.png” s\u1ebd l\u00e0 c\u00e1c t\u00e0i nguy\u00ean \u1ea3nh, .css l\u00e0 t\u00e0i nguy\u00ean stylesheets. File “.js” l\u00e0 JavaScript, v\u00e2n v\u00e2n.<\/p>\n\n\nNgo\u00e0i ra b\u1ea1n n\u00ean \u0111\u1ec3 \u00fd c\u00e1c t\u1eeb kh\u00f3a trong t\u00ean file, \u0111i\u1ec1u n\u00e0y gi\u00fap b\u1ea1n ph\u00e1t hi\u1ec7n ch\u00fang c\u00f3 ngu\u1ed3n g\u1ed1c t\u1eeb \u0111\u00e2u.<\/p>\n\n\n<\/figure>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 ph\u00e1t hi\u1ec7n ra plugin n\u00e0o \u0111\u1ea5y l\u00e0 nguy\u00ean nh\u00e2n g\u00e2y ch\u1eadm website b\u1eb1ng c\u00e1ch nh\u00ecn v\u00e0o t\u00ean file – trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y l\u00e0 plugin JetPack<\/a>.<\/p>\n\n\nL\u1ea5y v\u00ed d\u1ee5, n\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng WordPress<\/a>, b\u1ea1n c\u00f3 th\u1ec3 nh\u1eadn ra t\u00ean c\u1ee7a plugin m\u00e0 b\u1ea1n \u0111\u00e3 c\u00e0i, ho\u1eb7c t\u00ean c\u1ee7a giao di\u1ec7n b\u1ea1n \u0111ang d\u00f9ng.<\/p>\n\n\n2. Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP<\/h3>\n\n\nTr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP t\u1ea1o th\u00e0nh m\u00e3 tr\u1ea1ng th\u00e1i (status code) v\u00e0 th\u00f4ng b\u00e1o m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecdc \u0111\u01b0\u1ee3c (v\u00ed d\u1ee5 l\u1ed7i 404 kh\u00f4ng t\u00ecm th\u1ea5y trang). Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i \u0111\u01b0\u1ee3c tr\u1ea3 v\u1ec1 t\u1eeb m\u00e1y ch\u1ee7 v\u00e0 n\u00f3i cho tr\u00ecnh duy\u1ec7t bi\u1ebft li\u1ec7u y\u00eau c\u1ea7u nh\u1eafm \u0111\u1ebfn t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3 th\u00e0nh c\u00f4ng hay l\u00e0 kh\u00f4ng.<\/p>\n\n\nY\u00eau c\u1ea7u th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 1xx\/2xx\/3xx<\/strong>\n<\/figure>\n\n\n M\u00e3 tr\u1ea1ng th\u00e1i c\u1ee7a website n\u00ean ch\u1ee7 y\u1ebfu l\u00e0 200<\/figcaption><\/figure>\n<\/p>\n\n\n1xx<\/strong> – Th\u00f4ng tin – b\u1ea1n hi\u1ebfm khi th\u1ea5y n\u00f3 trong b\u1ea3ng Waterfall<\/li>2xx<\/strong> – Th\u00e0nh c\u00f4ng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c x\u00e1c nh\u1eadn l\u00e0 \u0111\u00e3 th\u00e0nh c\u00f4ng (h\u1ea7u h\u1ebft s\u1ebd l\u00e0 m\u00e3 200)<\/li>3xx<\/strong> – Chuy\u1ec3n h\u01b0\u1edbng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c chuy\u1ec3n h\u01b0\u1edbng (chuy\u1ec3n h\u01b0\u1edbng 301<\/a> l\u00e0 ph\u1ed5 bi\u1ebfn nh\u1ea5t)<\/li><\/ul>\n\n\nY\u00eau c\u1ea7u kh\u00f4ng th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 4xx\/5xx<\/strong>\n<\/figure>\n\n\n B\u1ea3ng Waterfall s\u1ebd nhanh ch\u00f3ng ph\u00e1t hi\u1ec7n ra c\u00e1c y\u00eau c\u1ea7u b\u1ecb l\u1ed7i tr\u00ean trang<\/figcaption><\/figure>\n<\/p>\n\n\n4xx<\/strong> – l\u1ed7i client – \u0111\u00e2y l\u00e0 l\u1ed7i di\u1ec5n ra khi th\u1ef1c hi\u1ec7n y\u00eau c\u1ea7u (l\u1ed7i 404 file kh\u00f4ng t\u00ecm th\u1ea5y, l\u1ed7i 401 truy c\u1eadp kh\u00f4ng \u0111\u01b0\u1ee3c ph\u00e9p, l\u1ed7i 403 b\u1ecb c\u1ea5m, v\u00e2n v\u00e2n)<\/li>5xx<\/strong> – l\u1ed7i server – m\u00e1y ch\u1ee7 g\u1eb7p th\u1ea5t b\u1ea1i khi x\u1eed l\u00fd y\u00eau c\u1ea7u (l\u1ed7i m\u00e1y ch\u1ee7 n\u1ed9i b\u1ed9 500, l\u1ed7i d\u1ecbch v\u1ee5 kh\u00f4ng kh\u1ea3 d\u1ee5ng 503, v\u00e2n v\u00e2n)<\/li><\/ul>\n\n\n3. File g\u1ed1c<\/h3>\n\n\n\u0110\u00e2y l\u00e0 v\u1ecb tr\u00ed m\u00e0 file \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng nhi\u1ec1u t\u00e0i nguy\u00ean t\u1eeb b\u00ean th\u1ee9 ba (ch\u1eb3ng h\u1ea1n m\u00e3 nh\u00fang YouTube<\/a>, widget c\u1ee7a Facebook, v\u00e2n v\u00e2n) th\u00ec \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd th\u1ea5y hostname c\u1ee7a ch\u00fang kh\u00f4ng \u0111\u1ebfn t\u1eeb host g\u1ed1c c\u1ee7a b\u1ea1n. <\/figure>\n\n\n File g\u1ed1c cho b\u1ea1n bi\u1ebft t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb n\u01a1i n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng CDN<\/a>, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y nhi\u1ec1u file\/t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb c\u00f9ng ngu\u1ed3n – \u0111\u00e2y c\u0169ng l\u00e0 m\u1ed9t c\u00e1ch \u0111\u1ec3 bi\u1ebft CDN c\u1ee7a b\u1ea1n \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh ch\u00ednh x\u00e1c hay ch\u01b0a.<\/p>\n\n\n<\/div><\/div><\/div>\n\n\n4. K\u00edch c\u1ee1 file<\/h3>\n\n\nC\u00e1i t\u00ean n\u00f3i l\u00ean t\u1ea5t c\u1ea3, \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean. T\u1ed5ng k\u00edch c\u1ee1 file c\u1ee7a t\u1ea5t c\u1ea3 c\u00e1c y\u00eau c\u1ea7u t\u1ea1o th\u00e0nh T\u1ed5ng dung l\u01b0\u1ee3ng trang<\/strong>. Gi\u00e1 tr\u1ecb n\u00e0y c\u00e0ng nh\u1ecf, trang c\u1ee7a b\u1ea1n c\u00e0ng t\u1ea3i nhanh h\u01a1n.\n<\/figure>\n\n\n C\u1ed9t k\u00edch c\u1ee1 file trong b\u1ea3ng Waterfall<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n th\u1ea5y file c\u00f3 k\u00edch c\u1ee1 l\u1edbn (th\u01b0\u1eddng hay x\u1ea3y ra v\u1edbi \u1ea3nh, file \u00e2m thanh, video), b\u1ea1n c\u1ea7n \u01b0u ti\u00ean s\u1eeda n\u00f3 tr\u01b0\u1edbc, tr\u01b0\u1edbc khi t\u00ecm hi\u1ec3u c\u00e1c ph\u1ea7n ti\u1ebfp theo trong b\u1ea3ng Waterfall.<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u c\u00e1c plugin gi\u00fap t\u1ed1i \u01b0u h\u00f3a \u1ea3nh tr\u00ean trang Chim C\u1eaft \u1edf \u0111\u00e2y<\/a>. Ngo\u00e0i ra l\u00e0 ph\u1ea7n l\u00fd thuy\u1ebft v\u1ec1 t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng \u1ea3nh<\/a> n\u1ebfu b\u1ea1n mu\u1ed1n t\u00ecm hi\u1ec3u s\u00e2u h\u01a1n n\u1eefa.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure><\/div>\n\n\nHover qua ph\u1ea7n th\u00f4ng tin size \u0111\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 th\u1ef1c \/ uncompressed v\u00e0 k\u00edch c\u1ee1 \u0111\u00e3 \u0111\u01b0\u1ee3c n\u00e9n (n\u1ebfu n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng n\u00e9n \/ compressed, trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y ch\u1ee7 y\u1ebfu l\u00e0 file CSS v\u00e0 JS).<\/p>\n<\/div><\/div><\/div>\n\n\n5. Th\u1eddi gian t\u1ea3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 ph\u1ea7n tr\u00ean b\u1ea3ng Waterfall cho bi\u1ebft th\u1eddi gian t\u1ea3i c\u1ee5 th\u1ec3 c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n, y\u00eau c\u1ea7u tr\u00ean trang.<\/p>\n\n\n\u0110\u00e2y s\u1ebd l\u00e0 n\u01a1i b\u1ea1n c\u1ea7n b\u1ecf nhi\u1ec1u th\u1eddi gian t\u00ecm hi\u1ec3u nh\u1ea5t<\/strong> trong b\u1ea3ng Waterfall!<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00f4 h\u00ecnh thanh x\u1ebfp d\u1ea1ng th\u00e1c m\u00f4 t\u1ea3 c\u00e1ch trang c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 – c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 ph\u1ea7n l\u1edbn \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n trong khu v\u1ef1c n\u00e0y. Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u c\u1ee5 th\u1ec3 h\u01a1n trong ph\u1ea7n n\u00f3i v\u1ec1 Request timings.<\/p>\n\n\n<\/span>Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i<\/span><\/h2>\n\n\nClick v\u00e0o y\u00eau c\u1ea7u s\u1ebd ti\u1ebft l\u1ed9 th\u00f4ng tin ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i (Request\/Response header). Ch\u00fang bao g\u1ed3m th\u00f4ng tin \u0111a d\u1ea1ng, \u0111\u1ea7y \u0111\u1ee7 li\u00ean quan \u0111\u1ebfn c\u00e1ch t\u00e0i nguy\u00ean c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c ph\u1ee5c v\u1ee5.<\/p>\n\n\nCh\u00fang t\u00f4i d\u1ef1 \u0111\u1ecbnh t\u00ecm hi\u1ec3u ch\u1ee7 \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i chi ti\u1ebft h\u01a1n trong b\u00e0i vi\u1ebft kh\u00e1c. Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang t\u00f4i ch\u1ec9 tr\u00ecnh b\u00e0y ng\u1eafn g\u1ecdn m\u1ed9t s\u1ed1 m\u1ee5c ch\u00ednh trong m\u1ed7i ph\u1ea7n:<\/p>\n\n\nTi\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u<\/h3>\n\n\nCh\u00fang l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server. V\u1edbi ng\u01b0\u1eddi m\u1edbi, th\u01b0\u1eddng b\u1ea1n kh\u00f4ng c\u00f3 g\u00ec \u0111\u1ec3 l\u00e0m trong ph\u1ea7n ti\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u l\u00e0 ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server<\/figcaption><\/figure>\n<\/p>\n\n\nTi\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i<\/h3>\n\n\nPh\u1ea3n h\u1ed3i l\u00e0 nh\u1eefng ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i, v\u00e0 \u0111\u00f4i khi l\u00e0 ch\u00eca kh\u00f3a trong vi\u1ec7c ch\u1ea9n \u0111o\u00e1n c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i cho tr\u00ecnh duy\u1ec7t<\/figcaption><\/figure>\n<\/p>\n\n\nV\u1ec1 c\u01a1 b\u1ea3n, ch\u00fang bi\u1ec3u th\u1ecb c\u1ea5u h\u00ecnh, c\u00e0i \u0111\u1eb7t, ho\u1eb7c thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c y\u00eau c\u1ea7u.<\/p>\n\n\nV\u1edbi ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i, b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3:<\/p>\n\n\n\u0110\u01b0\u1ee3c n\u00e9n hay l\u00e0 kh\u00f4ng (v\u00ed d\u1ee5 gzip)<\/li>Cache<\/li>\u0110\u01b0\u1ee3c ph\u1ee5c v\u1ee5 th\u00f4ng qua CDN (hit\/miss\/revalidated)<\/li>Keep-Alive \u0111\u01b0\u1ee3c b\u1eadt<\/li>Ph\u1ee5c v\u1ee5 th\u00f4ng qua HTTP\/2<\/li>Chuy\u1ec3n h\u01b0\u1edbng n\u1ed9i b\u1ed9 (v\u00ed d\u1ee5 HGST)<\/li><\/ul>\n\n\n\nM\u1eb9o: N\u1ebfu b\u00e1o c\u00e1o GTmetrix cho th\u1ea5y b\u1ea1n c\u00f3 \u0111i\u1ec3m k\u00e9m cho nh\u1eefng khuy\u1ebfn ngh\u1ecb \u1edf tr\u00ean, ki\u1ec3m tra ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i s\u1ebd c\u00f3 kh\u1ea3 n\u0103ng ti\u1ebft l\u1ed9 nhi\u1ec1u chi ti\u1ebft gi\u00fap b\u1ea1n bi\u1ebft l\u00fd do v\u00ec sao.<\/p>\n<\/div><\/div><\/div>\n\n\n<\/span>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/span><\/h2>\n\n\nH\u00e3y c\u00f9ng quan s\u00e1t b\u1ea3ng Waterfall t\u1ed1i gi\u1ea3n d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n s\u1ebd ngay l\u1eadp t\u1ee9c \u0111\u1ec3 \u00fd th\u1ea5y t\u1eebng y\u00eau c\u1ea7u c\u00f3 m\u1ed9t b\u1ed9 thanh m\u00e0u t\u01b0\u01a1ng \u1ee9ng \u1edf b\u00ean ph\u1ea3i.<\/p>\n\n\nN\u00f3i ng\u1eafn g\u1ecdn th\u00ec t\u1eebng m\u00e0u \u0111\u1ea1i di\u1ec7n cho m\u1ed9t ph\u1ea7n kh\u00e1c nhau trong qu\u00e1 tr\u00ecnh t\u1ea3i c\u1ee7a m\u1ed9t ngu\u1ed3n c\u1ee5 th\u1ec3.<\/p>\n\n\nCh\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng m\u00e0u ngay sau \u0111\u00e2y:<\/p>\n\n\nM\u00e0u n\u00e2u – ch\u1eb7n<\/h3>\n\n\nCh\u1eb7n (blocking) l\u00e0 th\u1eddi gian m\u00e0 y\u00eau c\u1ea7u ph\u1ea3i \u0111\u1ee3i trong h\u00e0ng ch\u1edd tr\u00ecnh duy\u1ec7t (browser’s queue) \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u kh\u1edfi \u0111\u1ed9ng m\u1ed9t y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ch\u1eb7n ng\u0103n c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo \u0111\u01b0\u1ee3c x\u1eed l\u00fd<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00f9ng nhau g\u00e2y ra th\u1eddi gian ch\u1eb7n bao g\u1ed3m:<\/p>\n\n\nCh\u1edd \u0111\u1ee3i k\u1ebft n\u1ed1i c\u00f3 s\u1eb5n.<\/li>T\u1ea3i\/th\u1ef1c thi JavaScript ho\u1eb7c CSS (m\u1eb7c d\u00f9 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u00e3 th\u00f4ng minh h\u01a1n trong vi\u1ec7c t\u1ed1i thi\u1ec3u h\u00f3a ch\u00fang).<\/li>Th\u1eddi gian k\u1ebft n\u1ed1i SSL (th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian k\u1ebft n\u1ed1i \/ connection time)<\/li>X\u00e1c th\u1ef1c HTTP (y\u00eau c\u1ea7u b\u1ed5 sung c\u1ea7n thi\u1ebft \u0111\u1ec3 thi\u1ebft l\u1eadp x\u00e1c th\u1ef1c).<\/li><\/ul>\n\n\nM\u00e0u xanh x\u00e1m – Tra c\u1ee9u DNS<\/h3>\n\n\nTr\u01b0\u1edbc khi k\u1ebft n\u1ed1i \u0111\u1ebfn server \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh, hostname c\u1ea7n ph\u00e2n gi\u1ea3i th\u00e0nh IP – \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 t\u00ecm ki\u1ebfm\/tra c\u1ee9u DNS<\/a> (lookup).\n<\/figure>\n\n\n Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\nM\u00e0u xanh l\u00e1 c\u00e2y – K\u1ebft n\u1ed1i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n<\/figure><\/div>\n\n\nL\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
V\u00ec b\u1ea3ng Waterfall h\u00ecnh \u1ea3nh h\u00f3a h\u00e0nh vi t\u1ea3i v\u1ec1 n\u00ean b\u1ea1n nh\u00ecn \u0111\u01b0\u1ee3c chi ti\u1ebft c\u00e1ch c\u00e1c y\u00eau c\u1ea7u download v\u1ec1 theo th\u1ee9 t\u1ef1. Th\u1eddi gian th\u1ef1c thi c\u1ee7a c\u00e1c y\u00eau c\u1ea7u c\u0169ng \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb, v\u1edbi \u0111\u1ed9 d\u00e0i thanh thay \u0111\u1ed5i t\u01b0\u01a1ng \u1ee9ng v\u1edbi \u0111\u1ed9 d\u00e0i c\u1ee7a t\u1eebng y\u00eau c\u1ea7u, l\u01b0\u1ee3t t\u1ea3i, v\u00e0\/ho\u1eb7c th\u1eddi gian th\u1ef1c thi.<\/p>\n\n\n
T\u1ea5t c\u1ea3 d\u1eef li\u1ec7u n\u00e0y h\u01b0\u1edbng \u0111\u1ebfn vi\u1ec7c h\u1ed7 tr\u1ee3 gi\u1ea3i quy\u1ebft c\u00e1c r\u1eafc r\u1ed1i v\u1ec1 hi\u1ec7u su\u1ea5t (t\u1ed1c \u0111\u1ed9 website) c\u0169ng nh\u01b0 c\u00e1c v\u1ea5n \u0111\u1ec1 c\u1ee7a trang n\u00f3i chung.<\/p>\n\n\n
Th\u1ef1c s\u1ef1 l\u00e0 t\u1ed5ng th\u1ec3 trang th\u00ec c\u00f2n c\u00f3 r\u1ea5t nhi\u1ec1u th\u1ee9 kh\u00e1c n\u1eefa, nh\u01b0ng n\u1ebfu b\u1ea1n s\u1eafp x\u1ebfp c\u00e1c th\u1ee9 theo t\u1eebng ph\u1ea7n th\u00ec n\u00f3 c\u0169ng kh\u00f4ng qu\u00e1 t\u1ec7 \u0111\u00e2u.<\/p>\n\n\n
Ch\u00fang ta s\u1ebd b\u1eaft \u0111\u1ea7u v\u1edbi vi\u1ec7c xem x\u00e9t t\u1eebng ph\u1ea7n, d\u00f2ng v\u00e0 m\u00e0u s\u1eafc c\u00f3 \u00fd ngh\u0129a nh\u01b0 th\u1ebf n\u00e0o.<\/p>\n\n\n
B\u1ea3ng Waterfall \u0111\u01b0\u1ee3c chia th\u00e0nh c\u00e1c c\u1ed9t – v\u00ed d\u1ee5 nh\u01b0 h\u00ecnh b\u00ean d\u01b0\u1edbi b\u1ea1n th\u1ea5y n\u0103m c\u1ed9t:\n<\/figure>\n\n\n C\u00e1c c\u1ed9t trong b\u1ea3ng Waterfall: t\u00ean file, m\u00e3 tr\u1ea1ng th\u00e1i, file g\u1ed1c, k\u00edch c\u1ee1 file, th\u1eddi gian t\u1ea3i trong timeline (d\u00f2ng th\u1eddi gian)<\/figcaption><\/figure>\n<\/p>\n\n\nD\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng g\u00ec b\u1ea1n s\u1ebd th\u1ea5y, nh\u00ecn t\u1eeb tr\u00e1i qua ph\u1ea3i:<\/p>\n\n\n1. T\u00ean file<\/h3>\n\n\n\u0110\u00e2y l\u00e0 t\u00ean c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c t\u1ea3i b\u1edfi tr\u00ecnh duy\u1ec7t web. Trong b\u1ea3ng Waterfall, n\u00f3 bao g\u1ed3m ti\u1ec1n t\u1ed1 HTTP – th\u01b0\u1eddng l\u00e0 GET ho\u1eb7c POST (n\u00f3i chung b\u1ea1n kh\u00f4ng c\u1ea7n lo l\u1eafng \u0111\u1ebfn ti\u1ec1n t\u1ed1 n\u00e0y).\n<\/figure>\n\n\n T\u00ean file c\u1ee7a c\u00e1c t\u00e0i nguy\u00ean tr\u00ean trang web c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb trong c\u1ed9t \u0111\u1ea7u ti\u00ean<\/figcaption><\/figure>\n<\/p>\n\n\n\u0110\u00f4i khi tr\u00f4ng ch\u00fang kh\u00e1 b\u1eeba b\u1ed9n v\u00e0 \u0111\u00e1ng s\u1ee3. B\u1ea1n c\u1ed1 g\u1eafng \u0111\u1eebng qu\u00e1 b\u1eadn t\u00e2m v\u1ec1 n\u00f3. Trong th\u1ef1c t\u1ebf, b\u1ea1n c\u00f3 th\u1ec3 kh\u00f4ng nh\u1ea5t thi\u1ebft ph\u1ea3i bi\u1ebft t\u1eebng file n\u00e0y l\u00e0 g\u00ec ngay l\u1eadp t\u1ee9c.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nHover chu\u1ed9t qua t\u00ean file s\u1ebd gi\u00fap b\u1ea1n bi\u1ebft \u0111\u01b0\u1ee3c \u0111\u01b0\u1eddng d\u1eabn \u0111\u1ea7y \u0111\u1ee7 (full path) c\u1ee7a file. Ctrl + click s\u1ebd t\u1ea3i file tr\u00ean m\u1ed9t tab kh\u00e1c. \u0110i\u1ec1u n\u00e0y c\u00f3 \u00edch trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n mu\u1ed1n xem ch\u00ednh x\u00e1c file \u0111ang \u0111\u01b0\u1ee3c tham chi\u1ebfu l\u00e0 g\u00ec.<\/p>\n<\/div><\/div><\/div>\n\n\nKhi duy\u1ec7t qua danh s\u00e1ch, b\u1ea1n n\u00ean t\u1eadp trung v\u00e0o ph\u1ea7n \u0111u\u00f4i m\u1edf r\u1ed9ng c\u1ee7a file. N\u1ebfu file c\u00f3 \u0111u\u00f4i “.jpg” v\u00e0 “.png” s\u1ebd l\u00e0 c\u00e1c t\u00e0i nguy\u00ean \u1ea3nh, .css l\u00e0 t\u00e0i nguy\u00ean stylesheets. File “.js” l\u00e0 JavaScript, v\u00e2n v\u00e2n.<\/p>\n\n\nNgo\u00e0i ra b\u1ea1n n\u00ean \u0111\u1ec3 \u00fd c\u00e1c t\u1eeb kh\u00f3a trong t\u00ean file, \u0111i\u1ec1u n\u00e0y gi\u00fap b\u1ea1n ph\u00e1t hi\u1ec7n ch\u00fang c\u00f3 ngu\u1ed3n g\u1ed1c t\u1eeb \u0111\u00e2u.<\/p>\n\n\n<\/figure>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 ph\u00e1t hi\u1ec7n ra plugin n\u00e0o \u0111\u1ea5y l\u00e0 nguy\u00ean nh\u00e2n g\u00e2y ch\u1eadm website b\u1eb1ng c\u00e1ch nh\u00ecn v\u00e0o t\u00ean file – trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y l\u00e0 plugin JetPack<\/a>.<\/p>\n\n\nL\u1ea5y v\u00ed d\u1ee5, n\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng WordPress<\/a>, b\u1ea1n c\u00f3 th\u1ec3 nh\u1eadn ra t\u00ean c\u1ee7a plugin m\u00e0 b\u1ea1n \u0111\u00e3 c\u00e0i, ho\u1eb7c t\u00ean c\u1ee7a giao di\u1ec7n b\u1ea1n \u0111ang d\u00f9ng.<\/p>\n\n\n2. Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP<\/h3>\n\n\nTr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP t\u1ea1o th\u00e0nh m\u00e3 tr\u1ea1ng th\u00e1i (status code) v\u00e0 th\u00f4ng b\u00e1o m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecdc \u0111\u01b0\u1ee3c (v\u00ed d\u1ee5 l\u1ed7i 404 kh\u00f4ng t\u00ecm th\u1ea5y trang). Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i \u0111\u01b0\u1ee3c tr\u1ea3 v\u1ec1 t\u1eeb m\u00e1y ch\u1ee7 v\u00e0 n\u00f3i cho tr\u00ecnh duy\u1ec7t bi\u1ebft li\u1ec7u y\u00eau c\u1ea7u nh\u1eafm \u0111\u1ebfn t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3 th\u00e0nh c\u00f4ng hay l\u00e0 kh\u00f4ng.<\/p>\n\n\nY\u00eau c\u1ea7u th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 1xx\/2xx\/3xx<\/strong>\n<\/figure>\n\n\n M\u00e3 tr\u1ea1ng th\u00e1i c\u1ee7a website n\u00ean ch\u1ee7 y\u1ebfu l\u00e0 200<\/figcaption><\/figure>\n<\/p>\n\n\n1xx<\/strong> – Th\u00f4ng tin – b\u1ea1n hi\u1ebfm khi th\u1ea5y n\u00f3 trong b\u1ea3ng Waterfall<\/li>2xx<\/strong> – Th\u00e0nh c\u00f4ng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c x\u00e1c nh\u1eadn l\u00e0 \u0111\u00e3 th\u00e0nh c\u00f4ng (h\u1ea7u h\u1ebft s\u1ebd l\u00e0 m\u00e3 200)<\/li>3xx<\/strong> – Chuy\u1ec3n h\u01b0\u1edbng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c chuy\u1ec3n h\u01b0\u1edbng (chuy\u1ec3n h\u01b0\u1edbng 301<\/a> l\u00e0 ph\u1ed5 bi\u1ebfn nh\u1ea5t)<\/li><\/ul>\n\n\nY\u00eau c\u1ea7u kh\u00f4ng th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 4xx\/5xx<\/strong>\n<\/figure>\n\n\n B\u1ea3ng Waterfall s\u1ebd nhanh ch\u00f3ng ph\u00e1t hi\u1ec7n ra c\u00e1c y\u00eau c\u1ea7u b\u1ecb l\u1ed7i tr\u00ean trang<\/figcaption><\/figure>\n<\/p>\n\n\n4xx<\/strong> – l\u1ed7i client – \u0111\u00e2y l\u00e0 l\u1ed7i di\u1ec5n ra khi th\u1ef1c hi\u1ec7n y\u00eau c\u1ea7u (l\u1ed7i 404 file kh\u00f4ng t\u00ecm th\u1ea5y, l\u1ed7i 401 truy c\u1eadp kh\u00f4ng \u0111\u01b0\u1ee3c ph\u00e9p, l\u1ed7i 403 b\u1ecb c\u1ea5m, v\u00e2n v\u00e2n)<\/li>5xx<\/strong> – l\u1ed7i server – m\u00e1y ch\u1ee7 g\u1eb7p th\u1ea5t b\u1ea1i khi x\u1eed l\u00fd y\u00eau c\u1ea7u (l\u1ed7i m\u00e1y ch\u1ee7 n\u1ed9i b\u1ed9 500, l\u1ed7i d\u1ecbch v\u1ee5 kh\u00f4ng kh\u1ea3 d\u1ee5ng 503, v\u00e2n v\u00e2n)<\/li><\/ul>\n\n\n3. File g\u1ed1c<\/h3>\n\n\n\u0110\u00e2y l\u00e0 v\u1ecb tr\u00ed m\u00e0 file \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng nhi\u1ec1u t\u00e0i nguy\u00ean t\u1eeb b\u00ean th\u1ee9 ba (ch\u1eb3ng h\u1ea1n m\u00e3 nh\u00fang YouTube<\/a>, widget c\u1ee7a Facebook, v\u00e2n v\u00e2n) th\u00ec \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd th\u1ea5y hostname c\u1ee7a ch\u00fang kh\u00f4ng \u0111\u1ebfn t\u1eeb host g\u1ed1c c\u1ee7a b\u1ea1n. <\/figure>\n\n\n File g\u1ed1c cho b\u1ea1n bi\u1ebft t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb n\u01a1i n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng CDN<\/a>, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y nhi\u1ec1u file\/t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb c\u00f9ng ngu\u1ed3n – \u0111\u00e2y c\u0169ng l\u00e0 m\u1ed9t c\u00e1ch \u0111\u1ec3 bi\u1ebft CDN c\u1ee7a b\u1ea1n \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh ch\u00ednh x\u00e1c hay ch\u01b0a.<\/p>\n\n\n<\/div><\/div><\/div>\n\n\n4. K\u00edch c\u1ee1 file<\/h3>\n\n\nC\u00e1i t\u00ean n\u00f3i l\u00ean t\u1ea5t c\u1ea3, \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean. T\u1ed5ng k\u00edch c\u1ee1 file c\u1ee7a t\u1ea5t c\u1ea3 c\u00e1c y\u00eau c\u1ea7u t\u1ea1o th\u00e0nh T\u1ed5ng dung l\u01b0\u1ee3ng trang<\/strong>. Gi\u00e1 tr\u1ecb n\u00e0y c\u00e0ng nh\u1ecf, trang c\u1ee7a b\u1ea1n c\u00e0ng t\u1ea3i nhanh h\u01a1n.\n<\/figure>\n\n\n C\u1ed9t k\u00edch c\u1ee1 file trong b\u1ea3ng Waterfall<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n th\u1ea5y file c\u00f3 k\u00edch c\u1ee1 l\u1edbn (th\u01b0\u1eddng hay x\u1ea3y ra v\u1edbi \u1ea3nh, file \u00e2m thanh, video), b\u1ea1n c\u1ea7n \u01b0u ti\u00ean s\u1eeda n\u00f3 tr\u01b0\u1edbc, tr\u01b0\u1edbc khi t\u00ecm hi\u1ec3u c\u00e1c ph\u1ea7n ti\u1ebfp theo trong b\u1ea3ng Waterfall.<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u c\u00e1c plugin gi\u00fap t\u1ed1i \u01b0u h\u00f3a \u1ea3nh tr\u00ean trang Chim C\u1eaft \u1edf \u0111\u00e2y<\/a>. Ngo\u00e0i ra l\u00e0 ph\u1ea7n l\u00fd thuy\u1ebft v\u1ec1 t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng \u1ea3nh<\/a> n\u1ebfu b\u1ea1n mu\u1ed1n t\u00ecm hi\u1ec3u s\u00e2u h\u01a1n n\u1eefa.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure><\/div>\n\n\nHover qua ph\u1ea7n th\u00f4ng tin size \u0111\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 th\u1ef1c \/ uncompressed v\u00e0 k\u00edch c\u1ee1 \u0111\u00e3 \u0111\u01b0\u1ee3c n\u00e9n (n\u1ebfu n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng n\u00e9n \/ compressed, trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y ch\u1ee7 y\u1ebfu l\u00e0 file CSS v\u00e0 JS).<\/p>\n<\/div><\/div><\/div>\n\n\n5. Th\u1eddi gian t\u1ea3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 ph\u1ea7n tr\u00ean b\u1ea3ng Waterfall cho bi\u1ebft th\u1eddi gian t\u1ea3i c\u1ee5 th\u1ec3 c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n, y\u00eau c\u1ea7u tr\u00ean trang.<\/p>\n\n\n\u0110\u00e2y s\u1ebd l\u00e0 n\u01a1i b\u1ea1n c\u1ea7n b\u1ecf nhi\u1ec1u th\u1eddi gian t\u00ecm hi\u1ec3u nh\u1ea5t<\/strong> trong b\u1ea3ng Waterfall!<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00f4 h\u00ecnh thanh x\u1ebfp d\u1ea1ng th\u00e1c m\u00f4 t\u1ea3 c\u00e1ch trang c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 – c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 ph\u1ea7n l\u1edbn \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n trong khu v\u1ef1c n\u00e0y. Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u c\u1ee5 th\u1ec3 h\u01a1n trong ph\u1ea7n n\u00f3i v\u1ec1 Request timings.<\/p>\n\n\n<\/span>Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i<\/span><\/h2>\n\n\nClick v\u00e0o y\u00eau c\u1ea7u s\u1ebd ti\u1ebft l\u1ed9 th\u00f4ng tin ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i (Request\/Response header). Ch\u00fang bao g\u1ed3m th\u00f4ng tin \u0111a d\u1ea1ng, \u0111\u1ea7y \u0111\u1ee7 li\u00ean quan \u0111\u1ebfn c\u00e1ch t\u00e0i nguy\u00ean c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c ph\u1ee5c v\u1ee5.<\/p>\n\n\nCh\u00fang t\u00f4i d\u1ef1 \u0111\u1ecbnh t\u00ecm hi\u1ec3u ch\u1ee7 \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i chi ti\u1ebft h\u01a1n trong b\u00e0i vi\u1ebft kh\u00e1c. Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang t\u00f4i ch\u1ec9 tr\u00ecnh b\u00e0y ng\u1eafn g\u1ecdn m\u1ed9t s\u1ed1 m\u1ee5c ch\u00ednh trong m\u1ed7i ph\u1ea7n:<\/p>\n\n\nTi\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u<\/h3>\n\n\nCh\u00fang l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server. V\u1edbi ng\u01b0\u1eddi m\u1edbi, th\u01b0\u1eddng b\u1ea1n kh\u00f4ng c\u00f3 g\u00ec \u0111\u1ec3 l\u00e0m trong ph\u1ea7n ti\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u l\u00e0 ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server<\/figcaption><\/figure>\n<\/p>\n\n\nTi\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i<\/h3>\n\n\nPh\u1ea3n h\u1ed3i l\u00e0 nh\u1eefng ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i, v\u00e0 \u0111\u00f4i khi l\u00e0 ch\u00eca kh\u00f3a trong vi\u1ec7c ch\u1ea9n \u0111o\u00e1n c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i cho tr\u00ecnh duy\u1ec7t<\/figcaption><\/figure>\n<\/p>\n\n\nV\u1ec1 c\u01a1 b\u1ea3n, ch\u00fang bi\u1ec3u th\u1ecb c\u1ea5u h\u00ecnh, c\u00e0i \u0111\u1eb7t, ho\u1eb7c thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c y\u00eau c\u1ea7u.<\/p>\n\n\nV\u1edbi ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i, b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3:<\/p>\n\n\n\u0110\u01b0\u1ee3c n\u00e9n hay l\u00e0 kh\u00f4ng (v\u00ed d\u1ee5 gzip)<\/li>Cache<\/li>\u0110\u01b0\u1ee3c ph\u1ee5c v\u1ee5 th\u00f4ng qua CDN (hit\/miss\/revalidated)<\/li>Keep-Alive \u0111\u01b0\u1ee3c b\u1eadt<\/li>Ph\u1ee5c v\u1ee5 th\u00f4ng qua HTTP\/2<\/li>Chuy\u1ec3n h\u01b0\u1edbng n\u1ed9i b\u1ed9 (v\u00ed d\u1ee5 HGST)<\/li><\/ul>\n\n\n\nM\u1eb9o: N\u1ebfu b\u00e1o c\u00e1o GTmetrix cho th\u1ea5y b\u1ea1n c\u00f3 \u0111i\u1ec3m k\u00e9m cho nh\u1eefng khuy\u1ebfn ngh\u1ecb \u1edf tr\u00ean, ki\u1ec3m tra ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i s\u1ebd c\u00f3 kh\u1ea3 n\u0103ng ti\u1ebft l\u1ed9 nhi\u1ec1u chi ti\u1ebft gi\u00fap b\u1ea1n bi\u1ebft l\u00fd do v\u00ec sao.<\/p>\n<\/div><\/div><\/div>\n\n\n<\/span>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/span><\/h2>\n\n\nH\u00e3y c\u00f9ng quan s\u00e1t b\u1ea3ng Waterfall t\u1ed1i gi\u1ea3n d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n s\u1ebd ngay l\u1eadp t\u1ee9c \u0111\u1ec3 \u00fd th\u1ea5y t\u1eebng y\u00eau c\u1ea7u c\u00f3 m\u1ed9t b\u1ed9 thanh m\u00e0u t\u01b0\u01a1ng \u1ee9ng \u1edf b\u00ean ph\u1ea3i.<\/p>\n\n\nN\u00f3i ng\u1eafn g\u1ecdn th\u00ec t\u1eebng m\u00e0u \u0111\u1ea1i di\u1ec7n cho m\u1ed9t ph\u1ea7n kh\u00e1c nhau trong qu\u00e1 tr\u00ecnh t\u1ea3i c\u1ee7a m\u1ed9t ngu\u1ed3n c\u1ee5 th\u1ec3.<\/p>\n\n\nCh\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng m\u00e0u ngay sau \u0111\u00e2y:<\/p>\n\n\nM\u00e0u n\u00e2u – ch\u1eb7n<\/h3>\n\n\nCh\u1eb7n (blocking) l\u00e0 th\u1eddi gian m\u00e0 y\u00eau c\u1ea7u ph\u1ea3i \u0111\u1ee3i trong h\u00e0ng ch\u1edd tr\u00ecnh duy\u1ec7t (browser’s queue) \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u kh\u1edfi \u0111\u1ed9ng m\u1ed9t y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ch\u1eb7n ng\u0103n c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo \u0111\u01b0\u1ee3c x\u1eed l\u00fd<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00f9ng nhau g\u00e2y ra th\u1eddi gian ch\u1eb7n bao g\u1ed3m:<\/p>\n\n\nCh\u1edd \u0111\u1ee3i k\u1ebft n\u1ed1i c\u00f3 s\u1eb5n.<\/li>T\u1ea3i\/th\u1ef1c thi JavaScript ho\u1eb7c CSS (m\u1eb7c d\u00f9 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u00e3 th\u00f4ng minh h\u01a1n trong vi\u1ec7c t\u1ed1i thi\u1ec3u h\u00f3a ch\u00fang).<\/li>Th\u1eddi gian k\u1ebft n\u1ed1i SSL (th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian k\u1ebft n\u1ed1i \/ connection time)<\/li>X\u00e1c th\u1ef1c HTTP (y\u00eau c\u1ea7u b\u1ed5 sung c\u1ea7n thi\u1ebft \u0111\u1ec3 thi\u1ebft l\u1eadp x\u00e1c th\u1ef1c).<\/li><\/ul>\n\n\nM\u00e0u xanh x\u00e1m – Tra c\u1ee9u DNS<\/h3>\n\n\nTr\u01b0\u1edbc khi k\u1ebft n\u1ed1i \u0111\u1ebfn server \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh, hostname c\u1ea7n ph\u00e2n gi\u1ea3i th\u00e0nh IP – \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 t\u00ecm ki\u1ebfm\/tra c\u1ee9u DNS<\/a> (lookup).\n<\/figure>\n\n\n Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\nM\u00e0u xanh l\u00e1 c\u00e2y – K\u1ebft n\u1ed1i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n<\/figure><\/div>\n\n\nL\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
C\u00e1c c\u1ed9t trong b\u1ea3ng Waterfall: t\u00ean file, m\u00e3 tr\u1ea1ng th\u00e1i, file g\u1ed1c, k\u00edch c\u1ee1 file, th\u1eddi gian t\u1ea3i trong timeline (d\u00f2ng th\u1eddi gian)<\/figcaption><\/figure>\n<\/p>\n\n\n
D\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng g\u00ec b\u1ea1n s\u1ebd th\u1ea5y, nh\u00ecn t\u1eeb tr\u00e1i qua ph\u1ea3i:<\/p>\n\n\n
\u0110\u00e2y l\u00e0 t\u00ean c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c t\u1ea3i b\u1edfi tr\u00ecnh duy\u1ec7t web. Trong b\u1ea3ng Waterfall, n\u00f3 bao g\u1ed3m ti\u1ec1n t\u1ed1 HTTP – th\u01b0\u1eddng l\u00e0 GET ho\u1eb7c POST (n\u00f3i chung b\u1ea1n kh\u00f4ng c\u1ea7n lo l\u1eafng \u0111\u1ebfn ti\u1ec1n t\u1ed1 n\u00e0y).\n<\/figure>\n\n\n T\u00ean file c\u1ee7a c\u00e1c t\u00e0i nguy\u00ean tr\u00ean trang web c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb trong c\u1ed9t \u0111\u1ea7u ti\u00ean<\/figcaption><\/figure>\n<\/p>\n\n\n\u0110\u00f4i khi tr\u00f4ng ch\u00fang kh\u00e1 b\u1eeba b\u1ed9n v\u00e0 \u0111\u00e1ng s\u1ee3. B\u1ea1n c\u1ed1 g\u1eafng \u0111\u1eebng qu\u00e1 b\u1eadn t\u00e2m v\u1ec1 n\u00f3. Trong th\u1ef1c t\u1ebf, b\u1ea1n c\u00f3 th\u1ec3 kh\u00f4ng nh\u1ea5t thi\u1ebft ph\u1ea3i bi\u1ebft t\u1eebng file n\u00e0y l\u00e0 g\u00ec ngay l\u1eadp t\u1ee9c.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nHover chu\u1ed9t qua t\u00ean file s\u1ebd gi\u00fap b\u1ea1n bi\u1ebft \u0111\u01b0\u1ee3c \u0111\u01b0\u1eddng d\u1eabn \u0111\u1ea7y \u0111\u1ee7 (full path) c\u1ee7a file. Ctrl + click s\u1ebd t\u1ea3i file tr\u00ean m\u1ed9t tab kh\u00e1c. \u0110i\u1ec1u n\u00e0y c\u00f3 \u00edch trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n mu\u1ed1n xem ch\u00ednh x\u00e1c file \u0111ang \u0111\u01b0\u1ee3c tham chi\u1ebfu l\u00e0 g\u00ec.<\/p>\n<\/div><\/div><\/div>\n\n\nKhi duy\u1ec7t qua danh s\u00e1ch, b\u1ea1n n\u00ean t\u1eadp trung v\u00e0o ph\u1ea7n \u0111u\u00f4i m\u1edf r\u1ed9ng c\u1ee7a file. N\u1ebfu file c\u00f3 \u0111u\u00f4i “.jpg” v\u00e0 “.png” s\u1ebd l\u00e0 c\u00e1c t\u00e0i nguy\u00ean \u1ea3nh, .css l\u00e0 t\u00e0i nguy\u00ean stylesheets. File “.js” l\u00e0 JavaScript, v\u00e2n v\u00e2n.<\/p>\n\n\nNgo\u00e0i ra b\u1ea1n n\u00ean \u0111\u1ec3 \u00fd c\u00e1c t\u1eeb kh\u00f3a trong t\u00ean file, \u0111i\u1ec1u n\u00e0y gi\u00fap b\u1ea1n ph\u00e1t hi\u1ec7n ch\u00fang c\u00f3 ngu\u1ed3n g\u1ed1c t\u1eeb \u0111\u00e2u.<\/p>\n\n\n<\/figure>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 ph\u00e1t hi\u1ec7n ra plugin n\u00e0o \u0111\u1ea5y l\u00e0 nguy\u00ean nh\u00e2n g\u00e2y ch\u1eadm website b\u1eb1ng c\u00e1ch nh\u00ecn v\u00e0o t\u00ean file – trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y l\u00e0 plugin JetPack<\/a>.<\/p>\n\n\nL\u1ea5y v\u00ed d\u1ee5, n\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng WordPress<\/a>, b\u1ea1n c\u00f3 th\u1ec3 nh\u1eadn ra t\u00ean c\u1ee7a plugin m\u00e0 b\u1ea1n \u0111\u00e3 c\u00e0i, ho\u1eb7c t\u00ean c\u1ee7a giao di\u1ec7n b\u1ea1n \u0111ang d\u00f9ng.<\/p>\n\n\n2. Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP<\/h3>\n\n\nTr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP t\u1ea1o th\u00e0nh m\u00e3 tr\u1ea1ng th\u00e1i (status code) v\u00e0 th\u00f4ng b\u00e1o m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecdc \u0111\u01b0\u1ee3c (v\u00ed d\u1ee5 l\u1ed7i 404 kh\u00f4ng t\u00ecm th\u1ea5y trang). Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i \u0111\u01b0\u1ee3c tr\u1ea3 v\u1ec1 t\u1eeb m\u00e1y ch\u1ee7 v\u00e0 n\u00f3i cho tr\u00ecnh duy\u1ec7t bi\u1ebft li\u1ec7u y\u00eau c\u1ea7u nh\u1eafm \u0111\u1ebfn t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3 th\u00e0nh c\u00f4ng hay l\u00e0 kh\u00f4ng.<\/p>\n\n\nY\u00eau c\u1ea7u th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 1xx\/2xx\/3xx<\/strong>\n<\/figure>\n\n\n M\u00e3 tr\u1ea1ng th\u00e1i c\u1ee7a website n\u00ean ch\u1ee7 y\u1ebfu l\u00e0 200<\/figcaption><\/figure>\n<\/p>\n\n\n1xx<\/strong> – Th\u00f4ng tin – b\u1ea1n hi\u1ebfm khi th\u1ea5y n\u00f3 trong b\u1ea3ng Waterfall<\/li>2xx<\/strong> – Th\u00e0nh c\u00f4ng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c x\u00e1c nh\u1eadn l\u00e0 \u0111\u00e3 th\u00e0nh c\u00f4ng (h\u1ea7u h\u1ebft s\u1ebd l\u00e0 m\u00e3 200)<\/li>3xx<\/strong> – Chuy\u1ec3n h\u01b0\u1edbng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c chuy\u1ec3n h\u01b0\u1edbng (chuy\u1ec3n h\u01b0\u1edbng 301<\/a> l\u00e0 ph\u1ed5 bi\u1ebfn nh\u1ea5t)<\/li><\/ul>\n\n\nY\u00eau c\u1ea7u kh\u00f4ng th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 4xx\/5xx<\/strong>\n<\/figure>\n\n\n B\u1ea3ng Waterfall s\u1ebd nhanh ch\u00f3ng ph\u00e1t hi\u1ec7n ra c\u00e1c y\u00eau c\u1ea7u b\u1ecb l\u1ed7i tr\u00ean trang<\/figcaption><\/figure>\n<\/p>\n\n\n4xx<\/strong> – l\u1ed7i client – \u0111\u00e2y l\u00e0 l\u1ed7i di\u1ec5n ra khi th\u1ef1c hi\u1ec7n y\u00eau c\u1ea7u (l\u1ed7i 404 file kh\u00f4ng t\u00ecm th\u1ea5y, l\u1ed7i 401 truy c\u1eadp kh\u00f4ng \u0111\u01b0\u1ee3c ph\u00e9p, l\u1ed7i 403 b\u1ecb c\u1ea5m, v\u00e2n v\u00e2n)<\/li>5xx<\/strong> – l\u1ed7i server – m\u00e1y ch\u1ee7 g\u1eb7p th\u1ea5t b\u1ea1i khi x\u1eed l\u00fd y\u00eau c\u1ea7u (l\u1ed7i m\u00e1y ch\u1ee7 n\u1ed9i b\u1ed9 500, l\u1ed7i d\u1ecbch v\u1ee5 kh\u00f4ng kh\u1ea3 d\u1ee5ng 503, v\u00e2n v\u00e2n)<\/li><\/ul>\n\n\n3. File g\u1ed1c<\/h3>\n\n\n\u0110\u00e2y l\u00e0 v\u1ecb tr\u00ed m\u00e0 file \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng nhi\u1ec1u t\u00e0i nguy\u00ean t\u1eeb b\u00ean th\u1ee9 ba (ch\u1eb3ng h\u1ea1n m\u00e3 nh\u00fang YouTube<\/a>, widget c\u1ee7a Facebook, v\u00e2n v\u00e2n) th\u00ec \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd th\u1ea5y hostname c\u1ee7a ch\u00fang kh\u00f4ng \u0111\u1ebfn t\u1eeb host g\u1ed1c c\u1ee7a b\u1ea1n. <\/figure>\n\n\n File g\u1ed1c cho b\u1ea1n bi\u1ebft t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb n\u01a1i n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng CDN<\/a>, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y nhi\u1ec1u file\/t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb c\u00f9ng ngu\u1ed3n – \u0111\u00e2y c\u0169ng l\u00e0 m\u1ed9t c\u00e1ch \u0111\u1ec3 bi\u1ebft CDN c\u1ee7a b\u1ea1n \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh ch\u00ednh x\u00e1c hay ch\u01b0a.<\/p>\n\n\n<\/div><\/div><\/div>\n\n\n4. K\u00edch c\u1ee1 file<\/h3>\n\n\nC\u00e1i t\u00ean n\u00f3i l\u00ean t\u1ea5t c\u1ea3, \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean. T\u1ed5ng k\u00edch c\u1ee1 file c\u1ee7a t\u1ea5t c\u1ea3 c\u00e1c y\u00eau c\u1ea7u t\u1ea1o th\u00e0nh T\u1ed5ng dung l\u01b0\u1ee3ng trang<\/strong>. Gi\u00e1 tr\u1ecb n\u00e0y c\u00e0ng nh\u1ecf, trang c\u1ee7a b\u1ea1n c\u00e0ng t\u1ea3i nhanh h\u01a1n.\n<\/figure>\n\n\n C\u1ed9t k\u00edch c\u1ee1 file trong b\u1ea3ng Waterfall<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n th\u1ea5y file c\u00f3 k\u00edch c\u1ee1 l\u1edbn (th\u01b0\u1eddng hay x\u1ea3y ra v\u1edbi \u1ea3nh, file \u00e2m thanh, video), b\u1ea1n c\u1ea7n \u01b0u ti\u00ean s\u1eeda n\u00f3 tr\u01b0\u1edbc, tr\u01b0\u1edbc khi t\u00ecm hi\u1ec3u c\u00e1c ph\u1ea7n ti\u1ebfp theo trong b\u1ea3ng Waterfall.<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u c\u00e1c plugin gi\u00fap t\u1ed1i \u01b0u h\u00f3a \u1ea3nh tr\u00ean trang Chim C\u1eaft \u1edf \u0111\u00e2y<\/a>. Ngo\u00e0i ra l\u00e0 ph\u1ea7n l\u00fd thuy\u1ebft v\u1ec1 t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng \u1ea3nh<\/a> n\u1ebfu b\u1ea1n mu\u1ed1n t\u00ecm hi\u1ec3u s\u00e2u h\u01a1n n\u1eefa.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure><\/div>\n\n\nHover qua ph\u1ea7n th\u00f4ng tin size \u0111\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 th\u1ef1c \/ uncompressed v\u00e0 k\u00edch c\u1ee1 \u0111\u00e3 \u0111\u01b0\u1ee3c n\u00e9n (n\u1ebfu n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng n\u00e9n \/ compressed, trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y ch\u1ee7 y\u1ebfu l\u00e0 file CSS v\u00e0 JS).<\/p>\n<\/div><\/div><\/div>\n\n\n5. Th\u1eddi gian t\u1ea3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 ph\u1ea7n tr\u00ean b\u1ea3ng Waterfall cho bi\u1ebft th\u1eddi gian t\u1ea3i c\u1ee5 th\u1ec3 c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n, y\u00eau c\u1ea7u tr\u00ean trang.<\/p>\n\n\n\u0110\u00e2y s\u1ebd l\u00e0 n\u01a1i b\u1ea1n c\u1ea7n b\u1ecf nhi\u1ec1u th\u1eddi gian t\u00ecm hi\u1ec3u nh\u1ea5t<\/strong> trong b\u1ea3ng Waterfall!<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00f4 h\u00ecnh thanh x\u1ebfp d\u1ea1ng th\u00e1c m\u00f4 t\u1ea3 c\u00e1ch trang c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 – c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 ph\u1ea7n l\u1edbn \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n trong khu v\u1ef1c n\u00e0y. Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u c\u1ee5 th\u1ec3 h\u01a1n trong ph\u1ea7n n\u00f3i v\u1ec1 Request timings.<\/p>\n\n\n<\/span>Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i<\/span><\/h2>\n\n\nClick v\u00e0o y\u00eau c\u1ea7u s\u1ebd ti\u1ebft l\u1ed9 th\u00f4ng tin ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i (Request\/Response header). Ch\u00fang bao g\u1ed3m th\u00f4ng tin \u0111a d\u1ea1ng, \u0111\u1ea7y \u0111\u1ee7 li\u00ean quan \u0111\u1ebfn c\u00e1ch t\u00e0i nguy\u00ean c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c ph\u1ee5c v\u1ee5.<\/p>\n\n\nCh\u00fang t\u00f4i d\u1ef1 \u0111\u1ecbnh t\u00ecm hi\u1ec3u ch\u1ee7 \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i chi ti\u1ebft h\u01a1n trong b\u00e0i vi\u1ebft kh\u00e1c. Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang t\u00f4i ch\u1ec9 tr\u00ecnh b\u00e0y ng\u1eafn g\u1ecdn m\u1ed9t s\u1ed1 m\u1ee5c ch\u00ednh trong m\u1ed7i ph\u1ea7n:<\/p>\n\n\nTi\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u<\/h3>\n\n\nCh\u00fang l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server. V\u1edbi ng\u01b0\u1eddi m\u1edbi, th\u01b0\u1eddng b\u1ea1n kh\u00f4ng c\u00f3 g\u00ec \u0111\u1ec3 l\u00e0m trong ph\u1ea7n ti\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u l\u00e0 ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server<\/figcaption><\/figure>\n<\/p>\n\n\nTi\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i<\/h3>\n\n\nPh\u1ea3n h\u1ed3i l\u00e0 nh\u1eefng ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i, v\u00e0 \u0111\u00f4i khi l\u00e0 ch\u00eca kh\u00f3a trong vi\u1ec7c ch\u1ea9n \u0111o\u00e1n c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i cho tr\u00ecnh duy\u1ec7t<\/figcaption><\/figure>\n<\/p>\n\n\nV\u1ec1 c\u01a1 b\u1ea3n, ch\u00fang bi\u1ec3u th\u1ecb c\u1ea5u h\u00ecnh, c\u00e0i \u0111\u1eb7t, ho\u1eb7c thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c y\u00eau c\u1ea7u.<\/p>\n\n\nV\u1edbi ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i, b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3:<\/p>\n\n\n\u0110\u01b0\u1ee3c n\u00e9n hay l\u00e0 kh\u00f4ng (v\u00ed d\u1ee5 gzip)<\/li>Cache<\/li>\u0110\u01b0\u1ee3c ph\u1ee5c v\u1ee5 th\u00f4ng qua CDN (hit\/miss\/revalidated)<\/li>Keep-Alive \u0111\u01b0\u1ee3c b\u1eadt<\/li>Ph\u1ee5c v\u1ee5 th\u00f4ng qua HTTP\/2<\/li>Chuy\u1ec3n h\u01b0\u1edbng n\u1ed9i b\u1ed9 (v\u00ed d\u1ee5 HGST)<\/li><\/ul>\n\n\n\nM\u1eb9o: N\u1ebfu b\u00e1o c\u00e1o GTmetrix cho th\u1ea5y b\u1ea1n c\u00f3 \u0111i\u1ec3m k\u00e9m cho nh\u1eefng khuy\u1ebfn ngh\u1ecb \u1edf tr\u00ean, ki\u1ec3m tra ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i s\u1ebd c\u00f3 kh\u1ea3 n\u0103ng ti\u1ebft l\u1ed9 nhi\u1ec1u chi ti\u1ebft gi\u00fap b\u1ea1n bi\u1ebft l\u00fd do v\u00ec sao.<\/p>\n<\/div><\/div><\/div>\n\n\n<\/span>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/span><\/h2>\n\n\nH\u00e3y c\u00f9ng quan s\u00e1t b\u1ea3ng Waterfall t\u1ed1i gi\u1ea3n d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n s\u1ebd ngay l\u1eadp t\u1ee9c \u0111\u1ec3 \u00fd th\u1ea5y t\u1eebng y\u00eau c\u1ea7u c\u00f3 m\u1ed9t b\u1ed9 thanh m\u00e0u t\u01b0\u01a1ng \u1ee9ng \u1edf b\u00ean ph\u1ea3i.<\/p>\n\n\nN\u00f3i ng\u1eafn g\u1ecdn th\u00ec t\u1eebng m\u00e0u \u0111\u1ea1i di\u1ec7n cho m\u1ed9t ph\u1ea7n kh\u00e1c nhau trong qu\u00e1 tr\u00ecnh t\u1ea3i c\u1ee7a m\u1ed9t ngu\u1ed3n c\u1ee5 th\u1ec3.<\/p>\n\n\nCh\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng m\u00e0u ngay sau \u0111\u00e2y:<\/p>\n\n\nM\u00e0u n\u00e2u – ch\u1eb7n<\/h3>\n\n\nCh\u1eb7n (blocking) l\u00e0 th\u1eddi gian m\u00e0 y\u00eau c\u1ea7u ph\u1ea3i \u0111\u1ee3i trong h\u00e0ng ch\u1edd tr\u00ecnh duy\u1ec7t (browser’s queue) \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u kh\u1edfi \u0111\u1ed9ng m\u1ed9t y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ch\u1eb7n ng\u0103n c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo \u0111\u01b0\u1ee3c x\u1eed l\u00fd<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00f9ng nhau g\u00e2y ra th\u1eddi gian ch\u1eb7n bao g\u1ed3m:<\/p>\n\n\nCh\u1edd \u0111\u1ee3i k\u1ebft n\u1ed1i c\u00f3 s\u1eb5n.<\/li>T\u1ea3i\/th\u1ef1c thi JavaScript ho\u1eb7c CSS (m\u1eb7c d\u00f9 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u00e3 th\u00f4ng minh h\u01a1n trong vi\u1ec7c t\u1ed1i thi\u1ec3u h\u00f3a ch\u00fang).<\/li>Th\u1eddi gian k\u1ebft n\u1ed1i SSL (th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian k\u1ebft n\u1ed1i \/ connection time)<\/li>X\u00e1c th\u1ef1c HTTP (y\u00eau c\u1ea7u b\u1ed5 sung c\u1ea7n thi\u1ebft \u0111\u1ec3 thi\u1ebft l\u1eadp x\u00e1c th\u1ef1c).<\/li><\/ul>\n\n\nM\u00e0u xanh x\u00e1m – Tra c\u1ee9u DNS<\/h3>\n\n\nTr\u01b0\u1edbc khi k\u1ebft n\u1ed1i \u0111\u1ebfn server \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh, hostname c\u1ea7n ph\u00e2n gi\u1ea3i th\u00e0nh IP – \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 t\u00ecm ki\u1ebfm\/tra c\u1ee9u DNS<\/a> (lookup).\n<\/figure>\n\n\n Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\nM\u00e0u xanh l\u00e1 c\u00e2y – K\u1ebft n\u1ed1i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n<\/figure><\/div>\n\n\nL\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
T\u00ean file c\u1ee7a c\u00e1c t\u00e0i nguy\u00ean tr\u00ean trang web c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb trong c\u1ed9t \u0111\u1ea7u ti\u00ean<\/figcaption><\/figure>\n<\/p>\n\n\n
\u0110\u00f4i khi tr\u00f4ng ch\u00fang kh\u00e1 b\u1eeba b\u1ed9n v\u00e0 \u0111\u00e1ng s\u1ee3. B\u1ea1n c\u1ed1 g\u1eafng \u0111\u1eebng qu\u00e1 b\u1eadn t\u00e2m v\u1ec1 n\u00f3. Trong th\u1ef1c t\u1ebf, b\u1ea1n c\u00f3 th\u1ec3 kh\u00f4ng nh\u1ea5t thi\u1ebft ph\u1ea3i bi\u1ebft t\u1eebng file n\u00e0y l\u00e0 g\u00ec ngay l\u1eadp t\u1ee9c.<\/p>\n\n\n
M\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nHover chu\u1ed9t qua t\u00ean file s\u1ebd gi\u00fap b\u1ea1n bi\u1ebft \u0111\u01b0\u1ee3c \u0111\u01b0\u1eddng d\u1eabn \u0111\u1ea7y \u0111\u1ee7 (full path) c\u1ee7a file. Ctrl + click s\u1ebd t\u1ea3i file tr\u00ean m\u1ed9t tab kh\u00e1c. \u0110i\u1ec1u n\u00e0y c\u00f3 \u00edch trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n mu\u1ed1n xem ch\u00ednh x\u00e1c file \u0111ang \u0111\u01b0\u1ee3c tham chi\u1ebfu l\u00e0 g\u00ec.<\/p>\n<\/div><\/div><\/div>\n\n\nKhi duy\u1ec7t qua danh s\u00e1ch, b\u1ea1n n\u00ean t\u1eadp trung v\u00e0o ph\u1ea7n \u0111u\u00f4i m\u1edf r\u1ed9ng c\u1ee7a file. N\u1ebfu file c\u00f3 \u0111u\u00f4i “.jpg” v\u00e0 “.png” s\u1ebd l\u00e0 c\u00e1c t\u00e0i nguy\u00ean \u1ea3nh, .css l\u00e0 t\u00e0i nguy\u00ean stylesheets. File “.js” l\u00e0 JavaScript, v\u00e2n v\u00e2n.<\/p>\n\n\nNgo\u00e0i ra b\u1ea1n n\u00ean \u0111\u1ec3 \u00fd c\u00e1c t\u1eeb kh\u00f3a trong t\u00ean file, \u0111i\u1ec1u n\u00e0y gi\u00fap b\u1ea1n ph\u00e1t hi\u1ec7n ch\u00fang c\u00f3 ngu\u1ed3n g\u1ed1c t\u1eeb \u0111\u00e2u.<\/p>\n\n\n<\/figure>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 ph\u00e1t hi\u1ec7n ra plugin n\u00e0o \u0111\u1ea5y l\u00e0 nguy\u00ean nh\u00e2n g\u00e2y ch\u1eadm website b\u1eb1ng c\u00e1ch nh\u00ecn v\u00e0o t\u00ean file – trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y l\u00e0 plugin JetPack<\/a>.<\/p>\n\n\nL\u1ea5y v\u00ed d\u1ee5, n\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng WordPress<\/a>, b\u1ea1n c\u00f3 th\u1ec3 nh\u1eadn ra t\u00ean c\u1ee7a plugin m\u00e0 b\u1ea1n \u0111\u00e3 c\u00e0i, ho\u1eb7c t\u00ean c\u1ee7a giao di\u1ec7n b\u1ea1n \u0111ang d\u00f9ng.<\/p>\n\n\n2. Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP<\/h3>\n\n\nTr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP t\u1ea1o th\u00e0nh m\u00e3 tr\u1ea1ng th\u00e1i (status code) v\u00e0 th\u00f4ng b\u00e1o m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecdc \u0111\u01b0\u1ee3c (v\u00ed d\u1ee5 l\u1ed7i 404 kh\u00f4ng t\u00ecm th\u1ea5y trang). Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i \u0111\u01b0\u1ee3c tr\u1ea3 v\u1ec1 t\u1eeb m\u00e1y ch\u1ee7 v\u00e0 n\u00f3i cho tr\u00ecnh duy\u1ec7t bi\u1ebft li\u1ec7u y\u00eau c\u1ea7u nh\u1eafm \u0111\u1ebfn t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3 th\u00e0nh c\u00f4ng hay l\u00e0 kh\u00f4ng.<\/p>\n\n\nY\u00eau c\u1ea7u th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 1xx\/2xx\/3xx<\/strong>\n<\/figure>\n\n\n M\u00e3 tr\u1ea1ng th\u00e1i c\u1ee7a website n\u00ean ch\u1ee7 y\u1ebfu l\u00e0 200<\/figcaption><\/figure>\n<\/p>\n\n\n1xx<\/strong> – Th\u00f4ng tin – b\u1ea1n hi\u1ebfm khi th\u1ea5y n\u00f3 trong b\u1ea3ng Waterfall<\/li>2xx<\/strong> – Th\u00e0nh c\u00f4ng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c x\u00e1c nh\u1eadn l\u00e0 \u0111\u00e3 th\u00e0nh c\u00f4ng (h\u1ea7u h\u1ebft s\u1ebd l\u00e0 m\u00e3 200)<\/li>3xx<\/strong> – Chuy\u1ec3n h\u01b0\u1edbng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c chuy\u1ec3n h\u01b0\u1edbng (chuy\u1ec3n h\u01b0\u1edbng 301<\/a> l\u00e0 ph\u1ed5 bi\u1ebfn nh\u1ea5t)<\/li><\/ul>\n\n\nY\u00eau c\u1ea7u kh\u00f4ng th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 4xx\/5xx<\/strong>\n<\/figure>\n\n\n B\u1ea3ng Waterfall s\u1ebd nhanh ch\u00f3ng ph\u00e1t hi\u1ec7n ra c\u00e1c y\u00eau c\u1ea7u b\u1ecb l\u1ed7i tr\u00ean trang<\/figcaption><\/figure>\n<\/p>\n\n\n4xx<\/strong> – l\u1ed7i client – \u0111\u00e2y l\u00e0 l\u1ed7i di\u1ec5n ra khi th\u1ef1c hi\u1ec7n y\u00eau c\u1ea7u (l\u1ed7i 404 file kh\u00f4ng t\u00ecm th\u1ea5y, l\u1ed7i 401 truy c\u1eadp kh\u00f4ng \u0111\u01b0\u1ee3c ph\u00e9p, l\u1ed7i 403 b\u1ecb c\u1ea5m, v\u00e2n v\u00e2n)<\/li>5xx<\/strong> – l\u1ed7i server – m\u00e1y ch\u1ee7 g\u1eb7p th\u1ea5t b\u1ea1i khi x\u1eed l\u00fd y\u00eau c\u1ea7u (l\u1ed7i m\u00e1y ch\u1ee7 n\u1ed9i b\u1ed9 500, l\u1ed7i d\u1ecbch v\u1ee5 kh\u00f4ng kh\u1ea3 d\u1ee5ng 503, v\u00e2n v\u00e2n)<\/li><\/ul>\n\n\n3. File g\u1ed1c<\/h3>\n\n\n\u0110\u00e2y l\u00e0 v\u1ecb tr\u00ed m\u00e0 file \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng nhi\u1ec1u t\u00e0i nguy\u00ean t\u1eeb b\u00ean th\u1ee9 ba (ch\u1eb3ng h\u1ea1n m\u00e3 nh\u00fang YouTube<\/a>, widget c\u1ee7a Facebook, v\u00e2n v\u00e2n) th\u00ec \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd th\u1ea5y hostname c\u1ee7a ch\u00fang kh\u00f4ng \u0111\u1ebfn t\u1eeb host g\u1ed1c c\u1ee7a b\u1ea1n. <\/figure>\n\n\n File g\u1ed1c cho b\u1ea1n bi\u1ebft t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb n\u01a1i n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng CDN<\/a>, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y nhi\u1ec1u file\/t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb c\u00f9ng ngu\u1ed3n – \u0111\u00e2y c\u0169ng l\u00e0 m\u1ed9t c\u00e1ch \u0111\u1ec3 bi\u1ebft CDN c\u1ee7a b\u1ea1n \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh ch\u00ednh x\u00e1c hay ch\u01b0a.<\/p>\n\n\n<\/div><\/div><\/div>\n\n\n4. K\u00edch c\u1ee1 file<\/h3>\n\n\nC\u00e1i t\u00ean n\u00f3i l\u00ean t\u1ea5t c\u1ea3, \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean. T\u1ed5ng k\u00edch c\u1ee1 file c\u1ee7a t\u1ea5t c\u1ea3 c\u00e1c y\u00eau c\u1ea7u t\u1ea1o th\u00e0nh T\u1ed5ng dung l\u01b0\u1ee3ng trang<\/strong>. Gi\u00e1 tr\u1ecb n\u00e0y c\u00e0ng nh\u1ecf, trang c\u1ee7a b\u1ea1n c\u00e0ng t\u1ea3i nhanh h\u01a1n.\n<\/figure>\n\n\n C\u1ed9t k\u00edch c\u1ee1 file trong b\u1ea3ng Waterfall<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n th\u1ea5y file c\u00f3 k\u00edch c\u1ee1 l\u1edbn (th\u01b0\u1eddng hay x\u1ea3y ra v\u1edbi \u1ea3nh, file \u00e2m thanh, video), b\u1ea1n c\u1ea7n \u01b0u ti\u00ean s\u1eeda n\u00f3 tr\u01b0\u1edbc, tr\u01b0\u1edbc khi t\u00ecm hi\u1ec3u c\u00e1c ph\u1ea7n ti\u1ebfp theo trong b\u1ea3ng Waterfall.<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u c\u00e1c plugin gi\u00fap t\u1ed1i \u01b0u h\u00f3a \u1ea3nh tr\u00ean trang Chim C\u1eaft \u1edf \u0111\u00e2y<\/a>. Ngo\u00e0i ra l\u00e0 ph\u1ea7n l\u00fd thuy\u1ebft v\u1ec1 t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng \u1ea3nh<\/a> n\u1ebfu b\u1ea1n mu\u1ed1n t\u00ecm hi\u1ec3u s\u00e2u h\u01a1n n\u1eefa.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure><\/div>\n\n\nHover qua ph\u1ea7n th\u00f4ng tin size \u0111\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 th\u1ef1c \/ uncompressed v\u00e0 k\u00edch c\u1ee1 \u0111\u00e3 \u0111\u01b0\u1ee3c n\u00e9n (n\u1ebfu n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng n\u00e9n \/ compressed, trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y ch\u1ee7 y\u1ebfu l\u00e0 file CSS v\u00e0 JS).<\/p>\n<\/div><\/div><\/div>\n\n\n5. Th\u1eddi gian t\u1ea3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 ph\u1ea7n tr\u00ean b\u1ea3ng Waterfall cho bi\u1ebft th\u1eddi gian t\u1ea3i c\u1ee5 th\u1ec3 c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n, y\u00eau c\u1ea7u tr\u00ean trang.<\/p>\n\n\n\u0110\u00e2y s\u1ebd l\u00e0 n\u01a1i b\u1ea1n c\u1ea7n b\u1ecf nhi\u1ec1u th\u1eddi gian t\u00ecm hi\u1ec3u nh\u1ea5t<\/strong> trong b\u1ea3ng Waterfall!<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00f4 h\u00ecnh thanh x\u1ebfp d\u1ea1ng th\u00e1c m\u00f4 t\u1ea3 c\u00e1ch trang c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 – c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 ph\u1ea7n l\u1edbn \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n trong khu v\u1ef1c n\u00e0y. Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u c\u1ee5 th\u1ec3 h\u01a1n trong ph\u1ea7n n\u00f3i v\u1ec1 Request timings.<\/p>\n\n\n<\/span>Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i<\/span><\/h2>\n\n\nClick v\u00e0o y\u00eau c\u1ea7u s\u1ebd ti\u1ebft l\u1ed9 th\u00f4ng tin ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i (Request\/Response header). Ch\u00fang bao g\u1ed3m th\u00f4ng tin \u0111a d\u1ea1ng, \u0111\u1ea7y \u0111\u1ee7 li\u00ean quan \u0111\u1ebfn c\u00e1ch t\u00e0i nguy\u00ean c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c ph\u1ee5c v\u1ee5.<\/p>\n\n\nCh\u00fang t\u00f4i d\u1ef1 \u0111\u1ecbnh t\u00ecm hi\u1ec3u ch\u1ee7 \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i chi ti\u1ebft h\u01a1n trong b\u00e0i vi\u1ebft kh\u00e1c. Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang t\u00f4i ch\u1ec9 tr\u00ecnh b\u00e0y ng\u1eafn g\u1ecdn m\u1ed9t s\u1ed1 m\u1ee5c ch\u00ednh trong m\u1ed7i ph\u1ea7n:<\/p>\n\n\nTi\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u<\/h3>\n\n\nCh\u00fang l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server. V\u1edbi ng\u01b0\u1eddi m\u1edbi, th\u01b0\u1eddng b\u1ea1n kh\u00f4ng c\u00f3 g\u00ec \u0111\u1ec3 l\u00e0m trong ph\u1ea7n ti\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u l\u00e0 ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server<\/figcaption><\/figure>\n<\/p>\n\n\nTi\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i<\/h3>\n\n\nPh\u1ea3n h\u1ed3i l\u00e0 nh\u1eefng ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i, v\u00e0 \u0111\u00f4i khi l\u00e0 ch\u00eca kh\u00f3a trong vi\u1ec7c ch\u1ea9n \u0111o\u00e1n c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i cho tr\u00ecnh duy\u1ec7t<\/figcaption><\/figure>\n<\/p>\n\n\nV\u1ec1 c\u01a1 b\u1ea3n, ch\u00fang bi\u1ec3u th\u1ecb c\u1ea5u h\u00ecnh, c\u00e0i \u0111\u1eb7t, ho\u1eb7c thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c y\u00eau c\u1ea7u.<\/p>\n\n\nV\u1edbi ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i, b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3:<\/p>\n\n\n\u0110\u01b0\u1ee3c n\u00e9n hay l\u00e0 kh\u00f4ng (v\u00ed d\u1ee5 gzip)<\/li>Cache<\/li>\u0110\u01b0\u1ee3c ph\u1ee5c v\u1ee5 th\u00f4ng qua CDN (hit\/miss\/revalidated)<\/li>Keep-Alive \u0111\u01b0\u1ee3c b\u1eadt<\/li>Ph\u1ee5c v\u1ee5 th\u00f4ng qua HTTP\/2<\/li>Chuy\u1ec3n h\u01b0\u1edbng n\u1ed9i b\u1ed9 (v\u00ed d\u1ee5 HGST)<\/li><\/ul>\n\n\n\nM\u1eb9o: N\u1ebfu b\u00e1o c\u00e1o GTmetrix cho th\u1ea5y b\u1ea1n c\u00f3 \u0111i\u1ec3m k\u00e9m cho nh\u1eefng khuy\u1ebfn ngh\u1ecb \u1edf tr\u00ean, ki\u1ec3m tra ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i s\u1ebd c\u00f3 kh\u1ea3 n\u0103ng ti\u1ebft l\u1ed9 nhi\u1ec1u chi ti\u1ebft gi\u00fap b\u1ea1n bi\u1ebft l\u00fd do v\u00ec sao.<\/p>\n<\/div><\/div><\/div>\n\n\n<\/span>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/span><\/h2>\n\n\nH\u00e3y c\u00f9ng quan s\u00e1t b\u1ea3ng Waterfall t\u1ed1i gi\u1ea3n d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n s\u1ebd ngay l\u1eadp t\u1ee9c \u0111\u1ec3 \u00fd th\u1ea5y t\u1eebng y\u00eau c\u1ea7u c\u00f3 m\u1ed9t b\u1ed9 thanh m\u00e0u t\u01b0\u01a1ng \u1ee9ng \u1edf b\u00ean ph\u1ea3i.<\/p>\n\n\nN\u00f3i ng\u1eafn g\u1ecdn th\u00ec t\u1eebng m\u00e0u \u0111\u1ea1i di\u1ec7n cho m\u1ed9t ph\u1ea7n kh\u00e1c nhau trong qu\u00e1 tr\u00ecnh t\u1ea3i c\u1ee7a m\u1ed9t ngu\u1ed3n c\u1ee5 th\u1ec3.<\/p>\n\n\nCh\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng m\u00e0u ngay sau \u0111\u00e2y:<\/p>\n\n\nM\u00e0u n\u00e2u – ch\u1eb7n<\/h3>\n\n\nCh\u1eb7n (blocking) l\u00e0 th\u1eddi gian m\u00e0 y\u00eau c\u1ea7u ph\u1ea3i \u0111\u1ee3i trong h\u00e0ng ch\u1edd tr\u00ecnh duy\u1ec7t (browser’s queue) \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u kh\u1edfi \u0111\u1ed9ng m\u1ed9t y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ch\u1eb7n ng\u0103n c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo \u0111\u01b0\u1ee3c x\u1eed l\u00fd<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00f9ng nhau g\u00e2y ra th\u1eddi gian ch\u1eb7n bao g\u1ed3m:<\/p>\n\n\nCh\u1edd \u0111\u1ee3i k\u1ebft n\u1ed1i c\u00f3 s\u1eb5n.<\/li>T\u1ea3i\/th\u1ef1c thi JavaScript ho\u1eb7c CSS (m\u1eb7c d\u00f9 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u00e3 th\u00f4ng minh h\u01a1n trong vi\u1ec7c t\u1ed1i thi\u1ec3u h\u00f3a ch\u00fang).<\/li>Th\u1eddi gian k\u1ebft n\u1ed1i SSL (th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian k\u1ebft n\u1ed1i \/ connection time)<\/li>X\u00e1c th\u1ef1c HTTP (y\u00eau c\u1ea7u b\u1ed5 sung c\u1ea7n thi\u1ebft \u0111\u1ec3 thi\u1ebft l\u1eadp x\u00e1c th\u1ef1c).<\/li><\/ul>\n\n\nM\u00e0u xanh x\u00e1m – Tra c\u1ee9u DNS<\/h3>\n\n\nTr\u01b0\u1edbc khi k\u1ebft n\u1ed1i \u0111\u1ebfn server \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh, hostname c\u1ea7n ph\u00e2n gi\u1ea3i th\u00e0nh IP – \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 t\u00ecm ki\u1ebfm\/tra c\u1ee9u DNS<\/a> (lookup).\n<\/figure>\n\n\n Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\nM\u00e0u xanh l\u00e1 c\u00e2y – K\u1ebft n\u1ed1i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n<\/figure><\/div>\n\n\nL\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Hover chu\u1ed9t qua t\u00ean file s\u1ebd gi\u00fap b\u1ea1n bi\u1ebft \u0111\u01b0\u1ee3c \u0111\u01b0\u1eddng d\u1eabn \u0111\u1ea7y \u0111\u1ee7 (full path) c\u1ee7a file. Ctrl + click s\u1ebd t\u1ea3i file tr\u00ean m\u1ed9t tab kh\u00e1c. \u0110i\u1ec1u n\u00e0y c\u00f3 \u00edch trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n mu\u1ed1n xem ch\u00ednh x\u00e1c file \u0111ang \u0111\u01b0\u1ee3c tham chi\u1ebfu l\u00e0 g\u00ec.<\/p>\n<\/div><\/div><\/div>\n\n\n
Khi duy\u1ec7t qua danh s\u00e1ch, b\u1ea1n n\u00ean t\u1eadp trung v\u00e0o ph\u1ea7n \u0111u\u00f4i m\u1edf r\u1ed9ng c\u1ee7a file. N\u1ebfu file c\u00f3 \u0111u\u00f4i “.jpg” v\u00e0 “.png” s\u1ebd l\u00e0 c\u00e1c t\u00e0i nguy\u00ean \u1ea3nh, .css l\u00e0 t\u00e0i nguy\u00ean stylesheets. File “.js” l\u00e0 JavaScript, v\u00e2n v\u00e2n.<\/p>\n\n\n
Ngo\u00e0i ra b\u1ea1n n\u00ean \u0111\u1ec3 \u00fd c\u00e1c t\u1eeb kh\u00f3a trong t\u00ean file, \u0111i\u1ec1u n\u00e0y gi\u00fap b\u1ea1n ph\u00e1t hi\u1ec7n ch\u00fang c\u00f3 ngu\u1ed3n g\u1ed1c t\u1eeb \u0111\u00e2u.<\/p>\n\n\n<\/figure>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 ph\u00e1t hi\u1ec7n ra plugin n\u00e0o \u0111\u1ea5y l\u00e0 nguy\u00ean nh\u00e2n g\u00e2y ch\u1eadm website b\u1eb1ng c\u00e1ch nh\u00ecn v\u00e0o t\u00ean file – trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y l\u00e0 plugin JetPack<\/a>.<\/p>\n\n\nL\u1ea5y v\u00ed d\u1ee5, n\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng WordPress<\/a>, b\u1ea1n c\u00f3 th\u1ec3 nh\u1eadn ra t\u00ean c\u1ee7a plugin m\u00e0 b\u1ea1n \u0111\u00e3 c\u00e0i, ho\u1eb7c t\u00ean c\u1ee7a giao di\u1ec7n b\u1ea1n \u0111ang d\u00f9ng.<\/p>\n\n\n2. Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP<\/h3>\n\n\nTr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP t\u1ea1o th\u00e0nh m\u00e3 tr\u1ea1ng th\u00e1i (status code) v\u00e0 th\u00f4ng b\u00e1o m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecdc \u0111\u01b0\u1ee3c (v\u00ed d\u1ee5 l\u1ed7i 404 kh\u00f4ng t\u00ecm th\u1ea5y trang). Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i \u0111\u01b0\u1ee3c tr\u1ea3 v\u1ec1 t\u1eeb m\u00e1y ch\u1ee7 v\u00e0 n\u00f3i cho tr\u00ecnh duy\u1ec7t bi\u1ebft li\u1ec7u y\u00eau c\u1ea7u nh\u1eafm \u0111\u1ebfn t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3 th\u00e0nh c\u00f4ng hay l\u00e0 kh\u00f4ng.<\/p>\n\n\nY\u00eau c\u1ea7u th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 1xx\/2xx\/3xx<\/strong>\n<\/figure>\n\n\n M\u00e3 tr\u1ea1ng th\u00e1i c\u1ee7a website n\u00ean ch\u1ee7 y\u1ebfu l\u00e0 200<\/figcaption><\/figure>\n<\/p>\n\n\n1xx<\/strong> – Th\u00f4ng tin – b\u1ea1n hi\u1ebfm khi th\u1ea5y n\u00f3 trong b\u1ea3ng Waterfall<\/li>2xx<\/strong> – Th\u00e0nh c\u00f4ng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c x\u00e1c nh\u1eadn l\u00e0 \u0111\u00e3 th\u00e0nh c\u00f4ng (h\u1ea7u h\u1ebft s\u1ebd l\u00e0 m\u00e3 200)<\/li>3xx<\/strong> – Chuy\u1ec3n h\u01b0\u1edbng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c chuy\u1ec3n h\u01b0\u1edbng (chuy\u1ec3n h\u01b0\u1edbng 301<\/a> l\u00e0 ph\u1ed5 bi\u1ebfn nh\u1ea5t)<\/li><\/ul>\n\n\nY\u00eau c\u1ea7u kh\u00f4ng th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 4xx\/5xx<\/strong>\n<\/figure>\n\n\n B\u1ea3ng Waterfall s\u1ebd nhanh ch\u00f3ng ph\u00e1t hi\u1ec7n ra c\u00e1c y\u00eau c\u1ea7u b\u1ecb l\u1ed7i tr\u00ean trang<\/figcaption><\/figure>\n<\/p>\n\n\n4xx<\/strong> – l\u1ed7i client – \u0111\u00e2y l\u00e0 l\u1ed7i di\u1ec5n ra khi th\u1ef1c hi\u1ec7n y\u00eau c\u1ea7u (l\u1ed7i 404 file kh\u00f4ng t\u00ecm th\u1ea5y, l\u1ed7i 401 truy c\u1eadp kh\u00f4ng \u0111\u01b0\u1ee3c ph\u00e9p, l\u1ed7i 403 b\u1ecb c\u1ea5m, v\u00e2n v\u00e2n)<\/li>5xx<\/strong> – l\u1ed7i server – m\u00e1y ch\u1ee7 g\u1eb7p th\u1ea5t b\u1ea1i khi x\u1eed l\u00fd y\u00eau c\u1ea7u (l\u1ed7i m\u00e1y ch\u1ee7 n\u1ed9i b\u1ed9 500, l\u1ed7i d\u1ecbch v\u1ee5 kh\u00f4ng kh\u1ea3 d\u1ee5ng 503, v\u00e2n v\u00e2n)<\/li><\/ul>\n\n\n3. File g\u1ed1c<\/h3>\n\n\n\u0110\u00e2y l\u00e0 v\u1ecb tr\u00ed m\u00e0 file \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng nhi\u1ec1u t\u00e0i nguy\u00ean t\u1eeb b\u00ean th\u1ee9 ba (ch\u1eb3ng h\u1ea1n m\u00e3 nh\u00fang YouTube<\/a>, widget c\u1ee7a Facebook, v\u00e2n v\u00e2n) th\u00ec \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd th\u1ea5y hostname c\u1ee7a ch\u00fang kh\u00f4ng \u0111\u1ebfn t\u1eeb host g\u1ed1c c\u1ee7a b\u1ea1n. <\/figure>\n\n\n File g\u1ed1c cho b\u1ea1n bi\u1ebft t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb n\u01a1i n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng CDN<\/a>, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y nhi\u1ec1u file\/t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb c\u00f9ng ngu\u1ed3n – \u0111\u00e2y c\u0169ng l\u00e0 m\u1ed9t c\u00e1ch \u0111\u1ec3 bi\u1ebft CDN c\u1ee7a b\u1ea1n \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh ch\u00ednh x\u00e1c hay ch\u01b0a.<\/p>\n\n\n<\/div><\/div><\/div>\n\n\n4. K\u00edch c\u1ee1 file<\/h3>\n\n\nC\u00e1i t\u00ean n\u00f3i l\u00ean t\u1ea5t c\u1ea3, \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean. T\u1ed5ng k\u00edch c\u1ee1 file c\u1ee7a t\u1ea5t c\u1ea3 c\u00e1c y\u00eau c\u1ea7u t\u1ea1o th\u00e0nh T\u1ed5ng dung l\u01b0\u1ee3ng trang<\/strong>. Gi\u00e1 tr\u1ecb n\u00e0y c\u00e0ng nh\u1ecf, trang c\u1ee7a b\u1ea1n c\u00e0ng t\u1ea3i nhanh h\u01a1n.\n<\/figure>\n\n\n C\u1ed9t k\u00edch c\u1ee1 file trong b\u1ea3ng Waterfall<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n th\u1ea5y file c\u00f3 k\u00edch c\u1ee1 l\u1edbn (th\u01b0\u1eddng hay x\u1ea3y ra v\u1edbi \u1ea3nh, file \u00e2m thanh, video), b\u1ea1n c\u1ea7n \u01b0u ti\u00ean s\u1eeda n\u00f3 tr\u01b0\u1edbc, tr\u01b0\u1edbc khi t\u00ecm hi\u1ec3u c\u00e1c ph\u1ea7n ti\u1ebfp theo trong b\u1ea3ng Waterfall.<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u c\u00e1c plugin gi\u00fap t\u1ed1i \u01b0u h\u00f3a \u1ea3nh tr\u00ean trang Chim C\u1eaft \u1edf \u0111\u00e2y<\/a>. Ngo\u00e0i ra l\u00e0 ph\u1ea7n l\u00fd thuy\u1ebft v\u1ec1 t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng \u1ea3nh<\/a> n\u1ebfu b\u1ea1n mu\u1ed1n t\u00ecm hi\u1ec3u s\u00e2u h\u01a1n n\u1eefa.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure><\/div>\n\n\nHover qua ph\u1ea7n th\u00f4ng tin size \u0111\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 th\u1ef1c \/ uncompressed v\u00e0 k\u00edch c\u1ee1 \u0111\u00e3 \u0111\u01b0\u1ee3c n\u00e9n (n\u1ebfu n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng n\u00e9n \/ compressed, trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y ch\u1ee7 y\u1ebfu l\u00e0 file CSS v\u00e0 JS).<\/p>\n<\/div><\/div><\/div>\n\n\n5. Th\u1eddi gian t\u1ea3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 ph\u1ea7n tr\u00ean b\u1ea3ng Waterfall cho bi\u1ebft th\u1eddi gian t\u1ea3i c\u1ee5 th\u1ec3 c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n, y\u00eau c\u1ea7u tr\u00ean trang.<\/p>\n\n\n\u0110\u00e2y s\u1ebd l\u00e0 n\u01a1i b\u1ea1n c\u1ea7n b\u1ecf nhi\u1ec1u th\u1eddi gian t\u00ecm hi\u1ec3u nh\u1ea5t<\/strong> trong b\u1ea3ng Waterfall!<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00f4 h\u00ecnh thanh x\u1ebfp d\u1ea1ng th\u00e1c m\u00f4 t\u1ea3 c\u00e1ch trang c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 – c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 ph\u1ea7n l\u1edbn \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n trong khu v\u1ef1c n\u00e0y. Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u c\u1ee5 th\u1ec3 h\u01a1n trong ph\u1ea7n n\u00f3i v\u1ec1 Request timings.<\/p>\n\n\n<\/span>Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i<\/span><\/h2>\n\n\nClick v\u00e0o y\u00eau c\u1ea7u s\u1ebd ti\u1ebft l\u1ed9 th\u00f4ng tin ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i (Request\/Response header). Ch\u00fang bao g\u1ed3m th\u00f4ng tin \u0111a d\u1ea1ng, \u0111\u1ea7y \u0111\u1ee7 li\u00ean quan \u0111\u1ebfn c\u00e1ch t\u00e0i nguy\u00ean c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c ph\u1ee5c v\u1ee5.<\/p>\n\n\nCh\u00fang t\u00f4i d\u1ef1 \u0111\u1ecbnh t\u00ecm hi\u1ec3u ch\u1ee7 \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i chi ti\u1ebft h\u01a1n trong b\u00e0i vi\u1ebft kh\u00e1c. Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang t\u00f4i ch\u1ec9 tr\u00ecnh b\u00e0y ng\u1eafn g\u1ecdn m\u1ed9t s\u1ed1 m\u1ee5c ch\u00ednh trong m\u1ed7i ph\u1ea7n:<\/p>\n\n\nTi\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u<\/h3>\n\n\nCh\u00fang l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server. V\u1edbi ng\u01b0\u1eddi m\u1edbi, th\u01b0\u1eddng b\u1ea1n kh\u00f4ng c\u00f3 g\u00ec \u0111\u1ec3 l\u00e0m trong ph\u1ea7n ti\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u l\u00e0 ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server<\/figcaption><\/figure>\n<\/p>\n\n\nTi\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i<\/h3>\n\n\nPh\u1ea3n h\u1ed3i l\u00e0 nh\u1eefng ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i, v\u00e0 \u0111\u00f4i khi l\u00e0 ch\u00eca kh\u00f3a trong vi\u1ec7c ch\u1ea9n \u0111o\u00e1n c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i cho tr\u00ecnh duy\u1ec7t<\/figcaption><\/figure>\n<\/p>\n\n\nV\u1ec1 c\u01a1 b\u1ea3n, ch\u00fang bi\u1ec3u th\u1ecb c\u1ea5u h\u00ecnh, c\u00e0i \u0111\u1eb7t, ho\u1eb7c thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c y\u00eau c\u1ea7u.<\/p>\n\n\nV\u1edbi ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i, b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3:<\/p>\n\n\n\u0110\u01b0\u1ee3c n\u00e9n hay l\u00e0 kh\u00f4ng (v\u00ed d\u1ee5 gzip)<\/li>Cache<\/li>\u0110\u01b0\u1ee3c ph\u1ee5c v\u1ee5 th\u00f4ng qua CDN (hit\/miss\/revalidated)<\/li>Keep-Alive \u0111\u01b0\u1ee3c b\u1eadt<\/li>Ph\u1ee5c v\u1ee5 th\u00f4ng qua HTTP\/2<\/li>Chuy\u1ec3n h\u01b0\u1edbng n\u1ed9i b\u1ed9 (v\u00ed d\u1ee5 HGST)<\/li><\/ul>\n\n\n\nM\u1eb9o: N\u1ebfu b\u00e1o c\u00e1o GTmetrix cho th\u1ea5y b\u1ea1n c\u00f3 \u0111i\u1ec3m k\u00e9m cho nh\u1eefng khuy\u1ebfn ngh\u1ecb \u1edf tr\u00ean, ki\u1ec3m tra ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i s\u1ebd c\u00f3 kh\u1ea3 n\u0103ng ti\u1ebft l\u1ed9 nhi\u1ec1u chi ti\u1ebft gi\u00fap b\u1ea1n bi\u1ebft l\u00fd do v\u00ec sao.<\/p>\n<\/div><\/div><\/div>\n\n\n<\/span>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/span><\/h2>\n\n\nH\u00e3y c\u00f9ng quan s\u00e1t b\u1ea3ng Waterfall t\u1ed1i gi\u1ea3n d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n s\u1ebd ngay l\u1eadp t\u1ee9c \u0111\u1ec3 \u00fd th\u1ea5y t\u1eebng y\u00eau c\u1ea7u c\u00f3 m\u1ed9t b\u1ed9 thanh m\u00e0u t\u01b0\u01a1ng \u1ee9ng \u1edf b\u00ean ph\u1ea3i.<\/p>\n\n\nN\u00f3i ng\u1eafn g\u1ecdn th\u00ec t\u1eebng m\u00e0u \u0111\u1ea1i di\u1ec7n cho m\u1ed9t ph\u1ea7n kh\u00e1c nhau trong qu\u00e1 tr\u00ecnh t\u1ea3i c\u1ee7a m\u1ed9t ngu\u1ed3n c\u1ee5 th\u1ec3.<\/p>\n\n\nCh\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng m\u00e0u ngay sau \u0111\u00e2y:<\/p>\n\n\nM\u00e0u n\u00e2u – ch\u1eb7n<\/h3>\n\n\nCh\u1eb7n (blocking) l\u00e0 th\u1eddi gian m\u00e0 y\u00eau c\u1ea7u ph\u1ea3i \u0111\u1ee3i trong h\u00e0ng ch\u1edd tr\u00ecnh duy\u1ec7t (browser’s queue) \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u kh\u1edfi \u0111\u1ed9ng m\u1ed9t y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ch\u1eb7n ng\u0103n c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo \u0111\u01b0\u1ee3c x\u1eed l\u00fd<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00f9ng nhau g\u00e2y ra th\u1eddi gian ch\u1eb7n bao g\u1ed3m:<\/p>\n\n\nCh\u1edd \u0111\u1ee3i k\u1ebft n\u1ed1i c\u00f3 s\u1eb5n.<\/li>T\u1ea3i\/th\u1ef1c thi JavaScript ho\u1eb7c CSS (m\u1eb7c d\u00f9 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u00e3 th\u00f4ng minh h\u01a1n trong vi\u1ec7c t\u1ed1i thi\u1ec3u h\u00f3a ch\u00fang).<\/li>Th\u1eddi gian k\u1ebft n\u1ed1i SSL (th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian k\u1ebft n\u1ed1i \/ connection time)<\/li>X\u00e1c th\u1ef1c HTTP (y\u00eau c\u1ea7u b\u1ed5 sung c\u1ea7n thi\u1ebft \u0111\u1ec3 thi\u1ebft l\u1eadp x\u00e1c th\u1ef1c).<\/li><\/ul>\n\n\nM\u00e0u xanh x\u00e1m – Tra c\u1ee9u DNS<\/h3>\n\n\nTr\u01b0\u1edbc khi k\u1ebft n\u1ed1i \u0111\u1ebfn server \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh, hostname c\u1ea7n ph\u00e2n gi\u1ea3i th\u00e0nh IP – \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 t\u00ecm ki\u1ebfm\/tra c\u1ee9u DNS<\/a> (lookup).\n<\/figure>\n\n\n Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\nM\u00e0u xanh l\u00e1 c\u00e2y – K\u1ebft n\u1ed1i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n<\/figure><\/div>\n\n\nL\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
B\u1ea1n c\u00f3 th\u1ec3 ph\u00e1t hi\u1ec7n ra plugin n\u00e0o \u0111\u1ea5y l\u00e0 nguy\u00ean nh\u00e2n g\u00e2y ch\u1eadm website b\u1eb1ng c\u00e1ch nh\u00ecn v\u00e0o t\u00ean file – trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y l\u00e0 plugin JetPack<\/a>.<\/p>\n\n\nL\u1ea5y v\u00ed d\u1ee5, n\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng WordPress<\/a>, b\u1ea1n c\u00f3 th\u1ec3 nh\u1eadn ra t\u00ean c\u1ee7a plugin m\u00e0 b\u1ea1n \u0111\u00e3 c\u00e0i, ho\u1eb7c t\u00ean c\u1ee7a giao di\u1ec7n b\u1ea1n \u0111ang d\u00f9ng.<\/p>\n\n\n2. Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP<\/h3>\n\n\nTr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP t\u1ea1o th\u00e0nh m\u00e3 tr\u1ea1ng th\u00e1i (status code) v\u00e0 th\u00f4ng b\u00e1o m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecdc \u0111\u01b0\u1ee3c (v\u00ed d\u1ee5 l\u1ed7i 404 kh\u00f4ng t\u00ecm th\u1ea5y trang). Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i \u0111\u01b0\u1ee3c tr\u1ea3 v\u1ec1 t\u1eeb m\u00e1y ch\u1ee7 v\u00e0 n\u00f3i cho tr\u00ecnh duy\u1ec7t bi\u1ebft li\u1ec7u y\u00eau c\u1ea7u nh\u1eafm \u0111\u1ebfn t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3 th\u00e0nh c\u00f4ng hay l\u00e0 kh\u00f4ng.<\/p>\n\n\nY\u00eau c\u1ea7u th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 1xx\/2xx\/3xx<\/strong>\n<\/figure>\n\n\n M\u00e3 tr\u1ea1ng th\u00e1i c\u1ee7a website n\u00ean ch\u1ee7 y\u1ebfu l\u00e0 200<\/figcaption><\/figure>\n<\/p>\n\n\n1xx<\/strong> – Th\u00f4ng tin – b\u1ea1n hi\u1ebfm khi th\u1ea5y n\u00f3 trong b\u1ea3ng Waterfall<\/li>2xx<\/strong> – Th\u00e0nh c\u00f4ng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c x\u00e1c nh\u1eadn l\u00e0 \u0111\u00e3 th\u00e0nh c\u00f4ng (h\u1ea7u h\u1ebft s\u1ebd l\u00e0 m\u00e3 200)<\/li>3xx<\/strong> – Chuy\u1ec3n h\u01b0\u1edbng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c chuy\u1ec3n h\u01b0\u1edbng (chuy\u1ec3n h\u01b0\u1edbng 301<\/a> l\u00e0 ph\u1ed5 bi\u1ebfn nh\u1ea5t)<\/li><\/ul>\n\n\nY\u00eau c\u1ea7u kh\u00f4ng th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 4xx\/5xx<\/strong>\n<\/figure>\n\n\n B\u1ea3ng Waterfall s\u1ebd nhanh ch\u00f3ng ph\u00e1t hi\u1ec7n ra c\u00e1c y\u00eau c\u1ea7u b\u1ecb l\u1ed7i tr\u00ean trang<\/figcaption><\/figure>\n<\/p>\n\n\n4xx<\/strong> – l\u1ed7i client – \u0111\u00e2y l\u00e0 l\u1ed7i di\u1ec5n ra khi th\u1ef1c hi\u1ec7n y\u00eau c\u1ea7u (l\u1ed7i 404 file kh\u00f4ng t\u00ecm th\u1ea5y, l\u1ed7i 401 truy c\u1eadp kh\u00f4ng \u0111\u01b0\u1ee3c ph\u00e9p, l\u1ed7i 403 b\u1ecb c\u1ea5m, v\u00e2n v\u00e2n)<\/li>5xx<\/strong> – l\u1ed7i server – m\u00e1y ch\u1ee7 g\u1eb7p th\u1ea5t b\u1ea1i khi x\u1eed l\u00fd y\u00eau c\u1ea7u (l\u1ed7i m\u00e1y ch\u1ee7 n\u1ed9i b\u1ed9 500, l\u1ed7i d\u1ecbch v\u1ee5 kh\u00f4ng kh\u1ea3 d\u1ee5ng 503, v\u00e2n v\u00e2n)<\/li><\/ul>\n\n\n3. File g\u1ed1c<\/h3>\n\n\n\u0110\u00e2y l\u00e0 v\u1ecb tr\u00ed m\u00e0 file \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng nhi\u1ec1u t\u00e0i nguy\u00ean t\u1eeb b\u00ean th\u1ee9 ba (ch\u1eb3ng h\u1ea1n m\u00e3 nh\u00fang YouTube<\/a>, widget c\u1ee7a Facebook, v\u00e2n v\u00e2n) th\u00ec \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd th\u1ea5y hostname c\u1ee7a ch\u00fang kh\u00f4ng \u0111\u1ebfn t\u1eeb host g\u1ed1c c\u1ee7a b\u1ea1n. <\/figure>\n\n\n File g\u1ed1c cho b\u1ea1n bi\u1ebft t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb n\u01a1i n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng CDN<\/a>, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y nhi\u1ec1u file\/t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb c\u00f9ng ngu\u1ed3n – \u0111\u00e2y c\u0169ng l\u00e0 m\u1ed9t c\u00e1ch \u0111\u1ec3 bi\u1ebft CDN c\u1ee7a b\u1ea1n \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh ch\u00ednh x\u00e1c hay ch\u01b0a.<\/p>\n\n\n<\/div><\/div><\/div>\n\n\n4. K\u00edch c\u1ee1 file<\/h3>\n\n\nC\u00e1i t\u00ean n\u00f3i l\u00ean t\u1ea5t c\u1ea3, \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean. T\u1ed5ng k\u00edch c\u1ee1 file c\u1ee7a t\u1ea5t c\u1ea3 c\u00e1c y\u00eau c\u1ea7u t\u1ea1o th\u00e0nh T\u1ed5ng dung l\u01b0\u1ee3ng trang<\/strong>. Gi\u00e1 tr\u1ecb n\u00e0y c\u00e0ng nh\u1ecf, trang c\u1ee7a b\u1ea1n c\u00e0ng t\u1ea3i nhanh h\u01a1n.\n<\/figure>\n\n\n C\u1ed9t k\u00edch c\u1ee1 file trong b\u1ea3ng Waterfall<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n th\u1ea5y file c\u00f3 k\u00edch c\u1ee1 l\u1edbn (th\u01b0\u1eddng hay x\u1ea3y ra v\u1edbi \u1ea3nh, file \u00e2m thanh, video), b\u1ea1n c\u1ea7n \u01b0u ti\u00ean s\u1eeda n\u00f3 tr\u01b0\u1edbc, tr\u01b0\u1edbc khi t\u00ecm hi\u1ec3u c\u00e1c ph\u1ea7n ti\u1ebfp theo trong b\u1ea3ng Waterfall.<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u c\u00e1c plugin gi\u00fap t\u1ed1i \u01b0u h\u00f3a \u1ea3nh tr\u00ean trang Chim C\u1eaft \u1edf \u0111\u00e2y<\/a>. Ngo\u00e0i ra l\u00e0 ph\u1ea7n l\u00fd thuy\u1ebft v\u1ec1 t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng \u1ea3nh<\/a> n\u1ebfu b\u1ea1n mu\u1ed1n t\u00ecm hi\u1ec3u s\u00e2u h\u01a1n n\u1eefa.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure><\/div>\n\n\nHover qua ph\u1ea7n th\u00f4ng tin size \u0111\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 th\u1ef1c \/ uncompressed v\u00e0 k\u00edch c\u1ee1 \u0111\u00e3 \u0111\u01b0\u1ee3c n\u00e9n (n\u1ebfu n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng n\u00e9n \/ compressed, trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y ch\u1ee7 y\u1ebfu l\u00e0 file CSS v\u00e0 JS).<\/p>\n<\/div><\/div><\/div>\n\n\n5. Th\u1eddi gian t\u1ea3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 ph\u1ea7n tr\u00ean b\u1ea3ng Waterfall cho bi\u1ebft th\u1eddi gian t\u1ea3i c\u1ee5 th\u1ec3 c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n, y\u00eau c\u1ea7u tr\u00ean trang.<\/p>\n\n\n\u0110\u00e2y s\u1ebd l\u00e0 n\u01a1i b\u1ea1n c\u1ea7n b\u1ecf nhi\u1ec1u th\u1eddi gian t\u00ecm hi\u1ec3u nh\u1ea5t<\/strong> trong b\u1ea3ng Waterfall!<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00f4 h\u00ecnh thanh x\u1ebfp d\u1ea1ng th\u00e1c m\u00f4 t\u1ea3 c\u00e1ch trang c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 – c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 ph\u1ea7n l\u1edbn \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n trong khu v\u1ef1c n\u00e0y. Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u c\u1ee5 th\u1ec3 h\u01a1n trong ph\u1ea7n n\u00f3i v\u1ec1 Request timings.<\/p>\n\n\n<\/span>Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i<\/span><\/h2>\n\n\nClick v\u00e0o y\u00eau c\u1ea7u s\u1ebd ti\u1ebft l\u1ed9 th\u00f4ng tin ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i (Request\/Response header). Ch\u00fang bao g\u1ed3m th\u00f4ng tin \u0111a d\u1ea1ng, \u0111\u1ea7y \u0111\u1ee7 li\u00ean quan \u0111\u1ebfn c\u00e1ch t\u00e0i nguy\u00ean c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c ph\u1ee5c v\u1ee5.<\/p>\n\n\nCh\u00fang t\u00f4i d\u1ef1 \u0111\u1ecbnh t\u00ecm hi\u1ec3u ch\u1ee7 \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i chi ti\u1ebft h\u01a1n trong b\u00e0i vi\u1ebft kh\u00e1c. Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang t\u00f4i ch\u1ec9 tr\u00ecnh b\u00e0y ng\u1eafn g\u1ecdn m\u1ed9t s\u1ed1 m\u1ee5c ch\u00ednh trong m\u1ed7i ph\u1ea7n:<\/p>\n\n\nTi\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u<\/h3>\n\n\nCh\u00fang l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server. V\u1edbi ng\u01b0\u1eddi m\u1edbi, th\u01b0\u1eddng b\u1ea1n kh\u00f4ng c\u00f3 g\u00ec \u0111\u1ec3 l\u00e0m trong ph\u1ea7n ti\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u l\u00e0 ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server<\/figcaption><\/figure>\n<\/p>\n\n\nTi\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i<\/h3>\n\n\nPh\u1ea3n h\u1ed3i l\u00e0 nh\u1eefng ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i, v\u00e0 \u0111\u00f4i khi l\u00e0 ch\u00eca kh\u00f3a trong vi\u1ec7c ch\u1ea9n \u0111o\u00e1n c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i cho tr\u00ecnh duy\u1ec7t<\/figcaption><\/figure>\n<\/p>\n\n\nV\u1ec1 c\u01a1 b\u1ea3n, ch\u00fang bi\u1ec3u th\u1ecb c\u1ea5u h\u00ecnh, c\u00e0i \u0111\u1eb7t, ho\u1eb7c thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c y\u00eau c\u1ea7u.<\/p>\n\n\nV\u1edbi ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i, b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3:<\/p>\n\n\n\u0110\u01b0\u1ee3c n\u00e9n hay l\u00e0 kh\u00f4ng (v\u00ed d\u1ee5 gzip)<\/li>Cache<\/li>\u0110\u01b0\u1ee3c ph\u1ee5c v\u1ee5 th\u00f4ng qua CDN (hit\/miss\/revalidated)<\/li>Keep-Alive \u0111\u01b0\u1ee3c b\u1eadt<\/li>Ph\u1ee5c v\u1ee5 th\u00f4ng qua HTTP\/2<\/li>Chuy\u1ec3n h\u01b0\u1edbng n\u1ed9i b\u1ed9 (v\u00ed d\u1ee5 HGST)<\/li><\/ul>\n\n\n\nM\u1eb9o: N\u1ebfu b\u00e1o c\u00e1o GTmetrix cho th\u1ea5y b\u1ea1n c\u00f3 \u0111i\u1ec3m k\u00e9m cho nh\u1eefng khuy\u1ebfn ngh\u1ecb \u1edf tr\u00ean, ki\u1ec3m tra ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i s\u1ebd c\u00f3 kh\u1ea3 n\u0103ng ti\u1ebft l\u1ed9 nhi\u1ec1u chi ti\u1ebft gi\u00fap b\u1ea1n bi\u1ebft l\u00fd do v\u00ec sao.<\/p>\n<\/div><\/div><\/div>\n\n\n<\/span>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/span><\/h2>\n\n\nH\u00e3y c\u00f9ng quan s\u00e1t b\u1ea3ng Waterfall t\u1ed1i gi\u1ea3n d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n s\u1ebd ngay l\u1eadp t\u1ee9c \u0111\u1ec3 \u00fd th\u1ea5y t\u1eebng y\u00eau c\u1ea7u c\u00f3 m\u1ed9t b\u1ed9 thanh m\u00e0u t\u01b0\u01a1ng \u1ee9ng \u1edf b\u00ean ph\u1ea3i.<\/p>\n\n\nN\u00f3i ng\u1eafn g\u1ecdn th\u00ec t\u1eebng m\u00e0u \u0111\u1ea1i di\u1ec7n cho m\u1ed9t ph\u1ea7n kh\u00e1c nhau trong qu\u00e1 tr\u00ecnh t\u1ea3i c\u1ee7a m\u1ed9t ngu\u1ed3n c\u1ee5 th\u1ec3.<\/p>\n\n\nCh\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng m\u00e0u ngay sau \u0111\u00e2y:<\/p>\n\n\nM\u00e0u n\u00e2u – ch\u1eb7n<\/h3>\n\n\nCh\u1eb7n (blocking) l\u00e0 th\u1eddi gian m\u00e0 y\u00eau c\u1ea7u ph\u1ea3i \u0111\u1ee3i trong h\u00e0ng ch\u1edd tr\u00ecnh duy\u1ec7t (browser’s queue) \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u kh\u1edfi \u0111\u1ed9ng m\u1ed9t y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ch\u1eb7n ng\u0103n c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo \u0111\u01b0\u1ee3c x\u1eed l\u00fd<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00f9ng nhau g\u00e2y ra th\u1eddi gian ch\u1eb7n bao g\u1ed3m:<\/p>\n\n\nCh\u1edd \u0111\u1ee3i k\u1ebft n\u1ed1i c\u00f3 s\u1eb5n.<\/li>T\u1ea3i\/th\u1ef1c thi JavaScript ho\u1eb7c CSS (m\u1eb7c d\u00f9 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u00e3 th\u00f4ng minh h\u01a1n trong vi\u1ec7c t\u1ed1i thi\u1ec3u h\u00f3a ch\u00fang).<\/li>Th\u1eddi gian k\u1ebft n\u1ed1i SSL (th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian k\u1ebft n\u1ed1i \/ connection time)<\/li>X\u00e1c th\u1ef1c HTTP (y\u00eau c\u1ea7u b\u1ed5 sung c\u1ea7n thi\u1ebft \u0111\u1ec3 thi\u1ebft l\u1eadp x\u00e1c th\u1ef1c).<\/li><\/ul>\n\n\nM\u00e0u xanh x\u00e1m – Tra c\u1ee9u DNS<\/h3>\n\n\nTr\u01b0\u1edbc khi k\u1ebft n\u1ed1i \u0111\u1ebfn server \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh, hostname c\u1ea7n ph\u00e2n gi\u1ea3i th\u00e0nh IP – \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 t\u00ecm ki\u1ebfm\/tra c\u1ee9u DNS<\/a> (lookup).\n<\/figure>\n\n\n Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\nM\u00e0u xanh l\u00e1 c\u00e2y – K\u1ebft n\u1ed1i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n<\/figure><\/div>\n\n\nL\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
L\u1ea5y v\u00ed d\u1ee5, n\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng WordPress<\/a>, b\u1ea1n c\u00f3 th\u1ec3 nh\u1eadn ra t\u00ean c\u1ee7a plugin m\u00e0 b\u1ea1n \u0111\u00e3 c\u00e0i, ho\u1eb7c t\u00ean c\u1ee7a giao di\u1ec7n b\u1ea1n \u0111ang d\u00f9ng.<\/p>\n\n\n2. Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP<\/h3>\n\n\nTr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP t\u1ea1o th\u00e0nh m\u00e3 tr\u1ea1ng th\u00e1i (status code) v\u00e0 th\u00f4ng b\u00e1o m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecdc \u0111\u01b0\u1ee3c (v\u00ed d\u1ee5 l\u1ed7i 404 kh\u00f4ng t\u00ecm th\u1ea5y trang). Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i \u0111\u01b0\u1ee3c tr\u1ea3 v\u1ec1 t\u1eeb m\u00e1y ch\u1ee7 v\u00e0 n\u00f3i cho tr\u00ecnh duy\u1ec7t bi\u1ebft li\u1ec7u y\u00eau c\u1ea7u nh\u1eafm \u0111\u1ebfn t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3 th\u00e0nh c\u00f4ng hay l\u00e0 kh\u00f4ng.<\/p>\n\n\nY\u00eau c\u1ea7u th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 1xx\/2xx\/3xx<\/strong>\n<\/figure>\n\n\n M\u00e3 tr\u1ea1ng th\u00e1i c\u1ee7a website n\u00ean ch\u1ee7 y\u1ebfu l\u00e0 200<\/figcaption><\/figure>\n<\/p>\n\n\n1xx<\/strong> – Th\u00f4ng tin – b\u1ea1n hi\u1ebfm khi th\u1ea5y n\u00f3 trong b\u1ea3ng Waterfall<\/li>2xx<\/strong> – Th\u00e0nh c\u00f4ng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c x\u00e1c nh\u1eadn l\u00e0 \u0111\u00e3 th\u00e0nh c\u00f4ng (h\u1ea7u h\u1ebft s\u1ebd l\u00e0 m\u00e3 200)<\/li>3xx<\/strong> – Chuy\u1ec3n h\u01b0\u1edbng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c chuy\u1ec3n h\u01b0\u1edbng (chuy\u1ec3n h\u01b0\u1edbng 301<\/a> l\u00e0 ph\u1ed5 bi\u1ebfn nh\u1ea5t)<\/li><\/ul>\n\n\nY\u00eau c\u1ea7u kh\u00f4ng th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 4xx\/5xx<\/strong>\n<\/figure>\n\n\n B\u1ea3ng Waterfall s\u1ebd nhanh ch\u00f3ng ph\u00e1t hi\u1ec7n ra c\u00e1c y\u00eau c\u1ea7u b\u1ecb l\u1ed7i tr\u00ean trang<\/figcaption><\/figure>\n<\/p>\n\n\n4xx<\/strong> – l\u1ed7i client – \u0111\u00e2y l\u00e0 l\u1ed7i di\u1ec5n ra khi th\u1ef1c hi\u1ec7n y\u00eau c\u1ea7u (l\u1ed7i 404 file kh\u00f4ng t\u00ecm th\u1ea5y, l\u1ed7i 401 truy c\u1eadp kh\u00f4ng \u0111\u01b0\u1ee3c ph\u00e9p, l\u1ed7i 403 b\u1ecb c\u1ea5m, v\u00e2n v\u00e2n)<\/li>5xx<\/strong> – l\u1ed7i server – m\u00e1y ch\u1ee7 g\u1eb7p th\u1ea5t b\u1ea1i khi x\u1eed l\u00fd y\u00eau c\u1ea7u (l\u1ed7i m\u00e1y ch\u1ee7 n\u1ed9i b\u1ed9 500, l\u1ed7i d\u1ecbch v\u1ee5 kh\u00f4ng kh\u1ea3 d\u1ee5ng 503, v\u00e2n v\u00e2n)<\/li><\/ul>\n\n\n3. File g\u1ed1c<\/h3>\n\n\n\u0110\u00e2y l\u00e0 v\u1ecb tr\u00ed m\u00e0 file \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng nhi\u1ec1u t\u00e0i nguy\u00ean t\u1eeb b\u00ean th\u1ee9 ba (ch\u1eb3ng h\u1ea1n m\u00e3 nh\u00fang YouTube<\/a>, widget c\u1ee7a Facebook, v\u00e2n v\u00e2n) th\u00ec \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd th\u1ea5y hostname c\u1ee7a ch\u00fang kh\u00f4ng \u0111\u1ebfn t\u1eeb host g\u1ed1c c\u1ee7a b\u1ea1n. <\/figure>\n\n\n File g\u1ed1c cho b\u1ea1n bi\u1ebft t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb n\u01a1i n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng CDN<\/a>, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y nhi\u1ec1u file\/t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb c\u00f9ng ngu\u1ed3n – \u0111\u00e2y c\u0169ng l\u00e0 m\u1ed9t c\u00e1ch \u0111\u1ec3 bi\u1ebft CDN c\u1ee7a b\u1ea1n \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh ch\u00ednh x\u00e1c hay ch\u01b0a.<\/p>\n\n\n<\/div><\/div><\/div>\n\n\n4. K\u00edch c\u1ee1 file<\/h3>\n\n\nC\u00e1i t\u00ean n\u00f3i l\u00ean t\u1ea5t c\u1ea3, \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean. T\u1ed5ng k\u00edch c\u1ee1 file c\u1ee7a t\u1ea5t c\u1ea3 c\u00e1c y\u00eau c\u1ea7u t\u1ea1o th\u00e0nh T\u1ed5ng dung l\u01b0\u1ee3ng trang<\/strong>. Gi\u00e1 tr\u1ecb n\u00e0y c\u00e0ng nh\u1ecf, trang c\u1ee7a b\u1ea1n c\u00e0ng t\u1ea3i nhanh h\u01a1n.\n<\/figure>\n\n\n C\u1ed9t k\u00edch c\u1ee1 file trong b\u1ea3ng Waterfall<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n th\u1ea5y file c\u00f3 k\u00edch c\u1ee1 l\u1edbn (th\u01b0\u1eddng hay x\u1ea3y ra v\u1edbi \u1ea3nh, file \u00e2m thanh, video), b\u1ea1n c\u1ea7n \u01b0u ti\u00ean s\u1eeda n\u00f3 tr\u01b0\u1edbc, tr\u01b0\u1edbc khi t\u00ecm hi\u1ec3u c\u00e1c ph\u1ea7n ti\u1ebfp theo trong b\u1ea3ng Waterfall.<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u c\u00e1c plugin gi\u00fap t\u1ed1i \u01b0u h\u00f3a \u1ea3nh tr\u00ean trang Chim C\u1eaft \u1edf \u0111\u00e2y<\/a>. Ngo\u00e0i ra l\u00e0 ph\u1ea7n l\u00fd thuy\u1ebft v\u1ec1 t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng \u1ea3nh<\/a> n\u1ebfu b\u1ea1n mu\u1ed1n t\u00ecm hi\u1ec3u s\u00e2u h\u01a1n n\u1eefa.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure><\/div>\n\n\nHover qua ph\u1ea7n th\u00f4ng tin size \u0111\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 th\u1ef1c \/ uncompressed v\u00e0 k\u00edch c\u1ee1 \u0111\u00e3 \u0111\u01b0\u1ee3c n\u00e9n (n\u1ebfu n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng n\u00e9n \/ compressed, trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y ch\u1ee7 y\u1ebfu l\u00e0 file CSS v\u00e0 JS).<\/p>\n<\/div><\/div><\/div>\n\n\n5. Th\u1eddi gian t\u1ea3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 ph\u1ea7n tr\u00ean b\u1ea3ng Waterfall cho bi\u1ebft th\u1eddi gian t\u1ea3i c\u1ee5 th\u1ec3 c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n, y\u00eau c\u1ea7u tr\u00ean trang.<\/p>\n\n\n\u0110\u00e2y s\u1ebd l\u00e0 n\u01a1i b\u1ea1n c\u1ea7n b\u1ecf nhi\u1ec1u th\u1eddi gian t\u00ecm hi\u1ec3u nh\u1ea5t<\/strong> trong b\u1ea3ng Waterfall!<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00f4 h\u00ecnh thanh x\u1ebfp d\u1ea1ng th\u00e1c m\u00f4 t\u1ea3 c\u00e1ch trang c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 – c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 ph\u1ea7n l\u1edbn \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n trong khu v\u1ef1c n\u00e0y. Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u c\u1ee5 th\u1ec3 h\u01a1n trong ph\u1ea7n n\u00f3i v\u1ec1 Request timings.<\/p>\n\n\n<\/span>Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i<\/span><\/h2>\n\n\nClick v\u00e0o y\u00eau c\u1ea7u s\u1ebd ti\u1ebft l\u1ed9 th\u00f4ng tin ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i (Request\/Response header). Ch\u00fang bao g\u1ed3m th\u00f4ng tin \u0111a d\u1ea1ng, \u0111\u1ea7y \u0111\u1ee7 li\u00ean quan \u0111\u1ebfn c\u00e1ch t\u00e0i nguy\u00ean c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c ph\u1ee5c v\u1ee5.<\/p>\n\n\nCh\u00fang t\u00f4i d\u1ef1 \u0111\u1ecbnh t\u00ecm hi\u1ec3u ch\u1ee7 \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i chi ti\u1ebft h\u01a1n trong b\u00e0i vi\u1ebft kh\u00e1c. Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang t\u00f4i ch\u1ec9 tr\u00ecnh b\u00e0y ng\u1eafn g\u1ecdn m\u1ed9t s\u1ed1 m\u1ee5c ch\u00ednh trong m\u1ed7i ph\u1ea7n:<\/p>\n\n\nTi\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u<\/h3>\n\n\nCh\u00fang l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server. V\u1edbi ng\u01b0\u1eddi m\u1edbi, th\u01b0\u1eddng b\u1ea1n kh\u00f4ng c\u00f3 g\u00ec \u0111\u1ec3 l\u00e0m trong ph\u1ea7n ti\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u l\u00e0 ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server<\/figcaption><\/figure>\n<\/p>\n\n\nTi\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i<\/h3>\n\n\nPh\u1ea3n h\u1ed3i l\u00e0 nh\u1eefng ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i, v\u00e0 \u0111\u00f4i khi l\u00e0 ch\u00eca kh\u00f3a trong vi\u1ec7c ch\u1ea9n \u0111o\u00e1n c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i cho tr\u00ecnh duy\u1ec7t<\/figcaption><\/figure>\n<\/p>\n\n\nV\u1ec1 c\u01a1 b\u1ea3n, ch\u00fang bi\u1ec3u th\u1ecb c\u1ea5u h\u00ecnh, c\u00e0i \u0111\u1eb7t, ho\u1eb7c thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c y\u00eau c\u1ea7u.<\/p>\n\n\nV\u1edbi ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i, b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3:<\/p>\n\n\n\u0110\u01b0\u1ee3c n\u00e9n hay l\u00e0 kh\u00f4ng (v\u00ed d\u1ee5 gzip)<\/li>Cache<\/li>\u0110\u01b0\u1ee3c ph\u1ee5c v\u1ee5 th\u00f4ng qua CDN (hit\/miss\/revalidated)<\/li>Keep-Alive \u0111\u01b0\u1ee3c b\u1eadt<\/li>Ph\u1ee5c v\u1ee5 th\u00f4ng qua HTTP\/2<\/li>Chuy\u1ec3n h\u01b0\u1edbng n\u1ed9i b\u1ed9 (v\u00ed d\u1ee5 HGST)<\/li><\/ul>\n\n\n\nM\u1eb9o: N\u1ebfu b\u00e1o c\u00e1o GTmetrix cho th\u1ea5y b\u1ea1n c\u00f3 \u0111i\u1ec3m k\u00e9m cho nh\u1eefng khuy\u1ebfn ngh\u1ecb \u1edf tr\u00ean, ki\u1ec3m tra ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i s\u1ebd c\u00f3 kh\u1ea3 n\u0103ng ti\u1ebft l\u1ed9 nhi\u1ec1u chi ti\u1ebft gi\u00fap b\u1ea1n bi\u1ebft l\u00fd do v\u00ec sao.<\/p>\n<\/div><\/div><\/div>\n\n\n<\/span>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/span><\/h2>\n\n\nH\u00e3y c\u00f9ng quan s\u00e1t b\u1ea3ng Waterfall t\u1ed1i gi\u1ea3n d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n s\u1ebd ngay l\u1eadp t\u1ee9c \u0111\u1ec3 \u00fd th\u1ea5y t\u1eebng y\u00eau c\u1ea7u c\u00f3 m\u1ed9t b\u1ed9 thanh m\u00e0u t\u01b0\u01a1ng \u1ee9ng \u1edf b\u00ean ph\u1ea3i.<\/p>\n\n\nN\u00f3i ng\u1eafn g\u1ecdn th\u00ec t\u1eebng m\u00e0u \u0111\u1ea1i di\u1ec7n cho m\u1ed9t ph\u1ea7n kh\u00e1c nhau trong qu\u00e1 tr\u00ecnh t\u1ea3i c\u1ee7a m\u1ed9t ngu\u1ed3n c\u1ee5 th\u1ec3.<\/p>\n\n\nCh\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng m\u00e0u ngay sau \u0111\u00e2y:<\/p>\n\n\nM\u00e0u n\u00e2u – ch\u1eb7n<\/h3>\n\n\nCh\u1eb7n (blocking) l\u00e0 th\u1eddi gian m\u00e0 y\u00eau c\u1ea7u ph\u1ea3i \u0111\u1ee3i trong h\u00e0ng ch\u1edd tr\u00ecnh duy\u1ec7t (browser’s queue) \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u kh\u1edfi \u0111\u1ed9ng m\u1ed9t y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ch\u1eb7n ng\u0103n c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo \u0111\u01b0\u1ee3c x\u1eed l\u00fd<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00f9ng nhau g\u00e2y ra th\u1eddi gian ch\u1eb7n bao g\u1ed3m:<\/p>\n\n\nCh\u1edd \u0111\u1ee3i k\u1ebft n\u1ed1i c\u00f3 s\u1eb5n.<\/li>T\u1ea3i\/th\u1ef1c thi JavaScript ho\u1eb7c CSS (m\u1eb7c d\u00f9 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u00e3 th\u00f4ng minh h\u01a1n trong vi\u1ec7c t\u1ed1i thi\u1ec3u h\u00f3a ch\u00fang).<\/li>Th\u1eddi gian k\u1ebft n\u1ed1i SSL (th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian k\u1ebft n\u1ed1i \/ connection time)<\/li>X\u00e1c th\u1ef1c HTTP (y\u00eau c\u1ea7u b\u1ed5 sung c\u1ea7n thi\u1ebft \u0111\u1ec3 thi\u1ebft l\u1eadp x\u00e1c th\u1ef1c).<\/li><\/ul>\n\n\nM\u00e0u xanh x\u00e1m – Tra c\u1ee9u DNS<\/h3>\n\n\nTr\u01b0\u1edbc khi k\u1ebft n\u1ed1i \u0111\u1ebfn server \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh, hostname c\u1ea7n ph\u00e2n gi\u1ea3i th\u00e0nh IP – \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 t\u00ecm ki\u1ebfm\/tra c\u1ee9u DNS<\/a> (lookup).\n<\/figure>\n\n\n Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\nM\u00e0u xanh l\u00e1 c\u00e2y – K\u1ebft n\u1ed1i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n<\/figure><\/div>\n\n\nL\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP t\u1ea1o th\u00e0nh m\u00e3 tr\u1ea1ng th\u00e1i (status code) v\u00e0 th\u00f4ng b\u00e1o m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecdc \u0111\u01b0\u1ee3c (v\u00ed d\u1ee5 l\u1ed7i 404 kh\u00f4ng t\u00ecm th\u1ea5y trang). Tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i \u0111\u01b0\u1ee3c tr\u1ea3 v\u1ec1 t\u1eeb m\u00e1y ch\u1ee7 v\u00e0 n\u00f3i cho tr\u00ecnh duy\u1ec7t bi\u1ebft li\u1ec7u y\u00eau c\u1ea7u nh\u1eafm \u0111\u1ebfn t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3 th\u00e0nh c\u00f4ng hay l\u00e0 kh\u00f4ng.<\/p>\n\n\n
Y\u00eau c\u1ea7u th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 1xx\/2xx\/3xx<\/strong>\n<\/figure>\n\n\n M\u00e3 tr\u1ea1ng th\u00e1i c\u1ee7a website n\u00ean ch\u1ee7 y\u1ebfu l\u00e0 200<\/figcaption><\/figure>\n<\/p>\n\n\n1xx<\/strong> – Th\u00f4ng tin – b\u1ea1n hi\u1ebfm khi th\u1ea5y n\u00f3 trong b\u1ea3ng Waterfall<\/li>2xx<\/strong> – Th\u00e0nh c\u00f4ng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c x\u00e1c nh\u1eadn l\u00e0 \u0111\u00e3 th\u00e0nh c\u00f4ng (h\u1ea7u h\u1ebft s\u1ebd l\u00e0 m\u00e3 200)<\/li>3xx<\/strong> – Chuy\u1ec3n h\u01b0\u1edbng – y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c chuy\u1ec3n h\u01b0\u1edbng (chuy\u1ec3n h\u01b0\u1edbng 301<\/a> l\u00e0 ph\u1ed5 bi\u1ebfn nh\u1ea5t)<\/li><\/ul>\n\n\nY\u00eau c\u1ea7u kh\u00f4ng th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 4xx\/5xx<\/strong>\n<\/figure>\n\n\n B\u1ea3ng Waterfall s\u1ebd nhanh ch\u00f3ng ph\u00e1t hi\u1ec7n ra c\u00e1c y\u00eau c\u1ea7u b\u1ecb l\u1ed7i tr\u00ean trang<\/figcaption><\/figure>\n<\/p>\n\n\n4xx<\/strong> – l\u1ed7i client – \u0111\u00e2y l\u00e0 l\u1ed7i di\u1ec5n ra khi th\u1ef1c hi\u1ec7n y\u00eau c\u1ea7u (l\u1ed7i 404 file kh\u00f4ng t\u00ecm th\u1ea5y, l\u1ed7i 401 truy c\u1eadp kh\u00f4ng \u0111\u01b0\u1ee3c ph\u00e9p, l\u1ed7i 403 b\u1ecb c\u1ea5m, v\u00e2n v\u00e2n)<\/li>5xx<\/strong> – l\u1ed7i server – m\u00e1y ch\u1ee7 g\u1eb7p th\u1ea5t b\u1ea1i khi x\u1eed l\u00fd y\u00eau c\u1ea7u (l\u1ed7i m\u00e1y ch\u1ee7 n\u1ed9i b\u1ed9 500, l\u1ed7i d\u1ecbch v\u1ee5 kh\u00f4ng kh\u1ea3 d\u1ee5ng 503, v\u00e2n v\u00e2n)<\/li><\/ul>\n\n\n3. File g\u1ed1c<\/h3>\n\n\n\u0110\u00e2y l\u00e0 v\u1ecb tr\u00ed m\u00e0 file \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng nhi\u1ec1u t\u00e0i nguy\u00ean t\u1eeb b\u00ean th\u1ee9 ba (ch\u1eb3ng h\u1ea1n m\u00e3 nh\u00fang YouTube<\/a>, widget c\u1ee7a Facebook, v\u00e2n v\u00e2n) th\u00ec \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd th\u1ea5y hostname c\u1ee7a ch\u00fang kh\u00f4ng \u0111\u1ebfn t\u1eeb host g\u1ed1c c\u1ee7a b\u1ea1n. <\/figure>\n\n\n File g\u1ed1c cho b\u1ea1n bi\u1ebft t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb n\u01a1i n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng CDN<\/a>, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y nhi\u1ec1u file\/t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb c\u00f9ng ngu\u1ed3n – \u0111\u00e2y c\u0169ng l\u00e0 m\u1ed9t c\u00e1ch \u0111\u1ec3 bi\u1ebft CDN c\u1ee7a b\u1ea1n \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh ch\u00ednh x\u00e1c hay ch\u01b0a.<\/p>\n\n\n<\/div><\/div><\/div>\n\n\n4. K\u00edch c\u1ee1 file<\/h3>\n\n\nC\u00e1i t\u00ean n\u00f3i l\u00ean t\u1ea5t c\u1ea3, \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean. T\u1ed5ng k\u00edch c\u1ee1 file c\u1ee7a t\u1ea5t c\u1ea3 c\u00e1c y\u00eau c\u1ea7u t\u1ea1o th\u00e0nh T\u1ed5ng dung l\u01b0\u1ee3ng trang<\/strong>. Gi\u00e1 tr\u1ecb n\u00e0y c\u00e0ng nh\u1ecf, trang c\u1ee7a b\u1ea1n c\u00e0ng t\u1ea3i nhanh h\u01a1n.\n<\/figure>\n\n\n C\u1ed9t k\u00edch c\u1ee1 file trong b\u1ea3ng Waterfall<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n th\u1ea5y file c\u00f3 k\u00edch c\u1ee1 l\u1edbn (th\u01b0\u1eddng hay x\u1ea3y ra v\u1edbi \u1ea3nh, file \u00e2m thanh, video), b\u1ea1n c\u1ea7n \u01b0u ti\u00ean s\u1eeda n\u00f3 tr\u01b0\u1edbc, tr\u01b0\u1edbc khi t\u00ecm hi\u1ec3u c\u00e1c ph\u1ea7n ti\u1ebfp theo trong b\u1ea3ng Waterfall.<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u c\u00e1c plugin gi\u00fap t\u1ed1i \u01b0u h\u00f3a \u1ea3nh tr\u00ean trang Chim C\u1eaft \u1edf \u0111\u00e2y<\/a>. Ngo\u00e0i ra l\u00e0 ph\u1ea7n l\u00fd thuy\u1ebft v\u1ec1 t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng \u1ea3nh<\/a> n\u1ebfu b\u1ea1n mu\u1ed1n t\u00ecm hi\u1ec3u s\u00e2u h\u01a1n n\u1eefa.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure><\/div>\n\n\nHover qua ph\u1ea7n th\u00f4ng tin size \u0111\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 th\u1ef1c \/ uncompressed v\u00e0 k\u00edch c\u1ee1 \u0111\u00e3 \u0111\u01b0\u1ee3c n\u00e9n (n\u1ebfu n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng n\u00e9n \/ compressed, trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y ch\u1ee7 y\u1ebfu l\u00e0 file CSS v\u00e0 JS).<\/p>\n<\/div><\/div><\/div>\n\n\n5. Th\u1eddi gian t\u1ea3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 ph\u1ea7n tr\u00ean b\u1ea3ng Waterfall cho bi\u1ebft th\u1eddi gian t\u1ea3i c\u1ee5 th\u1ec3 c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n, y\u00eau c\u1ea7u tr\u00ean trang.<\/p>\n\n\n\u0110\u00e2y s\u1ebd l\u00e0 n\u01a1i b\u1ea1n c\u1ea7n b\u1ecf nhi\u1ec1u th\u1eddi gian t\u00ecm hi\u1ec3u nh\u1ea5t<\/strong> trong b\u1ea3ng Waterfall!<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00f4 h\u00ecnh thanh x\u1ebfp d\u1ea1ng th\u00e1c m\u00f4 t\u1ea3 c\u00e1ch trang c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 – c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 ph\u1ea7n l\u1edbn \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n trong khu v\u1ef1c n\u00e0y. Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u c\u1ee5 th\u1ec3 h\u01a1n trong ph\u1ea7n n\u00f3i v\u1ec1 Request timings.<\/p>\n\n\n<\/span>Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i<\/span><\/h2>\n\n\nClick v\u00e0o y\u00eau c\u1ea7u s\u1ebd ti\u1ebft l\u1ed9 th\u00f4ng tin ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i (Request\/Response header). Ch\u00fang bao g\u1ed3m th\u00f4ng tin \u0111a d\u1ea1ng, \u0111\u1ea7y \u0111\u1ee7 li\u00ean quan \u0111\u1ebfn c\u00e1ch t\u00e0i nguy\u00ean c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c ph\u1ee5c v\u1ee5.<\/p>\n\n\nCh\u00fang t\u00f4i d\u1ef1 \u0111\u1ecbnh t\u00ecm hi\u1ec3u ch\u1ee7 \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i chi ti\u1ebft h\u01a1n trong b\u00e0i vi\u1ebft kh\u00e1c. Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang t\u00f4i ch\u1ec9 tr\u00ecnh b\u00e0y ng\u1eafn g\u1ecdn m\u1ed9t s\u1ed1 m\u1ee5c ch\u00ednh trong m\u1ed7i ph\u1ea7n:<\/p>\n\n\nTi\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u<\/h3>\n\n\nCh\u00fang l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server. V\u1edbi ng\u01b0\u1eddi m\u1edbi, th\u01b0\u1eddng b\u1ea1n kh\u00f4ng c\u00f3 g\u00ec \u0111\u1ec3 l\u00e0m trong ph\u1ea7n ti\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u l\u00e0 ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server<\/figcaption><\/figure>\n<\/p>\n\n\nTi\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i<\/h3>\n\n\nPh\u1ea3n h\u1ed3i l\u00e0 nh\u1eefng ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i, v\u00e0 \u0111\u00f4i khi l\u00e0 ch\u00eca kh\u00f3a trong vi\u1ec7c ch\u1ea9n \u0111o\u00e1n c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i cho tr\u00ecnh duy\u1ec7t<\/figcaption><\/figure>\n<\/p>\n\n\nV\u1ec1 c\u01a1 b\u1ea3n, ch\u00fang bi\u1ec3u th\u1ecb c\u1ea5u h\u00ecnh, c\u00e0i \u0111\u1eb7t, ho\u1eb7c thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c y\u00eau c\u1ea7u.<\/p>\n\n\nV\u1edbi ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i, b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3:<\/p>\n\n\n\u0110\u01b0\u1ee3c n\u00e9n hay l\u00e0 kh\u00f4ng (v\u00ed d\u1ee5 gzip)<\/li>Cache<\/li>\u0110\u01b0\u1ee3c ph\u1ee5c v\u1ee5 th\u00f4ng qua CDN (hit\/miss\/revalidated)<\/li>Keep-Alive \u0111\u01b0\u1ee3c b\u1eadt<\/li>Ph\u1ee5c v\u1ee5 th\u00f4ng qua HTTP\/2<\/li>Chuy\u1ec3n h\u01b0\u1edbng n\u1ed9i b\u1ed9 (v\u00ed d\u1ee5 HGST)<\/li><\/ul>\n\n\n\nM\u1eb9o: N\u1ebfu b\u00e1o c\u00e1o GTmetrix cho th\u1ea5y b\u1ea1n c\u00f3 \u0111i\u1ec3m k\u00e9m cho nh\u1eefng khuy\u1ebfn ngh\u1ecb \u1edf tr\u00ean, ki\u1ec3m tra ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i s\u1ebd c\u00f3 kh\u1ea3 n\u0103ng ti\u1ebft l\u1ed9 nhi\u1ec1u chi ti\u1ebft gi\u00fap b\u1ea1n bi\u1ebft l\u00fd do v\u00ec sao.<\/p>\n<\/div><\/div><\/div>\n\n\n<\/span>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/span><\/h2>\n\n\nH\u00e3y c\u00f9ng quan s\u00e1t b\u1ea3ng Waterfall t\u1ed1i gi\u1ea3n d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n s\u1ebd ngay l\u1eadp t\u1ee9c \u0111\u1ec3 \u00fd th\u1ea5y t\u1eebng y\u00eau c\u1ea7u c\u00f3 m\u1ed9t b\u1ed9 thanh m\u00e0u t\u01b0\u01a1ng \u1ee9ng \u1edf b\u00ean ph\u1ea3i.<\/p>\n\n\nN\u00f3i ng\u1eafn g\u1ecdn th\u00ec t\u1eebng m\u00e0u \u0111\u1ea1i di\u1ec7n cho m\u1ed9t ph\u1ea7n kh\u00e1c nhau trong qu\u00e1 tr\u00ecnh t\u1ea3i c\u1ee7a m\u1ed9t ngu\u1ed3n c\u1ee5 th\u1ec3.<\/p>\n\n\nCh\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng m\u00e0u ngay sau \u0111\u00e2y:<\/p>\n\n\nM\u00e0u n\u00e2u – ch\u1eb7n<\/h3>\n\n\nCh\u1eb7n (blocking) l\u00e0 th\u1eddi gian m\u00e0 y\u00eau c\u1ea7u ph\u1ea3i \u0111\u1ee3i trong h\u00e0ng ch\u1edd tr\u00ecnh duy\u1ec7t (browser’s queue) \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u kh\u1edfi \u0111\u1ed9ng m\u1ed9t y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ch\u1eb7n ng\u0103n c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo \u0111\u01b0\u1ee3c x\u1eed l\u00fd<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00f9ng nhau g\u00e2y ra th\u1eddi gian ch\u1eb7n bao g\u1ed3m:<\/p>\n\n\nCh\u1edd \u0111\u1ee3i k\u1ebft n\u1ed1i c\u00f3 s\u1eb5n.<\/li>T\u1ea3i\/th\u1ef1c thi JavaScript ho\u1eb7c CSS (m\u1eb7c d\u00f9 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u00e3 th\u00f4ng minh h\u01a1n trong vi\u1ec7c t\u1ed1i thi\u1ec3u h\u00f3a ch\u00fang).<\/li>Th\u1eddi gian k\u1ebft n\u1ed1i SSL (th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian k\u1ebft n\u1ed1i \/ connection time)<\/li>X\u00e1c th\u1ef1c HTTP (y\u00eau c\u1ea7u b\u1ed5 sung c\u1ea7n thi\u1ebft \u0111\u1ec3 thi\u1ebft l\u1eadp x\u00e1c th\u1ef1c).<\/li><\/ul>\n\n\nM\u00e0u xanh x\u00e1m – Tra c\u1ee9u DNS<\/h3>\n\n\nTr\u01b0\u1edbc khi k\u1ebft n\u1ed1i \u0111\u1ebfn server \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh, hostname c\u1ea7n ph\u00e2n gi\u1ea3i th\u00e0nh IP – \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 t\u00ecm ki\u1ebfm\/tra c\u1ee9u DNS<\/a> (lookup).\n<\/figure>\n\n\n Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\nM\u00e0u xanh l\u00e1 c\u00e2y – K\u1ebft n\u1ed1i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n<\/figure><\/div>\n\n\nL\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
M\u00e3 tr\u1ea1ng th\u00e1i c\u1ee7a website n\u00ean ch\u1ee7 y\u1ebfu l\u00e0 200<\/figcaption><\/figure>\n<\/p>\n\n\n
Y\u00eau c\u1ea7u kh\u00f4ng th\u00e0nh c\u00f4ng = M\u00e3 tr\u1ea1ng th\u00e1i 4xx\/5xx<\/strong>\n<\/figure>\n\n\n B\u1ea3ng Waterfall s\u1ebd nhanh ch\u00f3ng ph\u00e1t hi\u1ec7n ra c\u00e1c y\u00eau c\u1ea7u b\u1ecb l\u1ed7i tr\u00ean trang<\/figcaption><\/figure>\n<\/p>\n\n\n4xx<\/strong> – l\u1ed7i client – \u0111\u00e2y l\u00e0 l\u1ed7i di\u1ec5n ra khi th\u1ef1c hi\u1ec7n y\u00eau c\u1ea7u (l\u1ed7i 404 file kh\u00f4ng t\u00ecm th\u1ea5y, l\u1ed7i 401 truy c\u1eadp kh\u00f4ng \u0111\u01b0\u1ee3c ph\u00e9p, l\u1ed7i 403 b\u1ecb c\u1ea5m, v\u00e2n v\u00e2n)<\/li>5xx<\/strong> – l\u1ed7i server – m\u00e1y ch\u1ee7 g\u1eb7p th\u1ea5t b\u1ea1i khi x\u1eed l\u00fd y\u00eau c\u1ea7u (l\u1ed7i m\u00e1y ch\u1ee7 n\u1ed9i b\u1ed9 500, l\u1ed7i d\u1ecbch v\u1ee5 kh\u00f4ng kh\u1ea3 d\u1ee5ng 503, v\u00e2n v\u00e2n)<\/li><\/ul>\n\n\n3. File g\u1ed1c<\/h3>\n\n\n\u0110\u00e2y l\u00e0 v\u1ecb tr\u00ed m\u00e0 file \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng nhi\u1ec1u t\u00e0i nguy\u00ean t\u1eeb b\u00ean th\u1ee9 ba (ch\u1eb3ng h\u1ea1n m\u00e3 nh\u00fang YouTube<\/a>, widget c\u1ee7a Facebook, v\u00e2n v\u00e2n) th\u00ec \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd th\u1ea5y hostname c\u1ee7a ch\u00fang kh\u00f4ng \u0111\u1ebfn t\u1eeb host g\u1ed1c c\u1ee7a b\u1ea1n. <\/figure>\n\n\n File g\u1ed1c cho b\u1ea1n bi\u1ebft t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb n\u01a1i n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng CDN<\/a>, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y nhi\u1ec1u file\/t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb c\u00f9ng ngu\u1ed3n – \u0111\u00e2y c\u0169ng l\u00e0 m\u1ed9t c\u00e1ch \u0111\u1ec3 bi\u1ebft CDN c\u1ee7a b\u1ea1n \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh ch\u00ednh x\u00e1c hay ch\u01b0a.<\/p>\n\n\n<\/div><\/div><\/div>\n\n\n4. K\u00edch c\u1ee1 file<\/h3>\n\n\nC\u00e1i t\u00ean n\u00f3i l\u00ean t\u1ea5t c\u1ea3, \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean. T\u1ed5ng k\u00edch c\u1ee1 file c\u1ee7a t\u1ea5t c\u1ea3 c\u00e1c y\u00eau c\u1ea7u t\u1ea1o th\u00e0nh T\u1ed5ng dung l\u01b0\u1ee3ng trang<\/strong>. Gi\u00e1 tr\u1ecb n\u00e0y c\u00e0ng nh\u1ecf, trang c\u1ee7a b\u1ea1n c\u00e0ng t\u1ea3i nhanh h\u01a1n.\n<\/figure>\n\n\n C\u1ed9t k\u00edch c\u1ee1 file trong b\u1ea3ng Waterfall<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n th\u1ea5y file c\u00f3 k\u00edch c\u1ee1 l\u1edbn (th\u01b0\u1eddng hay x\u1ea3y ra v\u1edbi \u1ea3nh, file \u00e2m thanh, video), b\u1ea1n c\u1ea7n \u01b0u ti\u00ean s\u1eeda n\u00f3 tr\u01b0\u1edbc, tr\u01b0\u1edbc khi t\u00ecm hi\u1ec3u c\u00e1c ph\u1ea7n ti\u1ebfp theo trong b\u1ea3ng Waterfall.<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u c\u00e1c plugin gi\u00fap t\u1ed1i \u01b0u h\u00f3a \u1ea3nh tr\u00ean trang Chim C\u1eaft \u1edf \u0111\u00e2y<\/a>. Ngo\u00e0i ra l\u00e0 ph\u1ea7n l\u00fd thuy\u1ebft v\u1ec1 t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng \u1ea3nh<\/a> n\u1ebfu b\u1ea1n mu\u1ed1n t\u00ecm hi\u1ec3u s\u00e2u h\u01a1n n\u1eefa.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure><\/div>\n\n\nHover qua ph\u1ea7n th\u00f4ng tin size \u0111\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 th\u1ef1c \/ uncompressed v\u00e0 k\u00edch c\u1ee1 \u0111\u00e3 \u0111\u01b0\u1ee3c n\u00e9n (n\u1ebfu n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng n\u00e9n \/ compressed, trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y ch\u1ee7 y\u1ebfu l\u00e0 file CSS v\u00e0 JS).<\/p>\n<\/div><\/div><\/div>\n\n\n5. Th\u1eddi gian t\u1ea3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 ph\u1ea7n tr\u00ean b\u1ea3ng Waterfall cho bi\u1ebft th\u1eddi gian t\u1ea3i c\u1ee5 th\u1ec3 c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n, y\u00eau c\u1ea7u tr\u00ean trang.<\/p>\n\n\n\u0110\u00e2y s\u1ebd l\u00e0 n\u01a1i b\u1ea1n c\u1ea7n b\u1ecf nhi\u1ec1u th\u1eddi gian t\u00ecm hi\u1ec3u nh\u1ea5t<\/strong> trong b\u1ea3ng Waterfall!<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00f4 h\u00ecnh thanh x\u1ebfp d\u1ea1ng th\u00e1c m\u00f4 t\u1ea3 c\u00e1ch trang c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 – c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 ph\u1ea7n l\u1edbn \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n trong khu v\u1ef1c n\u00e0y. Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u c\u1ee5 th\u1ec3 h\u01a1n trong ph\u1ea7n n\u00f3i v\u1ec1 Request timings.<\/p>\n\n\n<\/span>Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i<\/span><\/h2>\n\n\nClick v\u00e0o y\u00eau c\u1ea7u s\u1ebd ti\u1ebft l\u1ed9 th\u00f4ng tin ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i (Request\/Response header). Ch\u00fang bao g\u1ed3m th\u00f4ng tin \u0111a d\u1ea1ng, \u0111\u1ea7y \u0111\u1ee7 li\u00ean quan \u0111\u1ebfn c\u00e1ch t\u00e0i nguy\u00ean c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c ph\u1ee5c v\u1ee5.<\/p>\n\n\nCh\u00fang t\u00f4i d\u1ef1 \u0111\u1ecbnh t\u00ecm hi\u1ec3u ch\u1ee7 \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i chi ti\u1ebft h\u01a1n trong b\u00e0i vi\u1ebft kh\u00e1c. Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang t\u00f4i ch\u1ec9 tr\u00ecnh b\u00e0y ng\u1eafn g\u1ecdn m\u1ed9t s\u1ed1 m\u1ee5c ch\u00ednh trong m\u1ed7i ph\u1ea7n:<\/p>\n\n\nTi\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u<\/h3>\n\n\nCh\u00fang l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server. V\u1edbi ng\u01b0\u1eddi m\u1edbi, th\u01b0\u1eddng b\u1ea1n kh\u00f4ng c\u00f3 g\u00ec \u0111\u1ec3 l\u00e0m trong ph\u1ea7n ti\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u l\u00e0 ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server<\/figcaption><\/figure>\n<\/p>\n\n\nTi\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i<\/h3>\n\n\nPh\u1ea3n h\u1ed3i l\u00e0 nh\u1eefng ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i, v\u00e0 \u0111\u00f4i khi l\u00e0 ch\u00eca kh\u00f3a trong vi\u1ec7c ch\u1ea9n \u0111o\u00e1n c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i cho tr\u00ecnh duy\u1ec7t<\/figcaption><\/figure>\n<\/p>\n\n\nV\u1ec1 c\u01a1 b\u1ea3n, ch\u00fang bi\u1ec3u th\u1ecb c\u1ea5u h\u00ecnh, c\u00e0i \u0111\u1eb7t, ho\u1eb7c thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c y\u00eau c\u1ea7u.<\/p>\n\n\nV\u1edbi ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i, b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3:<\/p>\n\n\n\u0110\u01b0\u1ee3c n\u00e9n hay l\u00e0 kh\u00f4ng (v\u00ed d\u1ee5 gzip)<\/li>Cache<\/li>\u0110\u01b0\u1ee3c ph\u1ee5c v\u1ee5 th\u00f4ng qua CDN (hit\/miss\/revalidated)<\/li>Keep-Alive \u0111\u01b0\u1ee3c b\u1eadt<\/li>Ph\u1ee5c v\u1ee5 th\u00f4ng qua HTTP\/2<\/li>Chuy\u1ec3n h\u01b0\u1edbng n\u1ed9i b\u1ed9 (v\u00ed d\u1ee5 HGST)<\/li><\/ul>\n\n\n\nM\u1eb9o: N\u1ebfu b\u00e1o c\u00e1o GTmetrix cho th\u1ea5y b\u1ea1n c\u00f3 \u0111i\u1ec3m k\u00e9m cho nh\u1eefng khuy\u1ebfn ngh\u1ecb \u1edf tr\u00ean, ki\u1ec3m tra ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i s\u1ebd c\u00f3 kh\u1ea3 n\u0103ng ti\u1ebft l\u1ed9 nhi\u1ec1u chi ti\u1ebft gi\u00fap b\u1ea1n bi\u1ebft l\u00fd do v\u00ec sao.<\/p>\n<\/div><\/div><\/div>\n\n\n<\/span>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/span><\/h2>\n\n\nH\u00e3y c\u00f9ng quan s\u00e1t b\u1ea3ng Waterfall t\u1ed1i gi\u1ea3n d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n s\u1ebd ngay l\u1eadp t\u1ee9c \u0111\u1ec3 \u00fd th\u1ea5y t\u1eebng y\u00eau c\u1ea7u c\u00f3 m\u1ed9t b\u1ed9 thanh m\u00e0u t\u01b0\u01a1ng \u1ee9ng \u1edf b\u00ean ph\u1ea3i.<\/p>\n\n\nN\u00f3i ng\u1eafn g\u1ecdn th\u00ec t\u1eebng m\u00e0u \u0111\u1ea1i di\u1ec7n cho m\u1ed9t ph\u1ea7n kh\u00e1c nhau trong qu\u00e1 tr\u00ecnh t\u1ea3i c\u1ee7a m\u1ed9t ngu\u1ed3n c\u1ee5 th\u1ec3.<\/p>\n\n\nCh\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng m\u00e0u ngay sau \u0111\u00e2y:<\/p>\n\n\nM\u00e0u n\u00e2u – ch\u1eb7n<\/h3>\n\n\nCh\u1eb7n (blocking) l\u00e0 th\u1eddi gian m\u00e0 y\u00eau c\u1ea7u ph\u1ea3i \u0111\u1ee3i trong h\u00e0ng ch\u1edd tr\u00ecnh duy\u1ec7t (browser’s queue) \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u kh\u1edfi \u0111\u1ed9ng m\u1ed9t y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ch\u1eb7n ng\u0103n c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo \u0111\u01b0\u1ee3c x\u1eed l\u00fd<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00f9ng nhau g\u00e2y ra th\u1eddi gian ch\u1eb7n bao g\u1ed3m:<\/p>\n\n\nCh\u1edd \u0111\u1ee3i k\u1ebft n\u1ed1i c\u00f3 s\u1eb5n.<\/li>T\u1ea3i\/th\u1ef1c thi JavaScript ho\u1eb7c CSS (m\u1eb7c d\u00f9 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u00e3 th\u00f4ng minh h\u01a1n trong vi\u1ec7c t\u1ed1i thi\u1ec3u h\u00f3a ch\u00fang).<\/li>Th\u1eddi gian k\u1ebft n\u1ed1i SSL (th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian k\u1ebft n\u1ed1i \/ connection time)<\/li>X\u00e1c th\u1ef1c HTTP (y\u00eau c\u1ea7u b\u1ed5 sung c\u1ea7n thi\u1ebft \u0111\u1ec3 thi\u1ebft l\u1eadp x\u00e1c th\u1ef1c).<\/li><\/ul>\n\n\nM\u00e0u xanh x\u00e1m – Tra c\u1ee9u DNS<\/h3>\n\n\nTr\u01b0\u1edbc khi k\u1ebft n\u1ed1i \u0111\u1ebfn server \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh, hostname c\u1ea7n ph\u00e2n gi\u1ea3i th\u00e0nh IP – \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 t\u00ecm ki\u1ebfm\/tra c\u1ee9u DNS<\/a> (lookup).\n<\/figure>\n\n\n Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\nM\u00e0u xanh l\u00e1 c\u00e2y – K\u1ebft n\u1ed1i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n<\/figure><\/div>\n\n\nL\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
B\u1ea3ng Waterfall s\u1ebd nhanh ch\u00f3ng ph\u00e1t hi\u1ec7n ra c\u00e1c y\u00eau c\u1ea7u b\u1ecb l\u1ed7i tr\u00ean trang<\/figcaption><\/figure>\n<\/p>\n\n\n
\u0110\u00e2y l\u00e0 v\u1ecb tr\u00ed m\u00e0 file \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng nhi\u1ec1u t\u00e0i nguy\u00ean t\u1eeb b\u00ean th\u1ee9 ba (ch\u1eb3ng h\u1ea1n m\u00e3 nh\u00fang YouTube<\/a>, widget c\u1ee7a Facebook, v\u00e2n v\u00e2n) th\u00ec \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd th\u1ea5y hostname c\u1ee7a ch\u00fang kh\u00f4ng \u0111\u1ebfn t\u1eeb host g\u1ed1c c\u1ee7a b\u1ea1n. <\/figure>\n\n\n File g\u1ed1c cho b\u1ea1n bi\u1ebft t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb n\u01a1i n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng CDN<\/a>, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y nhi\u1ec1u file\/t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb c\u00f9ng ngu\u1ed3n – \u0111\u00e2y c\u0169ng l\u00e0 m\u1ed9t c\u00e1ch \u0111\u1ec3 bi\u1ebft CDN c\u1ee7a b\u1ea1n \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh ch\u00ednh x\u00e1c hay ch\u01b0a.<\/p>\n\n\n<\/div><\/div><\/div>\n\n\n4. K\u00edch c\u1ee1 file<\/h3>\n\n\nC\u00e1i t\u00ean n\u00f3i l\u00ean t\u1ea5t c\u1ea3, \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean. T\u1ed5ng k\u00edch c\u1ee1 file c\u1ee7a t\u1ea5t c\u1ea3 c\u00e1c y\u00eau c\u1ea7u t\u1ea1o th\u00e0nh T\u1ed5ng dung l\u01b0\u1ee3ng trang<\/strong>. Gi\u00e1 tr\u1ecb n\u00e0y c\u00e0ng nh\u1ecf, trang c\u1ee7a b\u1ea1n c\u00e0ng t\u1ea3i nhanh h\u01a1n.\n<\/figure>\n\n\n C\u1ed9t k\u00edch c\u1ee1 file trong b\u1ea3ng Waterfall<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n th\u1ea5y file c\u00f3 k\u00edch c\u1ee1 l\u1edbn (th\u01b0\u1eddng hay x\u1ea3y ra v\u1edbi \u1ea3nh, file \u00e2m thanh, video), b\u1ea1n c\u1ea7n \u01b0u ti\u00ean s\u1eeda n\u00f3 tr\u01b0\u1edbc, tr\u01b0\u1edbc khi t\u00ecm hi\u1ec3u c\u00e1c ph\u1ea7n ti\u1ebfp theo trong b\u1ea3ng Waterfall.<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u c\u00e1c plugin gi\u00fap t\u1ed1i \u01b0u h\u00f3a \u1ea3nh tr\u00ean trang Chim C\u1eaft \u1edf \u0111\u00e2y<\/a>. Ngo\u00e0i ra l\u00e0 ph\u1ea7n l\u00fd thuy\u1ebft v\u1ec1 t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng \u1ea3nh<\/a> n\u1ebfu b\u1ea1n mu\u1ed1n t\u00ecm hi\u1ec3u s\u00e2u h\u01a1n n\u1eefa.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure><\/div>\n\n\nHover qua ph\u1ea7n th\u00f4ng tin size \u0111\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 th\u1ef1c \/ uncompressed v\u00e0 k\u00edch c\u1ee1 \u0111\u00e3 \u0111\u01b0\u1ee3c n\u00e9n (n\u1ebfu n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng n\u00e9n \/ compressed, trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y ch\u1ee7 y\u1ebfu l\u00e0 file CSS v\u00e0 JS).<\/p>\n<\/div><\/div><\/div>\n\n\n5. Th\u1eddi gian t\u1ea3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 ph\u1ea7n tr\u00ean b\u1ea3ng Waterfall cho bi\u1ebft th\u1eddi gian t\u1ea3i c\u1ee5 th\u1ec3 c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n, y\u00eau c\u1ea7u tr\u00ean trang.<\/p>\n\n\n\u0110\u00e2y s\u1ebd l\u00e0 n\u01a1i b\u1ea1n c\u1ea7n b\u1ecf nhi\u1ec1u th\u1eddi gian t\u00ecm hi\u1ec3u nh\u1ea5t<\/strong> trong b\u1ea3ng Waterfall!<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00f4 h\u00ecnh thanh x\u1ebfp d\u1ea1ng th\u00e1c m\u00f4 t\u1ea3 c\u00e1ch trang c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 – c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 ph\u1ea7n l\u1edbn \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n trong khu v\u1ef1c n\u00e0y. Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u c\u1ee5 th\u1ec3 h\u01a1n trong ph\u1ea7n n\u00f3i v\u1ec1 Request timings.<\/p>\n\n\n<\/span>Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i<\/span><\/h2>\n\n\nClick v\u00e0o y\u00eau c\u1ea7u s\u1ebd ti\u1ebft l\u1ed9 th\u00f4ng tin ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i (Request\/Response header). Ch\u00fang bao g\u1ed3m th\u00f4ng tin \u0111a d\u1ea1ng, \u0111\u1ea7y \u0111\u1ee7 li\u00ean quan \u0111\u1ebfn c\u00e1ch t\u00e0i nguy\u00ean c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c ph\u1ee5c v\u1ee5.<\/p>\n\n\nCh\u00fang t\u00f4i d\u1ef1 \u0111\u1ecbnh t\u00ecm hi\u1ec3u ch\u1ee7 \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i chi ti\u1ebft h\u01a1n trong b\u00e0i vi\u1ebft kh\u00e1c. Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang t\u00f4i ch\u1ec9 tr\u00ecnh b\u00e0y ng\u1eafn g\u1ecdn m\u1ed9t s\u1ed1 m\u1ee5c ch\u00ednh trong m\u1ed7i ph\u1ea7n:<\/p>\n\n\nTi\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u<\/h3>\n\n\nCh\u00fang l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server. V\u1edbi ng\u01b0\u1eddi m\u1edbi, th\u01b0\u1eddng b\u1ea1n kh\u00f4ng c\u00f3 g\u00ec \u0111\u1ec3 l\u00e0m trong ph\u1ea7n ti\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u l\u00e0 ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server<\/figcaption><\/figure>\n<\/p>\n\n\nTi\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i<\/h3>\n\n\nPh\u1ea3n h\u1ed3i l\u00e0 nh\u1eefng ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i, v\u00e0 \u0111\u00f4i khi l\u00e0 ch\u00eca kh\u00f3a trong vi\u1ec7c ch\u1ea9n \u0111o\u00e1n c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i cho tr\u00ecnh duy\u1ec7t<\/figcaption><\/figure>\n<\/p>\n\n\nV\u1ec1 c\u01a1 b\u1ea3n, ch\u00fang bi\u1ec3u th\u1ecb c\u1ea5u h\u00ecnh, c\u00e0i \u0111\u1eb7t, ho\u1eb7c thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c y\u00eau c\u1ea7u.<\/p>\n\n\nV\u1edbi ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i, b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3:<\/p>\n\n\n\u0110\u01b0\u1ee3c n\u00e9n hay l\u00e0 kh\u00f4ng (v\u00ed d\u1ee5 gzip)<\/li>Cache<\/li>\u0110\u01b0\u1ee3c ph\u1ee5c v\u1ee5 th\u00f4ng qua CDN (hit\/miss\/revalidated)<\/li>Keep-Alive \u0111\u01b0\u1ee3c b\u1eadt<\/li>Ph\u1ee5c v\u1ee5 th\u00f4ng qua HTTP\/2<\/li>Chuy\u1ec3n h\u01b0\u1edbng n\u1ed9i b\u1ed9 (v\u00ed d\u1ee5 HGST)<\/li><\/ul>\n\n\n\nM\u1eb9o: N\u1ebfu b\u00e1o c\u00e1o GTmetrix cho th\u1ea5y b\u1ea1n c\u00f3 \u0111i\u1ec3m k\u00e9m cho nh\u1eefng khuy\u1ebfn ngh\u1ecb \u1edf tr\u00ean, ki\u1ec3m tra ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i s\u1ebd c\u00f3 kh\u1ea3 n\u0103ng ti\u1ebft l\u1ed9 nhi\u1ec1u chi ti\u1ebft gi\u00fap b\u1ea1n bi\u1ebft l\u00fd do v\u00ec sao.<\/p>\n<\/div><\/div><\/div>\n\n\n<\/span>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/span><\/h2>\n\n\nH\u00e3y c\u00f9ng quan s\u00e1t b\u1ea3ng Waterfall t\u1ed1i gi\u1ea3n d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n s\u1ebd ngay l\u1eadp t\u1ee9c \u0111\u1ec3 \u00fd th\u1ea5y t\u1eebng y\u00eau c\u1ea7u c\u00f3 m\u1ed9t b\u1ed9 thanh m\u00e0u t\u01b0\u01a1ng \u1ee9ng \u1edf b\u00ean ph\u1ea3i.<\/p>\n\n\nN\u00f3i ng\u1eafn g\u1ecdn th\u00ec t\u1eebng m\u00e0u \u0111\u1ea1i di\u1ec7n cho m\u1ed9t ph\u1ea7n kh\u00e1c nhau trong qu\u00e1 tr\u00ecnh t\u1ea3i c\u1ee7a m\u1ed9t ngu\u1ed3n c\u1ee5 th\u1ec3.<\/p>\n\n\nCh\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng m\u00e0u ngay sau \u0111\u00e2y:<\/p>\n\n\nM\u00e0u n\u00e2u – ch\u1eb7n<\/h3>\n\n\nCh\u1eb7n (blocking) l\u00e0 th\u1eddi gian m\u00e0 y\u00eau c\u1ea7u ph\u1ea3i \u0111\u1ee3i trong h\u00e0ng ch\u1edd tr\u00ecnh duy\u1ec7t (browser’s queue) \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u kh\u1edfi \u0111\u1ed9ng m\u1ed9t y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ch\u1eb7n ng\u0103n c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo \u0111\u01b0\u1ee3c x\u1eed l\u00fd<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00f9ng nhau g\u00e2y ra th\u1eddi gian ch\u1eb7n bao g\u1ed3m:<\/p>\n\n\nCh\u1edd \u0111\u1ee3i k\u1ebft n\u1ed1i c\u00f3 s\u1eb5n.<\/li>T\u1ea3i\/th\u1ef1c thi JavaScript ho\u1eb7c CSS (m\u1eb7c d\u00f9 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u00e3 th\u00f4ng minh h\u01a1n trong vi\u1ec7c t\u1ed1i thi\u1ec3u h\u00f3a ch\u00fang).<\/li>Th\u1eddi gian k\u1ebft n\u1ed1i SSL (th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian k\u1ebft n\u1ed1i \/ connection time)<\/li>X\u00e1c th\u1ef1c HTTP (y\u00eau c\u1ea7u b\u1ed5 sung c\u1ea7n thi\u1ebft \u0111\u1ec3 thi\u1ebft l\u1eadp x\u00e1c th\u1ef1c).<\/li><\/ul>\n\n\nM\u00e0u xanh x\u00e1m – Tra c\u1ee9u DNS<\/h3>\n\n\nTr\u01b0\u1edbc khi k\u1ebft n\u1ed1i \u0111\u1ebfn server \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh, hostname c\u1ea7n ph\u00e2n gi\u1ea3i th\u00e0nh IP – \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 t\u00ecm ki\u1ebfm\/tra c\u1ee9u DNS<\/a> (lookup).\n<\/figure>\n\n\n Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\nM\u00e0u xanh l\u00e1 c\u00e2y – K\u1ebft n\u1ed1i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n<\/figure><\/div>\n\n\nL\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
File g\u1ed1c cho b\u1ea1n bi\u1ebft t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb n\u01a1i n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\n
N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng CDN<\/a>, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y nhi\u1ec1u file\/t\u00e0i nguy\u00ean \u0111\u1ebfn t\u1eeb c\u00f9ng ngu\u1ed3n – \u0111\u00e2y c\u0169ng l\u00e0 m\u1ed9t c\u00e1ch \u0111\u1ec3 bi\u1ebft CDN c\u1ee7a b\u1ea1n \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh ch\u00ednh x\u00e1c hay ch\u01b0a.<\/p>\n\n\n<\/div><\/div><\/div>\n\n\n4. K\u00edch c\u1ee1 file<\/h3>\n\n\nC\u00e1i t\u00ean n\u00f3i l\u00ean t\u1ea5t c\u1ea3, \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean. T\u1ed5ng k\u00edch c\u1ee1 file c\u1ee7a t\u1ea5t c\u1ea3 c\u00e1c y\u00eau c\u1ea7u t\u1ea1o th\u00e0nh T\u1ed5ng dung l\u01b0\u1ee3ng trang<\/strong>. Gi\u00e1 tr\u1ecb n\u00e0y c\u00e0ng nh\u1ecf, trang c\u1ee7a b\u1ea1n c\u00e0ng t\u1ea3i nhanh h\u01a1n.\n<\/figure>\n\n\n C\u1ed9t k\u00edch c\u1ee1 file trong b\u1ea3ng Waterfall<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n th\u1ea5y file c\u00f3 k\u00edch c\u1ee1 l\u1edbn (th\u01b0\u1eddng hay x\u1ea3y ra v\u1edbi \u1ea3nh, file \u00e2m thanh, video), b\u1ea1n c\u1ea7n \u01b0u ti\u00ean s\u1eeda n\u00f3 tr\u01b0\u1edbc, tr\u01b0\u1edbc khi t\u00ecm hi\u1ec3u c\u00e1c ph\u1ea7n ti\u1ebfp theo trong b\u1ea3ng Waterfall.<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u c\u00e1c plugin gi\u00fap t\u1ed1i \u01b0u h\u00f3a \u1ea3nh tr\u00ean trang Chim C\u1eaft \u1edf \u0111\u00e2y<\/a>. Ngo\u00e0i ra l\u00e0 ph\u1ea7n l\u00fd thuy\u1ebft v\u1ec1 t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng \u1ea3nh<\/a> n\u1ebfu b\u1ea1n mu\u1ed1n t\u00ecm hi\u1ec3u s\u00e2u h\u01a1n n\u1eefa.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure><\/div>\n\n\nHover qua ph\u1ea7n th\u00f4ng tin size \u0111\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 th\u1ef1c \/ uncompressed v\u00e0 k\u00edch c\u1ee1 \u0111\u00e3 \u0111\u01b0\u1ee3c n\u00e9n (n\u1ebfu n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng n\u00e9n \/ compressed, trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y ch\u1ee7 y\u1ebfu l\u00e0 file CSS v\u00e0 JS).<\/p>\n<\/div><\/div><\/div>\n\n\n5. Th\u1eddi gian t\u1ea3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 ph\u1ea7n tr\u00ean b\u1ea3ng Waterfall cho bi\u1ebft th\u1eddi gian t\u1ea3i c\u1ee5 th\u1ec3 c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n, y\u00eau c\u1ea7u tr\u00ean trang.<\/p>\n\n\n\u0110\u00e2y s\u1ebd l\u00e0 n\u01a1i b\u1ea1n c\u1ea7n b\u1ecf nhi\u1ec1u th\u1eddi gian t\u00ecm hi\u1ec3u nh\u1ea5t<\/strong> trong b\u1ea3ng Waterfall!<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00f4 h\u00ecnh thanh x\u1ebfp d\u1ea1ng th\u00e1c m\u00f4 t\u1ea3 c\u00e1ch trang c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 – c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 ph\u1ea7n l\u1edbn \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n trong khu v\u1ef1c n\u00e0y. Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u c\u1ee5 th\u1ec3 h\u01a1n trong ph\u1ea7n n\u00f3i v\u1ec1 Request timings.<\/p>\n\n\n<\/span>Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i<\/span><\/h2>\n\n\nClick v\u00e0o y\u00eau c\u1ea7u s\u1ebd ti\u1ebft l\u1ed9 th\u00f4ng tin ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i (Request\/Response header). Ch\u00fang bao g\u1ed3m th\u00f4ng tin \u0111a d\u1ea1ng, \u0111\u1ea7y \u0111\u1ee7 li\u00ean quan \u0111\u1ebfn c\u00e1ch t\u00e0i nguy\u00ean c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c ph\u1ee5c v\u1ee5.<\/p>\n\n\nCh\u00fang t\u00f4i d\u1ef1 \u0111\u1ecbnh t\u00ecm hi\u1ec3u ch\u1ee7 \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i chi ti\u1ebft h\u01a1n trong b\u00e0i vi\u1ebft kh\u00e1c. Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang t\u00f4i ch\u1ec9 tr\u00ecnh b\u00e0y ng\u1eafn g\u1ecdn m\u1ed9t s\u1ed1 m\u1ee5c ch\u00ednh trong m\u1ed7i ph\u1ea7n:<\/p>\n\n\nTi\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u<\/h3>\n\n\nCh\u00fang l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server. V\u1edbi ng\u01b0\u1eddi m\u1edbi, th\u01b0\u1eddng b\u1ea1n kh\u00f4ng c\u00f3 g\u00ec \u0111\u1ec3 l\u00e0m trong ph\u1ea7n ti\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u l\u00e0 ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server<\/figcaption><\/figure>\n<\/p>\n\n\nTi\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i<\/h3>\n\n\nPh\u1ea3n h\u1ed3i l\u00e0 nh\u1eefng ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i, v\u00e0 \u0111\u00f4i khi l\u00e0 ch\u00eca kh\u00f3a trong vi\u1ec7c ch\u1ea9n \u0111o\u00e1n c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i cho tr\u00ecnh duy\u1ec7t<\/figcaption><\/figure>\n<\/p>\n\n\nV\u1ec1 c\u01a1 b\u1ea3n, ch\u00fang bi\u1ec3u th\u1ecb c\u1ea5u h\u00ecnh, c\u00e0i \u0111\u1eb7t, ho\u1eb7c thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c y\u00eau c\u1ea7u.<\/p>\n\n\nV\u1edbi ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i, b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3:<\/p>\n\n\n\u0110\u01b0\u1ee3c n\u00e9n hay l\u00e0 kh\u00f4ng (v\u00ed d\u1ee5 gzip)<\/li>Cache<\/li>\u0110\u01b0\u1ee3c ph\u1ee5c v\u1ee5 th\u00f4ng qua CDN (hit\/miss\/revalidated)<\/li>Keep-Alive \u0111\u01b0\u1ee3c b\u1eadt<\/li>Ph\u1ee5c v\u1ee5 th\u00f4ng qua HTTP\/2<\/li>Chuy\u1ec3n h\u01b0\u1edbng n\u1ed9i b\u1ed9 (v\u00ed d\u1ee5 HGST)<\/li><\/ul>\n\n\n\nM\u1eb9o: N\u1ebfu b\u00e1o c\u00e1o GTmetrix cho th\u1ea5y b\u1ea1n c\u00f3 \u0111i\u1ec3m k\u00e9m cho nh\u1eefng khuy\u1ebfn ngh\u1ecb \u1edf tr\u00ean, ki\u1ec3m tra ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i s\u1ebd c\u00f3 kh\u1ea3 n\u0103ng ti\u1ebft l\u1ed9 nhi\u1ec1u chi ti\u1ebft gi\u00fap b\u1ea1n bi\u1ebft l\u00fd do v\u00ec sao.<\/p>\n<\/div><\/div><\/div>\n\n\n<\/span>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/span><\/h2>\n\n\nH\u00e3y c\u00f9ng quan s\u00e1t b\u1ea3ng Waterfall t\u1ed1i gi\u1ea3n d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n s\u1ebd ngay l\u1eadp t\u1ee9c \u0111\u1ec3 \u00fd th\u1ea5y t\u1eebng y\u00eau c\u1ea7u c\u00f3 m\u1ed9t b\u1ed9 thanh m\u00e0u t\u01b0\u01a1ng \u1ee9ng \u1edf b\u00ean ph\u1ea3i.<\/p>\n\n\nN\u00f3i ng\u1eafn g\u1ecdn th\u00ec t\u1eebng m\u00e0u \u0111\u1ea1i di\u1ec7n cho m\u1ed9t ph\u1ea7n kh\u00e1c nhau trong qu\u00e1 tr\u00ecnh t\u1ea3i c\u1ee7a m\u1ed9t ngu\u1ed3n c\u1ee5 th\u1ec3.<\/p>\n\n\nCh\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng m\u00e0u ngay sau \u0111\u00e2y:<\/p>\n\n\nM\u00e0u n\u00e2u – ch\u1eb7n<\/h3>\n\n\nCh\u1eb7n (blocking) l\u00e0 th\u1eddi gian m\u00e0 y\u00eau c\u1ea7u ph\u1ea3i \u0111\u1ee3i trong h\u00e0ng ch\u1edd tr\u00ecnh duy\u1ec7t (browser’s queue) \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u kh\u1edfi \u0111\u1ed9ng m\u1ed9t y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ch\u1eb7n ng\u0103n c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo \u0111\u01b0\u1ee3c x\u1eed l\u00fd<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00f9ng nhau g\u00e2y ra th\u1eddi gian ch\u1eb7n bao g\u1ed3m:<\/p>\n\n\nCh\u1edd \u0111\u1ee3i k\u1ebft n\u1ed1i c\u00f3 s\u1eb5n.<\/li>T\u1ea3i\/th\u1ef1c thi JavaScript ho\u1eb7c CSS (m\u1eb7c d\u00f9 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u00e3 th\u00f4ng minh h\u01a1n trong vi\u1ec7c t\u1ed1i thi\u1ec3u h\u00f3a ch\u00fang).<\/li>Th\u1eddi gian k\u1ebft n\u1ed1i SSL (th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian k\u1ebft n\u1ed1i \/ connection time)<\/li>X\u00e1c th\u1ef1c HTTP (y\u00eau c\u1ea7u b\u1ed5 sung c\u1ea7n thi\u1ebft \u0111\u1ec3 thi\u1ebft l\u1eadp x\u00e1c th\u1ef1c).<\/li><\/ul>\n\n\nM\u00e0u xanh x\u00e1m – Tra c\u1ee9u DNS<\/h3>\n\n\nTr\u01b0\u1edbc khi k\u1ebft n\u1ed1i \u0111\u1ebfn server \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh, hostname c\u1ea7n ph\u00e2n gi\u1ea3i th\u00e0nh IP – \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 t\u00ecm ki\u1ebfm\/tra c\u1ee9u DNS<\/a> (lookup).\n<\/figure>\n\n\n Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\nM\u00e0u xanh l\u00e1 c\u00e2y – K\u1ebft n\u1ed1i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n<\/figure><\/div>\n\n\nL\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
C\u00e1i t\u00ean n\u00f3i l\u00ean t\u1ea5t c\u1ea3, \u1edf ph\u1ea7n n\u00e0y b\u1ea1n s\u1ebd bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 c\u1ee7a file ho\u1eb7c t\u00e0i nguy\u00ean. T\u1ed5ng k\u00edch c\u1ee1 file c\u1ee7a t\u1ea5t c\u1ea3 c\u00e1c y\u00eau c\u1ea7u t\u1ea1o th\u00e0nh T\u1ed5ng dung l\u01b0\u1ee3ng trang<\/strong>. Gi\u00e1 tr\u1ecb n\u00e0y c\u00e0ng nh\u1ecf, trang c\u1ee7a b\u1ea1n c\u00e0ng t\u1ea3i nhanh h\u01a1n.\n<\/figure>\n\n\n C\u1ed9t k\u00edch c\u1ee1 file trong b\u1ea3ng Waterfall<\/figcaption><\/figure>\n<\/p>\n\n\nN\u1ebfu b\u1ea1n th\u1ea5y file c\u00f3 k\u00edch c\u1ee1 l\u1edbn (th\u01b0\u1eddng hay x\u1ea3y ra v\u1edbi \u1ea3nh, file \u00e2m thanh, video), b\u1ea1n c\u1ea7n \u01b0u ti\u00ean s\u1eeda n\u00f3 tr\u01b0\u1edbc, tr\u01b0\u1edbc khi t\u00ecm hi\u1ec3u c\u00e1c ph\u1ea7n ti\u1ebfp theo trong b\u1ea3ng Waterfall.<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u c\u00e1c plugin gi\u00fap t\u1ed1i \u01b0u h\u00f3a \u1ea3nh tr\u00ean trang Chim C\u1eaft \u1edf \u0111\u00e2y<\/a>. Ngo\u00e0i ra l\u00e0 ph\u1ea7n l\u00fd thuy\u1ebft v\u1ec1 t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng \u1ea3nh<\/a> n\u1ebfu b\u1ea1n mu\u1ed1n t\u00ecm hi\u1ec3u s\u00e2u h\u01a1n n\u1eefa.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure><\/div>\n\n\nHover qua ph\u1ea7n th\u00f4ng tin size \u0111\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 th\u1ef1c \/ uncompressed v\u00e0 k\u00edch c\u1ee1 \u0111\u00e3 \u0111\u01b0\u1ee3c n\u00e9n (n\u1ebfu n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng n\u00e9n \/ compressed, trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y ch\u1ee7 y\u1ebfu l\u00e0 file CSS v\u00e0 JS).<\/p>\n<\/div><\/div><\/div>\n\n\n5. Th\u1eddi gian t\u1ea3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 ph\u1ea7n tr\u00ean b\u1ea3ng Waterfall cho bi\u1ebft th\u1eddi gian t\u1ea3i c\u1ee5 th\u1ec3 c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n, y\u00eau c\u1ea7u tr\u00ean trang.<\/p>\n\n\n\u0110\u00e2y s\u1ebd l\u00e0 n\u01a1i b\u1ea1n c\u1ea7n b\u1ecf nhi\u1ec1u th\u1eddi gian t\u00ecm hi\u1ec3u nh\u1ea5t<\/strong> trong b\u1ea3ng Waterfall!<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00f4 h\u00ecnh thanh x\u1ebfp d\u1ea1ng th\u00e1c m\u00f4 t\u1ea3 c\u00e1ch trang c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 – c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 ph\u1ea7n l\u1edbn \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n trong khu v\u1ef1c n\u00e0y. Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u c\u1ee5 th\u1ec3 h\u01a1n trong ph\u1ea7n n\u00f3i v\u1ec1 Request timings.<\/p>\n\n\n<\/span>Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i<\/span><\/h2>\n\n\nClick v\u00e0o y\u00eau c\u1ea7u s\u1ebd ti\u1ebft l\u1ed9 th\u00f4ng tin ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i (Request\/Response header). Ch\u00fang bao g\u1ed3m th\u00f4ng tin \u0111a d\u1ea1ng, \u0111\u1ea7y \u0111\u1ee7 li\u00ean quan \u0111\u1ebfn c\u00e1ch t\u00e0i nguy\u00ean c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c ph\u1ee5c v\u1ee5.<\/p>\n\n\nCh\u00fang t\u00f4i d\u1ef1 \u0111\u1ecbnh t\u00ecm hi\u1ec3u ch\u1ee7 \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i chi ti\u1ebft h\u01a1n trong b\u00e0i vi\u1ebft kh\u00e1c. Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang t\u00f4i ch\u1ec9 tr\u00ecnh b\u00e0y ng\u1eafn g\u1ecdn m\u1ed9t s\u1ed1 m\u1ee5c ch\u00ednh trong m\u1ed7i ph\u1ea7n:<\/p>\n\n\nTi\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u<\/h3>\n\n\nCh\u00fang l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server. V\u1edbi ng\u01b0\u1eddi m\u1edbi, th\u01b0\u1eddng b\u1ea1n kh\u00f4ng c\u00f3 g\u00ec \u0111\u1ec3 l\u00e0m trong ph\u1ea7n ti\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u l\u00e0 ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server<\/figcaption><\/figure>\n<\/p>\n\n\nTi\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i<\/h3>\n\n\nPh\u1ea3n h\u1ed3i l\u00e0 nh\u1eefng ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i, v\u00e0 \u0111\u00f4i khi l\u00e0 ch\u00eca kh\u00f3a trong vi\u1ec7c ch\u1ea9n \u0111o\u00e1n c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i cho tr\u00ecnh duy\u1ec7t<\/figcaption><\/figure>\n<\/p>\n\n\nV\u1ec1 c\u01a1 b\u1ea3n, ch\u00fang bi\u1ec3u th\u1ecb c\u1ea5u h\u00ecnh, c\u00e0i \u0111\u1eb7t, ho\u1eb7c thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c y\u00eau c\u1ea7u.<\/p>\n\n\nV\u1edbi ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i, b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3:<\/p>\n\n\n\u0110\u01b0\u1ee3c n\u00e9n hay l\u00e0 kh\u00f4ng (v\u00ed d\u1ee5 gzip)<\/li>Cache<\/li>\u0110\u01b0\u1ee3c ph\u1ee5c v\u1ee5 th\u00f4ng qua CDN (hit\/miss\/revalidated)<\/li>Keep-Alive \u0111\u01b0\u1ee3c b\u1eadt<\/li>Ph\u1ee5c v\u1ee5 th\u00f4ng qua HTTP\/2<\/li>Chuy\u1ec3n h\u01b0\u1edbng n\u1ed9i b\u1ed9 (v\u00ed d\u1ee5 HGST)<\/li><\/ul>\n\n\n\nM\u1eb9o: N\u1ebfu b\u00e1o c\u00e1o GTmetrix cho th\u1ea5y b\u1ea1n c\u00f3 \u0111i\u1ec3m k\u00e9m cho nh\u1eefng khuy\u1ebfn ngh\u1ecb \u1edf tr\u00ean, ki\u1ec3m tra ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i s\u1ebd c\u00f3 kh\u1ea3 n\u0103ng ti\u1ebft l\u1ed9 nhi\u1ec1u chi ti\u1ebft gi\u00fap b\u1ea1n bi\u1ebft l\u00fd do v\u00ec sao.<\/p>\n<\/div><\/div><\/div>\n\n\n<\/span>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/span><\/h2>\n\n\nH\u00e3y c\u00f9ng quan s\u00e1t b\u1ea3ng Waterfall t\u1ed1i gi\u1ea3n d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n s\u1ebd ngay l\u1eadp t\u1ee9c \u0111\u1ec3 \u00fd th\u1ea5y t\u1eebng y\u00eau c\u1ea7u c\u00f3 m\u1ed9t b\u1ed9 thanh m\u00e0u t\u01b0\u01a1ng \u1ee9ng \u1edf b\u00ean ph\u1ea3i.<\/p>\n\n\nN\u00f3i ng\u1eafn g\u1ecdn th\u00ec t\u1eebng m\u00e0u \u0111\u1ea1i di\u1ec7n cho m\u1ed9t ph\u1ea7n kh\u00e1c nhau trong qu\u00e1 tr\u00ecnh t\u1ea3i c\u1ee7a m\u1ed9t ngu\u1ed3n c\u1ee5 th\u1ec3.<\/p>\n\n\nCh\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng m\u00e0u ngay sau \u0111\u00e2y:<\/p>\n\n\nM\u00e0u n\u00e2u – ch\u1eb7n<\/h3>\n\n\nCh\u1eb7n (blocking) l\u00e0 th\u1eddi gian m\u00e0 y\u00eau c\u1ea7u ph\u1ea3i \u0111\u1ee3i trong h\u00e0ng ch\u1edd tr\u00ecnh duy\u1ec7t (browser’s queue) \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u kh\u1edfi \u0111\u1ed9ng m\u1ed9t y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ch\u1eb7n ng\u0103n c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo \u0111\u01b0\u1ee3c x\u1eed l\u00fd<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00f9ng nhau g\u00e2y ra th\u1eddi gian ch\u1eb7n bao g\u1ed3m:<\/p>\n\n\nCh\u1edd \u0111\u1ee3i k\u1ebft n\u1ed1i c\u00f3 s\u1eb5n.<\/li>T\u1ea3i\/th\u1ef1c thi JavaScript ho\u1eb7c CSS (m\u1eb7c d\u00f9 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u00e3 th\u00f4ng minh h\u01a1n trong vi\u1ec7c t\u1ed1i thi\u1ec3u h\u00f3a ch\u00fang).<\/li>Th\u1eddi gian k\u1ebft n\u1ed1i SSL (th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian k\u1ebft n\u1ed1i \/ connection time)<\/li>X\u00e1c th\u1ef1c HTTP (y\u00eau c\u1ea7u b\u1ed5 sung c\u1ea7n thi\u1ebft \u0111\u1ec3 thi\u1ebft l\u1eadp x\u00e1c th\u1ef1c).<\/li><\/ul>\n\n\nM\u00e0u xanh x\u00e1m – Tra c\u1ee9u DNS<\/h3>\n\n\nTr\u01b0\u1edbc khi k\u1ebft n\u1ed1i \u0111\u1ebfn server \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh, hostname c\u1ea7n ph\u00e2n gi\u1ea3i th\u00e0nh IP – \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 t\u00ecm ki\u1ebfm\/tra c\u1ee9u DNS<\/a> (lookup).\n<\/figure>\n\n\n Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\nM\u00e0u xanh l\u00e1 c\u00e2y – K\u1ebft n\u1ed1i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n<\/figure><\/div>\n\n\nL\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
C\u1ed9t k\u00edch c\u1ee1 file trong b\u1ea3ng Waterfall<\/figcaption><\/figure>\n<\/p>\n\n\n
N\u1ebfu b\u1ea1n th\u1ea5y file c\u00f3 k\u00edch c\u1ee1 l\u1edbn (th\u01b0\u1eddng hay x\u1ea3y ra v\u1edbi \u1ea3nh, file \u00e2m thanh, video), b\u1ea1n c\u1ea7n \u01b0u ti\u00ean s\u1eeda n\u00f3 tr\u01b0\u1edbc, tr\u01b0\u1edbc khi t\u00ecm hi\u1ec3u c\u00e1c ph\u1ea7n ti\u1ebfp theo trong b\u1ea3ng Waterfall.<\/p>\n\n\n
B\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u c\u00e1c plugin gi\u00fap t\u1ed1i \u01b0u h\u00f3a \u1ea3nh tr\u00ean trang Chim C\u1eaft \u1edf \u0111\u00e2y<\/a>. Ngo\u00e0i ra l\u00e0 ph\u1ea7n l\u00fd thuy\u1ebft v\u1ec1 t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng \u1ea3nh<\/a> n\u1ebfu b\u1ea1n mu\u1ed1n t\u00ecm hi\u1ec3u s\u00e2u h\u01a1n n\u1eefa.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure><\/div>\n\n\nHover qua ph\u1ea7n th\u00f4ng tin size \u0111\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 th\u1ef1c \/ uncompressed v\u00e0 k\u00edch c\u1ee1 \u0111\u00e3 \u0111\u01b0\u1ee3c n\u00e9n (n\u1ebfu n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng n\u00e9n \/ compressed, trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y ch\u1ee7 y\u1ebfu l\u00e0 file CSS v\u00e0 JS).<\/p>\n<\/div><\/div><\/div>\n\n\n5. Th\u1eddi gian t\u1ea3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 ph\u1ea7n tr\u00ean b\u1ea3ng Waterfall cho bi\u1ebft th\u1eddi gian t\u1ea3i c\u1ee5 th\u1ec3 c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n, y\u00eau c\u1ea7u tr\u00ean trang.<\/p>\n\n\n\u0110\u00e2y s\u1ebd l\u00e0 n\u01a1i b\u1ea1n c\u1ea7n b\u1ecf nhi\u1ec1u th\u1eddi gian t\u00ecm hi\u1ec3u nh\u1ea5t<\/strong> trong b\u1ea3ng Waterfall!<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00f4 h\u00ecnh thanh x\u1ebfp d\u1ea1ng th\u00e1c m\u00f4 t\u1ea3 c\u00e1ch trang c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 – c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 ph\u1ea7n l\u1edbn \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n trong khu v\u1ef1c n\u00e0y. Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u c\u1ee5 th\u1ec3 h\u01a1n trong ph\u1ea7n n\u00f3i v\u1ec1 Request timings.<\/p>\n\n\n<\/span>Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i<\/span><\/h2>\n\n\nClick v\u00e0o y\u00eau c\u1ea7u s\u1ebd ti\u1ebft l\u1ed9 th\u00f4ng tin ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i (Request\/Response header). Ch\u00fang bao g\u1ed3m th\u00f4ng tin \u0111a d\u1ea1ng, \u0111\u1ea7y \u0111\u1ee7 li\u00ean quan \u0111\u1ebfn c\u00e1ch t\u00e0i nguy\u00ean c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c ph\u1ee5c v\u1ee5.<\/p>\n\n\nCh\u00fang t\u00f4i d\u1ef1 \u0111\u1ecbnh t\u00ecm hi\u1ec3u ch\u1ee7 \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i chi ti\u1ebft h\u01a1n trong b\u00e0i vi\u1ebft kh\u00e1c. Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang t\u00f4i ch\u1ec9 tr\u00ecnh b\u00e0y ng\u1eafn g\u1ecdn m\u1ed9t s\u1ed1 m\u1ee5c ch\u00ednh trong m\u1ed7i ph\u1ea7n:<\/p>\n\n\nTi\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u<\/h3>\n\n\nCh\u00fang l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server. V\u1edbi ng\u01b0\u1eddi m\u1edbi, th\u01b0\u1eddng b\u1ea1n kh\u00f4ng c\u00f3 g\u00ec \u0111\u1ec3 l\u00e0m trong ph\u1ea7n ti\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u l\u00e0 ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server<\/figcaption><\/figure>\n<\/p>\n\n\nTi\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i<\/h3>\n\n\nPh\u1ea3n h\u1ed3i l\u00e0 nh\u1eefng ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i, v\u00e0 \u0111\u00f4i khi l\u00e0 ch\u00eca kh\u00f3a trong vi\u1ec7c ch\u1ea9n \u0111o\u00e1n c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i cho tr\u00ecnh duy\u1ec7t<\/figcaption><\/figure>\n<\/p>\n\n\nV\u1ec1 c\u01a1 b\u1ea3n, ch\u00fang bi\u1ec3u th\u1ecb c\u1ea5u h\u00ecnh, c\u00e0i \u0111\u1eb7t, ho\u1eb7c thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c y\u00eau c\u1ea7u.<\/p>\n\n\nV\u1edbi ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i, b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3:<\/p>\n\n\n\u0110\u01b0\u1ee3c n\u00e9n hay l\u00e0 kh\u00f4ng (v\u00ed d\u1ee5 gzip)<\/li>Cache<\/li>\u0110\u01b0\u1ee3c ph\u1ee5c v\u1ee5 th\u00f4ng qua CDN (hit\/miss\/revalidated)<\/li>Keep-Alive \u0111\u01b0\u1ee3c b\u1eadt<\/li>Ph\u1ee5c v\u1ee5 th\u00f4ng qua HTTP\/2<\/li>Chuy\u1ec3n h\u01b0\u1edbng n\u1ed9i b\u1ed9 (v\u00ed d\u1ee5 HGST)<\/li><\/ul>\n\n\n\nM\u1eb9o: N\u1ebfu b\u00e1o c\u00e1o GTmetrix cho th\u1ea5y b\u1ea1n c\u00f3 \u0111i\u1ec3m k\u00e9m cho nh\u1eefng khuy\u1ebfn ngh\u1ecb \u1edf tr\u00ean, ki\u1ec3m tra ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i s\u1ebd c\u00f3 kh\u1ea3 n\u0103ng ti\u1ebft l\u1ed9 nhi\u1ec1u chi ti\u1ebft gi\u00fap b\u1ea1n bi\u1ebft l\u00fd do v\u00ec sao.<\/p>\n<\/div><\/div><\/div>\n\n\n<\/span>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/span><\/h2>\n\n\nH\u00e3y c\u00f9ng quan s\u00e1t b\u1ea3ng Waterfall t\u1ed1i gi\u1ea3n d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n s\u1ebd ngay l\u1eadp t\u1ee9c \u0111\u1ec3 \u00fd th\u1ea5y t\u1eebng y\u00eau c\u1ea7u c\u00f3 m\u1ed9t b\u1ed9 thanh m\u00e0u t\u01b0\u01a1ng \u1ee9ng \u1edf b\u00ean ph\u1ea3i.<\/p>\n\n\nN\u00f3i ng\u1eafn g\u1ecdn th\u00ec t\u1eebng m\u00e0u \u0111\u1ea1i di\u1ec7n cho m\u1ed9t ph\u1ea7n kh\u00e1c nhau trong qu\u00e1 tr\u00ecnh t\u1ea3i c\u1ee7a m\u1ed9t ngu\u1ed3n c\u1ee5 th\u1ec3.<\/p>\n\n\nCh\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng m\u00e0u ngay sau \u0111\u00e2y:<\/p>\n\n\nM\u00e0u n\u00e2u – ch\u1eb7n<\/h3>\n\n\nCh\u1eb7n (blocking) l\u00e0 th\u1eddi gian m\u00e0 y\u00eau c\u1ea7u ph\u1ea3i \u0111\u1ee3i trong h\u00e0ng ch\u1edd tr\u00ecnh duy\u1ec7t (browser’s queue) \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u kh\u1edfi \u0111\u1ed9ng m\u1ed9t y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ch\u1eb7n ng\u0103n c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo \u0111\u01b0\u1ee3c x\u1eed l\u00fd<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00f9ng nhau g\u00e2y ra th\u1eddi gian ch\u1eb7n bao g\u1ed3m:<\/p>\n\n\nCh\u1edd \u0111\u1ee3i k\u1ebft n\u1ed1i c\u00f3 s\u1eb5n.<\/li>T\u1ea3i\/th\u1ef1c thi JavaScript ho\u1eb7c CSS (m\u1eb7c d\u00f9 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u00e3 th\u00f4ng minh h\u01a1n trong vi\u1ec7c t\u1ed1i thi\u1ec3u h\u00f3a ch\u00fang).<\/li>Th\u1eddi gian k\u1ebft n\u1ed1i SSL (th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian k\u1ebft n\u1ed1i \/ connection time)<\/li>X\u00e1c th\u1ef1c HTTP (y\u00eau c\u1ea7u b\u1ed5 sung c\u1ea7n thi\u1ebft \u0111\u1ec3 thi\u1ebft l\u1eadp x\u00e1c th\u1ef1c).<\/li><\/ul>\n\n\nM\u00e0u xanh x\u00e1m – Tra c\u1ee9u DNS<\/h3>\n\n\nTr\u01b0\u1edbc khi k\u1ebft n\u1ed1i \u0111\u1ebfn server \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh, hostname c\u1ea7n ph\u00e2n gi\u1ea3i th\u00e0nh IP – \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 t\u00ecm ki\u1ebfm\/tra c\u1ee9u DNS<\/a> (lookup).\n<\/figure>\n\n\n Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\nM\u00e0u xanh l\u00e1 c\u00e2y – K\u1ebft n\u1ed1i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n<\/figure><\/div>\n\n\nL\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
M\u1eb9o:<\/p>\n\n\n
Hover qua ph\u1ea7n th\u00f4ng tin size \u0111\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c k\u00edch c\u1ee1 th\u1ef1c \/ uncompressed v\u00e0 k\u00edch c\u1ee1 \u0111\u00e3 \u0111\u01b0\u1ee3c n\u00e9n (n\u1ebfu n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng n\u00e9n \/ compressed, trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y ch\u1ee7 y\u1ebfu l\u00e0 file CSS v\u00e0 JS).<\/p>\n<\/div><\/div><\/div>\n\n\n
\u0110\u00e2y l\u00e0 ph\u1ea7n tr\u00ean b\u1ea3ng Waterfall cho bi\u1ebft th\u1eddi gian t\u1ea3i c\u1ee5 th\u1ec3 c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n, y\u00eau c\u1ea7u tr\u00ean trang.<\/p>\n\n\n
\u0110\u00e2y s\u1ebd l\u00e0 n\u01a1i b\u1ea1n c\u1ea7n b\u1ecf nhi\u1ec1u th\u1eddi gian t\u00ecm hi\u1ec3u nh\u1ea5t<\/strong> trong b\u1ea3ng Waterfall!<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00f4 h\u00ecnh thanh x\u1ebfp d\u1ea1ng th\u00e1c m\u00f4 t\u1ea3 c\u00e1ch trang c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 – c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 ph\u1ea7n l\u1edbn \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n trong khu v\u1ef1c n\u00e0y. Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u c\u1ee5 th\u1ec3 h\u01a1n trong ph\u1ea7n n\u00f3i v\u1ec1 Request timings.<\/p>\n\n\n<\/span>Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i<\/span><\/h2>\n\n\nClick v\u00e0o y\u00eau c\u1ea7u s\u1ebd ti\u1ebft l\u1ed9 th\u00f4ng tin ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i (Request\/Response header). Ch\u00fang bao g\u1ed3m th\u00f4ng tin \u0111a d\u1ea1ng, \u0111\u1ea7y \u0111\u1ee7 li\u00ean quan \u0111\u1ebfn c\u00e1ch t\u00e0i nguy\u00ean c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c ph\u1ee5c v\u1ee5.<\/p>\n\n\nCh\u00fang t\u00f4i d\u1ef1 \u0111\u1ecbnh t\u00ecm hi\u1ec3u ch\u1ee7 \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i chi ti\u1ebft h\u01a1n trong b\u00e0i vi\u1ebft kh\u00e1c. Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang t\u00f4i ch\u1ec9 tr\u00ecnh b\u00e0y ng\u1eafn g\u1ecdn m\u1ed9t s\u1ed1 m\u1ee5c ch\u00ednh trong m\u1ed7i ph\u1ea7n:<\/p>\n\n\nTi\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u<\/h3>\n\n\nCh\u00fang l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server. V\u1edbi ng\u01b0\u1eddi m\u1edbi, th\u01b0\u1eddng b\u1ea1n kh\u00f4ng c\u00f3 g\u00ec \u0111\u1ec3 l\u00e0m trong ph\u1ea7n ti\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u l\u00e0 ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server<\/figcaption><\/figure>\n<\/p>\n\n\nTi\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i<\/h3>\n\n\nPh\u1ea3n h\u1ed3i l\u00e0 nh\u1eefng ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i, v\u00e0 \u0111\u00f4i khi l\u00e0 ch\u00eca kh\u00f3a trong vi\u1ec7c ch\u1ea9n \u0111o\u00e1n c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i cho tr\u00ecnh duy\u1ec7t<\/figcaption><\/figure>\n<\/p>\n\n\nV\u1ec1 c\u01a1 b\u1ea3n, ch\u00fang bi\u1ec3u th\u1ecb c\u1ea5u h\u00ecnh, c\u00e0i \u0111\u1eb7t, ho\u1eb7c thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c y\u00eau c\u1ea7u.<\/p>\n\n\nV\u1edbi ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i, b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3:<\/p>\n\n\n\u0110\u01b0\u1ee3c n\u00e9n hay l\u00e0 kh\u00f4ng (v\u00ed d\u1ee5 gzip)<\/li>Cache<\/li>\u0110\u01b0\u1ee3c ph\u1ee5c v\u1ee5 th\u00f4ng qua CDN (hit\/miss\/revalidated)<\/li>Keep-Alive \u0111\u01b0\u1ee3c b\u1eadt<\/li>Ph\u1ee5c v\u1ee5 th\u00f4ng qua HTTP\/2<\/li>Chuy\u1ec3n h\u01b0\u1edbng n\u1ed9i b\u1ed9 (v\u00ed d\u1ee5 HGST)<\/li><\/ul>\n\n\n\nM\u1eb9o: N\u1ebfu b\u00e1o c\u00e1o GTmetrix cho th\u1ea5y b\u1ea1n c\u00f3 \u0111i\u1ec3m k\u00e9m cho nh\u1eefng khuy\u1ebfn ngh\u1ecb \u1edf tr\u00ean, ki\u1ec3m tra ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i s\u1ebd c\u00f3 kh\u1ea3 n\u0103ng ti\u1ebft l\u1ed9 nhi\u1ec1u chi ti\u1ebft gi\u00fap b\u1ea1n bi\u1ebft l\u00fd do v\u00ec sao.<\/p>\n<\/div><\/div><\/div>\n\n\n<\/span>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/span><\/h2>\n\n\nH\u00e3y c\u00f9ng quan s\u00e1t b\u1ea3ng Waterfall t\u1ed1i gi\u1ea3n d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n s\u1ebd ngay l\u1eadp t\u1ee9c \u0111\u1ec3 \u00fd th\u1ea5y t\u1eebng y\u00eau c\u1ea7u c\u00f3 m\u1ed9t b\u1ed9 thanh m\u00e0u t\u01b0\u01a1ng \u1ee9ng \u1edf b\u00ean ph\u1ea3i.<\/p>\n\n\nN\u00f3i ng\u1eafn g\u1ecdn th\u00ec t\u1eebng m\u00e0u \u0111\u1ea1i di\u1ec7n cho m\u1ed9t ph\u1ea7n kh\u00e1c nhau trong qu\u00e1 tr\u00ecnh t\u1ea3i c\u1ee7a m\u1ed9t ngu\u1ed3n c\u1ee5 th\u1ec3.<\/p>\n\n\nCh\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng m\u00e0u ngay sau \u0111\u00e2y:<\/p>\n\n\nM\u00e0u n\u00e2u – ch\u1eb7n<\/h3>\n\n\nCh\u1eb7n (blocking) l\u00e0 th\u1eddi gian m\u00e0 y\u00eau c\u1ea7u ph\u1ea3i \u0111\u1ee3i trong h\u00e0ng ch\u1edd tr\u00ecnh duy\u1ec7t (browser’s queue) \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u kh\u1edfi \u0111\u1ed9ng m\u1ed9t y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ch\u1eb7n ng\u0103n c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo \u0111\u01b0\u1ee3c x\u1eed l\u00fd<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00f9ng nhau g\u00e2y ra th\u1eddi gian ch\u1eb7n bao g\u1ed3m:<\/p>\n\n\nCh\u1edd \u0111\u1ee3i k\u1ebft n\u1ed1i c\u00f3 s\u1eb5n.<\/li>T\u1ea3i\/th\u1ef1c thi JavaScript ho\u1eb7c CSS (m\u1eb7c d\u00f9 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u00e3 th\u00f4ng minh h\u01a1n trong vi\u1ec7c t\u1ed1i thi\u1ec3u h\u00f3a ch\u00fang).<\/li>Th\u1eddi gian k\u1ebft n\u1ed1i SSL (th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian k\u1ebft n\u1ed1i \/ connection time)<\/li>X\u00e1c th\u1ef1c HTTP (y\u00eau c\u1ea7u b\u1ed5 sung c\u1ea7n thi\u1ebft \u0111\u1ec3 thi\u1ebft l\u1eadp x\u00e1c th\u1ef1c).<\/li><\/ul>\n\n\nM\u00e0u xanh x\u00e1m – Tra c\u1ee9u DNS<\/h3>\n\n\nTr\u01b0\u1edbc khi k\u1ebft n\u1ed1i \u0111\u1ebfn server \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh, hostname c\u1ea7n ph\u00e2n gi\u1ea3i th\u00e0nh IP – \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 t\u00ecm ki\u1ebfm\/tra c\u1ee9u DNS<\/a> (lookup).\n<\/figure>\n\n\n Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\nM\u00e0u xanh l\u00e1 c\u00e2y – K\u1ebft n\u1ed1i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n<\/figure><\/div>\n\n\nL\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
M\u00f4 h\u00ecnh thanh x\u1ebfp d\u1ea1ng th\u00e1c m\u00f4 t\u1ea3 c\u00e1ch trang c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 – c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 ph\u1ea7n l\u1edbn \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n trong khu v\u1ef1c n\u00e0y. Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u c\u1ee5 th\u1ec3 h\u01a1n trong ph\u1ea7n n\u00f3i v\u1ec1 Request timings.<\/p>\n\n\n
Click v\u00e0o y\u00eau c\u1ea7u s\u1ebd ti\u1ebft l\u1ed9 th\u00f4ng tin ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i (Request\/Response header). Ch\u00fang bao g\u1ed3m th\u00f4ng tin \u0111a d\u1ea1ng, \u0111\u1ea7y \u0111\u1ee7 li\u00ean quan \u0111\u1ebfn c\u00e1ch t\u00e0i nguy\u00ean c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c ph\u1ee5c v\u1ee5.<\/p>\n\n\n
Ch\u00fang t\u00f4i d\u1ef1 \u0111\u1ecbnh t\u00ecm hi\u1ec3u ch\u1ee7 \u0111\u1ec1 y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i chi ti\u1ebft h\u01a1n trong b\u00e0i vi\u1ebft kh\u00e1c. Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang t\u00f4i ch\u1ec9 tr\u00ecnh b\u00e0y ng\u1eafn g\u1ecdn m\u1ed9t s\u1ed1 m\u1ee5c ch\u00ednh trong m\u1ed7i ph\u1ea7n:<\/p>\n\n\n
Ch\u00fang l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server. V\u1edbi ng\u01b0\u1eddi m\u1edbi, th\u01b0\u1eddng b\u1ea1n kh\u00f4ng c\u00f3 g\u00ec \u0111\u1ec3 l\u00e0m trong ph\u1ea7n ti\u00eau \u0111\u1ec1 Y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u l\u00e0 ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server<\/figcaption><\/figure>\n<\/p>\n\n\nTi\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i<\/h3>\n\n\nPh\u1ea3n h\u1ed3i l\u00e0 nh\u1eefng ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i, v\u00e0 \u0111\u00f4i khi l\u00e0 ch\u00eca kh\u00f3a trong vi\u1ec7c ch\u1ea9n \u0111o\u00e1n c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i cho tr\u00ecnh duy\u1ec7t<\/figcaption><\/figure>\n<\/p>\n\n\nV\u1ec1 c\u01a1 b\u1ea3n, ch\u00fang bi\u1ec3u th\u1ecb c\u1ea5u h\u00ecnh, c\u00e0i \u0111\u1eb7t, ho\u1eb7c thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c y\u00eau c\u1ea7u.<\/p>\n\n\nV\u1edbi ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i, b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3:<\/p>\n\n\n\u0110\u01b0\u1ee3c n\u00e9n hay l\u00e0 kh\u00f4ng (v\u00ed d\u1ee5 gzip)<\/li>Cache<\/li>\u0110\u01b0\u1ee3c ph\u1ee5c v\u1ee5 th\u00f4ng qua CDN (hit\/miss\/revalidated)<\/li>Keep-Alive \u0111\u01b0\u1ee3c b\u1eadt<\/li>Ph\u1ee5c v\u1ee5 th\u00f4ng qua HTTP\/2<\/li>Chuy\u1ec3n h\u01b0\u1edbng n\u1ed9i b\u1ed9 (v\u00ed d\u1ee5 HGST)<\/li><\/ul>\n\n\n\nM\u1eb9o: N\u1ebfu b\u00e1o c\u00e1o GTmetrix cho th\u1ea5y b\u1ea1n c\u00f3 \u0111i\u1ec3m k\u00e9m cho nh\u1eefng khuy\u1ebfn ngh\u1ecb \u1edf tr\u00ean, ki\u1ec3m tra ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i s\u1ebd c\u00f3 kh\u1ea3 n\u0103ng ti\u1ebft l\u1ed9 nhi\u1ec1u chi ti\u1ebft gi\u00fap b\u1ea1n bi\u1ebft l\u00fd do v\u00ec sao.<\/p>\n<\/div><\/div><\/div>\n\n\n<\/span>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/span><\/h2>\n\n\nH\u00e3y c\u00f9ng quan s\u00e1t b\u1ea3ng Waterfall t\u1ed1i gi\u1ea3n d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n s\u1ebd ngay l\u1eadp t\u1ee9c \u0111\u1ec3 \u00fd th\u1ea5y t\u1eebng y\u00eau c\u1ea7u c\u00f3 m\u1ed9t b\u1ed9 thanh m\u00e0u t\u01b0\u01a1ng \u1ee9ng \u1edf b\u00ean ph\u1ea3i.<\/p>\n\n\nN\u00f3i ng\u1eafn g\u1ecdn th\u00ec t\u1eebng m\u00e0u \u0111\u1ea1i di\u1ec7n cho m\u1ed9t ph\u1ea7n kh\u00e1c nhau trong qu\u00e1 tr\u00ecnh t\u1ea3i c\u1ee7a m\u1ed9t ngu\u1ed3n c\u1ee5 th\u1ec3.<\/p>\n\n\nCh\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng m\u00e0u ngay sau \u0111\u00e2y:<\/p>\n\n\nM\u00e0u n\u00e2u – ch\u1eb7n<\/h3>\n\n\nCh\u1eb7n (blocking) l\u00e0 th\u1eddi gian m\u00e0 y\u00eau c\u1ea7u ph\u1ea3i \u0111\u1ee3i trong h\u00e0ng ch\u1edd tr\u00ecnh duy\u1ec7t (browser’s queue) \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u kh\u1edfi \u0111\u1ed9ng m\u1ed9t y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ch\u1eb7n ng\u0103n c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo \u0111\u01b0\u1ee3c x\u1eed l\u00fd<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00f9ng nhau g\u00e2y ra th\u1eddi gian ch\u1eb7n bao g\u1ed3m:<\/p>\n\n\nCh\u1edd \u0111\u1ee3i k\u1ebft n\u1ed1i c\u00f3 s\u1eb5n.<\/li>T\u1ea3i\/th\u1ef1c thi JavaScript ho\u1eb7c CSS (m\u1eb7c d\u00f9 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u00e3 th\u00f4ng minh h\u01a1n trong vi\u1ec7c t\u1ed1i thi\u1ec3u h\u00f3a ch\u00fang).<\/li>Th\u1eddi gian k\u1ebft n\u1ed1i SSL (th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian k\u1ebft n\u1ed1i \/ connection time)<\/li>X\u00e1c th\u1ef1c HTTP (y\u00eau c\u1ea7u b\u1ed5 sung c\u1ea7n thi\u1ebft \u0111\u1ec3 thi\u1ebft l\u1eadp x\u00e1c th\u1ef1c).<\/li><\/ul>\n\n\nM\u00e0u xanh x\u00e1m – Tra c\u1ee9u DNS<\/h3>\n\n\nTr\u01b0\u1edbc khi k\u1ebft n\u1ed1i \u0111\u1ebfn server \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh, hostname c\u1ea7n ph\u00e2n gi\u1ea3i th\u00e0nh IP – \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 t\u00ecm ki\u1ebfm\/tra c\u1ee9u DNS<\/a> (lookup).\n<\/figure>\n\n\n Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\nM\u00e0u xanh l\u00e1 c\u00e2y – K\u1ebft n\u1ed1i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n<\/figure><\/div>\n\n\nL\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u l\u00e0 ti\u00eau \u0111\u1ec1 HTTP m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ebfn server<\/figcaption><\/figure>\n<\/p>\n\n\n
Ph\u1ea3n h\u1ed3i l\u00e0 nh\u1eefng ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i, v\u00e0 \u0111\u00f4i khi l\u00e0 ch\u00eca kh\u00f3a trong vi\u1ec7c ch\u1ea9n \u0111o\u00e1n c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t.\n<\/figure>\n\n\n Ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i cho tr\u00ecnh duy\u1ec7t<\/figcaption><\/figure>\n<\/p>\n\n\nV\u1ec1 c\u01a1 b\u1ea3n, ch\u00fang bi\u1ec3u th\u1ecb c\u1ea5u h\u00ecnh, c\u00e0i \u0111\u1eb7t, ho\u1eb7c thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c y\u00eau c\u1ea7u.<\/p>\n\n\nV\u1edbi ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i, b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3:<\/p>\n\n\n\u0110\u01b0\u1ee3c n\u00e9n hay l\u00e0 kh\u00f4ng (v\u00ed d\u1ee5 gzip)<\/li>Cache<\/li>\u0110\u01b0\u1ee3c ph\u1ee5c v\u1ee5 th\u00f4ng qua CDN (hit\/miss\/revalidated)<\/li>Keep-Alive \u0111\u01b0\u1ee3c b\u1eadt<\/li>Ph\u1ee5c v\u1ee5 th\u00f4ng qua HTTP\/2<\/li>Chuy\u1ec3n h\u01b0\u1edbng n\u1ed9i b\u1ed9 (v\u00ed d\u1ee5 HGST)<\/li><\/ul>\n\n\n\nM\u1eb9o: N\u1ebfu b\u00e1o c\u00e1o GTmetrix cho th\u1ea5y b\u1ea1n c\u00f3 \u0111i\u1ec3m k\u00e9m cho nh\u1eefng khuy\u1ebfn ngh\u1ecb \u1edf tr\u00ean, ki\u1ec3m tra ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i s\u1ebd c\u00f3 kh\u1ea3 n\u0103ng ti\u1ebft l\u1ed9 nhi\u1ec1u chi ti\u1ebft gi\u00fap b\u1ea1n bi\u1ebft l\u00fd do v\u00ec sao.<\/p>\n<\/div><\/div><\/div>\n\n\n<\/span>Th\u1eddi gian y\u00eau c\u1ea7u \/ Request timings<\/span><\/h2>\n\n\nH\u00e3y c\u00f9ng quan s\u00e1t b\u1ea3ng Waterfall t\u1ed1i gi\u1ea3n d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<\/figure><\/div>\n\n\nB\u1ea1n s\u1ebd ngay l\u1eadp t\u1ee9c \u0111\u1ec3 \u00fd th\u1ea5y t\u1eebng y\u00eau c\u1ea7u c\u00f3 m\u1ed9t b\u1ed9 thanh m\u00e0u t\u01b0\u01a1ng \u1ee9ng \u1edf b\u00ean ph\u1ea3i.<\/p>\n\n\nN\u00f3i ng\u1eafn g\u1ecdn th\u00ec t\u1eebng m\u00e0u \u0111\u1ea1i di\u1ec7n cho m\u1ed9t ph\u1ea7n kh\u00e1c nhau trong qu\u00e1 tr\u00ecnh t\u1ea3i c\u1ee7a m\u1ed9t ngu\u1ed3n c\u1ee5 th\u1ec3.<\/p>\n\n\nCh\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng m\u00e0u ngay sau \u0111\u00e2y:<\/p>\n\n\nM\u00e0u n\u00e2u – ch\u1eb7n<\/h3>\n\n\nCh\u1eb7n (blocking) l\u00e0 th\u1eddi gian m\u00e0 y\u00eau c\u1ea7u ph\u1ea3i \u0111\u1ee3i trong h\u00e0ng ch\u1edd tr\u00ecnh duy\u1ec7t (browser’s queue) \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u kh\u1edfi \u0111\u1ed9ng m\u1ed9t y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ch\u1eb7n ng\u0103n c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo \u0111\u01b0\u1ee3c x\u1eed l\u00fd<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00f9ng nhau g\u00e2y ra th\u1eddi gian ch\u1eb7n bao g\u1ed3m:<\/p>\n\n\nCh\u1edd \u0111\u1ee3i k\u1ebft n\u1ed1i c\u00f3 s\u1eb5n.<\/li>T\u1ea3i\/th\u1ef1c thi JavaScript ho\u1eb7c CSS (m\u1eb7c d\u00f9 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u00e3 th\u00f4ng minh h\u01a1n trong vi\u1ec7c t\u1ed1i thi\u1ec3u h\u00f3a ch\u00fang).<\/li>Th\u1eddi gian k\u1ebft n\u1ed1i SSL (th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian k\u1ebft n\u1ed1i \/ connection time)<\/li>X\u00e1c th\u1ef1c HTTP (y\u00eau c\u1ea7u b\u1ed5 sung c\u1ea7n thi\u1ebft \u0111\u1ec3 thi\u1ebft l\u1eadp x\u00e1c th\u1ef1c).<\/li><\/ul>\n\n\nM\u00e0u xanh x\u00e1m – Tra c\u1ee9u DNS<\/h3>\n\n\nTr\u01b0\u1edbc khi k\u1ebft n\u1ed1i \u0111\u1ebfn server \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh, hostname c\u1ea7n ph\u00e2n gi\u1ea3i th\u00e0nh IP – \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 t\u00ecm ki\u1ebfm\/tra c\u1ee9u DNS<\/a> (lookup).\n<\/figure>\n\n\n Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\nM\u00e0u xanh l\u00e1 c\u00e2y – K\u1ebft n\u1ed1i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n<\/figure><\/div>\n\n\nL\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i l\u00e0 c\u00e1c ti\u00eau \u0111\u1ec1 HTTP m\u00e0 m\u00e1y ch\u1ee7 g\u1eedi tr\u1edf l\u1ea1i cho tr\u00ecnh duy\u1ec7t<\/figcaption><\/figure>\n<\/p>\n\n\n
V\u1ec1 c\u01a1 b\u1ea3n, ch\u00fang bi\u1ec3u th\u1ecb c\u1ea5u h\u00ecnh, c\u00e0i \u0111\u1eb7t, ho\u1eb7c thu\u1ed9c t\u00ednh c\u1ee7a c\u00e1c y\u00eau c\u1ea7u.<\/p>\n\n\n
V\u1edbi ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i, b\u1ea1n c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3:<\/p>\n\n\n
M\u1eb9o: N\u1ebfu b\u00e1o c\u00e1o GTmetrix cho th\u1ea5y b\u1ea1n c\u00f3 \u0111i\u1ec3m k\u00e9m cho nh\u1eefng khuy\u1ebfn ngh\u1ecb \u1edf tr\u00ean, ki\u1ec3m tra ti\u00eau \u0111\u1ec1 ph\u1ea3n h\u1ed3i s\u1ebd c\u00f3 kh\u1ea3 n\u0103ng ti\u1ebft l\u1ed9 nhi\u1ec1u chi ti\u1ebft gi\u00fap b\u1ea1n bi\u1ebft l\u00fd do v\u00ec sao.<\/p>\n<\/div><\/div><\/div>\n\n\n
H\u00e3y c\u00f9ng quan s\u00e1t b\u1ea3ng Waterfall t\u1ed1i gi\u1ea3n d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n
B\u1ea1n s\u1ebd ngay l\u1eadp t\u1ee9c \u0111\u1ec3 \u00fd th\u1ea5y t\u1eebng y\u00eau c\u1ea7u c\u00f3 m\u1ed9t b\u1ed9 thanh m\u00e0u t\u01b0\u01a1ng \u1ee9ng \u1edf b\u00ean ph\u1ea3i.<\/p>\n\n\n
N\u00f3i ng\u1eafn g\u1ecdn th\u00ec t\u1eebng m\u00e0u \u0111\u1ea1i di\u1ec7n cho m\u1ed9t ph\u1ea7n kh\u00e1c nhau trong qu\u00e1 tr\u00ecnh t\u1ea3i c\u1ee7a m\u1ed9t ngu\u1ed3n c\u1ee5 th\u1ec3.<\/p>\n\n\n
Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u \u00fd ngh\u0129a c\u1ee7a t\u1eebng m\u00e0u ngay sau \u0111\u00e2y:<\/p>\n\n\n
Ch\u1eb7n (blocking) l\u00e0 th\u1eddi gian m\u00e0 y\u00eau c\u1ea7u ph\u1ea3i \u0111\u1ee3i trong h\u00e0ng ch\u1edd tr\u00ecnh duy\u1ec7t (browser’s queue) \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u kh\u1edfi \u0111\u1ed9ng m\u1ed9t y\u00eau c\u1ea7u.\n<\/figure>\n\n\n Ch\u1eb7n ng\u0103n c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo \u0111\u01b0\u1ee3c x\u1eed l\u00fd<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00f9ng nhau g\u00e2y ra th\u1eddi gian ch\u1eb7n bao g\u1ed3m:<\/p>\n\n\nCh\u1edd \u0111\u1ee3i k\u1ebft n\u1ed1i c\u00f3 s\u1eb5n.<\/li>T\u1ea3i\/th\u1ef1c thi JavaScript ho\u1eb7c CSS (m\u1eb7c d\u00f9 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u00e3 th\u00f4ng minh h\u01a1n trong vi\u1ec7c t\u1ed1i thi\u1ec3u h\u00f3a ch\u00fang).<\/li>Th\u1eddi gian k\u1ebft n\u1ed1i SSL (th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian k\u1ebft n\u1ed1i \/ connection time)<\/li>X\u00e1c th\u1ef1c HTTP (y\u00eau c\u1ea7u b\u1ed5 sung c\u1ea7n thi\u1ebft \u0111\u1ec3 thi\u1ebft l\u1eadp x\u00e1c th\u1ef1c).<\/li><\/ul>\n\n\nM\u00e0u xanh x\u00e1m – Tra c\u1ee9u DNS<\/h3>\n\n\nTr\u01b0\u1edbc khi k\u1ebft n\u1ed1i \u0111\u1ebfn server \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh, hostname c\u1ea7n ph\u00e2n gi\u1ea3i th\u00e0nh IP – \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 t\u00ecm ki\u1ebfm\/tra c\u1ee9u DNS<\/a> (lookup).\n<\/figure>\n\n\n Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\nM\u00e0u xanh l\u00e1 c\u00e2y – K\u1ebft n\u1ed1i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n<\/figure><\/div>\n\n\nL\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Ch\u1eb7n ng\u0103n c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo \u0111\u01b0\u1ee3c x\u1eed l\u00fd<\/figcaption><\/figure>\n<\/p>\n\n\n
Nh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00f9ng nhau g\u00e2y ra th\u1eddi gian ch\u1eb7n bao g\u1ed3m:<\/p>\n\n\n
Tr\u01b0\u1edbc khi k\u1ebft n\u1ed1i \u0111\u1ebfn server \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh, hostname c\u1ea7n ph\u00e2n gi\u1ea3i th\u00e0nh IP – \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 t\u00ecm ki\u1ebfm\/tra c\u1ee9u DNS<\/a> (lookup).\n<\/figure>\n\n\n Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\nM\u00e0u xanh l\u00e1 c\u00e2y – K\u1ebft n\u1ed1i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n<\/figure><\/div>\n\n\nL\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Th\u1eddi gian t\u00ecm ki\u1ebfm DNS cho bi\u1ebft kho\u1ea3ng th\u1eddi gian c\u1ea7n \u0111\u1ec3 ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n th\u00e0nh \u0111\u1ecba ch\u1ec9 IP<\/figcaption><\/figure>\n<\/p>\n\n\n
C\u00e1c y\u00eau c\u1ea7u DNS \u0111\u01b0\u1ee3c cache, v\u00ec th\u1ebf th\u1eddi gian t\u00ecm ki\u1ebfm DNS c\u00f3 th\u1ec3 kh\u00e1c nhau gi\u1eefa c\u00e1c l\u1ea7n ki\u1ec3m tra k\u1ebf ti\u1ebfp – \u0111\u00e2y l\u00e0 l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao b\u1ea1n th\u1ea5y th\u1eddi gian t\u00ecm ki\u1ebfm DNS cao h\u01a1n trong l\u1ea7n ki\u1ec3m tra \u0111\u1ea7u ti\u00ean. B\u1ea1n c\u1ea7n ghi nh\u1edb \u0111i\u1ec1u n\u00e0y khi th\u1ef1c hi\u1ec7n so s\u00e1nh b\u1ea3ng Waterfall.<\/p>\n\n\n
\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 h\u00ecnh th\u00e0nh k\u1ebft n\u1ed1i TCP gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 host\/client.<\/p>\n\n\n
L\u01b0u \u00fd<\/strong>: Th\u1eddi gian k\u1ebft n\u1ed1i SSL th\u01b0\u1eddng \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1eddi gian n\u00e0y, nh\u01b0ng \u0111\u00f4i khi n\u00f3 n\u1eb1m trong th\u1eddi gian ch\u1eb7n (blocking)<\/p>\n\n\nM\u00e0u \u0111\u1ecf – G\u1eedi<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n<\/figure><\/div>\n\n\nM\u00e0u t\u00edm – \u0110\u1ee3i<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n \u0111\u1ec3 tr\u00ecnh duy\u1ec7t g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7. N\u1ebfu \u0111\u00f3 l\u00e0 y\u00eau c\u1ea7u PUT ho\u1eb7c POST, th\u00ec \u0111i\u1ec1u n\u00e0y s\u1ebd bao g\u1ed3m c\u1ea3 th\u1eddi gian t\u1ea3i l\u00ean b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o \u0111i k\u00e8m v\u1edbi y\u00eau c\u1ea7u \u0111\u00f3.<\/p>\n\n\n
\u0110\u00e2y l\u00e0 th\u1eddi gian ph\u1ea3i b\u1ecf ra \u0111\u1ec3 \u0111\u1ee3i m\u00e1y ch\u1ee7 t\u1ea1o ra ph\u1ea3n h\u1ed3i.\n<\/figure>\n\n\n Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\nC\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\nM\u00e0u x\u00e1m – \u0110ang nh\u1eadn<\/h3>\n\n\n\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Th\u1eddi gian ch\u1edd cho bi\u1ebft m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n ph\u1ea3n h\u1ed3i y\u00eau c\u1ea7u nhanh nh\u01b0 th\u1ebf n\u00e0o<\/figcaption><\/figure>\n<\/p>\n\n\n
C\u00f3 nhi\u1ec1u l\u00fd do gi\u1ea3i th\u00edch v\u00ec sao th\u1eddi gian \u0111\u1ee3i c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 b\u1ecb d\u00e0i qu\u00e1 m\u1ee9c.<\/p>\n\n\n
\u0110\u00e2y l\u00e0 th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 t\u1ea3i y\u00eau c\u1ea7u t\u1eeb m\u00e1y ch\u1ee7.\n<\/figure>\n\n\n Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\nNh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\nT\u1ea3i file l\u1edbn<\/li>G\u1eb7p ph\u1ea3i gi\u1edbi h\u1ea1n b\u0103ng th\u00f4ng v\u1edbi nhi\u1ec1u file t\u1ea3i xu\u1ed1ng \u0111\u1ed3ng th\u1eddi<\/li>V\u1ea5n \u0111\u1ec1 v\u1ec1 m\u1ea1ng<\/li><\/ul>\n\n\n<\/span>Th\u1eddi gian s\u1ef1 ki\u1ec7n<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Paint<\/h3>\n\n\nFirst paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh l\u00e1 c\u00e2y – First Contentful Paint<\/h3>\n\n\nFirst Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Th\u1eddi gian nh\u1eadn d\u00e0i th\u01b0\u1eddng cho th\u1ea5y k\u00edch c\u1ee1 file l\u1edbn<\/figcaption><\/figure>\n<\/p>\n\n\n
Nh\u1eefng th\u1ee9 sau c\u00f3 th\u1ec3 c\u00f9ng nhau g\u00f3p ph\u1ea7n l\u00e0m thanh nh\u1eadn d\u00e0i h\u01a1n:<\/p>\n\n\n
C\u00e1c \u0111\u01b0\u1eddng n\u00e0y \u0111\u1ea1i di\u1ec7n cho th\u1eddi gian c\u1ee5 th\u1ec3 m\u00e0 t\u1ea1i \u0111\u00f3 c\u00e1c m\u1ed1c c\u1ee5 th\u1ec3 \u0111\u1ea1t t\u1edbi. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 \u00fd ngh\u0129a \u0111\u1ea1i di\u1ec7n c\u1ee7a t\u1eebng m\u00e0u:<\/p>\n\n\n
First paint l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 b\u1ea5t k\u1ef3 render n\u00e0o \u0111\u01b0\u1ee3c b\u1eaft \u0111\u1ea7u tr\u00ean trang web. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 hi\u1ec3n th\u1ecb logo, t\u1ea3i m\u1ed9t \u1ea3nh – b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 th\u1ea5y tr\u00ean trang.<\/p>\n\n\n
First Contentful Paint<\/a> \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o \u0111\u01b0\u1ee3c style – v\u00ed d\u1ee5, m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong DOM (Document Object Model). \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 render v\u0103n b\u1ea3n, \u1ea3nh ho\u1eb7c canvas.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u xanh da tr\u1eddi – DOM \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1<\/h3>\n\n\n\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi Document Model Object (DOM)<\/a> \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 s\u1eb5n s\u00e0ng trong tr\u00ecnh duy\u1ec7t. \u0110\u1eebng lo l\u1eafng v\u1ec1 \u0111i\u1ec1u n\u00e0y qu\u00e1 nhi\u1ec1u – n\u00f3 c\u1ef1c k\u1ef3 k\u1ef9 thu\u1eadt, c\u1ef1c k\u1ef3 nhanh.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u \u0111\u1ecf – \u0110ang t\u1ea3i<\/h3>\n\n\n\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\u0110\u01b0\u1eddng m\u00e0u t\u00edm – T\u1ea3i \u0111\u1ea7y \u0111\u1ee7<\/h3>\n\n\nT\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n\nM\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\u0110ang t\u1ea3i (Onload) ngh\u0129a l\u00e0 trang v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 c\u1ea5u th\u00e0nh c\u1ee7a n\u00f3 \u0111\u00e3 t\u1ea3i xong v\u00e0 \u0111ang \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n
T\u1ea3i \u0111\u1ea7y \u0111\u1ee7 ngh\u0129a l\u00e0 s\u1ef1 ki\u1ec7n Onload \u0111\u00e3 ho\u00e0n t\u1ea5t, v\u00e0 kh\u00f4ng c\u00f3 ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng n\u00e0o x\u1ea3y ra trong v\u00f2ng 2 gi\u00e2y.<\/p>\n\n\n
M\u1eb9o:<\/p>\n\n\n<\/figure>\n\n\nTrong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Trong b\u00e1o c\u00e1o GTmetrix, m\u1ed9t v\u00e0i trong c\u00e1c d\u00f2ng n\u00e0y \u0111\u01b0\u1ee3c \u0111\u1ea1i di\u1ec7n trong tab Timings.<\/p>\n\n\n
Ch\u00fang \u0111\u01b0\u1ee3c h\u00ecnh \u1ea3nh h\u00f3a \u0111\u1ec3 b\u1ea1n d\u1ec5 \u0111\u1ecdc h\u01a1n.<\/p>\n<\/div><\/div><\/div>\n\n\n
(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Read a Waterfall Chart for Beginners, website: GTmetrix)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\nC\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","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\/waterfall-toc-do-website\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …","og_url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-21T09:50:20+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/06\/generatepress-knock-out-astra.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":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","url":"https:\/\/kiencang.net\/waterfall-toc-do-website\/","name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-21T09:50:20+00:00","dateModified":"2019-12-21T09:50:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/waterfall-toc-do-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/waterfall-toc-do-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch \u0111\u1ecdc hi\u1ec3u b\u1ea3ng Waterfall trong ph\u00e2n t\u00edch 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\/14085"}],"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=14085"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/14117"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u1ecdc c\u00e1ch bi\u1ebft \u00fd ngh\u0129a c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n trong b\u1ea3ng Waterfall v\u00e0 m\u1ed1i li\u00ean h\u1ec7 c\u1ee7a n\u00f3 v\u1edbi t\u1ed1c \u0111\u1ed9 website. L\u00e0 ng\u01b0\u1eddi m\u1edbi tham gia v\u00e0o l\u0129nh v\u1ef1c t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 trang web, \u0111\u1ecdc b\u1ea3ng Waterfall (*) c\u00f3 th\u1ec3 l\u00e0 \u0111i\u1ec1u m\u00e0 b\u1ea1n c\u1ea3m …<\/p>\n","protected":false},"author":1,"featured_media":14117,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[],"yoast_head":"\n