{"id":16835,"date":"2019-12-11T12:39:23","date_gmt":"2019-12-11T12:39:23","guid":{"rendered":"https:\/\/kiencang.net\/?p=13905"},"modified":"2023-07-23T22:29:54","modified_gmt":"2023-07-23T15:29:54","slug":"native-lazy-loading-cho-web","status":"publish","type":"post","link":"https:\/\/kiencang.net\/native-lazy-loading-cho-web\/","title":{"rendered":"Native lazy-loading l\u00e0 g\u00ec, n\u00f3 c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 website nh\u01b0 th\u1ebf n\u00e0o"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow\"><div class=\"wp-block-group__inner-container\">\n<p>Tr\u00ecnh duy\u1ec7t Chrome ch\u00ednh th\u1ee9c h\u1ed7 tr\u1ee3 lazy load cho \u1ea3nh v\u00e0 iframe \u1edf <strong>c\u1ea5p \u0111\u1ed9 tr\u00ecnh duy\u1ec7t<\/strong>! D\u01b0\u1edbi \u0111\u00e2y l\u00e0 video demo t\u00ednh n\u0103ng n\u00e0y:<\/p>\n\n\n\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/lYyF9KGEE68\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n\n\n\n<p>B\u1eaft \u0111\u1ea7u t\u1eeb Chrome 76, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <em>loading<\/em> \u0111\u1ec3 <a href=\"https:\/\/kiencang.net\/lazy-load-anh-va-video\/\" target=\"_blank\" rel=\"noreferrer noopener\">lazy load c\u00e1c t\u00e0i nguy\u00ean<\/a> m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft ri\u00eang m\u00e3 lazy-loading ho\u1eb7c s\u1eed d\u1ee5ng ri\u00eang th\u01b0 vi\u1ec7n JavaScript (ch\u1eb3ng h\u1ea1n nh\u01b0 <a href=\"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p1\/\" target=\"_blank\" rel=\"noreferrer noopener\">lazysizes<\/a>). Ch\u00fang ta s\u1ebd \u0111i v\u00e0o chi ti\u1ebft ngay sau \u0111\u00e2y.<\/p>\n\n\n\n<p>P\/S: native trong c\u1ee5m t\u1eeb &#8220;native lazy-loading&#8221; c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c d\u1ecbch s\u00e1t ngh\u0129a l\u00e0 &#8220;t\u1ea3i l\u01b0\u1eddi ki\u1ec3u b\u1ea3n \u0111\u1ecba&#8221; ho\u1eb7c &#8220;lazy-loading b\u1ea3n \u0111\u1ecba&#8221;, tuy nhi\u00ean t\u00f4i (ng\u01b0\u1eddi d\u1ecbch) th\u1ea5y gi\u1eef nguy\u00ean t\u1eeb g\u1ed1c ti\u1ebfng Anh hay h\u01a1n, ho\u1eb7c n\u1ebfu c\u00f3 d\u1ecbch s\u1ebd d\u00f9ng t\u1eeb &#8220;lazy-loading c\u1ea5p tr\u00ecnh duy\u1ec7t&#8221; cho d\u1ec5 hi\u1ec3u.<\/p>\n\n\n\n<p>C\u1eadp nh\u1eadt nhanh: native lazy-loading \u0111\u00e3 \u0111\u01b0\u1ee3c <a href=\"https:\/\/make.wordpress.org\/core\/2020\/07\/14\/lazy-loading-images-in-5-5\/\" target=\"_blank\" rel=\"noreferrer noopener\">t\u00edch h\u1ee3p s\u1eb5n v\u00e0 c\u00e1c b\u1ea3n c\u00e0i \u0111\u1eb7t c\u1ee7a WordPress<\/a>. N\u00f3 c\u0169ng \u0111\u01b0\u1ee3c <a href=\"https:\/\/caniuse.com\/loading-lazy-attr\" target=\"_blank\" rel=\"noreferrer noopener\">nhi\u1ec1u tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3 h\u01a1n<\/a> thay v\u00ec ch\u1ec9 c\u00f3 m\u1ed7i Chrome th\u1ee7a ban \u0111\u1ea7u, v\u00e0 d\u1ef1 t\u00ednh s\u1ebd s\u1edbm \u0111\u01b0\u1ee3c t\u1ea5t c\u1ea3 tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3. <\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_60 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >M\u1ee5c l\u1ee5c<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\" role=\"button\"><label for=\"item-6577d21bb39cc\" ><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input aria-label=\"Toggle\" aria-label=\"item-6577d21bb39cc\"  type=\"checkbox\" id=\"item-6577d21bb39cc\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/kiencang.net\/native-lazy-loading-cho-web\/#1_Tai_sao_lai_dung_native_lazy-loading\" title=\"#1. T\u1ea1i sao l\u1ea1i d\u00f9ng native lazy-loading?\">#1. T\u1ea1i sao l\u1ea1i d\u00f9ng native lazy-loading?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/kiencang.net\/native-lazy-loading-cho-web\/#2_Thuoc_tinh_loading\" title=\"#2. Thu\u1ed9c t\u00ednh loading\">#2. Thu\u1ed9c t\u00ednh loading<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/kiencang.net\/native-lazy-loading-cho-web\/#3_Cac_cau_hoi_thuong_gap_FAQ\" title=\"#3. C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p (FAQ)\">#3. C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p (FAQ)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/kiencang.net\/native-lazy-loading-cho-web\/#4_Ket_luan\" title=\"#4. K\u1ebft lu\u1eadn\">#4. K\u1ebft lu\u1eadn<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\" id=\"t\u1ea1i-sao-l\u1ea1i-dung-native-lazy-loading\"><span class=\"ez-toc-section\" id=\"1_Tai_sao_lai_dung_native_lazy-loading\"><\/span>#1. T\u1ea1i sao l\u1ea1i d\u00f9ng native lazy-loading?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Theo <a href=\"https:\/\/httparchive.org\/reports\/page-weight\" target=\"_blank\" rel=\"noreferrer noopener\">HTTPArchive<\/a>, \u1ea3nh l\u00e0 th\u00e0nh ph\u1ea7n \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u nhi\u1ec1u nh\u1ea5t tr\u00ean h\u1ea7u h\u1ebft website v\u00e0 th\u01b0\u1eddng chi\u1ebfm nhi\u1ec1u b\u0103ng th\u00f4ng h\u01a1n b\u1ea5t k\u1ef3 t\u00e0i nguy\u00ean n\u00e0o. \u1ede ph\u00e2n v\u1ecb 90(*), c\u00e1c website g\u1eedi 4,7 MB \u1ea3nh <a href=\"https:\/\/kiencang.net\/khi-ket-noi-di-dong-chiem-phan-da\/\" target=\"_blank\" rel=\"noreferrer noopener\">tr\u00ean m\u00e1y b\u00e0n v\u00e0 di \u0111\u1ed9ng<\/a>.<\/p>\n\n\n\n<p>(*): ph\u00e2n v\u1ecb th\u1ee9 90 (90th percentile), theo c\u00e1ch hi\u1ec3u th\u00f4ng th\u01b0\u1eddng l\u00e0 nh\u1eefng trang web c\u00f3 dung l\u01b0\u1ee3ng \u1ea3nh l\u1edbn h\u01a1n 90% c\u00e1c website kh\u00e1c, n\u00f3i c\u00e1ch kh\u00e1c top 10% c\u00e1c website c\u00f3 nhi\u1ec1u \u1ea3nh nh\u1ea5t ch\u1ee9a \u00edt nh\u1ea5t 4,7 MB \u1ea3nh.<\/p>\n\n\n\n<p>Nh\u00fang iframe c\u0169ng s\u1eed d\u1ee5ng r\u1ea5t nhi\u1ec1u d\u1eef li\u1ec7u v\u00e0 c\u00f3 th\u1ec3 \u1ea3nh h\u01b0\u1edfng ti\u00eau c\u1ef1c \u0111\u1ebfn hi\u1ec7u su\u1ea5t c\u1ee7a trang (page performance). N\u1ebfu ch\u00fang ta ch\u1ec9 t\u1ea3i c\u00e1c \u1ea3nh, iframe kh\u00f4ng quan tr\u1ecdng (non-critical), n\u1eb1m trong m\u00e0n h\u00ecnh th\u1ee9 hai tr\u1edf \u0111i (below-the-fold) khi ng\u01b0\u1eddi d\u00f9ng c\u1ea7n xem ch\u00fang th\u00ec s\u1ebd gi\u00fap c\u1ea3i thi\u1ec7n th\u1eddi gian t\u1ea3i trang (page load times), t\u1ed1i thi\u1ec3u h\u00f3a b\u0103ng th\u00f4ng (bandwidth), v\u00e0 gi\u1ea3m s\u1eed d\u1ee5ng b\u1ed9 nh\u1edb.<\/p>\n\n\n\n<p>Hi\u1ec7n t\u1ea1i c\u00f3 hai c\u00e1ch \u0111\u1ec3 tr\u00ec ho\u00e3n t\u1ea3i \u1ea3nh v\u00e0 iframe kh\u00f4ng thu\u1ed9c<a href=\"https:\/\/kiencang.net\/man-hinh-dau-tien\/\" target=\"_blank\" rel=\"noreferrer noopener\"> m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean<\/a> (off-screen):<\/p>\n\n\n\n<ul>\n<li>S\u1eed d\u1ee5ng <a href=\"https:\/\/developers.google.com\/web\/updates\/2016\/04\/intersectionobserver\" target=\"_blank\" rel=\"noreferrer noopener\">Intersection Observer API<\/a><\/li>\n\n\n\n<li>S\u1eed d\u1ee5ng <em>scroll<\/em>, <em>resize<\/em>, ho\u1eb7c<em> orientationchange<\/em> even hanler (tr\u00ecnh x\u1eed l\u00fd s\u1ef1 ki\u1ec7n)<\/li>\n<\/ul>\n\n\n\n<p>C\u1ea3 hai t\u00f9y ch\u1ecdn n\u00e0y c\u00f3 th\u1ec3 cho ph\u00e9p l\u1eadp tr\u00ecnh vi\u00ean bao g\u1ed3m h\u00e0m lazy-loading v\u00e0o website, v\u00e0 nhi\u1ec1u l\u1eadp tr\u00ecnh vi\u00ean x\u00e2y d\u1ef1ng th\u01b0 vi\u1ec7n c\u1ee7a b\u00ean th\u1ee9 ba \u0111\u1ec3 \u0111\u01b0a ra c\u00e1c abstraction th\u1eadm ch\u00ed c\u00f2n d\u1ec5 s\u1eed d\u1ee5ng h\u01a1n. Nh\u01b0ng v\u1edbi lazy-loading \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 tr\u1ef1c ti\u1ebfp b\u1edfi tr\u00ecnh duy\u1ec7t, b\u1ea1n kh\u00f4ng c\u1ea7n \u0111\u1ebfn c\u00e1c th\u01b0 vi\u1ec7n b\u00ean ngo\u00e0i (external library) n\u1eefa. Native lazy loading c\u0169ng \u0111\u1ea3m b\u1ea3o vi\u1ec7c tr\u00ec ho\u00e3n t\u1ea3i \u1ea3nh v\u00e0 iframes <em>v\u1eabn ho\u1ea1t \u0111\u1ed9ng b\u00ecnh th\u01b0\u1eddng<\/em> ngay c\u1ea3 khi JavaScript b\u1ecb v\u00f4 hi\u1ec7u h\u00f3a tr\u00ean tr\u00ecnh duy\u1ec7t c\u1ee7a ng\u01b0\u1eddi d\u00f9ng (c\u00f2n g\u1ecdi l\u00e0 m\u00e1y kh\u00e1ch\/client).<\/p>\n\n\n\n<p>P\/S: R\u1ea5t hi\u1ebfm khi tr\u00ecnh duy\u1ec7t b\u1ecb v\u00f4 hi\u1ec7u h\u00f3a JavaScript, v\u00ec c\u00e1c website hi\u1ec7n \u0111\u1ea1i, nhi\u1ec1u ch\u1ee9c n\u0103ng th\u00ec JavaScript l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n c\u1ed1t l\u00f5i, nh\u01b0ng n\u1ebfu n\u00f3 b\u1ecb v\u00f4 hi\u1ec7u h\u00f3a, m\u00e0 trang c\u1ee7a b\u1ea1n kh\u00f4ng tri\u1ec3n khai d\u1ef1 ph\u00f2ng b\u1eb1ng th\u1ebb &lt;noscript&gt; th\u00ec lazy load s\u1ebd b\u1ecb g\u1eb7p l\u1ed7i kh\u00f4ng hi\u1ec3n th\u1ecb \u1ea3nh. B\u1ea1n c\u00f3 th\u1ec3 th\u1eed v\u00f4 hi\u1ec7u h\u00f3a JS tr\u00ean Chrome b\u1eb1ng c\u00e1ch v\u00e0o copy \u0111\u01b0\u1eddng d\u1eabn sau v\u00e0o thanh \u0111\u1ecba ch\u1ec9:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>chrome:\/\/settings\/content\/javascript<\/code><\/pre>\n\n\n\n<p>R\u1ed3i nh\u1ea5n button v\u00f4 hi\u1ec7u h\u00f3a, ti\u1ebfp theo b\u1ea1n th\u1eed v\u00e0o trang n\u00e0y, s\u1ebd th\u1ea5y nhi\u1ec1u \u1ea3nh kh\u00f4ng \u0111\u01b0\u1ee3c t\u1ea3i: <a href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-demo1.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/static.kiencang.net\/2020\/lazysizes-demo1.html<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"thu\u1ed9c-tinh-loading\"><span class=\"ez-toc-section\" id=\"2_Thuoc_tinh_loading\"><\/span>#2. Thu\u1ed9c t\u00ednh loading<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u1ede th\u1eddi \u0111i\u1ec3m hi\u1ec7n t\u1ea1i, Chrome \u0111\u00e3 h\u1ed7 tr\u1ee3 t\u1ea3i \u1ea3nh \u1edf c\u00e1c c\u1ea5p \u0111\u1ed9 \u01b0u ti\u00ean kh\u00e1c nhau ph\u1ee5 thu\u1ed9c v\u00e0o v\u1ecb tr\u00ed c\u1ee7a n\u00f3 t\u01b0\u01a1ng quan v\u1edbi viewport (khung nh\u00ecn) c\u1ee7a thi\u1ebft b\u1ecb. \u1ea2nh \u1edf b\u00ean d\u01b0\u1edbi viewport \u0111\u01b0\u1ee3c t\u1ea3i v\u1edbi m\u1ee9c \u01b0u ti\u00ean th\u1ea5p h\u01a1n (lower priority), nh\u01b0ng ch\u00fang s\u1ebd v\u1eabn \u0111\u01b0\u1ee3c t\u00ecm n\u1ea1p (fetched) \u0111\u1ec3 t\u1ea3i v\u1ec1 nhanh nh\u1ea5t c\u00f3 th\u1ec3 (as soon as possible).<\/p>\n\n\n\n<p>Trong Chrome 76, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <em>loading<\/em> \u0111\u1ec3 tr\u00ec ho\u00e3n t\u1ea3i ho\u00e0n to\u00e0n c\u00e1c \u1ea3nh v\u00e0 iframes kh\u00f4ng thu\u1ed9c m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean (nh\u1eefng khu v\u1ef1c m\u00e0 ph\u1ea3i cu\u1ed9n chu\u1ed9t m\u1edbi ti\u1ebfp c\u1eadn \u0111\u01b0\u1ee3c), m\u00e3 tr\u00f4ng gi\u1ed1ng nh\u01b0 th\u1ebf n\u00e0y:<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;img src=\"image.png\" loading=\"lazy\" alt=\"\u2026\" width=\"200\" height=\"200\"&gt;\n&lt;iframe src=\"https:\/\/example.com\" loading=\"lazy\"&gt;&lt;\/iframe&gt;<\/code><\/pre>\n\n\n\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1c gi\u00e1 tr\u1ecb h\u1ed7 tr\u1ee3 cho thu\u1ed9c t\u00ednh <em>loading<\/em>:<\/p>\n\n\n\n<ul>\n<li><em>auto<\/em> (t\u1ef1 \u0111\u1ed9ng): H\u00e0nh vi lazy-loading m\u1eb7c \u0111\u1ecbnh c\u1ee7a tr\u00ecnh duy\u1ec7t, n\u00f3 c\u00f3 c\u00f9ng k\u1ebft qu\u1ea3 nh\u01b0 khi b\u1ea1n kh\u00f4ng bao g\u1ed3m thu\u1ed9c t\u00ednh n\u00e0y trong th\u1ebb.<\/li>\n\n\n\n<li><em>lazy<\/em> (l\u01b0\u1eddi): Tr\u00ec ho\u00e3n t\u1ea3i t\u00e0i nguy\u00ean cho \u0111\u1ebfn khi n\u00f3 \u0111\u1ea1t \u0111\u1ebfn kho\u1ea3ng c\u00e1ch \u0111\u1ecbnh tr\u01b0\u1edbc t\u1eeb viewport (kho\u1ea3ng c\u00e1ch n\u00e0y c\u1ee5 th\u1ec3 nh\u01b0 th\u1ebf n\u00e0o b\u1ea1n s\u1ebd \u0111\u01b0\u1ee3c bi\u1ebft c\u1ee5 th\u1ec3 \u1edf ph\u1ea7n sau).<\/li>\n\n\n\n<li><em>eager<\/em> (h\u0103ng h\u00e1i): T\u1ea3i t\u00e0i nguy\u00ean ngay l\u1eadp t\u1ee9c, kh\u00f4ng quan tr\u1ecdng l\u00e0 n\u00f3 n\u1eb1m \u1edf v\u1ecb tr\u00ed n\u00e0o tr\u00ean trang (n\u00f3i c\u00e1ch kh\u00e1c, \u1ea3nh c\u00f3 th\u1ec3 n\u1eb1m r\u1ea5t s\u00e2u b\u00ean d\u01b0\u1edbi viewport nh\u01b0ng n\u00f3 s\u1ebd \u0111\u01b0\u1ee3c t\u1ea3i ngay nh\u01b0 l\u00e0 n\u00f3 n\u1eb1m \u1edf tr\u00ean c\u00f9ng v\u1eady).<\/li>\n<\/ul>\n\n\n\n<p>P\/S: c\u00e1c t\u1eeb m\u00e0 ng\u01b0\u1eddi d\u1ecbch th\u00eam v\u00e0o l\u00e0 t\u1ef1 \u0111\u1ed9ng, l\u01b0\u1eddi, h\u0103ng h\u00e1i \u0111\u1ec3 b\u1ea1n d\u1ec5 nh\u1edb v\u00e0 d\u1ec5 hi\u1ec3u h\u01a1n th\u00f4i.<\/p>\n\n\n\n<p>T\u00ednh n\u0103ng n\u00e0y s\u1ebd ti\u1ebfp t\u1ee5c \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt cho \u0111\u1ebfn khi n\u00f3 \u0111\u01b0\u1ee3c ph\u00e1t h\u00e0nh trong phi\u00ean b\u1ea3n \u1ed5n \u0111\u1ecbnh (Chrome 76 l\u00e0 phi\u00ean b\u1ea3n \u0111\u1ea7u ti\u00ean). Nh\u01b0ng b\u1ea1n c\u00f3 th\u1ec3 th\u1eed n\u00f3 b\u1eb1ng c\u00e1ch b\u1eadt flags d\u01b0\u1edbi \u0111\u00e2y trong Chrome:<\/p>\n\n\n\n<ul>\n<li><code>chrome:\/\/flags\/#enable-lazy-image-loading<\/code><\/li>\n\n\n\n<li><code>chrome:\/\/flags\/#enable-lazy-frame-loading<\/code><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ng\u01b0\u1ee1ng-kho\u1ea3ng-cach-t\u1ea3i\">Ng\u01b0\u1ee1ng kho\u1ea3ng c\u00e1ch t\u1ea3i<\/h3>\n\n\n\n<p>T\u1ea5t c\u1ea3 c\u00e1c \u1ea3nh v\u00e0 iframe n\u1eb1m trong m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean (above the fold) &#8211; t\u1ee9c l\u00e0 nh\u1eefng th\u1ee9 xu\u1ea5t hi\u1ec7n ngay trong khung nh\u00ecn tr\u00ecnh duy\u1ec7t m\u00e0 kh\u00f4ng c\u1ea7n cu\u1ed9n chu\u1ed9t &#8211; s\u1ebd \u0111\u01b0\u1ee3c t\u1ea3i b\u00ecnh th\u01b0\u1eddng. Nh\u01b0ng c\u00e1c \u1ea3nh v\u00e0 iframes n\u1eb1m xa b\u00ean d\u01b0\u1edbi viewport c\u1ee7a thi\u1ebft b\u1ecb ch\u1ec9 \u0111\u01b0\u1ee3c t\u00ecm n\u1ea1p khi ng\u01b0\u1eddi d\u00f9ng cu\u1ed9n chu\u1ed9t g\u1ea7n \u0111\u1ebfn ch\u00fang (when user scrolls near them).<\/p>\n\n\n\n<p>Ng\u01b0\u1ee1ng kho\u1ea3ng c\u00e1ch l\u00e0 kh\u00f4ng c\u1ed1 \u0111\u1ecbnh (not fixed) v\u00e0 t\u00f9y thu\u1ed9c v\u00e0o m\u1ed9t s\u1ed1 y\u1ebfu t\u1ed1 sau:<\/p>\n\n\n\n<ul>\n<li>Ki\u1ec3u t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c t\u00ecm n\u1ea1p (n\u00f3 l\u00e0 \u1ea3nh hay iframe)<\/li>\n\n\n\n<li><a href=\"https:\/\/blog.chromium.org\/2019\/04\/data-saver-is-now-lite-mode.html\" target=\"_blank\" rel=\"noreferrer noopener\">Ch\u1ebf \u0111\u1ed9 Lite<\/a> c\u00f3 \u0111\u01b0\u1ee3c b\u1eadt tr\u00ean Chrome cho Android hay kh\u00f4ng<\/li>\n\n\n\n<li>T\u00e1c \u0111\u1ed9ng c\u1ee7a <a href=\"https:\/\/googlechrome.github.io\/samples\/network-information\/\" target=\"_blank\" rel=\"noreferrer noopener\">ki\u1ec3u k\u1ebft n\u1ed1i<\/a> (nhanh, ch\u1eadm, c\u00e1p quang, 3G, 4G, wifi, v\u00e2n v\u00e2n)<\/li>\n<\/ul>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 t\u00ecm th\u1ea5y c\u00e1c gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh cho c\u00e1c ki\u1ec3u k\u1ebft n\u1ed1i kh\u00e1c nhau tr\u00ean <a href=\"https:\/\/cs.chromium.org\/chromium\/src\/third_party\/blink\/renderer\/core\/frame\/settings.json5?l=971-1003&amp;rcl=e8f3cf0bbe085fee0d1b468e84395aad3ebb2cad\" target=\"_blank\" rel=\"noreferrer noopener\">ngu\u1ed3n d\u1eef li\u1ec7u Chromium<\/a>. C\u00e1c con s\u1ed1 n\u00e0y, v\u00e0 th\u1eadm ch\u00ed l\u00e0 c\u00e1ch ti\u1ebfp c\u1eadn ch\u1ec9 t\u00ecm n\u1ea1p khi \u0111\u1ea1t \u0111\u1ebfn kho\u1ea3ng c\u00e1ch nh\u1ea5t \u0111\u1ecbnh t\u1eeb viewport c\u00f3 th\u1ec3 thay \u0111\u1ed5i trong t\u01b0\u01a1ng lai g\u1ea7n khi nh\u00f3m ph\u00e1t tri\u1ec3n tr\u00ecnh duy\u1ec7t Chrome c\u1ea3i thi\u1ec7n heuristics (*) \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh \u0111\u01b0\u1ee3c khi n\u00e0o n\u00ean b\u1eaft \u0111\u1ea7u t\u1ea3i.<\/p>\n\n\n\n<p>(*): Ki\u1ec3u quy t\u1eafc\/thu\u1eadt gi\u1ea3i \u0111\u01b0\u1ee3c ph\u00e1t tri\u1ec3n d\u1ef1a tr\u00ean kinh nghi\u1ec7m, th\u01b0\u1eddng l\u00e0 t\u1ed1i \u01b0u trong ph\u1ea7n l\u1edbn tr\u01b0\u1eddng h\u1ee3p nh\u01b0ng kh\u00f4ng ph\u1ea3i trong m\u1ecdi tr\u01b0\u1eddng h\u1ee3p v\u00e0 c\u00f3 th\u1ec3 kh\u00f4ng ph\u1ea3i l\u00e0 bi\u1ec7n ph\u00e1p t\u1ed1t nh\u1ea5t c\u00f3 th\u1ec3 t\u1ed3n t\u1ea1i. \u01afu \u0111i\u1ec3m c\u1ee7a n\u00f3 l\u00e0 cho ch\u1ea5t l\u01b0\u1ee3ng s\u1ea3n ph\u1ea9m \u0111\u1ee7 t\u1ed1t nh\u01b0ng kh\u00f4ng m\u1ea5t nhi\u1ec1u th\u1eddi gian ph\u00e1t tri\u1ec3n.<\/p>\n\n\n\n<p>T\u00f4i (ng\u01b0\u1eddi d\u1ecbch) s\u1ebd cung c\u1ea5p lu\u00f4n th\u00f4ng tin v\u1ec1 ng\u01b0\u1ee1ng kho\u1ea3ng c\u00e1ch t\u1ea3i \u1edf th\u1eddi \u0111i\u1ec3m hi\u1ec7n t\u1ea1i (cu\u1ed1i n\u0103m 2019):<\/p>\n\n\n\n<pre id=\"c1\" class=\"wp-block-preformatted stx-plain\"><span id=\"c1_971\" class=\"stx-line\"> \/\/\n<\/span><span id=\"c1_972\" class=\"stx-line\">    \/\/ Lazy image loading distance-from-viewport thresholds for different effective connection types.\n<\/span><span id=\"c1_973\" class=\"stx-line\">    \/\/\n<\/span><span id=\"c1_974\" class=\"stx-line\">    {\n<\/span><span id=\"c1_975\" class=\"stx-line\">      name: \"lazyImageLoadingDistanceThresholdPxUnknown\",\n<\/span><span id=\"c1_976\" class=\"stx-line\">      initial: 5000,\n<\/span><span id=\"c1_977\" class=\"stx-line\">      type: \"int\",\n<\/span><span id=\"c1_978\" class=\"stx-line\">    },\n<\/span><span id=\"c1_979\" class=\"stx-line\">    {\n<\/span><span id=\"c1_980\" class=\"stx-line\">      name: \"lazyImageLoadingDistanceThresholdPxOffline\",\n<\/span><span id=\"c1_981\" class=\"stx-line\">      initial: 8000,\n<\/span><span id=\"c1_982\" class=\"stx-line\">      type: \"int\",\n<\/span><span id=\"c1_983\" class=\"stx-line\">    },\n<\/span><span id=\"c1_984\" class=\"stx-line\">    {\n<\/span><span id=\"c1_985\" class=\"stx-line\">      name: \"lazyImageLoadingDistanceThresholdPxSlow2G\",\n<\/span><span id=\"c1_986\" class=\"stx-line\">      initial: 8000,\n<\/span><span id=\"c1_987\" class=\"stx-line\">      type: \"int\",\n<\/span><span id=\"c1_988\" class=\"stx-line\">    },\n<\/span><span id=\"c1_989\" class=\"stx-line\">    {\n<\/span><span id=\"c1_990\" class=\"stx-line\">      name: \"lazyImageLoadingDistanceThresholdPx2G\",\n<\/span><span id=\"c1_991\" class=\"stx-line\">      initial: 6000,\n<\/span><span id=\"c1_992\" class=\"stx-line\">      type: \"int\",\n<\/span><span id=\"c1_993\" class=\"stx-line\">    },\n<\/span><span id=\"c1_994\" class=\"stx-line\">    {\n<\/span><span id=\"c1_995\" class=\"stx-line\">      name: \"lazyImageLoadingDistanceThresholdPx3G\",\n<\/span><span id=\"c1_996\" class=\"stx-line\">      initial: 4000,\n<\/span><span id=\"c1_997\" class=\"stx-line\">      type: \"int\",\n<\/span><span id=\"c1_998\" class=\"stx-line\">    },\n<\/span><span id=\"c1_999\" class=\"stx-line\">    {\n<\/span><span id=\"c1_1000\" class=\"stx-line\">      name: \"lazyImageLoadingDistanceThresholdPx4G\",\n<\/span><span id=\"c1_1001\" class=\"stx-line\">      initial: 3000,\n<\/span><span id=\"c1_1002\" class=\"stx-line\">      type: \"int\",\n<\/span><span id=\"c1_1003\" class=\"stx-line\">    },<\/span><\/pre>\n\n\n\n<p>T\u1eeb \u0111o\u1ea1n m\u00e3 tr\u00ean ta nh\u1eadn th\u1ea5y r\u1eb1ng tr\u00ecnh duy\u1ec7t Chrome s\u1ebd:<\/p>\n\n\n\n<ul>\n<li>Tr\u00ean m\u1ea1ng m\u00e0 n\u00f3 kh\u00f4ng nh\u1eadn bi\u1ebft \u0111\u01b0\u1ee3c (Unknown) n\u00f3 s\u1ebd t\u1ea3i \u1ea3nh khi \u1ea3nh c\u00e1ch viewport 5000 px<\/li>\n\n\n\n<li>Khi kh\u00f4ng c\u00f3 k\u1ebft n\u1ed1i (Offline) n\u00f3 s\u1ebd t\u1ea3i khi c\u00e1ch viewport 8000 px<\/li>\n\n\n\n<li>Tr\u00ean m\u1ea1ng 2G ch\u1eadm l\u00e0 8000 px<\/li>\n\n\n\n<li>Tr\u00ean m\u1ea1ng 2G l\u00e0 6000 px<\/li>\n\n\n\n<li>Tr\u00ean m\u1ea1ng 3G l\u00e0 4000 px<\/li>\n\n\n\n<li>Tr\u00ean m\u1ea1ng 4G l\u00e0 3000 px<\/li>\n<\/ul>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 quan s\u00e1t th\u1ea5y quy lu\u1eadt l\u00e0 tr\u00ean m\u1ea1ng c\u00e0ng nhanh, ng\u01b0\u1ee1ng kho\u1ea3ng c\u00e1ch t\u1ea3i s\u1ebd c\u00e0ng th\u1ea5p.<\/p>\n\n\n\n<p>L\u01b0u \u00fd: Trong Chrome 77, b\u1ea1n c\u00f3 th\u1ec3 tr\u1ea3i nghi\u1ec7m c\u00e1c ng\u01b0\u1ee1ng kh\u00e1c nhau b\u1eb1ng c\u00e1ch \u0111i\u1ec1u ch\u1ec9nh m\u1ea1ng trong DevTools (c\u00f4ng c\u1ee5 cho nh\u00e0 ph\u00e1t tri\u1ec3n \u0111\u01b0\u1ee3c t\u00edch h\u1ee3p s\u1eb5n trong Chrome), b\u1ea1n s\u1ebd c\u1ea7n ghi \u0111\u00e8 \u1ea3nh h\u01b0\u1edfng c\u1ee7a ki\u1ec3u k\u1ebft n\u1ed1i trong tr\u00ecnh duy\u1ec7t b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng flag:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">chrome:\/\/flags\/#force-effective-connection-type<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"t\u1ea3i-hinh-\u1ea3nh\">T\u1ea3i h\u00ecnh \u1ea3nh<\/h3>\n\n\n\n<p>\u0110\u1ec3 ng\u0103n c\u00e1c n\u1ed9i dung xung quanh kh\u00f4ng reflowing(**) khi \u1ea3nh lazy-load t\u1ea3i, c\u1ea7n \u0111\u1ea3m b\u1ea3o th\u00eam thu\u1ed9c t\u00ednh <em>height<\/em> v\u00e0 <em>width<\/em> v\u00e0o th\u00e0nh ph\u1ea7n <em>&lt;img&gt;<\/em> ho\u1eb7c ch\u1ec9 \u0111\u1ecbnh gi\u00e1 tr\u1ecb c\u1ee5 th\u1ec3, tr\u1ef1c ti\u1ebfp trong style n\u1ed9i tuy\u1ebfn (inline style):<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;img src=\"...\" loading=\"lazy\" width=\"200\" height=\"200\"&gt;\n&lt;img src=\"...\" loading=\"lazy\" style=\"height:200px; width:200px;\"&gt;<\/code><\/pre>\n\n\n\n<p>(**): reflowing l\u00e0 hi\u1ec7n t\u01b0\u1ee3ng tr\u00ecnh duy\u1ec7t ph\u1ea3i t\u00ednh to\u00e1n l\u1ea1i v\u1ecb tr\u00ed v\u00e0 b\u1ed1 c\u1ee5c c\u1ee7a c\u00e1c th\u00e0nh ph\u1ea7n trong t\u00e0i li\u1ec7u HTML, \u0111\u00e2y l\u00e0 h\u00e0nh vi s\u1ebd khi\u1ebfn ng\u01b0\u1eddi d\u00f9ng b\u1ecb c\u1ea3n tr\u1edf n\u00ean c\u1ea7n ph\u1ea3i tr\u00e1nh. B\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o th\u00eam th\u00f4ng tin v\u1ec1 n\u00f3 \u1edf <a href=\"https:\/\/developers.google.com\/speed\/docs\/insights\/browser-reflow\" target=\"_blank\" rel=\"noreferrer noopener\">li\u00ean k\u1ebft n\u00e0y<\/a>.<\/p>\n\n\n\n<p>C\u00e1c \u1ea3nh s\u1ebd v\u1eabn \u0111\u01b0\u1ee3c lazy-load n\u1ebfu k\u00edch c\u1ee1 (d\u00e0i, r\u1ed9ng) kh\u00f4ng \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh, nh\u01b0ng vi\u1ec7c th\u00f4ng b\u00e1o k\u00edch c\u1ee1 cho ch\u00fang s\u1ebd gi\u00fap l\u00e0m gi\u1ea3m kh\u1ea3 n\u0103ng tr\u00ecnh duy\u1ec7t b\u1ecb reflow.<\/p>\n\n\n\n<p>H\u1ed7 tr\u1ee3 cho thu\u1ed9c t\u00ednh <em>intrinsicsize<\/em> v\u1eabn \u0111ang \u0111\u01b0\u1ee3c ti\u1ebfp t\u1ee5c th\u1ef1c hi\u1ec7n, v\u00ec th\u1ebf c\u00e1c \u1ea3nh s\u1ebd v\u1eabn \u0111\u01b0\u1ee3c lazy-load ch\u00ednh x\u00e1c n\u1ebfu <em>intrinsicsize<\/em> \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh k\u00e8m v\u1edbi m\u1ed9t trong hai k\u00edch c\u1ee1 (width ho\u1eb7c height).<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;img src=\"\u2026\" alt=\"\u2026\" loading=\"lazy\" intrinsicsize=\"250x200\" width=\"450\"&gt;\n&lt;!-- lazy-loaded --&gt;<\/code><\/pre>\n\n\n\n<p>P\/S: B\u1ea1n c\u00f3 th\u1ec3 xem <a href=\"https:\/\/mathiasbynens.be\/demo\/img-loading-lazy\" target=\"_blank\" rel=\"noreferrer noopener\">v\u00ed d\u1ee5 demo<\/a> v\u1ec1 c\u00e1ch thu\u1ed9c t\u00ednh <em>loading<\/em> l\u00e0m vi\u1ec7c v\u1edbi 100 b\u1ee9c \u1ea3nh sau (to\u00e0n m\u00e8o d\u1ec5 th\u01b0\u01a1ng).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"t\u1ea3i-iframe\">T\u1ea3i iframe<\/h3>\n\n\n\n<p>Thu\u1ed9c t\u00ednh <em>loading<\/em> \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn iframe kh\u00e1c so v\u1edbi \u1ea3nh, ph\u1ee5 thu\u1ed9c v\u00e0o vi\u1ec7c li\u1ec7u iframe c\u00f3 \u1ea9n hay kh\u00f4ng. (C\u00e1c iframe \u1ea9n th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng cho m\u1ee5c \u0111\u00edch ph\u00e2n t\u00edch ho\u1eb7c giao ti\u1ebfp). Chrome s\u1eed d\u1ee5ng c\u00e1c \u0111\u1eb7c \u0111i\u1ec3m sau \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh li\u1ec7u m\u1ed9t iframe c\u00f3 \u0111ang \u1ea9n hay kh\u00f4ng:<\/p>\n\n\n\n<ul>\n<li>Chi\u1ec1u r\u1ed9ng v\u00e0 chi\u1ec1u cao c\u1ee7a iframe l\u00e0 4 px ho\u1eb7c nh\u1ecf h\u01a1n.<\/li>\n\n\n\n<li>C\u00e1c <a href=\"https:\/\/kiencang.net\/cach-dung-thuoc-tinh-display-trong-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">thu\u1ed9c t\u00ednh <em>display: none<\/em> ho\u1eb7c <em>visibility: hidden<\/em><\/a> \u0111ang \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng.<\/li>\n\n\n\n<li>Iframe \u0111ang \u0111\u01b0\u1ee3c \u0111\u1eb7t \u1edf v\u1ecb tr\u00ed ngo\u00e0i m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean s\u1eed d\u1ee5ng positioning X ho\u1eb7c Y c\u00f3 gi\u00e1 tr\u1ecb \u00e2m.<\/li>\n<\/ul>\n\n\n\n<p>N\u1ebfu m\u1ed9t iframe th\u1ecfa m\u00e3n b\u1ea5t k\u1ef3 \u0111i\u1ec1u ki\u1ec7n n\u00e0o k\u1ec3 tr\u00ean, Chrome xem n\u00f3 l\u00e0 \u1ea9n v\u00e0 kh\u00f4ng lazy-load n\u00f3 trong ph\u1ea7n l\u1edbn tr\u01b0\u1eddng h\u1ee3p. Iframe <em>kh\u00f4ng \u1ea9n<\/em> s\u1ebd ch\u1ec9 \u0111\u01b0\u1ee3c t\u1ea3i khi n\u00f3 n\u1eb1m trong ng\u01b0\u1ee1ng kho\u1ea3ng c\u00e1ch cho ph\u00e9p t\u1ea3i (\u0111\u00e3 n\u00f3i \u1edf tr\u00ean). Placeholder hi\u1ec3n th\u1ecb cho iframes lazy-load s\u1ebd v\u1eabn \u0111\u01b0\u1ee3c t\u00ecm n\u1ea1p.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cac-cau-h\u1ecfi-th\u01b0\u1eddng-g\u1eb7p-faq\"><span class=\"ez-toc-section\" id=\"3_Cac_cau_hoi_thuong_gap_FAQ\"><\/span>#3. C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p (FAQ)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"hi\u1ec7n-co-b\u1ea5t-k\u1ef3-k\u1ebf-ho\u1ea1ch-nao-d\u1ec3-m\u1edf-r\u1ed9ng-tinh-nang-nay-khong\">Hi\u1ec7n c\u00f3 b\u1ea5t k\u1ef3 k\u1ebf ho\u1ea1ch n\u00e0o \u0111\u1ec3 m\u1edf r\u1ed9ng t\u00ednh n\u0103ng n\u00e0y kh\u00f4ng?<\/h3>\n\n\n\n<p>C\u00f3 m\u1ed9t s\u1ed1 k\u1ebf ho\u1ea1ch trong vi\u1ec7c thay \u0111\u1ed5i h\u00e0nh vi lazy-loading m\u1eb7c \u0111\u1ecbnh c\u1ee7a tr\u00ecnh duy\u1ec7t \u0111\u1ec3 t\u1ef1 \u0111\u1ed9ng t\u1ea3i l\u01b0\u1eddi b\u1ea5t c\u1ee9 \u1ea3nh ho\u1eb7c iframe n\u00e0o m\u00e0 ph\u00f9 h\u1ee3p \u0111\u1ec3 tr\u00ec ho\u00e3n n\u1ebfu <a href=\"https:\/\/blog.chromium.org\/2019\/04\/data-saver-is-now-lite-mode.html\" target=\"_blank\" rel=\"noreferrer noopener\">ch\u1ebf \u0111\u1ed9 Lite<\/a> \u0111\u01b0\u1ee3c b\u1eadt tr\u00ean Chrome cho Android.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cac-\u1ea3nh-n\u1ec1n-background-vi\u1ebft-trong-css-co-t\u1eadn-d\u1ee5ng-d\u01b0\u1ee3c-l\u1ee3i-th\u1ebf-c\u1ee7a-thu\u1ed9c-tinh-loading-khong\">C\u00e1c \u1ea3nh n\u1ec1n (background) vi\u1ebft trong CSS c\u00f3 t\u1eadn d\u1ee5ng \u0111\u01b0\u1ee3c l\u1ee3i th\u1ebf c\u1ee7a thu\u1ed9c t\u00ednh loading kh\u00f4ng?<\/h3>\n\n\n\n<p>Kh\u00f4ng, hi\u1ec7n t\u1ea1i n\u00f3 ch\u1ec9 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng v\u1edbi c\u00e1c th\u1ebb <em>&lt;img&gt;<\/em> m\u00e0 th\u00f4i. N\u00f3i c\u00e1ch kh\u00e1c c\u00e1c \u1ea3nh background v\u1eabn t\u1ea3i b\u00ecnh th\u01b0\u1eddng.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"thu\u1ed9c-tinh-loading-ho\u1ea1t-d\u1ed9ng-nh\u01b0-th\u1ebf-nao-v\u1edbi-cac-\u1ea3nh-n\u1eb1m-trong-viewport-nh\u01b0ng-khong-hi\u1ec7n-ra-ngay-vi-d\u1ee5-nh\u01b0-no-\u1ea9n-trong-cac-slide-ma-ng\u01b0\u1eddi-dung-ph\u1ea3i-click-ti\u1ebfp-m\u1edbi-th\u1ea5y\">Thu\u1ed9c t\u00ednh loading ho\u1ea1t \u0111\u1ed9ng nh\u01b0 th\u1ebf n\u00e0o v\u1edbi c\u00e1c \u1ea3nh n\u1eb1m trong viewport nh\u01b0ng kh\u00f4ng hi\u1ec7n ra ngay (v\u00ed d\u1ee5 nh\u01b0 n\u00f3 \u1ea9n trong c\u00e1c slide, m\u00e0 ng\u01b0\u1eddi d\u00f9ng ph\u1ea3i click ti\u1ebfp m\u1edbi th\u1ea5y)?<\/h3>\n\n\n\n<p>Ch\u1ec9 c\u00e1c \u1ea3nh t\u1eeb m\u00e0n h\u00ecnh th\u1ee9 hai tr\u1edf \u0111i m\u1edbi \u0111\u01b0\u1ee3c t\u1ea3i l\u01b0\u1eddi (k\u1ebft h\u1ee3p v\u1edbi vi\u1ec7c n\u00f3 th\u1ecfa m\u00e3n ti\u00eau ch\u00ed v\u1ec1 ng\u01b0\u1ee1ng kho\u1ea3ng c\u00e1ch). T\u1ea5t c\u1ea3 c\u00e1c \u1ea3nh n\u1eb1m trong m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean, b\u1ea5t k\u1ec3 l\u00e0 n\u00f3 kh\u00f4ng quan s\u00e1t th\u1ea5y ngay l\u00fac \u0111\u1ea7u s\u1ebd \u0111\u01b0\u1ee3c t\u1ea3i nh\u01b0 b\u00ecnh th\u01b0\u1eddng.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"chuy\u1ec7n-gi-x\u1ea3y-ra-n\u1ebfu-toi-s\u1eed-d\u1ee5ng-th\u01b0-vi\u1ec7n-c\u1ee7a-ben-th\u1ee9-ba-third-party-ho\u1eb7c-script-d\u1ec3-lazy-load-\u1ea3nh-va-iframe\">Chuy\u1ec7n g\u00ec x\u1ea3y ra n\u1ebfu t\u00f4i s\u1eed d\u1ee5ng th\u01b0 vi\u1ec7n c\u1ee7a b\u00ean th\u1ee9 ba (third-party) ho\u1eb7c script \u0111\u1ec3 lazy-load \u1ea3nh v\u00e0 iframe?<\/h3>\n\n\n\n<p>Thu\u1ed9c t\u00ednh <em>loading<\/em> kh\u00f4ng \u1ea3nh h\u01b0\u1edfng g\u00ec \u0111\u1ebfn m\u00e3 lazy-load b\u1ea1n \u0111ang s\u1eed d\u1ee5ng tr\u00ean c\u00e1c t\u00e0i nguy\u00ean, nh\u01b0ng c\u00f3 v\u00e0i \u0111i\u1ec3m quan tr\u1ecdng sau c\u1ea7n \u0111\u1ec3 \u00fd:<\/p>\n\n\n\n<ol>\n<li>N\u1ebfu \u0111o\u1ea1n m\u00e3 lazy-load c\u1ee7a b\u1ea1n c\u1ed1 g\u1eafng t\u1ea3i \u1ea3nh ho\u1eb7c iframe s\u1edbm h\u01a1n so v\u1edbi Chrome t\u1ea3i ch\u00fang theo c\u00e1ch th\u00f4ng th\u01b0\u1eddng &#8211; \u0111i\u1ec1u \u0111\u00f3 c\u00f3 ngh\u0129a l\u00e0 ng\u01b0\u1ee1ng kho\u1ea3ng c\u00e1ch t\u1ea3i l\u1edbn h\u01a1n so v\u1edbi ng\u01b0\u1ee1ng c\u1ee7a Chrome &#8211; ch\u00fang s\u1ebd v\u1eabn \u0111\u01b0\u1ee3c tr\u00ec ho\u00e3n v\u00e0 t\u1ea3i d\u1ef1a tr\u00ean h\u00e0nh vi th\u00f4ng th\u01b0\u1eddng c\u1ee7a tr\u00ecnh duy\u1ec7t (c\u00f3 ngh\u0129a l\u00e0 tr\u00ecnh duy\u1ec7t s\u1ebd ghi \u0111\u00e8 thi\u1ebft l\u1eadp c\u1ee7a b\u1ea1n).<\/li>\n\n\n\n<li>N\u1ebfu \u0111o\u1ea1n m\u00e3 lazy-load c\u1ee7a b\u1ea1n s\u1eed d\u1ee5ng ng\u01b0\u1ee1ng kho\u1ea3ng c\u00e1ch t\u1ea3i th\u1ea5p h\u01a1n so v\u1edbi tr\u00ecnh duy\u1ec7t, th\u1ebf th\u00ec t\u00f9y ch\u1ec9nh c\u1ee7a b\u1ea1n s\u1ebd \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng (ch\u1ee9 kh\u00f4ng ph\u1ea3i c\u00e1c ng\u01b0\u1ee1ng m\u1eb7c \u0111\u1ecbnh c\u1ee7a Chrome \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng, n\u00f3i c\u00e1ch kh\u00e1c t\u00f9y ch\u1ec9nh c\u1ee7a b\u1ea1n s\u1ebd ghi \u0111\u00e8 thi\u1ebft l\u1eadp c\u1ee7a Chrome).<\/li>\n<\/ol>\n\n\n\n<p>M\u1ed9t trong c\u00e1c l\u00fd do quan tr\u1ecdng \u0111\u1ec3 ti\u1ebfp t\u1ee5c s\u1eed d\u1ee5ng th\u01b0 vi\u1ec7n c\u1ee7a b\u00ean th\u1ee9 ba song song v\u1edbi <em>loading=&#8221;lazy&#8221;<\/em> \u0111\u00f3 l\u00e0 \u0111\u1ec3 h\u1ed7 tr\u1ee3 (polyfill) cho c\u00e1c tr\u00ecnh duy\u1ec7t hi\u1ec7n ch\u01b0a c\u00f3 thu\u1ed9c t\u00ednh n\u00e0y.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cac-trinh-duy\u1ec7t-khac-co-h\u1ed7-tr\u1ee3-native-lazy-loading-hay-khong\">C\u00e1c tr\u00ecnh duy\u1ec7t kh\u00e1c c\u00f3 h\u1ed7 tr\u1ee3 native lazy-loading hay kh\u00f4ng?<\/h3>\n\n\n\n<p>Thu\u1ed9c t\u00ednh <em>loading<\/em> c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c coi l\u00e0 m\u1ed9t c\u1ea3i ti\u1ebfn, cho ph\u00e9p c\u00e1c tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3 n\u00f3 c\u00f3 th\u1ec3 lazy-load \u1ea3nh v\u00e0 iframe. Nh\u1eefng tr\u00ecnh duy\u1ec7t ch\u01b0a h\u1ed7 tr\u1ee3 s\u1ebd v\u1eabn t\u1ea3i theo c\u00e1ch c\u0169 nh\u01b0 hi\u1ec7n nay. V\u1ec1 m\u1eb7t h\u1ed7 tr\u1ee3 ch\u00e9o tr\u00ecnh duy\u1ec7t, <em>loading<\/em> \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 tr\u00ean Chrome 76 v\u00e0 b\u1ea5t k\u1ef3 tr\u00ecnh duy\u1ec7t n\u00e0o d\u1ef1a tr\u00ean Chromium 76 (v\u00ed d\u1ee5 nh\u01b0 C\u1ed1c C\u1ed1c). <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1542784\" target=\"_blank\" rel=\"noreferrer noopener\">FireFox c\u0169ng \u0111ang m\u1edf th\u1ea3o lu\u1eadn vi\u1ec7c t\u00edch h\u1ee3p thu\u1ed9c t\u00ednh n\u00e0y<\/a> v\u00e0o.<\/p>\n\n\n\n<p>M\u1ed9t <a href=\"https:\/\/w3c.github.io\/web-performance\/specs\/ResourcePriorities\/Overview.html\" target=\"_blank\" rel=\"noreferrer noopener\">API t\u01b0\u01a1ng t\u1ef1<\/a> \u0111\u00e3 \u0111\u01b0\u1ee3c \u0111\u1ec1 xu\u1ea5t v\u00e0 s\u1eed d\u1ee5ng trong IE v\u00e0 Edge nh\u01b0ng n\u00f3 t\u1eadp trung v\u00e0o vi\u1ec7c h\u1ea1 th\u1ea5p m\u1ee9c \u0111\u1ed9 \u01b0u ti\u00ean t\u1ea3i xu\u1ed1ng c\u1ee7a c\u00e1c t\u00e0i nguy\u00ean thay v\u00ec tr\u00ec ho\u00e3n t\u1ea3i ch\u00fang ho\u00e0n to\u00e0n. N\u00f3 kh\u00f4ng c\u00f2n \u1ee7ng h\u1ed9 <a href=\"https:\/\/w3c.github.io\/resource-hints\/\" target=\"_blank\" rel=\"noreferrer noopener\">resource hints<\/a> (g\u1ee3i \u00fd t\u00e0i nguy\u00ean) n\u1eefa.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"toi-ph\u1ea3i-lam-nh\u01b0-th\u1ebf-nao-v\u1edbi-cac-trinh-duy\u1ec7t-hi\u1ec7n-ch\u01b0a-h\u1ed7-tr\u1ee3-native-lazy-loading\">T\u00f4i ph\u1ea3i l\u00e0m nh\u01b0 th\u1ebf n\u00e0o v\u1edbi c\u00e1c tr\u00ecnh duy\u1ec7t hi\u1ec7n ch\u01b0a h\u1ed7 tr\u1ee3 native lazy-loading?<\/h3>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng th\u01b0 vi\u1ec7n c\u1ee7a b\u00ean th\u1ee9 ba ho\u1eb7c c\u00e1c \u0111o\u1ea1n m\u00e3 h\u1ed7 tr\u1ee3 kh\u00e1c \u0111\u1ec3 t\u1ea3i l\u01b0\u1eddi c\u00e1c \u1ea3nh tr\u00ean website. Thu\u1ed9c t\u00ednh <em>loading<\/em> c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c detect (ph\u00e1t hi\u1ec7n) n\u1ebfu t\u00ednh n\u0103ng n\u00e0y \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 trong tr\u00ecnh duy\u1ec7t nh\u1edd \u0111o\u1ea1n m\u00e3 sau:<\/p>\n\n\n\n<pre class=\"wp-block-code language-js\"><code>if ('loading' in HTMLImageElement.prototype) {\n  \/\/ c\u00f3 h\u1ed7 tr\u1ee3 tr\u00ean tr\u00ecnh duy\u1ec7t n\u00e0y\n} else {\n  \/\/ s\u1eed d\u1ee5ng th\u01b0 vi\u1ec7n ho\u1eb7c m\u00e3 d\u1ef1 ph\u00f2ng\n}<\/code><\/pre>\n\n\n\n<p>V\u00ed d\u1ee5, <a href=\"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p1\/\" target=\"_blank\" rel=\"noreferrer noopener\">lazysize<\/a> l\u00e0 th\u01b0 vi\u1ec7n lazy-loading JavaScript ph\u1ed5 bi\u1ebfn. B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng \u0111o\u1ea1n m\u00e3 d\u00f9ng \u1edf tr\u00ean \u0111\u1ec3 ph\u00e1t hi\u1ec7n thu\u1ed9c t\u00ednh <em>loading<\/em> c\u00f3 \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 tr\u00ean tr\u00ecnh duy\u1ec7t kh\u00f4ng, n\u1ebfu n\u00f3 kh\u00f4ng, h\u00e3y d\u1ef1 ph\u00f2ng b\u1eb1ng lazysize. \u0110i\u1ec1u \u0111\u00f3 \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n nh\u01b0 sau:<\/p>\n\n\n\n<ul>\n<li>Thay th\u1ebf <em>&lt;img src&gt;<\/em> b\u1eb1ng <em>&lt;img data-src&gt;<\/em> \u0111\u1ec3 tr\u00e1nh tr\u00ecnh duy\u1ec7t (kh\u00f4ng h\u1ed7 tr\u1ee3 thu\u1ed9c t\u00ednh <em>loading<\/em>) t\u1ea3i \u1ea3nh ngay l\u1eadp t\u1ee9c. N\u1ebfu thu\u1ed9c t\u00ednh <em>loading<\/em> \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3, b\u1ea1n ch\u1ec9 vi\u1ec7c chuy\u1ec3n l\u1ea1i <em>data-src<\/em> th\u00e0nh <em>src<\/em>.<\/li>\n\n\n\n<li>N\u1ebfu<em> loading<\/em> kh\u00f4ng \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3, t\u1ea3i m\u00e3 d\u1ef1 ph\u00f2ng (lazysizes). Theo t\u00e0i li\u1ec7u c\u1ee7a lazysizes, b\u1ea1n s\u1eed d\u1ee5ng class (l\u1edbp &#8211; m\u1ed9t kh\u00e1i ni\u1ec7m trong CSS) lazyload nh\u01b0 c\u00e1ch \u0111\u1ec3 ch\u1ec9 cho lazysizes bi\u1ebft \u1ea3nh n\u00e0o c\u1ea7n lazy-load.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;!-- Let's load this in-viewport image normally --&gt;\n&lt;img src=\"hero.jpg\" alt=\"\u2026\"&gt;\n&lt;!-- Let's lazy-load the rest of these images --&gt;\n&lt;img data-src=\"unicorn.jpg\" alt=\"\u2026\" loading=\"lazy\" class=\"lazyload\"&gt;\n&lt;img data-src=\"cats.jpg\" alt=\"\u2026\" loading=\"lazy\" class=\"lazyload\"&gt;\n&lt;img data-src=\"dogs.jpg\" alt=\"\u2026\" loading=\"lazy\" class=\"lazyload\"&gt;\n&lt;script&gt;\n  if ('loading' in HTMLImageElement.prototype) {\n    const images = document.querySelectorAll('img&#91;loading=\"lazy\"]');\n    images.forEach(img =&gt; {\n      img.src = img.dataset.src;\n    });\n  } else {\n    \/\/ Dynamically import the LazySizes library\n    const script = document.createElement('script');\n    script.src =\n      'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/lazysizes\/4.1.8\/lazysizes.min.js';\n    document.body.appendChild(script);\n  }\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 <a href=\"https:\/\/lazy-loading.firebaseapp.com\/lazy_loading_native.html\" target=\"_blank\" rel=\"noreferrer noopener\">trang demo cho ki\u1ec3u t\u1ea3i n\u00e0y<\/a>. B\u1ea1n h\u00e3y th\u1eed n\u00f3 tr\u00ean tr\u00ecnh duy\u1ec7t FireFox ho\u1eb7c Safari \u0111\u1ec3 xem m\u00e3 d\u1ef1 ph\u00f2ng ho\u1ea1t \u0111\u1ed9ng ra sao.<\/p>\n\n\n\n<p>L\u01b0u \u00fd: Th\u01b0 vi\u1ec7n lazysizes c\u0169ng cung c\u1ea5p <a href=\"https:\/\/github.com\/aFarkas\/lazysizes\/tree\/gh-pages\/plugins\/native-loading\" target=\"_blank\" rel=\"noreferrer noopener\">plugin native loading<\/a> \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 native lazy-loading khi c\u00f3 c\u01a1 h\u1ed9i nh\u01b0ng v\u1eabn c\u00f3 d\u1ef1 ph\u1ecfng b\u1eb1ng ch\u1ee9c n\u0103ng t\u00f9y ch\u1ec9nh c\u1ee7a th\u01b0 vi\u1ec7n khi c\u1ea7n thi\u1ebft.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"native-lazy-loading-\u1ea3nh-h\u01b0\u1edfng-nh\u01b0-th\u1ebf-nao-d\u1ebfn-cac-qu\u1ea3ng-cao-tren-trang-web\">Native lazy-loading \u1ea3nh h\u01b0\u1edfng nh\u01b0 th\u1ebf n\u00e0o \u0111\u1ebfn c\u00e1c qu\u1ea3ng c\u00e1o tr\u00ean trang web?<\/h3>\n\n\n\n<p>T\u1ea5t c\u1ea3 c\u00e1c qu\u1ea3ng c\u00e1o hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng d\u01b0\u1edbi d\u1ea1ng \u1ea3nh ho\u1eb7c iframe s\u1ebd \u0111\u01b0\u1ee3c lazy-load gi\u1ed1ng nh\u01b0 b\u1ea5t k\u1ef3 \u1ea3nh ho\u1eb7c iframe n\u00e0o kh\u00e1c.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"\u1ea3nh-s\u1ebd-d\u01b0\u1ee3c-x\u1eed-ly-nh\u01b0-th\u1ebf-nao-khi-trang-web-d\u01b0\u1ee3c-in\">\u1ea2nh s\u1ebd \u0111\u01b0\u1ee3c x\u1eed l\u00fd nh\u01b0 th\u1ebf n\u00e0o khi trang web \u0111\u01b0\u1ee3c in?<\/h3>\n\n\n\n<p>M\u1eb7c d\u00f9 ch\u1ee9c n\u0103ng n\u00e0y kh\u00f4ng c\u00f3 trong Chrome 76, c\u00f3 m\u1ed9t <a href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=875403\" target=\"_blank\" rel=\"noreferrer noopener\">open issue<\/a> \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o r\u1eb1ng t\u1ea5t c\u1ea3 \u1ea3nh v\u00e0 iframe \u0111\u01b0\u1ee3c t\u1ea3i ngay l\u1eadp t\u1ee9c n\u1ebfu trang trong ch\u1ebf \u0111\u1ed9 in \u1ea5n.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"k\u1ebft-lu\u1eadn\"><span class=\"ez-toc-section\" id=\"4_Ket_luan\"><\/span>#4. K\u1ebft lu\u1eadn<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Tri\u1ec3n khai lazy-loading \u1ea3nh v\u00e0 iframe d\u01b0\u1edbi d\u1ea1ng native c\u1ee7a tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 l\u00e0m nhi\u1ec7m v\u1ee5 n\u00e0y tr\u1edf n\u00ean d\u1ec5 d\u00e0ng h\u01a1n \u0111\u00e1ng k\u1ec3 cho m\u1ee5c ti\u00eau c\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t c\u1ee7a trang web.<\/p>\n\n\n\n<p>N\u1ebfu b\u1ea1n \u0111\u1ec3 \u00fd th\u1ea5y b\u1ea5t k\u1ef3 h\u00e0nh vi b\u1ea5t th\u01b0\u1eddng n\u00e0o v\u1edbi t\u00ednh n\u0103ng n\u00e0y tr\u00ean Chrome h\u00e3y <a href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/entry?summary=%5BLazyLoad%5D:&amp;comment=Application%20Version%20%28from%20%22Chrome%20Settings%20%3E%20About%20Chrome%22%29:%20%0DAndroid%20Build%20Number%20%28from%20%22Android%20Settings%20%3E%20About%20Phone\/Tablet%22%29:%20%0DDevice:%20%0D%0DSteps%20to%20reproduce:%20%0D%0DObserved%20behavior:%20%0D%0DExpected%20behavior:%20%0D%0DFrequency:%20%0D%3Cnumber%20of%20times%20you%20were%20able%20to%20reproduce%3E%20%0D%0DAdditional%20comments:%20%0D&amp;labels=Pri-2&amp;components=Blink%3ELoader%3ELazyLoad%2C\" target=\"_blank\" rel=\"noreferrer noopener\">b\u00e1o cho ch\u00fang t\u00f4i bi\u1ebft<\/a>.<\/p>\n\n\n\n<p><em>(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: <a href=\"https:\/\/web.dev\/browser-level-image-lazy-loading\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Native lazy-loading for the web, c\u00e1c t\u00e1c gi\u1ea3: Houssein Djirdeh, Addy Osmani v\u00e0 Mathias Bynens<\/a>, trang web: web dev)<\/em><\/p>\n\n\n\n<p>Th\u00f4ng tin b\u1ed5 sung. Hi\u1ec7n t\u00f4i bi\u1ebft c\u00f3 2 plugin cho WordPress h\u1ed7 tr\u1ee3 t\u00ednh n\u0103ng native lazy-loading l\u00e0:<\/p>\n\n\n\n<ul>\n<li><a href=\"https:\/\/vi.wordpress.org\/plugins\/native-lazyload\/\" target=\"_blank\" rel=\"noreferrer noopener\">Native Lazyload<\/a>: do ch\u00ednh Google ph\u00e1t tri\u1ec3n<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/nazy-load\/\" target=\"_blank\" rel=\"noreferrer noopener\">Flying Images<\/a>: c\u1ee7a t\u00e1c gi\u1ea3 <a href=\"https:\/\/wpspeedmatters.com\/about-me\/\" target=\"_blank\" rel=\"noreferrer noopener\">Gijo Varghese<\/a>. C\u00e1 nh\u00e2n t\u00f4i \u0111ang d\u00f9ng plugin n\u00e0y tr\u00ean m\u1ed9t s\u1ed1 website. B\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o th\u00eam th\u00f4ng tin v\u1ec1 n\u00f3 \u1edf \u0111\u00e2y: <a href=\"https:\/\/kiencang.net\/plugin-flying-images\/\" target=\"_blank\" rel=\"noreferrer noopener\">speed.family\/plugin-flying-images\/<\/a><\/li>\n<\/ul>\n\n\n\n<p>M\u1eb7c d\u00f9 r\u1ea5t th\u00edch lazy loading, t\u00f4i c\u00f3 m\u1ed9t b\u00e0i vi\u1ebft mang h\u01a1i h\u01b0\u1edbng ch\u1ed1ng l\u1ea1i n\u00f3: <a href=\"https:\/\/kiencang.net\/lazy-load-anh-khong-hap-dan\/\" target=\"_blank\" rel=\"noreferrer noopener\">T\u1ea1i sao lazy load \u1ea3nh kh\u00f4ng h\u1ea5p d\u1eabn<\/a> nh\u01b0 b\u1ea1n ngh\u0129.<\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Tr\u00ecnh duy\u1ec7t Chrome ch\u00ednh th\u1ee9c h\u1ed7 tr\u1ee3 lazy load cho \u1ea3nh v\u00e0 iframe \u1edf c\u1ea5p \u0111\u1ed9 tr\u00ecnh duy\u1ec7t! D\u01b0\u1edbi \u0111\u00e2y l\u00e0 video demo t\u00ednh n\u0103ng n\u00e0y: B\u1eaft \u0111\u1ea7u t\u1eeb Chrome 76, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh loading \u0111\u1ec3 lazy load c\u00e1c t\u00e0i nguy\u00ean m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft ri\u00eang m\u00e3 lazy-loading ho\u1eb7c s\u1eed d\u1ee5ng &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[274],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Native lazy-loading l\u00e0 g\u00ec, n\u00f3 c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 website nh\u01b0 th\u1ebf n\u00e0o &#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\/native-lazy-loading-cho-web\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Native lazy-loading l\u00e0 g\u00ec, n\u00f3 c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 website nh\u01b0 th\u1ebf n\u00e0o &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"Tr\u00ecnh duy\u1ec7t Chrome ch\u00ednh th\u1ee9c h\u1ed7 tr\u1ee3 lazy load cho \u1ea3nh v\u00e0 iframe \u1edf c\u1ea5p \u0111\u1ed9 tr\u00ecnh duy\u1ec7t! D\u01b0\u1edbi \u0111\u00e2y l\u00e0 video demo t\u00ednh n\u0103ng n\u00e0y: B\u1eaft \u0111\u1ea7u t\u1eeb Chrome 76, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh loading \u0111\u1ec3 lazy load c\u00e1c t\u00e0i nguy\u00ean m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft ri\u00eang m\u00e3 lazy-loading ho\u1eb7c s\u1eed d\u1ee5ng &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/native-lazy-loading-cho-web\/\" \/>\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=\"2019-12-11T12:39:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-23T15:29:54+00:00\" \/>\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=\"13 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Native lazy-loading l\u00e0 g\u00ec, n\u00f3 c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 website nh\u01b0 th\u1ebf n\u00e0o &#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\/native-lazy-loading-cho-web\/","og_locale":"vi_VN","og_type":"article","og_title":"Native lazy-loading l\u00e0 g\u00ec, n\u00f3 c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 website nh\u01b0 th\u1ebf n\u00e0o &#8226; Ki\u1ebfn c\u00e0ng","og_description":"Tr\u00ecnh duy\u1ec7t Chrome ch\u00ednh th\u1ee9c h\u1ed7 tr\u1ee3 lazy load cho \u1ea3nh v\u00e0 iframe \u1edf c\u1ea5p \u0111\u1ed9 tr\u00ecnh duy\u1ec7t! D\u01b0\u1edbi \u0111\u00e2y l\u00e0 video demo t\u00ednh n\u0103ng n\u00e0y: B\u1eaft \u0111\u1ea7u t\u1eeb Chrome 76, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh loading \u0111\u1ec3 lazy load c\u00e1c t\u00e0i nguy\u00ean m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft ri\u00eang m\u00e3 lazy-loading ho\u1eb7c s\u1eed d\u1ee5ng &hellip;","og_url":"https:\/\/kiencang.net\/native-lazy-loading-cho-web\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-11T12:39:23+00:00","article_modified_time":"2023-07-23T15:29:54+00:00","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":"13 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/native-lazy-loading-cho-web\/","url":"https:\/\/kiencang.net\/native-lazy-loading-cho-web\/","name":"Native lazy-loading l\u00e0 g\u00ec, n\u00f3 c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 website nh\u01b0 th\u1ebf n\u00e0o &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-11T12:39:23+00:00","dateModified":"2023-07-23T15:29:54+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/native-lazy-loading-cho-web\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/native-lazy-loading-cho-web\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/native-lazy-loading-cho-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"Native lazy-loading l\u00e0 g\u00ec, n\u00f3 c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 website nh\u01b0 th\u1ebf n\u00e0o"}]},{"@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\/16835"}],"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=16835"}],"version-history":[{"count":2,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16835\/revisions"}],"predecessor-version":[{"id":24360,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16835\/revisions\/24360"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=16835"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=16835"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=16835"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}