{"id":16857,"date":"2020-03-11T22:33:50","date_gmt":"2020-03-11T15:33:50","guid":{"rendered":"https:\/\/kiencang.net\/?p=15016"},"modified":"2023-07-23T19:44:59","modified_gmt":"2023-07-23T12:44:59","slug":"largest-contentful-paint-la-gi","status":"publish","type":"post","link":"https:\/\/kiencang.net\/largest-contentful-paint-la-gi\/","title":{"rendered":"Largest Contentful Paint (LCP) l\u00e0 g\u00ec?"},"content":{"rendered":"\n<p>Largest Contentful Paint (LCP) l\u00e0 m\u1ed9t ch\u1ec9 s\u1ed1 quan tr\u1ecdng, \u0111\u1eb7t ng\u01b0\u1eddi d\u00f9ng v\u00e0o trung t\u00e2m (user-centric) \u0111\u1ec3 \u0111o \u0111\u1ea1c <a href=\"https:\/\/kiencang.net\/chi-so-hieu-suat-nguoi-dung\/\" target=\"_blank\" rel=\"noreferrer noopener\">t\u1ed1c \u0111\u1ed9 t\u1ea3i nh\u1eadn th\u1ee9c (perceived load speed)<\/a>, b\u1edfi v\u00ec n\u00f3 \u0111\u00e1nh d\u1ea5u th\u1eddi \u0111i\u1ec3m trong timeline* t\u1ea3i trang khi m\u00e0 n\u1ed9i dung ch\u00ednh (main content) c\u1ee7a trang c\u00f3 kh\u1ea3 n\u0103ng \u0111\u00e3 t\u1ea3i xong- &#8220;LCP nhanh&#8221; gi\u00fap tr\u1ea5n an ng\u01b0\u1eddi d\u00f9ng r\u1eb1ng trang l\u00e0 h\u1eefu \u00edch (v\u00ec h\u1ecd s\u1edbm bi\u1ebft n\u1ed9i dung l\u1edbn nh\u1ea5t tr\u00ean trang l\u00e0 g\u00ec).<\/p>\n\n\n\n<p>(*): timeline l\u00e0 ki\u1ec3u chu\u1ed7i qu\u00e1 tr\u00ecnh di\u1ec5n ra s\u1ef1 ki\u1ec7n, gi\u1ed1ng nh\u01b0 l\u1ecbch bi\u1ec3u.<\/p>\n\n\n\n<p>L\u01b0u \u00fd c\u1ee7a ng\u01b0\u1eddi d\u1ecbch: n\u1ed9i dung l\u1edbn nh\u1ea5t (largest content) ch\u1ec9 \u0111\u1ebfn n\u1ed9i dung (ph\u1ea7n t\u1eed) c\u00f3 k\u00edch c\u1ee1 chi\u1ec1u cao v\u00e0 chi\u1ec1u r\u1ed9ng l\u1edbn nh\u1ea5t, ch\u1ee9 kh\u00f4ng ph\u1ea3i l\u00e0 dung l\u01b0\u1ee3ng t\u00ednh theo byte c\u1ee7a n\u00f3. M\u1ed9t kh\u1ed1i v\u0103n b\u1ea3n c\u00f3 k\u00edch c\u1ee1 r\u1ed9ng d\u00e0i 300px x 500px ch\u1ec9 c\u00f3 dung l\u01b0\u1ee3ng t\u00ednh theo byte ch\u01b0a \u0111\u1ebfn 1KB s\u1ebd l\u00e0 n\u1ed9i dung l\u1edbn nh\u1ea5t, ngay c\u1ea3 khi m\u1ed9t b\u1ee9c \u1ea3nh 300px x 200px c\u00f3 dung l\u01b0\u1ee3ng t\u00ednh theo byte l\u00e0 10KB. C\u00f3 v\u1ebb nh\u01b0 gi\u1ea3 \u0111\u1ecbnh c\u1ee7a Google l\u00e0 ph\u1ea7n t\u1eed l\u1edbn nh\u1ea5t c\u00f3 kh\u1ea3 n\u0103ng cao l\u00e0 ph\u1ea7n t\u1eed quan tr\u1ecdng nh\u1ea5t, hay \u00edt ra, \u0111i\u1ec1u ch\u1eafc ch\u1eafn h\u01a1n n\u00f3 l\u00e0 ph\u1ea7n t\u1eed chi\u1ebfm kh\u00f4ng gian l\u1edbn nh\u1ea5t trong khung nh\u00ecn tr\u00ecnh duy\u1ec7t. OK, gi\u1edd ch\u00fang ta \u0111i v\u00e0o ph\u1ea7n ch\u00ednh.<\/p>\n\n\n\n<p>&#8212;<\/p>\n\n\n\n<p>Trong l\u1ecbch s\u1eed, \u0111\u00e3 c\u00f3 nh\u1eefng kh\u00f3 kh\u0103n, th\u1eed th\u00e1ch d\u00e0nh cho c\u00e1c l\u1eadp tr\u00ecnh vi\u00ean trong nhi\u1ec7m v\u1ee5 \u0111o \u0111\u1ea1c m\u1ee9c \u0111\u1ed9 nhanh ch\u00f3ng c\u1ee7a n\u1ed9i dung ch\u00ednh trong khi trang web t\u1ea3i v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n<p>C\u00e1c ch\u1ec9 s\u1ed1 c\u0169 nh\u01b0 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Events\/load\">load<\/a> ho\u1eb7c <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Events\/DOMContentLoaded\">DOMContentLoaded<\/a> kh\u00f4ng t\u1ed1t v\u00ec ch\u00fang <em>kh\u00f4ng nh\u1ea5t thi\u1ebft \u0111\u1ea1i di\u1ec7n cho c\u00e1i m\u00e0 ng\u01b0\u1eddi d\u00f9ng th\u1ea5y tr\u00ean m\u00e0n h\u00ecnh c\u1ee7a h\u1ecd<\/em>. V\u00e0 c\u00e1c ch\u1ec9 s\u1ed1 m\u1edbi h\u01a1n, c\u00e1c ch\u1ec9 s\u1ed1 hi\u1ec7u su\u1ea5t l\u1ea5y ng\u01b0\u1eddi d\u00f9ng l\u00e0m trung t\u00e2m, ch\u1eb3ng h\u1ea1n nh\u01b0 <a href=\"https:\/\/kiencang.net\/first-contentful-paint-la-gi\/\">First Contentful Paint (FCP)<\/a> ch\u1ec9 n\u1eafm b\u1eaft \u0111\u01b0\u1ee3c duy nh\u1ea5t th\u1eddi \u0111i\u1ec3m b\u1eaft \u0111\u1ea7u trong tr\u1ea3i nghi\u1ec7m t\u1ea3i trang (loading experience) m\u00e0 th\u00f4i. N\u1ebfu m\u1ed9t trang hi\u1ec3n th\u1ecb tr\u00ean m\u00e0n h\u00ecnh b\u1ecb gi\u1eadt (splash) ho\u1eb7c ch\u1ec9 hi\u1ec3n th\u1ecb ch\u1ec9 b\u00e1o t\u1ea3i (loading indicator), kho\u1ea3nh kh\u1eafc \u0111\u00f3 ch\u1eb3ng li\u00ean quan g\u00ec \u0111\u1ebfn ng\u01b0\u1eddi d\u00f9ng c\u1ea3.<\/p>\n\n\n\n<p>Trong qu\u00e1 kh\u1ee9, ch\u00fang t\u00f4i khuy\u1ebfn kh\u00edch d\u00f9ng c\u00e1c ch\u1ec9 s\u1ed1 hi\u1ec7u su\u1ea5t nh\u01b0 First Meaningful Paint (FMP) v\u00e0 Speed Index (SI \/ ch\u1ec9 s\u1ed1 t\u1ed1c \u0111\u1ed9)- c\u1ea3 hai hi\u1ec7n \u0111\u1ec1u c\u00f3 trong Lighthouse \u0111\u1ec3 gi\u00fap b\u1ea1n n\u1eafm b\u1eaft \u0111\u01b0\u1ee3c nhi\u1ec1u h\u01a1n chuy\u1ec7n g\u00ec \u0111ang di\u1ec5n ra trong tr\u1ea3i nghi\u1ec7m c\u1ee7a ng\u01b0\u1eddi d\u00f9ng sau khi FCP c\u00f3 m\u1eb7t. Tuy nhi\u00ean c\u00e1c ch\u1ec9 s\u1ed1 n\u00e0y l\u1ea1i ph\u1ee9c t\u1ea1p, kh\u00f3 gi\u1ea3i th\u00edch, v\u00e0 th\u01b0\u1eddng b\u1ecb hi\u1ec3u sai-\u00fd-ngh\u0129a (wrong-meaning). <em>Ch\u00fang v\u1eabn kh\u00f4ng ch\u1ec9 ra \u0111\u01b0\u1ee3c<\/em> khi n\u00e0o n\u1ed9i dung ch\u00ednh c\u1ee7a trang \u0111\u01b0\u1ee3c t\u1ea3i xong.<\/p>\n\n\n\n<p>\u0110\u00f4i khi, \u0111\u01a1n gi\u1ea3n h\u01a1n s\u1ebd t\u1ed1t h\u01a1n. D\u1ef1a tr\u00ean c\u00e1c th\u1ea3o lu\u1eadn trong nh\u00f3m <a href=\"https:\/\/www.w3.org\/webperf\/\" target=\"_blank\" rel=\"noreferrer noopener\">W3C Web Performance Working<\/a> v\u00e0 nghi\u00ean c\u1ee9u \u0111\u01b0\u1ee3c ti\u1ebfn h\u00e0nh b\u1edfi ch\u00ednh Google, ch\u00fang t\u00f4i ph\u00e1t hi\u1ec7n ra c\u00e1ch th\u1ee9c ch\u00ednh x\u00e1c h\u01a1n \u0111\u1ec3 \u0111o \u0111\u1ea1c khi n\u00e0o n\u1ed9i dung ch\u00ednh c\u1ee7a trang \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i l\u00e0 nh\u00ecn v\u00e0o th\u1eddi \u0111i\u1ec3m khi ph\u1ea7n t\u1eed l\u1edbn nh\u1ea5t \u0111\u01b0\u1ee3c k\u1ebft xu\u1ea5t (render).<\/p>\n\n\n\n<p>Ch\u00fa th\u00edch c\u1ee7a ng\u01b0\u1eddi d\u1ecbch: Nh\u01b0 v\u1eady l\u00e0 c\u00f3 m\u1ed1i t\u01b0\u01a1ng quan kh\u00e1 ch\u1eafc ch\u1eafn gi\u1eefa n\u1ed9i dung ch\u00ednh v\u00e0 n\u1ed9i dung l\u1edbn nh\u1ea5t. V\u00e0 x\u00e1c \u0111\u1ecbnh n\u1ed9i dung ch\u00ednh kh\u00f4ng d\u1ec5 d\u00e0ng g\u00ec (n\u00f3 li\u00ean quan \u0111\u1ebfn \u00fd ngh\u0129a, c\u00e1i m\u00e0 m\u00e1y m\u00f3c v\u1ed1n kh\u00f4ng m\u1ea1nh ho\u1eb7c c\u00f3 th\u1ec3 r\u1ea5t t\u1ed1n k\u00e9m \u0111\u1ec3 ph\u00e2n t\u00edch \u0111\u01b0\u1ee3c), do v\u1eady c\u00e1c nh\u00e0 l\u1eadp tr\u00ecnh d\u1ef1a v\u00e0o h\u00ecnh b\u00f3ng d\u1ec5 t\u00ednh to\u00e1n h\u01a1n- \u0111\u00f3 l\u00e0 k\u00edch c\u1ee1 c\u1ee7a n\u1ed9i dung.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">#1. LCP l\u00e0 g\u00ec?<\/h2>\n\n\n\n<p>Ch\u1ec9 s\u1ed1 Largest Contentful Paint (LCP) b\u00e1o c\u00e1o th\u1eddi gian k\u1ebft xu\u1ea5t c\u1ee7a ph\u1ea7n t\u1eed n\u1ed9i dung c\u00f3 k\u00edch c\u1ee1 l\u1edbn nh\u1ea5t (largest content element) hi\u1ec3n th\u1ecb trong viewport (khung nh\u00ecn tr\u00ecnh duy\u1ec7t).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"226\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/08\/LCP-time.png\" alt=\"\" class=\"wp-image-17273\" srcset=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/08\/LCP-time.png 800w, https:\/\/kiencang.net\/wp-content\/uploads\/2020\/08\/LCP-time-300x85.png 300w, https:\/\/kiencang.net\/wp-content\/uploads\/2020\/08\/LCP-time-768x217.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Gi\u00e1 tr\u1ecb c\u1ee7a LCP l\u00e0 bao nhi\u00eau th\u00ec \u0111\u01b0\u1ee3c xem l\u00e0 t\u1ed1t?<\/h3>\n\n\n\n<p>\u0110\u1ec3 c\u00f3 \u0111\u01b0\u1ee3c tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng t\u1ed1t, c\u00e1c trang web ph\u1ea3i ph\u1ea5n \u0111\u1ea5u \u0111\u1ec3 c\u00f3 \u0111\u01b0\u1ee3c Largest Contentful Paint xu\u1ea5t hi\u1ec7n trong <strong>2,5 gi\u00e2y<\/strong> \u0111\u1ea7u ti\u00ean khi trang b\u1eaft \u0111\u1ea7u t\u1ea3i. \u0110\u1ec3 \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, ng\u01b0\u1ee1ng t\u1ed1t \u0111\u1ec3 \u0111o l\u00e0 ph\u00e2n v\u1ecb th\u1ee9 75 khi trang t\u1ea3i, ph\u00e2n kh\u00fac qua thi\u1ebft b\u1ecb di \u0111\u1ed9ng v\u00e0 m\u00e1y t\u00ednh \u0111\u1ec3 b\u00e0n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">C\u00e1c ph\u1ea7n t\u1eed n\u00e0o \u0111\u01b0\u1ee3c xem x\u00e9t?<\/h3>\n\n\n\n<p>Theo ch\u1ec9 \u0111\u1ecbnh hi\u1ec7n t\u1ea1i trong <a href=\"https:\/\/wicg.github.io\/largest-contentful-paint\/\" target=\"_blank\" rel=\"noreferrer noopener\">Largest Contentful Paint API<\/a>, c\u00e1c ki\u1ec3u ph\u1ea7n t\u1eed sau \u0111\u01b0\u1ee3c xem x\u00e9t trong Largest Contentful Paint:<\/p>\n\n\n\n<ul>\n<li>C\u00e1c ph\u1ea7n t\u1eed <em>&lt;img&gt;<\/em><\/li>\n\n\n\n<li>C\u00e1c ph\u1ea7n t\u1eeb <em>&lt;image&gt;<\/em> n\u1eb1m b\u00ean trong ph\u1ea7n t\u1eed <em>&lt;svg&gt;<\/em><\/li>\n\n\n\n<li>C\u00e1c ph\u1ea7n t\u1eed <em>&lt;video&gt;<\/em> (\u1ea3nh poster \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng)<\/li>\n\n\n\n<li>M\u1ed9t ph\u1ea7n t\u1eed v\u1edbi \u1ea3nh background \u0111\u01b0\u1ee3c t\u1ea3i th\u00f4ng qua h\u00e0m <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/url()\" target=\"_blank\" rel=\"noreferrer noopener\">url()<\/a>, tr\u00e1i ng\u01b0\u1ee3c v\u1edbi <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Images\/Using_CSS_gradients\" target=\"_blank\" rel=\"noreferrer noopener\">CSS gradient<\/a><\/li>\n\n\n\n<li>C\u00e1c ph\u1ea7n t\u1eed <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Block-level_elements\" target=\"_blank\" rel=\"noreferrer noopener\">c\u1ea5p kh\u1ed1i<\/a> ch\u1ee9a c\u00e1c n\u00fat v\u0103n b\u1ea3n ho\u1eb7c c\u00e1c ph\u1ea7n t\u1eed con v\u0103n b\u1ea3n c\u1ea5p n\u1ed9i tuy\u1ebfn kh\u00e1c.<\/li>\n<\/ul>\n\n\n\n<p>L\u01b0u \u00fd, vi\u1ec7c gi\u1edbi h\u1ea1n c\u00e1c ph\u1ea7n t\u1eed trong b\u1ed9 gi\u1edbi h\u1ea1n n\u00e0y l\u00e0 c\u00f3 ch\u1ee7 \u00fd \u0111\u1ec3 gi\u1eef cho m\u1ecdi th\u1ee9 \u0111\u01a1n gi\u1ea3n ngay t\u1eeb \u0111\u1ea7u. C\u00e1c ph\u1ea7n t\u1eed b\u1ed5 sung (v\u00ed d\u1ee5 <em>&lt;svg&gt;<\/em>, <em>&lt;video&gt;<\/em>) c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c th\u00eam v\u00e0o trong t\u01b0\u01a1ng lai khi nhi\u1ec1u nghi\u00ean c\u1ee9u h\u01a1n \u0111\u01b0\u1ee3c ti\u1ebfn h\u00e0nh.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">L\u00e0m th\u1ebf n\u00e0o ph\u00e1t hi\u1ec7n ra ph\u1ea7n t\u1eed c\u00f3 k\u00edch c\u1ee1 l\u1edbn nh\u1ea5t?<\/h3>\n\n\n\n<p>K\u00edch c\u1ee1 c\u1ee7a ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c b\u00e1o c\u00e1o cho Largest Contentful Paint th\u01b0\u1eddng l\u00e0 k\u00edch c\u1ee1 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng trong viewport (khung nh\u00ecn tr\u00ecnh duy\u1ec7t). N\u1ebfu ph\u1ea7n t\u1eed m\u1edf r\u1ed9ng ra b\u00ean ngo\u00e0i viewport, ho\u1eb7c n\u1ebfu b\u1ea5t k\u1ef3 ph\u1ea7n t\u1eed n\u00e0o b\u1ecb c\u1eaft ho\u1eb7c b\u1ecb tr\u00e0n ra kh\u00f4ng nh\u00ecn th\u1ea5y \u0111\u01b0\u1ee3c, nh\u1eefng ph\u1ea7n d\u00f4i ra \u0111\u00f3 <em>kh\u00f4ng \u0111\u01b0\u1ee3c t\u00ednh v\u00e0o k\u00edch th\u01b0\u1edbc th\u00e0nh ph\u1ea7n<\/em>.<\/p>\n\n\n\n<p>V\u1edbi c\u00e1c ph\u1ea7n t\u1eed \u1ea3nh \u0111\u01b0\u1ee3c resize (thay \u0111\u1ed5i k\u00edch c\u1ee1) t\u1eeb <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Intrinsic_Size\" target=\"_blank\" rel=\"noreferrer noopener\">intrinsic size<\/a> c\u1ee7a ch\u00fang, k\u00edch th\u01b0\u1edbc \u0111\u01b0\u1ee3c b\u00e1o c\u00e1o s\u1ebd c\u00f3 th\u1ec3 l\u00e0 k\u00edch th\u01b0\u1edbc hi\u1ec3n th\u1ecb ho\u1eb7c k\u00edch th\u01b0\u1edbc intrinsic (n\u1ed9i t\u1ea1i), c\u00e1i \u0111\u01b0\u1ee3c l\u1ea5y l\u00e0 c\u00e1i nh\u1ecf h\u01a1n. L\u1ea5y v\u00ed d\u1ee5, c\u00e1c \u1ea3nh \u0111\u01b0\u1ee3c thu nh\u1ecf l\u1ea1i th\u00e0nh nh\u1ecf h\u01a1n nhi\u1ec1u so v\u1edbi k\u00edch c\u1ee1 intrinsic s\u1ebd ch\u1ec9 b\u1ea3o c\u00e1o k\u00edch c\u1ee1 ch\u00fang hi\u1ec3n th\u1ecb, trong khi \u0111\u00f3, h\u00ecnh \u1ea3nh \u0111\u01b0\u1ee3c k\u00e9o d\u00e0i ra ho\u1eb7c m\u1edf r\u1ed9ng l\u1edbn h\u01a1n s\u1ebd ch\u1ec9 b\u00e1o c\u00e1o k\u00edch th\u01b0\u1edbc intrinsic c\u1ee7a ch\u00fang.<\/p>\n\n\n\n<p>V\u1edbi c\u00e1c ph\u1ea7n t\u1eed v\u0103n b\u1ea3n, ch\u1ec9 k\u00edch c\u1ee1 c\u1ee7a c\u00e1c \u0111i\u1ec3m n\u00fat v\u0103n b\u1ea3n l\u00e0 \u0111\u01b0\u1ee3c xem x\u00e9t (h\u00ecnh ch\u1eef nh\u1eadt nh\u1ecf nh\u1ea5t bao g\u1ed3m t\u1ea5t c\u1ea3 c\u00e1c n\u00fat v\u0103n b\u1ea3n).<\/p>\n\n\n\n<p>V\u1edbi t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed, b\u1ea5t c\u1ee9 margin (l\u1ec1 ngo\u00e0i), padding (l\u1ec1 trong), ho\u1eb7c border (\u0111\u01b0\u1eddng vi\u1ec1n) n\u00e0o \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng th\u00f4ng qua CSS c\u0169ng kh\u00f4ng \u0111\u01b0\u1ee3c t\u00ednh th\u00eam v\u00e0o.<\/p>\n\n\n\n<p>L\u01b0u \u00fd: Vi\u1ec7c x\u00e1c \u0111\u1ecbnh c\u00e1c n\u00fat v\u0103n b\u1ea3n n\u00e0o thu\u1ed9c v\u1ec1 ph\u1ea7n t\u1eed n\u00e0o \u0111\u00f4i khi c\u00f3 th\u1ec3 kh\u00f3 kh\u0103n, \u0111\u1eb7c bi\u1ec7t v\u1edbi c\u00e1c ph\u1ea7n t\u1eed m\u00e0 n\u00f3 l\u00e0 ph\u1ea7n t\u1eed cha c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed n\u1ed9i tuy\u1ebfn v\u00e0 c\u00e1c n\u00fat v\u0103n b\u1ea3n thu\u1ea7n t\u00fay nh\u01b0ng c\u0169ng l\u00e0 c\u00e1c ph\u1ea7n t\u1eed c\u1ea5p \u0111\u1ed9 kh\u1ed1i (block-level). \u0110i\u1ec3m tr\u1ecdng t\u00e2m \u1edf \u0111\u00e2y l\u00e0 m\u1ecdi n\u00fat v\u0103n b\u1ea3n thu\u1ed9c v\u1ec1 (v\u00e0 ch\u1ec9 thu\u1ed9c v\u1ec1) ph\u1ea7n t\u1eed t\u1ed5 ti\u00ean c\u1ea5p kh\u1ed1i g\u1ea7n nh\u1ea5t c\u1ee7a n\u00f3. D\u01b0\u1edbi <a href=\"https:\/\/wicg.github.io\/element-timing\/#set-of-owned-text-nodes\" target=\"_blank\" rel=\"noreferrer noopener\">kh\u00eda c\u1ea1nh spec<\/a>: t\u1eebng n\u00fat v\u0103n b\u1ea3n thu\u1ed9c v\u1ec1 ph\u1ea7n t\u1eeb m\u00e0 t\u1ea1o ra c\u00e1c kh\u1ed1i ch\u1ee9a c\u1ee7a n\u00f3.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Khi n\u00e0o th\u00ec largest contentful paint \u0111\u01b0\u1ee3c b\u00e1o c\u00e1o?<\/h3>\n\n\n\n<p>C\u00e1c trang web th\u01b0\u1eddng t\u1ea3i theo giai \u0111o\u1ea1n, v\u00e0 h\u1ec7 qu\u1ea3 c\u00f3 th\u1ec3 x\u1ea3y ra t\u00ecnh tr\u1ea1ng ph\u1ea7n t\u1eed l\u1edbn nh\u1ea5t tr\u00ean trang c\u00f3 th\u1ec3 thay \u0111\u1ed5i.<\/p>\n\n\n\n<p>\u0110\u1ec3 x\u1eed l\u00fd kh\u1ea3 n\u0103ng thay \u0111\u1ed5i n\u00e0y, tr\u00ecnh duy\u1ec7t g\u1eedi \u0111i <em><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/PerformanceEntry\" target=\"_blank\" rel=\"noreferrer noopener\">PerformanceEntry<\/a><\/em> c\u1ee7a ki\u1ec3u <em>largest-contentful-paint<\/em> x\u00e1c \u0111\u1ecbnh ph\u1ea7n t\u1eed largest contentful s\u1edbm nh\u1ea5t c\u00f3 th\u1ec3 khi tr\u00ecnh duy\u1ec7t k\u1ebft xu\u1ea5t frame (khung) \u0111\u1ea7u ti\u00ean. Nh\u01b0ng sau \u0111\u00f3, sau khi frame ti\u1ebfp theo \u0111\u01b0\u1ee3c render, n\u00f3 s\u1ebd g\u1eedi m\u1ed9t PerformanceEntry kh\u00e1c b\u1ea5t c\u1ee9 khi n\u00e0o ph\u1ea7n t\u1eed c\u00f3 n\u1ed9i dung l\u1edbn nh\u1ea5t thay \u0111\u1ed5i.<\/p>\n\n\n\n<p>\u0110i\u1ec1u quan tr\u1ecdng c\u1ea7n l\u01b0u \u00fd l\u00e0 m\u1ed9t ph\u1ea7n t\u1eed ch\u1ec9 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c xem l\u00e0 ph\u1ea7n t\u1eed n\u1ed9i dung l\u1edbn nh\u1ea5t m\u1ed9t khi n\u00f3 \u0111\u00e3 \u0111\u01b0\u1ee3c k\u1ebft xu\u1ea5t v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng. C\u00e1c \u1ea3nh m\u00e0 hi\u1ec7n v\u1eabn ch\u01b0a \u0111\u01b0\u1ee3c t\u1ea3i kh\u00f4ng \u0111\u01b0\u1ee3c coi l\u00e0 &#8220;\u0111\u00e3 k\u1ebft xu\u1ea5t\/rendered&#8221;. Ngay c\u1ea3 c\u00e1c n\u00fat v\u0103n b\u1ea3n s\u1eed d\u1ee5ng web font trong giai \u0111o\u1ea1n ch\u1eb7n font. Trong tr\u01b0\u1eddng h\u1ee3p nh\u01b0 v\u1eady, m\u1ed9t ph\u1ea7n t\u1eed nh\u1ecf h\u01a1n c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c b\u00e1o c\u00e1o l\u00e0 ph\u1ea7n t\u1eed n\u1ed9i dung c\u00f3 k\u00edch c\u1ee1 l\u1edbn nh\u1ea5t, nh\u01b0ng ngay khi ph\u1ea7n t\u1eed l\u1edbn h\u01a1n ho\u00e0n th\u00e0nh k\u1ebft xu\u1ea5t, n\u00f3 s\u1ebd \u0111\u01b0\u1ee3c b\u00e1o c\u00e1o th\u00f4ng qua \u0111\u1ed1i t\u01b0\u1ee3ng PerformanceEntry kh\u00e1c.<\/p>\n\n\n\n<p>Ngo\u00e0i h\u00ecnh \u1ea3nh v\u00e0 font ch\u1eef t\u1ea3i mu\u1ed9n, trang c\u00f3 th\u1ec3 b\u1ed5 sung c\u00e1c ph\u1ea7n t\u1eed m\u1edbi v\u00e0o DOM khi n\u1ed9i dung m\u1edbi c\u00f3 s\u1eb5n. N\u1ebfu b\u1ea5t k\u1ef3 ph\u1ea7n t\u1eed m\u1edbi n\u00e0o l\u1edbn h\u01a1n ph\u1ea7n t\u1eed l\u1edbn nh\u1ea5t tr\u01b0\u1edbc \u0111\u00f3, m\u1ed9t PerformanceEntry m\u1edbi c\u0169ng s\u1ebd \u0111\u01b0\u1ee3c b\u00e1o c\u00e1o.<\/p>\n\n\n\n<p>N\u1ebfu trang lo\u1ea1i b\u1ecf m\u1ed9t ph\u1ea7n t\u1eed kh\u1ecfi DOM, ph\u1ea7n t\u1eed \u0111\u00f3 s\u1ebd kh\u00f4ng c\u00f2n \u0111\u01b0\u1ee3c xem x\u00e9t, \u0111\u00e1nh gi\u00e1 n\u1eefa. T\u01b0\u01a1ng t\u1ef1, n\u1ebfu m\u1ed9t t\u00e0i nguy\u00ean h\u00ecnh \u1ea3nh li\u00ean quan c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed thay \u0111\u1ed5i (v\u00ed d\u1ee5 thay \u0111\u1ed5i img.src th\u00f4ng qua JavaScript), sau \u0111\u00f3 ph\u1ea7n t\u1eed n\u00e0y s\u1ebd b\u1ecb d\u1eebng \u0111\u00e1nh gi\u00e1 cho \u0111\u1ebfn khi \u1ea3nh m\u1edbi \u0111\u01b0\u1ee3c t\u1ea3i.<\/p>\n\n\n\n<p>Tr\u00ecnh duy\u1ec7t s\u1ebd ng\u1eebng b\u00e1o c\u00e1o m\u1ee5c m\u1edbi ngay khi ng\u01b0\u1eddi d\u00f9ng t\u01b0\u01a1ng t\u00e1c v\u1edbi trang (th\u00f4ng qua b\u1ea5m ch\u1ea1m, cu\u1ed9n chu\u1ed9t, ho\u1eb7c nh\u1ea5n ph\u00edm), v\u00ec s\u1ef1 t\u01b0\u01a1ng t\u00e1c c\u1ee7a ng\u01b0\u1eddi d\u00f9ng th\u01b0\u1eddng thay \u0111\u1ed5i nh\u1eefng g\u00ec \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb cho ch\u00ednh h\u1ecd (\u0111i\u1ec1u n\u00e0y \u0111\u1eb7c bi\u1ec7t ch\u00ednh x\u00e1c v\u1edbi vi\u1ec7c cu\u1ed9n chu\u1ed9t \/ scrolling).<\/p>\n\n\n\n<p>V\u1edbi m\u1ee5c ti\u00eau ph\u00e2n t\u00edch, b\u1ea1n ch\u1ec9 n\u00ean b\u00e1o c\u00e1o PerformanceEntry \u0111\u01b0\u1ee3c g\u1eedi g\u1ea7n \u0111\u00e2y nh\u1ea5t cho d\u1ecbch v\u1ee5 ph\u00e2n t\u00edch c\u1ee7a m\u00ecnh. <\/p>\n\n\n\n<p>Ch\u00fa \u00fd: V\u00ec ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 m\u1edf trang trong tab background, c\u00f3 kh\u1ea3 n\u0103ng l\u00e0 largest contentful paint s\u1ebd kh\u00f4ng x\u1ea3y ra cho \u0111\u1ebfn khi ng\u01b0\u1eddi d\u00f9ng t\u1eadp trung v\u00e0o tab, c\u00e1i c\u00f3 th\u1ec3 mu\u1ed9n h\u01a1n nhi\u1ec1u so v\u1edbi khi h\u1ecd l\u1ea7n \u0111\u1ea7u ti\u00ean t\u1ea3i n\u00f3.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Th\u1eddi gian load vs. th\u1eddi gian render<\/h3>\n\n\n\n<p>V\u00ec c\u00e1c l\u00fd do b\u1ea3o m\u1eadt, timestamp k\u1ebft xu\u1ea5t c\u1ee7a \u1ea3nh kh\u00f4ng hi\u1ec3n th\u1ecb cho c\u00e1c \u1ea3nh c\u00f3 ngu\u1ed3n g\u1ed1c ch\u00e9o (cross-origin) m\u00e0 thi\u1ebfu ti\u00eau \u0111\u1ec1 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/Timing-Allow-Origin\" target=\"_blank\" rel=\"noreferrer noopener\">Timing-Allow-Origin<\/a>. Thay v\u00ec th\u1ebf, ch\u1ec9 th\u1eddi gian t\u1ea3i c\u1ee7a n\u00f3 \u0111\u01b0\u1ee3c tr\u00ecnh di\u1ec7n (v\u00ec \u0111i\u1ec1u n\u00e0y \u0111\u00e3 \u0111\u01b0\u1ee3c tr\u00ecnh di\u1ec7n qua nhi\u1ec1u API web kh\u00e1c).<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 s\u1eed d\u1ee5ng b\u00ean d\u01b0\u1edbi cho th\u1ea5y c\u00e1ch x\u1eed l\u00fd c\u00e1c ph\u1ea7n t\u1eed m\u00e0 th\u1eddi gian k\u1ebft xu\u1ea5t kh\u00f4ng c\u00f3 s\u1eb5n. Nh\u01b0ng, khi c\u00f3 th\u1ec3, ch\u00fang t\u00f4i lu\u00f4n khuy\u1ebfn kh\u00edch \u0111\u1eb7t ti\u00eau \u0111\u1ec1  <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/Timing-Allow-Origin\">Timing-Allow-Origin<\/a><\/code>, v\u00ec th\u1ebf c\u00e1c ch\u1ec9 s\u1ed1 c\u1ee7a b\u1ea1n s\u1ebd ch\u00ednh x\u00e1c h\u01a1n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ph\u1ea7n t\u1eed thay \u0111\u1ed5i layout v\u00e0 k\u00edch c\u1ee1 \u0111\u01b0\u1ee3c x\u1eed l\u00fd nh\u01b0 th\u1ebf n\u00e0o?<\/h3>\n\n\n\n<p>\u0110\u1ec3 tr\u00e1nh v\u1ea5n \u0111\u1ec1 hi\u1ec7u su\u1ea5t do qu\u00e1 t\u1ea3i t\u00ednh to\u00e1n v\u00e0 gi\u1eef c\u00e1c ch\u1ec9 s\u1ed1 hi\u1ec7u su\u1ea5t m\u1edbi ti\u00eau t\u1ed1n \u1edf m\u1ee9c th\u1ea5p, vi\u1ec7c thay \u0111\u1ed5i k\u00edch c\u1ee1 ph\u1ea7n t\u1eed ho\u1eb7c v\u1ecb tr\u00ed kh\u00f4ng t\u1ea1o th\u00e0nh \u1ee9ng c\u1ee9 vi\u00ean LCP m\u1edbi. Ch\u1ec9 c\u00e1c k\u00edch c\u1ee1 v\u00e0 v\u1ecb tr\u00ed ban \u0111\u1ea7u c\u1ee7a ph\u1ea7n t\u1eed trong khung nh\u00ecn tr\u00ecnh duy\u1ec7t l\u00e0 \u0111\u01b0\u1ee3c xem x\u00e9t.<\/p>\n\n\n\n<p>\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 c\u00e1c \u1ea3nh ban \u0111\u1ea7u \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb ngo\u00e0i m\u00e0n h\u00ecnh (off-screen) r\u1ed3i sau \u0111\u00f3 chuy\u1ec3n th\u00e0nh trong m\u00e0n h\u00ecnh (on-screen) c\u00f3 th\u1ec3 kh\u00f4ng \u0111\u01b0\u1ee3c b\u00e1o c\u00e1o ghi nh\u1eadn. \u0110i\u1ec1u n\u00e0y c\u0169ng c\u00f3 ngh\u0129a l\u00e0 c\u00e1c ph\u1ea7n t\u1eed ban \u0111\u1ea7u \u0111\u01b0\u1ee3c render trong khung nh\u00ecn tr\u00ecnh duy\u1ec7t r\u1ed3i sau \u0111\u00f3 \u0111\u01b0\u1ee3c \u1ea5n xu\u1ed1ng b\u00ean d\u01b0\u1edbi, \u0111i ra b\u00ean ngo\u00e0i s\u1ebd v\u1eabn \u0111\u01b0\u1ee3c b\u00e1o c\u00e1o nh\u01b0 l\u00fac \u0111\u1ea7u, nh\u01b0 l\u00e0 khi n\u00f3 ch\u01b0a b\u1ecb \u1ea5n xu\u1ed1ng b\u00ean d\u01b0\u1edbi.<\/p>\n\n\n\n<p>Tuy nhi\u00ean, (nh\u01b0 \u0111\u1ec1 c\u1eadp \u1edf tr\u00ean) m\u1ed9t ph\u1ea7n t\u1eed s\u1ebd b\u1ecb lo\u1ea1i kh\u1ecfi qu\u00e1 tr\u00ecnh \u0111\u00e1nh gi\u00e1 n\u1ebfu n\u00f3 \u0111\u00e3 b\u1ecb lo\u1ea1i kh\u1ecfi DOM ho\u1eb7c n\u1ebfu t\u00e0i nguy\u00ean h\u00ecnh \u1ea3nh li\u00ean quan \u0111\u1ebfn n\u00f3 thay \u0111\u1ed5i.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">C\u00e1c v\u00ed d\u1ee5<\/h3>\n\n\n\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t s\u1ed1 v\u00ed d\u1ee5 khi Largest Contentful Paint xu\u1ea5t hi\u1ec7n tr\u00ean m\u1ed9t s\u1ed1 website ph\u1ed5 bi\u1ebfn (ph\u1ea7n t\u1eed l\u1edbn nh\u1ea5t \u0111\u01b0\u1ee3c \u0111\u00e1nh d\u1ea5u b\u1eb1ng h\u00ecnh ch\u1eef nh\u1eadt v\u1edbi c\u00e1c n\u00e9t \u0111\u1ee9t m\u00e0u xanh):<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/lcp-cnn-filmstrip-1024x397.png\" alt=\"FCP \u0111\u1ebfn LCP\" class=\"wp-image-15026\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/lcp-techcrunch-filmstrip-1024x397.png\" alt=\"FCP \u0111\u1ebfn LCP, trang kh\u00e1c\" class=\"wp-image-15027\"\/><\/figure>\n\n\n\n<p>Trong c\u1ea3 hai timeline ph\u00eda tr\u00ean, ph\u1ea7n t\u1eed l\u1edbn nh\u1ea5t thay \u0111\u1ed5i khi n\u1ed9i dung t\u1ea3i. Trong v\u00ed d\u1ee5 \u0111\u1ea7u ti\u00ean, n\u1ed9i dung m\u1edbi \u0111\u01b0\u1ee3c th\u00eam v\u00e0o DOM v\u00e0 \u0111i\u1ec1u n\u00e0y l\u00e0m thay \u0111\u1ed5i ph\u1ea7n t\u1eed l\u1edbn nh\u1ea5t. Trong v\u00ed d\u1ee5 th\u1ee9 hai, layout thay \u0111\u1ed5i v\u00e0 n\u1ed9i dung l\u1edbn nh\u1ea5t tr\u01b0\u1edbc \u0111\u00f3 b\u1ecb lo\u1ea1i b\u1ecf kh\u1ecfi khung nh\u00ecn tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\n<p>Trong khi \u0111\u00f3 l\u00e0 \u0111i\u1ec1u th\u01b0\u1eddng x\u1ea3y ra khi m\u00e0 n\u1ed9i dung t\u1ea3i mu\u1ed9n h\u01a1n th\u01b0\u1eddng s\u1ebd l\u1edbn h\u01a1n n\u1ed9i dung \u0111\u00e3 c\u00f3 s\u1eb5n tr\u00ean trang, n\u00f3 kh\u00f4ng nh\u1ea5t thi\u1ebft \u0111\u00fang trong m\u1ecdi tr\u01b0\u1eddng h\u1ee3p. Hai v\u00ed d\u1ee5 ti\u1ebfp theo cho th\u1ea5y Largest Contentful Paint xu\u1ea5t hi\u1ec7n tr\u01b0\u1edbc khi trang \u0111\u01b0\u1ee3c t\u1ea3i \u0111\u1ea7y \u0111\u1ee7.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/lcp-instagram-1024x397.png\" alt=\"LCP c\u1ee7a Instagram\" class=\"wp-image-15028\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/lcp-google-1024x397.png\" alt=\"LCP c\u1ee7a Google\" class=\"wp-image-15029\"\/><\/figure>\n\n\n\n<p>Trong v\u00ed d\u1ee5 \u0111\u1ea7u ti\u00ean, logo c\u1ee7a Instagram \u0111\u01b0\u1ee3c t\u1ea3i t\u01b0\u01a1ng \u0111\u1ed1i s\u1edbm v\u00e0 n\u00f3 v\u1eabn l\u00e0 ph\u1ea7n t\u1eed l\u1edbn nh\u1ea5t sau n\u00e0y, d\u00f9 c\u00e1c n\u1ed9i dung kh\u00e1c d\u1ea7n d\u1ea7n hi\u1ec3n th\u1ecb. Trong v\u00ed d\u1ee5 v\u1ec1 c\u00e1c k\u1ebft qu\u1ea3 t\u00ecm ki\u1ebfm c\u1ee7a Google, ph\u1ea7n t\u1eed l\u1edbn nh\u1ea5t l\u00e0 \u0111o\u1ea1n v\u0103n b\u1ea3n \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb tr\u01b0\u1edbc b\u1ea5t k\u1ef3 \u1ea3nh ho\u1eb7c logo n\u00e0o. V\u00ec c\u00e1c \u1ea3nh c\u1ee5 th\u1ec3 v\u1eabn nh\u1ecf h\u01a1n so v\u1edbi v\u0103n b\u1ea3n n\u00e0y, n\u00f3 v\u1eabn l\u00e0 ph\u1ea7n t\u1eed l\u1edbn nh\u1ea5t trong su\u1ed1t qu\u00e1 tr\u00ecnh t\u1ea3i.<\/p>\n\n\n\n<p><strong>L\u01b0u \u00fd<\/strong>: Trong frame \u0111\u1ea7u ti\u00ean c\u1ee7a timeline Instagram, b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ec3 \u00fd \u0111\u1ebfn logo camera kh\u00f4ng c\u00f3 h\u1ed9p m\u00e0u xanh bao quanh n\u00f3. \u0110\u00f3 l\u00e0 v\u00ec n\u00f3 l\u00e0 ph\u1ea7n t\u1eed &lt;svg&gt;, v\u00e0 c\u00e1c ph\u1ea7n t\u1eed &lt;svg&gt; hi\u1ec7n v\u1eabn ch\u01b0a \u0111\u01b0\u1ee3c coi l\u00e0 \u1ee9ng c\u1eed vi\u00ean trong LCP. \u0110\u1ed1i t\u01b0\u1ee3ng \u0111\u01b0\u1ee3c xem l\u00e0 LCP \u0111\u1ea7u ti\u00ean l\u00e0 v\u0103n b\u1ea3n trong frame th\u1ee9 hai.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">#2. L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 \u0111o \u0111\u01b0\u1ee3c LCP<\/h2>\n\n\n\n<p>LCP c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u0111o trong \u0111i\u1ec1u ki\u1ec7n th\u1eed nghi\u1ec7m (lab) ho\u1eb7c trong \u0111i\u1ec1u ki\u1ec7n t\u1ef1 nhi\u00ean (field), v\u00e0 n\u00f3 c\u00f3 s\u1eb5n trong c\u00e1c c\u00f4ng c\u1ee5 sau:<\/p>\n\n\n\n<p>C\u00e1c c\u00f4ng c\u1ee5 t\u1ef1 nhi\u00ean:<\/p>\n\n\n\n<ul>\n<li>B\u00e1o c\u00e1o tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng c\u1ee7a Chrome<\/li>\n\n\n\n<li>PageSpeed Insights<\/li>\n\n\n\n<li>Search Console (b\u00e1o c\u00e1o Core Web Vitals)<\/li>\n<\/ul>\n\n\n\n<p>C\u00e1c c\u00f4ng c\u1ee5 th\u1eed nghi\u1ec7m:<\/p>\n\n\n\n<ul>\n<li>Chrome DevTools<\/li>\n\n\n\n<li>Lighthouse<\/li>\n\n\n\n<li><a href=\"https:\/\/webpagetest.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">WebPageTest<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u0110o \u0111\u1ea1c LCP trong JavaScript<\/h3>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 \u0111o \u0111\u1ea1c LCP trong JavaScript s\u1eed d\u1ee5ng <a href=\"https:\/\/wicg.github.io\/largest-contentful-paint\/\" target=\"_blank\" rel=\"noreferrer noopener\">API Largest Contentful Paint<\/a>. V\u00ed d\u1ee5 d\u01b0\u1edbi \u0111\u00e2y cho th\u1ea5y c\u00e1ch t\u1ea1o ra <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/PerformanceObserver\" target=\"_blank\" rel=\"noreferrer noopener\">PerformanceObserver<\/a> d\u00f9ng \u0111\u1ec3 l\u1eafng nghe c\u00e1c m\u1ee5c nh\u1eadp largest-contentful-paint v\u00e0 ghi l\u1ea1i gi\u00e1 tr\u1ecb LCP v\u00e0o console:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Create a variable to hold the latest LCP value (since it can change).\nlet lcp;\n\/\/ Create the PerformanceObserver instance.\nconst po = new PerformanceObserver((entryList) =&gt; {\n  const entries = entryList.getEntries();\n  const lastEntry = entries&#91;entries.length - 1];\n  \/\/ Update `lcp` to the latest value, using `renderTime` if it's available,\n  \/\/ otherwise using `loadTime`. (Note: `renderTime` may not be available if\n  \/\/ the element is an image and it's loaded cross-origin without the\n  \/\/ `Timing-Allow-Origin` header.)\n  lcp = lastEntry.renderTime || lastEntry.loadTime;\n});\n\/\/ Observe entries of type `largest-contentful-paint`, including buffered\n\/\/ entries, i.e. entries that occurred before calling `observe()`.\npo.observe({type: 'largest-contentful-paint', buffered: true});\n\/\/ Send the latest LCP value to your analytics server once the user\n\/\/ leaves the tab.\naddEventListener('visibilitychange', function fn() {\n  if (lcp &amp;&amp; document.visibilityState === 'hidden') {\n    console.log('LCP:', lcp);\n    removeEventListener('visibilitychange', fn, true);\n  }\n}, true);<\/code><\/pre>\n\n\n\n<p>L\u01b0u \u00fd, v\u00ed d\u1ee5 n\u00e0y \u0111\u1ee3i \u0111\u1ec3 log LCP cho \u0111\u1ebfn khi tr\u1ea1ng th\u00e1i v\u00f2ng \u0111\u1eddi c\u1ee7a trang (lifecycle state) thay \u0111\u1ed5i th\u00e0nh \u1ea9n. \u0110i\u1ec1u n\u00e0y l\u00e0 c\u00e1ch \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o r\u1eb1ng n\u00f3 ch\u1ec9 log entry cu\u1ed1i c\u00f9ng.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">S\u1ebd th\u1ebf n\u00e0o n\u1ebfu ph\u1ea7n t\u1eed l\u1edbn nh\u1ea5t kh\u00f4ng ph\u1ea3i quan tr\u1ecdng nh\u1ea5t?<\/h3>\n\n\n\n<p>Trong m\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p (c\u00e1c) ph\u1ea7n t\u1eed quan tr\u1ecdng nh\u1ea5t tr\u00ean trang l\u1ea1i kh\u00f4ng ph\u1ea3i l\u00e0 ph\u1ea7n t\u1eed l\u1edbn nh\u1ea5t, v\u00e0 ng\u01b0\u1eddi l\u1eadp tr\u00ecnh c\u00f3 th\u1ec3 quan t\u00e2m h\u01a1n \u0111\u1ebfn vi\u1ec7c \u0111o \u0111\u1ea1c th\u1eddi gian k\u1ebft xu\u1ea5t c\u1ee7a nh\u1eefng ph\u1ea7n t\u1eed thay th\u1ebf n\u00e0y. \u0110i\u1ec1u \u0111\u00f3 c\u00f3 th\u1ec3 l\u00e0m \u0111\u01b0\u1ee3c th\u00f4ng qua vi\u1ec7c s\u1eed d\u1ee5ng <a href=\"https:\/\/wicg.github.io\/element-timing\/\" target=\"_blank\" rel=\"noreferrer noopener\">API Element Timing<\/a>, c\u0169ng \u0111\u00e3 \u0111\u01b0\u1ee3c m\u00f4 t\u1ea3 trong b\u00e0i vi\u1ebft c\u00e1c ch\u1ec9 s\u1ed1 t\u00f9y ch\u1ec9nh (custom metrics).<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">#3. L\u00e0m th\u1ebf n\u00e0o c\u1ea3i thi\u1ec7n \u0111\u01b0\u1ee3c LCP<\/h2>\n\n\n\n<p>LCP ch\u1eadm ch\u1ee7 y\u1ebfu b\u1ecb \u1ea3nh h\u01b0\u1edfng b\u1edfi c\u00e1c y\u1ebfu t\u1ed1 sau:<\/p>\n\n\n\n<ul>\n<li>Th\u1eddi gian ph\u1ea3n h\u1ed3i c\u1ee7a m\u00e1y ch\u1ee7 ch\u1eadm<\/li>\n\n\n\n<li>CSS v\u00e0 JavaScript ch\u1eb7n hi\u1ec3n th\u1ecb<\/li>\n\n\n\n<li>Th\u1eddi gian t\u1ea3i t\u00e0i nguy\u00ean<\/li>\n\n\n\n<li>K\u1ebft xu\u1ea5t ph\u00eda m\u00e1y kh\u00e1ch<\/li>\n<\/ul>\n\n\n\n<p>C\u0169ng v\u1eady, n\u1ebfu trang c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c render tr\u00ean m\u00e1y kh\u00e1ch, v\u00e0 ph\u1ea7n t\u1eed n\u1ed9i dung c\u00f3 k\u00edch c\u1ee1 l\u1edbn nh\u1ea5t \u0111\u01b0\u1ee3c th\u00eam v\u00e0o DOM th\u00f4ng qua JavaScript, sau \u0111\u00f3 script c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c ph\u00e2n t\u00edch, bi\u00ean d\u1ecbch, v\u00e0 th\u1eddi gian th\u1ef1c thi c\u0169ng c\u00f3 th\u1ec3 l\u00e0 m\u1ed9t y\u1ebfu t\u1ed1 trong LCP.<\/p>\n\n\n\n<p>C\u00f3 m\u1ed9t s\u1ed1 th\u00f4ng tin b\u1ea1n c\u1ea7n t\u00ecm hi\u1ec3u th\u00eam \u0111\u1ec3 t\u1ed1i \u01b0u h\u00f3a t\u1ea5t c\u1ea3 c\u00e1c y\u1ebfu t\u1ed1 n\u00e0y:<\/p>\n\n\n\n<ul>\n<li>\u00c1p d\u1ee5ng t\u1ea3i ngay l\u1eadp t\u1ee9c v\u1edbi m\u1eabu PRPL<\/li>\n\n\n\n<li><a href=\"https:\/\/kiencang.net\/duong-dan-hien-thi-trang-quan-trong\/\" target=\"_blank\" rel=\"noreferrer noopener\">T\u1ed1i \u01b0u h\u00f3a tuy\u1ebfn hi\u1ec3n th\u1ecb ch\u00ednh<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/kiencang.net\/toi-uu-hoa-phan-phoi-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">T\u1ed1i \u01b0u h\u00f3a CSS c\u1ee7a b\u1ea1n<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/kiencang.net\/toi-uu-hoa-anh-tren-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">T\u1ed1i \u01b0u h\u00f3a h\u00ecnh \u1ea3nh<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/kiencang.net\/font-cho-web-va-toc-do-tai-trang\/\" target=\"_blank\" rel=\"noreferrer noopener\">T\u1ed1i \u01b0u h\u00f3a web fonts<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/kiencang.net\/tai-javascript-defer-async\/\" target=\"_blank\" rel=\"noreferrer noopener\">T\u1ed1i \u01b0u h\u00f3a JavaScript c\u1ee7a b\u1ea1n<\/a> (cho website \u0111\u01b0\u1ee3c k\u1ebft xu\u1ea5t ph\u00eda m\u00e1y kh\u00e1ch)<\/li>\n<\/ul>\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>Largest Contentful Paint l\u00e0 g\u00ec (b\u00e0i b\u1ea1n \u0111ang \u0111\u1ecdc)<\/li>\n\n\n\n<li><a href=\"https:\/\/kiencang.net\/cumulative-layout-shift\/\" target=\"_blank\" rel=\"noreferrer noopener\">Cumulative layout shift (CLS) l\u00e0 g\u00ec<\/a><\/li>\n<\/ul>\n\n\n\n<p><em>(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft <a href=\"https:\/\/web.dev\/lcp\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Largest Contentful Paint<\/a>, t\u00e1c gi\u1ea3: Philip Walton, t\u1eeb trang web dev)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Largest Contentful Paint (LCP) l\u00e0 m\u1ed9t ch\u1ec9 s\u1ed1 quan tr\u1ecdng, \u0111\u1eb7t ng\u01b0\u1eddi d\u00f9ng v\u00e0o trung t\u00e2m (user-centric) \u0111\u1ec3 \u0111o \u0111\u1ea1c t\u1ed1c \u0111\u1ed9 t\u1ea3i nh\u1eadn th\u1ee9c (perceived load speed), b\u1edfi v\u00ec n\u00f3 \u0111\u00e1nh d\u1ea5u th\u1eddi \u0111i\u1ec3m trong timeline* t\u1ea3i trang khi m\u00e0 n\u1ed9i dung ch\u00ednh (main content) c\u1ee7a trang c\u00f3 kh\u1ea3 n\u0103ng \u0111\u00e3 t\u1ea3i xong- &#8220;LCP &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>Largest Contentful Paint (LCP) l\u00e0 g\u00ec? &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"description\" content=\"Largest Contentful Paint l\u00e0 m\u1ed9t trong 6 ch\u1ec9 s\u1ed1 quan tr\u1ecdng \u0111\u1ec3 \u0111\u00e1nh gi\u00e1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 website. N\u1ed9i dung l\u1edbn nh\u1ea5t tr\u00ean trang t\u1ea3i c\u00e0ng s\u1edbm th\u00ec c\u00e0ng t\u1ed1t cho ng\u01b0\u1eddi d\u00f9ng.\" \/>\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\/largest-contentful-paint-la-gi\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Largest Contentful Paint (LCP) l\u00e0 g\u00ec? &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"Largest Contentful Paint l\u00e0 m\u1ed9t trong 6 ch\u1ec9 s\u1ed1 quan tr\u1ecdng \u0111\u1ec3 \u0111\u00e1nh gi\u00e1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 website. N\u1ed9i dung l\u1edbn nh\u1ea5t tr\u00ean trang t\u1ea3i c\u00e0ng s\u1edbm th\u00ec c\u00e0ng t\u1ed1t cho ng\u01b0\u1eddi d\u00f9ng.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/largest-contentful-paint-la-gi\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-11T15:33:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-23T12:44:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/08\/LCP-time.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=\"14 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Largest Contentful Paint (LCP) l\u00e0 g\u00ec? &#8226; Ki\u1ebfn c\u00e0ng","description":"Largest Contentful Paint l\u00e0 m\u1ed9t trong 6 ch\u1ec9 s\u1ed1 quan tr\u1ecdng \u0111\u1ec3 \u0111\u00e1nh gi\u00e1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 website. N\u1ed9i dung l\u1edbn nh\u1ea5t tr\u00ean trang t\u1ea3i c\u00e0ng s\u1edbm th\u00ec c\u00e0ng t\u1ed1t cho ng\u01b0\u1eddi d\u00f9ng.","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\/largest-contentful-paint-la-gi\/","og_locale":"vi_VN","og_type":"article","og_title":"Largest Contentful Paint (LCP) l\u00e0 g\u00ec? &#8226; Ki\u1ebfn c\u00e0ng","og_description":"Largest Contentful Paint l\u00e0 m\u1ed9t trong 6 ch\u1ec9 s\u1ed1 quan tr\u1ecdng \u0111\u1ec3 \u0111\u00e1nh gi\u00e1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 website. N\u1ed9i dung l\u1edbn nh\u1ea5t tr\u00ean trang t\u1ea3i c\u00e0ng s\u1edbm th\u00ec c\u00e0ng t\u1ed1t cho ng\u01b0\u1eddi d\u00f9ng.","og_url":"https:\/\/kiencang.net\/largest-contentful-paint-la-gi\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2020-03-11T15:33:50+00:00","article_modified_time":"2023-07-23T12:44:59+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/08\/LCP-time.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":"14 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/largest-contentful-paint-la-gi\/","url":"https:\/\/kiencang.net\/largest-contentful-paint-la-gi\/","name":"Largest Contentful Paint (LCP) l\u00e0 g\u00ec? &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2020-03-11T15:33:50+00:00","dateModified":"2023-07-23T12:44:59+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"description":"Largest Contentful Paint l\u00e0 m\u1ed9t trong 6 ch\u1ec9 s\u1ed1 quan tr\u1ecdng \u0111\u1ec3 \u0111\u00e1nh gi\u00e1 hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 website. N\u1ed9i dung l\u1edbn nh\u1ea5t tr\u00ean trang t\u1ea3i c\u00e0ng s\u1edbm th\u00ec c\u00e0ng t\u1ed1t cho ng\u01b0\u1eddi d\u00f9ng.","breadcrumb":{"@id":"https:\/\/kiencang.net\/largest-contentful-paint-la-gi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/largest-contentful-paint-la-gi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/largest-contentful-paint-la-gi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"Largest Contentful Paint (LCP) l\u00e0 g\u00ec?"}]},{"@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\/16857"}],"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=16857"}],"version-history":[{"count":2,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16857\/revisions"}],"predecessor-version":[{"id":24332,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16857\/revisions\/24332"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=16857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=16857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=16857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}