{"id":22040,"date":"2021-03-28T05:06:59","date_gmt":"2021-03-27T22:06:59","guid":{"rendered":"https:\/\/speed.family\/?p=20007"},"modified":"2023-07-23T19:45:50","modified_gmt":"2023-07-23T12:45:50","slug":"cumulative-layout-shift","status":"publish","type":"post","link":"https:\/\/kiencang.net\/cumulative-layout-shift\/","title":{"rendered":"Ch\u1ec9 s\u1ed1 Cumulative Layout Shift (CLS) l\u00e0 g\u00ec? [ph\u1ea7n m\u1ed9t]"},"content":{"rendered":"\n<p>Ch\u00fa th\u00edch: v\u00ec b\u00e0i d\u00e0i &amp; nhi\u1ec1u th\u00f4ng tin k\u1ef9 thu\u1eadt n\u00ean t\u00f4i chia l\u00e0m hai ph\u1ea7n cho b\u1ea1n ti\u1ec7n theo d\u00f5i &amp; t\u00f4i c\u0169ng d\u1ec5 bi\u00ean t\u1eadp h\u01a1n. So v\u1edbi <a href=\"https:\/\/kiencang.net\/chi-so-hieu-suat-nguoi-dung\/\" target=\"_blank\" rel=\"noreferrer noopener\">c\u00e1c ch\u1ec9 s\u1ed1 kh\u00e1c c\u1ee7a PageSpeed Insights<\/a>, ch\u1ec9 s\u1ed1 n\u00e0y \u00edt mang y\u1ebfu t\u1ed1 t\u1ed1c \u0111\u1ed9 nh\u1ea5t (n\u1ebfu kh\u00f4ng mu\u1ed1n n\u00f3i l\u00e0 kh\u00f4ng c\u00f3!). Nh\u01b0ng m\u1ee9c \u0111\u1ed9 quan tr\u1ecdng c\u1ee7a n\u00f3 th\u00ec kh\u00f4ng h\u1ec1 nh\u1ecf, b\u1edfi n\u00f3 \u1ea3nh h\u01b0\u1edfng r\u1ea5t l\u1edbn \u0111\u1ebfn tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng, v\u00e0 suy cho c\u00f9ng, t\u1ed1c \u0111\u1ed9 cao m\u00e0 c\u00e1c tr\u1ea3i nghi\u1ec7m kh\u00e1c th\u00ec t\u1ec7 th\u00ec t\u1ed5ng l\u1ea1i c\u00f3 khi l\u1ea1i t\u1ec7 h\u01a1n tr\u01b0\u1edbc. Ch\u1ec9 s\u1ed1 n\u00e0y l\u00e0 m\u1ed9t c\u1ea3nh b\u00e1o quan tr\u1ecdng v\u1edbi <a href=\"https:\/\/kiencang.net\/dich-vu\/\" target=\"_blank\" rel=\"noreferrer noopener\">ng\u01b0\u1eddi t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9, hi\u1ec7u su\u1ea5t website<\/a>. N\u00f3 n\u00f3i v\u1edbi ch\u00fang ta r\u1eb1ng c\u1ea7n ph\u1ea3i bi\u1ebft c\u00e2n \u0111\u1ed1i, v\u00e0 \u0111\u1eb7t tr\u1ecdng t\u00e2m v\u00e0o ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n<p>OK, gi\u1edd ch\u00fang ta v\u00e0o b\u00e0i th\u00f4i.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>Ch\u1ec9 s\u1ed1 Cumulative Layout Shift (CLS) l\u00e0 m\u1ed9t th\u00f4ng tin quan tr\u1ecdng, l\u1ea5y ng\u01b0\u1eddi d\u00f9ng l\u00e0m trung t\u00e2m \u0111\u1ec3 \u0111o&nbsp;\u0111\u1ed9 \u1ed5n \u0111\u1ecbnh v\u1ec1 m\u1eb7t hi\u1ec3n th\u1ecb (visual stability),&nbsp;v\u00ec n\u00f3 gi\u00fap \u0111\u1ecbnh l\u01b0\u1ee3ng t\u1ea7n su\u1ea5t ng\u01b0\u1eddi d\u00f9ng ph\u1ea3i tr\u1ea3i qua s\u1ef1 thay \u0111\u1ed5i b\u1ed1 c\u1ee5c b\u1ea5t ng\u1edd (kh\u00f4ng l\u01b0\u1eddng tr\u01b0\u1edbc &amp; s\u1ebd g\u00e2y kh\u00f3 ch\u1ecbu) \u2014 CLS (ch\u1ec9 s\u1ed1 thay \u0111\u1ed5i b\u1ed1 c\u1ee5c t\u00edch l\u0169y) th\u1ea5p gi\u00fap \u0111\u1ea3m b\u1ea3o r\u1eb1ng trang&nbsp;c\u1ee7a b\u1ea1n th\u00e2n thi\u1ec7n h\u01a1n.<\/p>\n\n\n\n<p>B\u1ea1n \u0111\u00e3 bao gi\u1edd g\u1eb7p chuy\u1ec7n th\u1ebf n\u00e0y ch\u01b0a: \u0111ang \u0111\u1ecdc m\u1ed9t b\u00e0i b\u00e1o tr\u00ean m\u1ea1ng th\u00ec \u0111\u1ed9t nhi\u00ean c\u00f3 c\u00e1i g\u00ec \u0111\u00f3 thay \u0111\u1ed5i tr\u00ean trang?&nbsp;N\u1ebfu kh\u00f4ng c\u00f3 c\u1ea3nh b\u00e1o n\u00e0o, v\u0103n b\u1ea3n s\u1ebd di chuy\u1ec3n v\u00e0 b\u1ea1n \u0111\u00e1nh m\u1ea5t v\u1ecb tr\u00ed \u0111\u1ecdc \/ xem c\u1ee7a m\u00ecnh.&nbsp;Ho\u1eb7c th\u1eadm ch\u00ed t\u1ec7 h\u01a1n: b\u1ea1n chu\u1ea9n b\u1ecb nh\u1ea5n v\u00e0o m\u1ed9t li\u00ean k\u1ebft ho\u1eb7c m\u1ed9t n\u00fat n\u00e0o \u0111\u1ea5y, nh\u01b0ng ngay tr\u01b0\u1edbc th\u1eddi \u0111i\u1ec3m ng\u00f3n tay c\u1ee7a b\u1ea1n ch\u1ea1m v\u00e0o m\u00e0n h\u00ecnh th\u00ec \u2014 B\u00d9M \u2014 li\u00ean k\u1ebft di chuy\u1ec3n v\u00e0 cu\u1ed1i c\u00f9ng b\u1ea1n nh\u1ea5p v\u00e0o m\u1ed9t th\u1ee9 ho\u00e0n to\u00e0n kh\u00e1c!<\/p>\n\n\n\n<p>Th\u00f4ng th\u01b0\u1eddng, nh\u1eefng tr\u1ea3i nghi\u1ec7m ki\u1ec3u n\u00e0y ch\u1ec9 g\u00e2y kh\u00f3 ch\u1ecbu, nh\u01b0ng trong m\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p kh\u00e1c, ch\u00fang c\u00f3 th\u1ec3 g\u00e2y ra thi\u1ec7t h\u1ea1i th\u1ef1c s\u1ef1 \u0111\u00e1ng k\u1ec3. Xem video v\u1ec1 m\u1ed9t v\u00ed d\u1ee5 nh\u01b0 v\u1eady:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/03\/layout-instability2.webm\"><\/video><\/figure>\n\n\n\n<p>Chuy\u1ec3n \u0111\u1ed9ng kh\u00f4ng mong mu\u1ed1n c\u1ee7a n\u1ed9i dung trang web th\u01b0\u1eddng x\u1ea3y ra do t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c t\u1ea3i kh\u00f4ng \u0111\u1ed3ng b\u1ed9 (loaded asynchronously) ho\u1eb7c c\u00e1c ph\u1ea7n t\u1eed DOM \u0111\u01b0\u1ee3c th\u00eam \u0111\u1ed9ng (v\u00e0o trang) \u1edf ph\u00eda tr\u00ean n\u1ed9i dung hi\u1ec7n c\u00f3.&nbsp;Th\u1ee7 ph\u1ea1m c\u00f3 th\u1ec3 l\u00e0 h\u00ecnh \u1ea3nh ho\u1eb7c video c\u00f3 k\u00edch th\u01b0\u1edbc kh\u00f4ng x\u00e1c \u0111\u1ecbnh, ph\u00f4ng ch\u1eef hi\u1ec3n th\u1ecb l\u1edbn h\u01a1n ho\u1eb7c nh\u1ecf h\u01a1n so v\u1edbi d\u1ef1 ph\u00f2ng c\u1ee7a n\u00f3, ho\u1eb7c qu\u1ea3ng c\u00e1o, ti\u1ec7n \u00edch c\u1ee7a b\u00ean th\u1ee9 ba t\u1ef1 \u0111\u1ed9ng thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc.<\/p>\n\n\n\n<p>C\u00e1i l\u00e0m cho v\u1ea5n \u0111\u1ec1 n\u00e0y tr\u1edf n\u00ean kh\u00f3 kh\u0103n h\u01a1n l\u00e0 ch\u1ee9c n\u0103ng c\u1ee7a website trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n th\u01b0\u1eddng kh\u00e1c t\u01b0\u01a1ng \u0111\u1ed1i nhi\u1ec1u v\u1edbi c\u00e1ch ng\u01b0\u1eddi d\u00f9ng tr\u1ea3i nghi\u1ec7m n\u00f3 tr\u00ean th\u1ef1c t\u1ebf.&nbsp;N\u1ed9i dung \u0111\u01b0\u1ee3c c\u00e1 nh\u00e2n h\u00f3a ho\u1eb7c c\u1ee7a b\u00ean th\u1ee9 ba th\u01b0\u1eddng kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng gi\u1ed1ng trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n nh\u01b0 khi \u0111\u01b0\u1ee3c t\u1ea1o ra, h\u00ecnh \u1ea3nh th\u1eed nghi\u1ec7m th\u01b0\u1eddng \u0111\u00e3 c\u00f3 trong b\u1ed9 nh\u1edb cache tr\u00ecnh duy\u1ec7t c\u1ee7a nh\u00e0 ph\u00e1t tri\u1ec3n v\u00e0 c\u00e1c l\u1ec7nh g\u1ecdi API ch\u1ea1y c\u1ee5c b\u1ed9 th\u01b0\u1eddng nhanh \u0111\u1ebfn m\u1ee9c \u0111\u1ed9 tr\u1ec5 kh\u00f4ng \u0111\u00e1ng k\u1ec3 ch\u00fat n\u00e0o.<\/p>\n\n\n\n<p>S\u1ed1 li\u1ec7u Cumulative Layout Shift (CLS) gi\u00fap b\u1ea1n gi\u1ea3i quy\u1ebft v\u1ea5n \u0111\u1ec1 n\u00e0y b\u1eb1ng c\u00e1ch \u0111o l\u01b0\u1eddng m\u1ee9c \u0111\u1ed9 tr\u1ea3i nghi\u1ec7m t\u1ec7 n\u00e0y x\u1ea3y ra \u0111\u1ed1i v\u1edbi ng\u01b0\u1eddi d\u00f9ng th\u1ef1c.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-cls\">1. CLS l\u00e0 g\u00ec?&nbsp;<\/h2>\n\n\n\n<p>CLS \u0111o l\u01b0\u1eddng t\u1ed5ng \u0111i\u1ec3m c\u1ee7a t\u1ea5t c\u1ea3 c\u00e1c&nbsp;<em>\u0111i\u1ec3m thay \u0111\u1ed5i b\u1ed1 c\u1ee5c<\/em>&nbsp;(layout shift scores) ri\u00eang l\u1ebb&nbsp;cho m\u1ecdi&nbsp;<em>thay \u0111\u1ed5i b\u1ed1 c\u1ee5c kh\u00f4ng mong mu\u1ed1n<\/em>&nbsp;(unexpected layout shift) x\u1ea3y ra trong to\u00e0n b\u1ed9 th\u1eddi gian t\u1ed3n t\u1ea1i c\u1ee7a trang.<\/p>\n\n\n\n<p>S\u1ef1&nbsp;<em>thay \u0111\u1ed5i b\u1ed1 c\u1ee5c<\/em>&nbsp;x\u1ea3y ra b\u1ea5t c\u1ee9 khi n\u00e0o m\u1ed9t ph\u1ea7n t\u1eed hi\u1ec3n th\u1ecb thay \u0111\u1ed5i v\u1ecb tr\u00ed c\u1ee7a n\u00f3 t\u1eeb m\u1ed9t khung \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb sang khung k\u1ebf ti\u1ebfp.&nbsp;(Xem th\u00f4ng tin chi ti\u1ebft b\u00ean d\u01b0\u1edbi \u0111\u1ec3 bi\u1ebft c\u00e1ch&nbsp;t\u00ednh&nbsp;\u0111i\u1ec3m thay \u0111\u1ed5i b\u1ed1 c\u1ee5c&nbsp;ri\u00eang l\u1ebb).<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-is-a-good-cls-score\">\u0110i\u1ec3m CLS t\u1ed1t l\u00e0 g\u00ec?<\/h3>\n\n\n\n<p>\u0110\u1ec3 cung c\u1ea5p tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng t\u1ed1t, c\u00e1c trang web n\u00ean c\u1ed1 g\u1eafng c\u00f3 \u0111i\u1ec3m CLS t\u1eeb&nbsp;<strong>0,1<\/strong>&nbsp;tr\u1edf xu\u1ed1ng.&nbsp;Nh\u1eb1m \u0111\u1ea3m b\u1ea3o b\u1ea1n \u0111\u1ea1t \u0111\u01b0\u1ee3c m\u1ee5c ti\u00eau n\u00e0y cho h\u1ea7u h\u1ebft ng\u01b0\u1eddi d\u00f9ng c\u1ee7a m\u00ecnh, ng\u01b0\u1ee1ng t\u1ed1t \u0111\u1ec3 \u0111o l\u01b0\u1eddng l\u00e0&nbsp;<strong>ph\u00e2n v\u1ecb<\/strong>&nbsp;t\u1ea3i trang&nbsp;<strong>th\u1ee9 75<\/strong>&nbsp;, \u0111\u01b0\u1ee3c ph\u00e2n \u0111o\u1ea1n tr\u00ean c\u00e1c thi\u1ebft b\u1ecb di \u0111\u1ed9ng v\u00e0 m\u00e1y t\u00ednh \u0111\u1ec3 b\u00e0n.<\/p>\n\n\n\n<p>\u0110\u1ec3 t\u00ecm hi\u1ec3u th\u00eam v\u1ec1 nghi\u00ean c\u1ee9u v\u00e0 ph\u01b0\u01a1ng ph\u00e1p \u0111\u1eb1ng sau \u0111\u1ec1 xu\u1ea5t n\u00e0y, h\u00e3y t\u00ecm \u0111\u1ecdc b\u00e0i vi\u1ebft:&nbsp;X\u00e1c \u0111\u1ecbnh ng\u01b0\u1ee1ng ch\u1ec9 s\u1ed1 Core Web Vitals.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"layout-shifts-in-detail\">2. B\u1ed1 c\u1ee5c thay \u0111\u1ed5i \u0111\u01b0\u1ee3c t\u00ednh to\u00e1n nh\u01b0 th\u1ebf n\u00e0o?<\/h2>\n\n\n\n<p>Thay \u0111\u1ed5i&nbsp;b\u1ed1 c\u1ee5c \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh b\u1edfi&nbsp;<a href=\"https:\/\/github.com\/WICG\/layout-instability\" target=\"_blank\" rel=\"noreferrer noopener\">API \u0111o l\u01b0\u1eddng m\u1ee9c \u0111\u1ed9 \u1ed5n&nbsp;\u0111\u1ecbnh c\u1ee7a&nbsp;b\u1ed1 c\u1ee5c<\/a>, c\u00f4ng c\u1ee5 n\u00e0y s\u1ebd b\u00e1o c\u00e1o&nbsp;<code>layout-shift<\/code> cho c\u00e1c m\u1ee5c nh\u1eadp b\u1ea5t k\u1ef3 l\u00fac n\u00e0o m\u1ed9t ph\u1ea7n t\u1eed hi\u1ec3n th\u1ecb trong viewport (khung nh\u00ecn) thay \u0111\u1ed5i v\u1ecb tr\u00ed b\u1eaft \u0111\u1ea7u c\u1ee7a n\u00f3 (v\u00ed d\u1ee5: v\u1ecb tr\u00ed tr\u00ean c\u00f9ng v\u00e0 b\u00ean tr\u00e1i c\u1ee7a n\u00f3 trong&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/writing-mode\" target=\"_blank\" rel=\"noreferrer noopener\">writing mode<\/a>&nbsp;m\u1eb7c \u0111\u1ecbnh) gi\u1eefa hai khung.&nbsp;C\u00e1c ph\u1ea7n t\u1eed nh\u01b0 v\u1eady \u0111\u01b0\u1ee3c coi l\u00e0&nbsp;<em>ph\u1ea7n t\u1eed kh\u00f4ng \u1ed5n \u0111\u1ecbnh<\/em> (unstable elements).<\/p>\n\n\n\n<p>L\u01b0u \u00fd r\u1eb1ng thay \u0111\u1ed5i b\u1ed1 c\u1ee5c ch\u1ec9 x\u1ea3y ra khi c\u00e1c ph\u1ea7n t\u1eed hi\u1ec7n c\u00f3 thay \u0111\u1ed5i v\u1ecb tr\u00ed b\u1eaft \u0111\u1ea7u (start position) c\u1ee7a ch\u00fang.&nbsp;N\u1ebfu m\u1ed9t ph\u1ea7n t\u1eed m\u1edbi \u0111\u01b0\u1ee3c th\u00eam v\u00e0o DOM ho\u1eb7c m\u1ed9t ph\u1ea7n t\u1eed hi\u1ec7n c\u00f3 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc th\u00ec ph\u1ea7n t\u1eed \u0111\u00f3 kh\u00f4ng \u0111\u01b0\u1ee3c t\u00ednh l\u00e0 thay \u0111\u1ed5i b\u1ed1 c\u1ee5c \u2014 mi\u1ec5n l\u00e0 thay \u0111\u1ed5i \u0111\u00f3 kh\u00f4ng khi\u1ebfn c\u00e1c ph\u1ea7n t\u1eed \u0111\u00e3 hi\u1ec3n th\u1ecb kh\u00e1c thay \u0111\u1ed5i v\u1ecb tr\u00ed b\u1eaft \u0111\u1ea7u c\u1ee7a ch\u00fang.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"layout-shift-score\">A. \u0110i\u1ec3m s\u1ed1 d\u1ecbch chuy\u1ec3n b\u1ed1 c\u1ee5c&nbsp;<\/h3>\n\n\n\n<p>\u0110\u1ec3 t\u00ednh to\u00e1n&nbsp;<em>\u0111i\u1ec3m s\u1ed1 d\u1ecbch chuy\u1ec3n b\u1ed1 c\u1ee5c<\/em> (layout shift score), tr\u00ecnh duy\u1ec7t xem x\u00e9t k\u00edch th\u01b0\u1edbc khung nh\u00ecn (viewport) v\u00e0 s\u1ef1 di chuy\u1ec3n c\u1ee7a&nbsp;<em>c\u00e1c ph\u1ea7n t\u1eed kh\u00f4ng \u1ed5n \u0111\u1ecbnh<\/em>&nbsp;trong viewport gi\u1eefa hai khung \u0111\u01b0\u1ee3c k\u1ebft xu\u1ea5t.&nbsp;\u0110i\u1ec3m s\u1ed1 d\u1ecbch chuy\u1ec3n b\u1ed1 c\u1ee5c l\u00e0 k\u1ebft qu\u1ea3 c\u1ee7a hai th\u01b0\u1edbc \u0111o c\u1ee7a chuy\u1ec3n \u0111\u1ed9ng \u0111\u00f3: ph\u1ea7n b\u1ecb&nbsp;<em>t\u00e1c \u0111\u1ed9ng<\/em>&nbsp;v\u00e0 ph\u1ea7n&nbsp;<em>kho\u1ea3ng c\u00e1ch<\/em>&nbsp;(c\u1ea3 hai \u0111\u1ec1u \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a b\u00ean d\u01b0\u1edbi).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>layout shift score = impact fraction (di\u1ec7n t\u00edch ph\u1ea7n t\u00e1c \u0111\u1ed9ng) * distance fraction (ph\u1ea7n kho\u1ea3ng c\u00e1ch d\u1ecbch chuy\u1ec3n)<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"impact-fraction\">B. Ch\u1ec9 s\u1ed1 t\u00e1c \u0111\u1ed9ng&nbsp;(impact fraction)<\/h3>\n\n\n\n<p>Ch\u1ec9&nbsp;s\u1ed1 t\u00e1c \u0111\u1ed9ng&nbsp;\u0111o l\u01b0\u1eddng m\u1ee9c \u0111\u1ed9&nbsp;t\u00e1c \u0111\u1ed9ng c\u1ee7a&nbsp;<em>c\u00e1c y\u1ebfu t\u1ed1 kh\u00f4ng \u1ed5n \u0111\u1ecbnh<\/em>&nbsp;\u0111\u1ebfn di\u1ec7n t\u00edch khu v\u1ef1c khung nh\u00ecn gi\u1eefa hai frame.<\/p>\n\n\n\n<p>S\u1ef1 k\u1ebft h\u1ee3p c\u1ee7a c\u00e1c v\u00f9ng hi\u1ec3n th\u1ecb c\u1ee7a t\u1ea5t c\u1ea3 c\u00e1c&nbsp;<em>ph\u1ea7n t\u1eed kh\u00f4ng \u1ed5n \u0111\u1ecbnh<\/em>&nbsp;cho khung tr\u01b0\u1edbc&nbsp;<em>v\u00e0<\/em>&nbsp;khung&nbsp;hi\u1ec7n t\u1ea1i \u2014 nh\u01b0 m\u1ed9t ph\u1ea7n c\u1ee7a t\u1ed5ng di\u1ec7n t\u00edch c\u1ee7a khung nh\u00ecn \u2014 l\u00e0 ch\u1ec9 s\u1ed1&nbsp;<em>t\u00e1c \u0111\u1ed9ng<\/em>&nbsp;\u0111\u1ed1i v\u1edbi khung hi\u1ec7n t\u1ea1i (current frame).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/03\/layout-shift-1-1024x768.png\" alt=\"ch\u1ec9 s\u1ed1 t\u00e1c \u0111\u1ed9ng\" class=\"wp-image-20014\" srcset=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/03\/layout-shift-1-1024x768.png 1024w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/03\/layout-shift-1-300x225.png 300w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/03\/layout-shift-1-768x576.png 768w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/03\/layout-shift-1-1536x1152.png 1536w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/03\/layout-shift-1.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>V\u00ed d\u1ee5 trong h\u00ecnh tr\u00ean, c\u00f3 m\u1ed9t ph\u1ea7n t\u1eed chi\u1ebfm m\u1ed9t n\u1eeda khung nh\u00ecn trong m\u1ed9t khung h\u00ecnh.&nbsp;Sau \u0111\u00f3, trong khung ti\u1ebfp theo, ph\u1ea7n t\u1eed d\u1ecbch chuy\u1ec3n xu\u1ed1ng 25% chi\u1ec1u cao khung nh\u00ecn.&nbsp;H\u00ecnh ch\u1eef nh\u1eadt c\u00f3 ch\u1ea5m ch\u1ea5m m\u00e0u \u0111\u1ecf bao quanh cho bi\u1ebft s\u1ef1 k\u1ebft h\u1ee3p c\u1ee7a v\u00f9ng nh\u00ecn th\u1ea5y c\u1ee7a ph\u1ea7n t\u1eed trong c\u1ea3 hai khung, trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y l\u00e0 75% di\u1ec7n t\u00edch c\u1ee7a t\u1ed5ng khung nh\u00ecn, do \u0111\u00f3,&nbsp;<em>ph\u1ea7n \u1ea3nh h\u01b0\u1edfng<\/em>&nbsp;c\u1ee7a n\u00f3&nbsp;l\u00e0&nbsp;<code>0.75<\/code>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"distance-fraction\">C. Ch\u1ec9 s\u1ed1 kho\u1ea3ng c\u00e1ch&nbsp;(distance fraction)<\/h3>\n\n\n\n<p>Ph\u1ea7n kh\u00e1c c\u1ee7a ph\u01b0\u01a1ng tr\u00ecnh \u0111i\u1ec3m d\u1ecbch chuy\u1ec3n b\u1ed1 c\u1ee5c \u0111o kho\u1ea3ng c\u00e1ch m\u00e0 c\u00e1c ph\u1ea7n t\u1eed kh\u00f4ng \u1ed5n \u0111\u1ecbnh \u0111\u00e3 di chuy\u1ec3n, t\u01b0\u01a1ng quan v\u1edbi viewport.&nbsp;Ph\u1ea7n&nbsp;<em>kho\u1ea3ng c\u00e1ch<\/em>&nbsp;l\u00e0 kho\u1ea3ng c\u00e1ch l\u1edbn nh\u1ea5t m\u00e0 <em>b\u1ea5t k\u1ef3&nbsp;ph\u1ea7n t\u1eed kh\u00f4ng \u1ed5n \u0111\u1ecbnh<\/em>&nbsp;n\u00e0o&nbsp;\u0111\u00e3 di chuy\u1ec3n trong khung (theo chi\u1ec1u ngang ho\u1eb7c chi\u1ec1u d\u1ecdc) chia cho k\u00edch th\u01b0\u1edbc l\u1edbn nh\u1ea5t c\u1ee7a khung nh\u00ecn (chi\u1ec1u r\u1ed9ng ho\u1eb7c chi\u1ec1u cao, t\u00f9y theo gi\u00e1 tr\u1ecb n\u00e0o l\u1edbn h\u01a1n).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/03\/layout-shift-2-1024x768.png\" alt=\"ch\u1ec9 s\u1ed1 d\u1ecbch chuy\u1ec3n\" class=\"wp-image-20015\"\/><\/figure>\n\n\n\n<p>Trong v\u00ed d\u1ee5 tr\u00ean, k\u00edch th\u01b0\u1edbc khung nh\u00ecn l\u1edbn nh\u1ea5t l\u00e0 chi\u1ec1u cao v\u00e0 <em>ph\u1ea7n t\u1eed kh\u00f4ng \u1ed5n \u0111\u1ecbnh<\/em> \u0111\u00e3 di chuy\u1ec3n 25% chi\u1ec1u cao khung nh\u00ecn, \u0111i\u1ec1u n\u00e0y l\u00e0m cho ch\u1ec9 s\u1ed1&nbsp;<em>kho\u1ea3ng c\u00e1ch<\/em>&nbsp;l\u00e0 0,25.<\/p>\n\n\n\n<p>V\u00ec v\u1eady, trong v\u00ed d\u1ee5 n\u00e0y,&nbsp;<em>ch\u1ec9 s\u1ed1 t\u00e1c \u0111\u1ed9ng<\/em>&nbsp;l\u00e0&nbsp;<code>0.75<\/code> v\u00e0 <em>ch\u1ec9 s\u1ed1&nbsp;kho\u1ea3ng c\u00e1ch<\/em>&nbsp;l\u00e0&nbsp;<code>0.25<\/code>, do \u0111\u00f3 <em>\u0111i\u1ec3m&nbsp;d\u1ecbch chuy\u1ec3n b\u1ed1 c\u1ee5c<\/em>&nbsp;l\u00e0&nbsp;<code>0.75 * 0.25 = 0.1875<\/code>.<\/p>\n\n\n\n<p>Ban \u0111\u1ea7u, \u0111i\u1ec3m d\u1ecbch chuy\u1ec3n b\u1ed1 c\u1ee5c ch\u1ec9 \u0111\u01b0\u1ee3c t\u00ednh to\u00e1n d\u1ef1a tr\u00ean&nbsp;<em>ch\u1ec9 s\u1ed1 t\u00e1c \u0111\u1ed9ng<\/em>. Vi\u1ec7c b\u1ed5 sung&nbsp;<em>ch\u1ec9&nbsp;s\u1ed1 kho\u1ea3ng c\u00e1ch<\/em>&nbsp;\u0111\u01b0\u1ee3c \u0111\u01b0a ra \u0111\u1ec3 tr\u00e1nh c\u00e1c tr\u01b0\u1eddng h\u1ee3p ph\u1ea1t qu\u00e1 m\u1ee9c trong tr\u01b0\u1eddng h\u1ee3p c\u00e1c ph\u1ea7n t\u1eed l\u1edbn ch\u1ec9 thay \u0111\u1ed5i m\u1ed9t l\u01b0\u1ee3ng nh\u1ecf (v\u00e0 do v\u1eady c\u0169ng ch\u1ec9 c\u00f3 \u1ea3nh h\u01b0\u1edfng nh\u1ecf \u0111\u1ebfn tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng).<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>V\u00ed d\u1ee5 ti\u1ebfp theo minh h\u1ecda c\u00e1ch th\u00eam n\u1ed9i dung v\u00e0o m\u1ed9t ph\u1ea7n t\u1eed hi\u1ec7n c\u00f3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn \u0111i\u1ec3m thay \u0111\u1ed5i b\u1ed1 c\u1ee5c nh\u01b0 th\u1ebf n\u00e0o:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"767\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/03\/layout-shift-3-1-1024x767.png\" alt=\"M\u1ed9t v\u00ed d\u1ee5 kh\u00e1c v\u1ec1 Cumulative Layout Shift\" class=\"wp-image-21314\" srcset=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/03\/layout-shift-3-1-1024x767.png 1024w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/03\/layout-shift-3-1-300x225.png 300w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/03\/layout-shift-3-1-768x575.png 768w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/03\/layout-shift-3-1.png 1240w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>N\u00fat b\u1ea5m &#8220;Click Me!&#8221;&nbsp;\u0111\u01b0\u1ee3c n\u1ed1i v\u00e0o cu\u1ed1i h\u1ed9p m\u00e0u x\u00e1m v\u1edbi v\u0103n b\u1ea3n m\u00e0u \u0111en, s\u1ebd \u0111\u1ea9y h\u1ed9p m\u00e0u xanh l\u1ee5c c\u00f3 v\u0103n b\u1ea3n m\u00e0u tr\u1eafng xu\u1ed1ng (v\u00e0 m\u1ed9t ph\u1ea7n \u1edf \u0111\u00e1y ra kh\u1ecfi viewport).<\/p>\n\n\n\n<p>Trong v\u00ed d\u1ee5 n\u00e0y, h\u1ed9p m\u00e0u x\u00e1m thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc, nh\u01b0ng v\u1ecb tr\u00ed b\u1eaft \u0111\u1ea7u c\u1ee7a n\u00f3 kh\u00f4ng thay \u0111\u1ed5i n\u00ean n\u00f3 kh\u00f4ng ph\u1ea3i l\u00e0 m\u1ed9t&nbsp;<em>ph\u1ea7n t\u1eed kh\u00f4ng \u1ed5n \u0111\u1ecbnh<\/em>.<\/p>\n\n\n\n<p>N\u00fat &#8220;Click Me!&#8221;&nbsp;tr\u01b0\u1edbc \u0111\u00f3 kh\u00f4ng c\u00f3 trong DOM, v\u00ec v\u1eady v\u1ecb tr\u00ed b\u1eaft \u0111\u1ea7u c\u1ee7a n\u00f3 c\u0169ng kh\u00f4ng thay \u0111\u1ed5i (t\u1ee9c l\u00e0 n\u00f3 c\u0169ng kh\u00f4ng ph\u1ea3i l\u00e0 m\u1ed9t ph\u1ea7n t\u1eeb kh\u00f4ng \u1ed5n \u0111\u1ecbnh).<\/p>\n\n\n\n<p>Tuy nhi\u00ean, v\u1ecb tr\u00ed b\u1eaft \u0111\u1ea7u c\u1ee7a \u00f4 m\u00e0u xanh l\u1ee5c \u0111\u00e3 thay \u0111\u1ed5i, nh\u01b0ng v\u00ec n\u00f3 \u0111\u00e3 \u0111\u01b0\u1ee3c di chuy\u1ec3n m\u1ed9t ph\u1ea7n ra kh\u1ecfi khung nh\u00ecn, n\u00ean v\u00f9ng v\u00f4 h\u00ecnh kh\u00f4ng \u0111\u01b0\u1ee3c xem x\u00e9t khi t\u00ednh to\u00e1n ch\u1ec9 s\u1ed1&nbsp;<em>t\u00e1c \u0111\u1ed9ng<\/em>&nbsp;(impact fraction).&nbsp;S\u1ef1 k\u1ebft h\u1ee3p c\u1ee7a c\u00e1c v\u00f9ng nh\u00ecn th\u1ea5y cho h\u1ed9p m\u00e0u xanh l\u00e1 c\u00e2y trong c\u1ea3 hai khung (\u0111\u01b0\u1ee3c minh h\u1ecda b\u1eb1ng h\u00ecnh ch\u1eef nh\u1eadt c\u00f3 ch\u1ea5m m\u00e0u \u0111\u1ecf) gi\u1ed1ng v\u1edbi di\u1ec7n t\u00edch c\u1ee7a h\u1ed9p m\u00e0u xanh l\u00e1 c\u00e2y trong khung \u0111\u1ea7u ti\u00ean \u2014 50% c\u1ee7a viewport.&nbsp;Ch\u1ec9 s\u1ed1&nbsp;<em>t\u00e1c \u0111\u1ed9ng<\/em>&nbsp;l\u00e0&nbsp;<code>0.5<\/code>.<\/p>\n\n\n\n<p>Ch\u1ec9 s\u1ed1&nbsp;<em>kho\u1ea3ng c\u00e1ch<\/em>&nbsp;(distance fraction) \u0111\u01b0\u1ee3c minh h\u1ecda b\u1eb1ng m\u0169i t\u00ean m\u00e0u t\u00edm.&nbsp;H\u1ed9p m\u00e0u xanh l\u00e1 c\u00e2y \u0111\u00e3 di chuy\u1ec3n xu\u1ed1ng kho\u1ea3ng 14% c\u1ee7a khung nh\u00ecn, do \u0111\u00f3 ch\u1ec9 s\u1ed1&nbsp;<em>kho\u1ea3ng c\u00e1ch<\/em>&nbsp;l\u00e0<code> 0.14<\/code>&nbsp;.<\/p>\n\n\n\n<p>\u0110i\u1ec3m d\u1ecbch chuy\u1ec3n b\u1ed1 c\u1ee5c n\u00e0y l\u00e0:&nbsp;<code>0.5 x 0.14 = 0.07<\/code>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>V\u00ed d\u1ee5 cu\u1ed1i c\u00f9ng d\u01b0\u1edbi \u0111\u00e2y minh h\u1ecda tr\u01b0\u1eddng h\u1ee3p c\u00f3 nhi\u1ec1u&nbsp;<em>y\u1ebfu t\u1ed1 kh\u00f4ng \u1ed5n \u0111\u1ecbnh<\/em> c\u00f9ng xu\u1ea5t hi\u1ec7n tr\u00ean trang:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/03\/layout-shift-4-1024x768.png\" alt=\"V\u00ed d\u1ee5 v\u1ec1 vi\u1ec7c c\u00f3 nhi\u1ec1u ph\u1ea7n t\u1eed l\u00e0m thay \u0111\u1ed5i b\u1ed1 c\u1ee5c\" class=\"wp-image-20022\"\/><\/figure>\n\n\n\n<p>Trong khung \u0111\u1ea7u ti\u00ean \u1edf tr\u00ean, c\u00f3 b\u1ed1n k\u1ebft qu\u1ea3 c\u1ee7a m\u1ed9t y\u00eau c\u1ea7u API cho th\u00f4ng tin v\u1ec1 \u0111\u1ed9ng v\u1eadt, \u0111\u01b0\u1ee3c s\u1eafp x\u1ebfp theo th\u1ee9 t\u1ef1 b\u1ea3ng ch\u1eef c\u00e1i.&nbsp;Trong khung th\u1ee9 hai, nhi\u1ec1u k\u1ebft qu\u1ea3 h\u01a1n \u0111\u01b0\u1ee3c th\u00eam v\u00e0o danh s\u00e1ch \u0111\u00e3 s\u1eafp x\u1ebfp t\u1eeb tr\u01b0\u1edbc \u0111\u00f3.<\/p>\n\n\n\n<p>M\u1ee5c \u0111\u1ea7u ti\u00ean trong danh s\u00e1ch (&#8220;Cat&#8221;) kh\u00f4ng thay \u0111\u1ed5i v\u1ecb tr\u00ed b\u1eaft \u0111\u1ea7u c\u1ee7a n\u00f3 gi\u1eefa c\u00e1c khung, v\u00ec v\u1eady n\u00f3 l\u00e0 th\u00e0nh ph\u1ea7n \u1ed5n \u0111\u1ecbnh.&nbsp;T\u01b0\u01a1ng t\u1ef1, c\u00e1c m\u1ee5c m\u1edbi \u0111\u01b0\u1ee3c th\u00eam v\u00e0o danh s\u00e1ch tr\u01b0\u1edbc \u0111\u00e2y kh\u00f4ng c\u00f3 trong DOM, v\u00ec v\u1eady v\u1ecb tr\u00ed b\u1eaft \u0111\u1ea7u c\u1ee7a ch\u00fang c\u0169ng kh\u00f4ng thay \u0111\u1ed5i.&nbsp;Nh\u01b0ng c\u00e1c th\u00f4ng tin c\u00f3 nh\u00e3n &#8220;Dog&#8221;, &#8220;Horse&#8221; v\u00e0 &#8220;Zebra&#8221; \u0111\u1ec1u thay \u0111\u1ed5i v\u1ecb tr\u00ed ban \u0111\u1ea7u c\u1ee7a ch\u00fang, khi\u1ebfn ch\u00fang tr\u1edf&nbsp;<em>th\u00e0nh c\u00e1c y\u1ebfu t\u1ed1 kh\u00f4ng \u1ed5n \u0111\u1ecbnh<\/em>.<\/p>\n\n\n\n<p>M\u1ed9t l\u1ea7n n\u1eefa, c\u00e1c h\u00ecnh ch\u1eef nh\u1eadt c\u00f3 ch\u1ea5m ch\u1ea5m m\u00e0u \u0111\u1ecf th\u1ec3 hi\u1ec7n s\u1ef1 k\u1ebft h\u1ee3p c\u1ee7a ba&nbsp;<em>ph\u1ea7n t\u1eed kh\u00f4ng \u1ed5n \u0111\u1ecbnh n\u00e0y<\/em>&nbsp;tr\u01b0\u1edbc v\u00e0 sau, trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y l\u00e0 kho\u1ea3ng 38% di\u1ec7n t\u00edch c\u1ee7a khung nh\u00ecn (<em>ch\u1ec9 s\u1ed1 t\u00e1c \u0111\u1ed9ng<\/em>&nbsp;chi\u1ebfm&nbsp;<code>0.38<\/code> viewport).<\/p>\n\n\n\n<p>Ba m\u0169i t\u00ean th\u1ec3 hi\u1ec7n kho\u1ea3ng c\u00e1ch m\u00e0&nbsp;<em>c\u00e1c ph\u1ea7n t\u1eed kh\u00f4ng \u1ed5n \u0111\u1ecbnh<\/em>&nbsp;\u0111\u00e3 di chuy\u1ec3n t\u1eeb v\u1ecb tr\u00ed ban \u0111\u1ea7u c\u1ee7a ch\u00fang theo th\u1ee9 t\u1ef1.&nbsp;Ph\u1ea7n t\u1eed &#8220;Zebra&#8221;, \u0111\u01b0\u1ee3c bi\u1ec3u th\u1ecb b\u1eb1ng m\u0169i t\u00ean m\u00e0u xanh lam, \u0111\u00e3 di chuy\u1ec3n nhi\u1ec1u nh\u1ea5t, kho\u1ea3ng 30% chi\u1ec1u cao khung nh\u00ecn.&nbsp;\u0110i\u1ec1u \u0111\u00f3 l\u00e0m cho gi\u00e1 tr\u1ecb d\u1ecbch chuy\u1ec3n <code>distance fraction<\/code> trong v\u00ed d\u1ee5 n\u00e0y&nbsp;<code>0.3<\/code> (ch\u1ec9 s\u1ed1 d\u1ecbch chuy\u1ec3n cao nh\u1ea5t c\u1ee7a ph\u1ea7n t\u1eeb \u0111\u01b0\u1ee3c l\u1ea5y).<\/p>\n\n\n\n<p>Cu\u1ed1i c\u00f9ng \u0111i\u1ec3m d\u1ecbch chuy\u1ec3n b\u1ed1 c\u1ee5c l\u00e0:&nbsp;<code>0.38 x 0.3 = 0.1172<\/code>.<\/p>\n\n\n\n<p><strong>M\u1eb9o<\/strong> &#8211; l\u00e0m ch\u1eadm qu\u00e1 tr\u00ecnh t\u1ea3i trang \u0111\u1ec3 \u0111\u00e1nh gi\u00e1 CLS b\u1eb1ng m\u1eaft d\u1ec5 h\u01a1n:<\/p>\n\n\n\n<iframe loading=\"lazy\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/2qNNhpwa5Ds\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"><\/iframe>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>PS c\u1ee7a Ki\u1ebfn c\u00e0ng: nh\u01b0 v\u1eady \u0111\u1ec3 t\u1ed1i \u01b0u ch\u1ec9 s\u1ed1 Cumulative Layout Shift ch\u00fang ta ph\u1ea3i gi\u1ea3m thi\u1ec3u di\u1ec7n t\u00edch c\u1ee7a ph\u1ea7n d\u1ecbch chuy\u1ec3n, \u0111\u1ed9 d\u00e0i c\u1ee7a ph\u1ea7n d\u1ecbch chuy\u1ec3n c\u0169ng nh\u01b0 s\u1ed1 l\u01b0\u1ee3ng c\u00e1c ph\u1ea7n t\u1eed d\u1ecbch chuy\u1ec3n. L\u00fd thuy\u1ebft l\u00e0 nh\u01b0 v\u1eady, ch\u00fang ta c\u00f2n ch\u1eb7ng \u0111\u01b0\u1eddng d\u00e0i cho vi\u1ec7c \u00e1p d\u1ee5ng v\u00e0 th\u1ef1c h\u00e0nh.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>C\u00f2n ti\u1ebfp ph\u1ea7n 2, m\u1eddi b\u1ea1n \u0111\u00f3n \u0111\u1ecdc.<\/p>\n\n\n\n<p>Chu\u1ed7i b\u00e0i vi\u1ebft v\u1ec1 c\u00e1c ch\u1ec9 s\u1ed1 t\u0103ng t\u1ed1c:<\/p>\n\n\n\n<ul>\n<li><a href=\"https:\/\/kiencang.net\/total-blocking-time-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Total Blocking Time l\u00e0 g\u00ec<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/kiencang.net\/first-contentful-paint-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">First Contentful Paint l\u00e0 g\u00ec<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/kiencang.net\/time-to-interactive-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Time To Interactive l\u00e0 g\u00ec<\/a> <\/li>\n\n\n\n<li><a href=\"https:\/\/kiencang.net\/first-input-delay\/\" target=\"_blank\" rel=\"noreferrer noopener\">First Input Delay l\u00e0 g\u00ec<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/kiencang.net\/largest-contentful-paint-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Largest Contentful Paint l\u00e0 g\u00ec<\/a><\/li>\n\n\n\n<li>Cumulative layout shift (CLS) l\u00e0 g\u00ec (b\u00e0i b\u1ea1n \u0111ang \u0111\u1ecdc)<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p><em>(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft<a href=\"https:\/\/web.dev\/cls\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"> Cumulative Layout Shift (CLS)<\/a> c\u1ee7a hai t\u00e1c gi\u1ea3 Philip Walton &amp; Milica Mihajlija tr\u00ean trang web dev)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ch\u00fa th\u00edch: v\u00ec b\u00e0i d\u00e0i &amp; nhi\u1ec1u th\u00f4ng tin k\u1ef9 thu\u1eadt n\u00ean t\u00f4i chia l\u00e0m hai ph\u1ea7n cho b\u1ea1n ti\u1ec7n theo d\u00f5i &amp; t\u00f4i c\u0169ng d\u1ec5 bi\u00ean t\u1eadp h\u01a1n. So v\u1edbi c\u00e1c ch\u1ec9 s\u1ed1 kh\u00e1c c\u1ee7a PageSpeed Insights, ch\u1ec9 s\u1ed1 n\u00e0y \u00edt mang y\u1ebfu t\u1ed1 t\u1ed1c \u0111\u1ed9 nh\u1ea5t (n\u1ebfu kh\u00f4ng mu\u1ed1n n\u00f3i l\u00e0 kh\u00f4ng c\u00f3!). &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[282],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Ch\u1ec9 s\u1ed1 Cumulative Layout Shift (CLS) l\u00e0 g\u00ec? [ph\u1ea7n m\u1ed9t] &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/cumulative-layout-shift\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ch\u1ec9 s\u1ed1 Cumulative Layout Shift (CLS) l\u00e0 g\u00ec? [ph\u1ea7n m\u1ed9t] &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"Ch\u00fa th\u00edch: v\u00ec b\u00e0i d\u00e0i &amp; nhi\u1ec1u th\u00f4ng tin k\u1ef9 thu\u1eadt n\u00ean t\u00f4i chia l\u00e0m hai ph\u1ea7n cho b\u1ea1n ti\u1ec7n theo d\u00f5i &amp; t\u00f4i c\u0169ng d\u1ec5 bi\u00ean t\u1eadp h\u01a1n. So v\u1edbi c\u00e1c ch\u1ec9 s\u1ed1 kh\u00e1c c\u1ee7a PageSpeed Insights, ch\u1ec9 s\u1ed1 n\u00e0y \u00edt mang y\u1ebfu t\u1ed1 t\u1ed1c \u0111\u1ed9 nh\u1ea5t (n\u1ebfu kh\u00f4ng mu\u1ed1n n\u00f3i l\u00e0 kh\u00f4ng c\u00f3!). &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/cumulative-layout-shift\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-27T22:06:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-23T12:45:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/03\/layout-shift-1-1024x768.png\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ch\u1ec9 s\u1ed1 Cumulative Layout Shift (CLS) l\u00e0 g\u00ec? [ph\u1ea7n m\u1ed9t] &#8226; 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\/cumulative-layout-shift\/","og_locale":"vi_VN","og_type":"article","og_title":"Ch\u1ec9 s\u1ed1 Cumulative Layout Shift (CLS) l\u00e0 g\u00ec? [ph\u1ea7n m\u1ed9t] &#8226; Ki\u1ebfn c\u00e0ng","og_description":"Ch\u00fa th\u00edch: v\u00ec b\u00e0i d\u00e0i &amp; nhi\u1ec1u th\u00f4ng tin k\u1ef9 thu\u1eadt n\u00ean t\u00f4i chia l\u00e0m hai ph\u1ea7n cho b\u1ea1n ti\u1ec7n theo d\u00f5i &amp; t\u00f4i c\u0169ng d\u1ec5 bi\u00ean t\u1eadp h\u01a1n. So v\u1edbi c\u00e1c ch\u1ec9 s\u1ed1 kh\u00e1c c\u1ee7a PageSpeed Insights, ch\u1ec9 s\u1ed1 n\u00e0y \u00edt mang y\u1ebfu t\u1ed1 t\u1ed1c \u0111\u1ed9 nh\u1ea5t (n\u1ebfu kh\u00f4ng mu\u1ed1n n\u00f3i l\u00e0 kh\u00f4ng c\u00f3!). &hellip;","og_url":"https:\/\/kiencang.net\/cumulative-layout-shift\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2021-03-27T22:06:59+00:00","article_modified_time":"2023-07-23T12:45:50+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/03\/layout-shift-1-1024x768.png"}],"author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"10 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/cumulative-layout-shift\/","url":"https:\/\/kiencang.net\/cumulative-layout-shift\/","name":"Ch\u1ec9 s\u1ed1 Cumulative Layout Shift (CLS) l\u00e0 g\u00ec? [ph\u1ea7n m\u1ed9t] &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2021-03-27T22:06:59+00:00","dateModified":"2023-07-23T12:45:50+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/cumulative-layout-shift\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/cumulative-layout-shift\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/cumulative-layout-shift\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"Ch\u1ec9 s\u1ed1 Cumulative Layout Shift (CLS) l\u00e0 g\u00ec? [ph\u1ea7n m\u1ed9t]"}]},{"@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\/22040"}],"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=22040"}],"version-history":[{"count":1,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/22040\/revisions"}],"predecessor-version":[{"id":24334,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/22040\/revisions\/24334"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=22040"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=22040"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=22040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}