{"id":15909,"date":"2020-04-06T13:17:59","date_gmt":"2020-04-06T06:17:59","guid":{"rendered":"https:\/\/kiencang.net\/?p=15909"},"modified":"2023-08-25T12:48:59","modified_gmt":"2023-08-25T05:48:59","slug":"lazysizes-lazy-load-anh","status":"publish","type":"post","link":"https:\/\/kiencang.net\/lazysizes-lazy-load-anh\/","title":{"rendered":"S\u1eed d\u1ee5ng lazysizes \u0111\u1ec3 lazy load \u1ea3nh"},"content":{"rendered":"\n<p>Lazy load l\u00e0 chi\u1ebfn l\u01b0\u1ee3c trong \u0111\u00f3 ng\u01b0\u1eddi ta <em>ch\u1ec9 t\u1ea3i c\u00e1c t\u00e0i nguy\u00ean m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u1ea7n, ch\u1ee9 kh\u00f4ng t\u1ea3i t\u1ea5t c\u1ea3 tr\u01b0\u1edbc<\/em> trong l\u01b0\u1ee3t t\u1ea3i \u0111\u1ea7u ti\u00ean. C\u00e1ch ti\u1ebfp c\u1eadn n\u00e0y gi\u1ea3i ph\u00f3ng cho c\u00e1c t\u00e0i nguy\u00ean ch\u01b0a c\u1ea7n thi\u1ebft trong l\u1ea7n t\u1ea3i \u0111\u1ea7u ti\u00ean (initial page load) v\u00e0 tr\u00e1nh ph\u1ea3i t\u1ea3i m\u1ed9t s\u1ed1 t\u00e0i nguy\u00ean m\u00e0 <em>c\u00f3 th\u1ec3 ng\u01b0\u1eddi d\u00f9ng s\u1ebd kh\u00f4ng bao gi\u1edd s\u1eed d\u1ee5ng \u0111\u1ebfn<\/em>.<\/p>\n\n\n\n<p>C\u00e1c \u1ea3nh \u1edf d\u01b0\u1edbi <a href=\"https:\/\/kiencang.net\/uu-tien-noi-dung-hien-thi\/\" target=\"_blank\" rel=\"noreferrer noopener\">m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean<\/a> (offscreen*) trong l\u1ea7n t\u1ea3i \u0111\u1ea7u ti\u00ean l\u00e0 \u1ee9ng c\u1eed vi\u00ean l\u00fd t\u01b0\u1edfng \u0111\u1ec3 \u00e1p d\u1ee5ng k\u1ef9 thu\u1eadt n\u00e0y. Th\u01b0 vi\u1ec7n c\u00f3 ch\u1ea5t l\u01b0\u1ee3ng c\u1ef1c ph\u1ea9m l\u00e0 <a href=\"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p1\/\" target=\"_blank\" rel=\"noreferrer noopener\">lazysizes<\/a> s\u1ebd gi\u00fap b\u1ea1n tri\u1ec3n khai chi\u1ebfn l\u01b0\u1ee3c n\u00e0y m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/lazy-load.png\" alt=\"m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean trong lazy load\" class=\"wp-image-15244\"\/><\/figure><\/div>\n\n\n<p>(*): <em>D\u01b0\u1edbi m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean<\/em>, ti\u1ebfng Anh c\u00f3 th\u1ec3 l\u00e0 <em>Below the fold<\/em> ho\u1eb7c <em>Offscreen<\/em>, c\u00f2n <em>Tr\u00ean m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean<\/em> l\u00e0 <em>Above the fold<\/em>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Lazysizes l\u00e0 g\u00ec?<\/h2>\n\n\n\n<p>Lazysizes (<a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/aFarkas\/lazysizes\" target=\"_blank\">https:\/\/github.com\/aFarkas\/lazysizes<\/a>) l\u00e0 th\u01b0 vi\u1ec7n ph\u1ed5 bi\u1ebfn nh\u1ea5t d\u00f9ng \u0111\u1ec3 lazy load \u1ea3nh. N\u00f3 l\u00e0 m\u1ed9t \u0111o\u1ea1n m\u00e3 JavaScript t\u1ea3i h\u00ecnh \u1ea3nh m\u1ed9t c\u00e1ch th\u00f4ng minh khi ng\u01b0\u1eddi d\u00f9ng cu\u1ed9n n\u1ed9i dung v\u00e0 \u01b0u ti\u00ean cho c\u00e1c \u1ea3nh m\u00e0 ng\u01b0\u1eddi d\u00f9ng s\u1ebd s\u1edbm nh\u00ecn th\u1ea5y (\u0111i v\u00e0o khung nh\u00ecn tr\u00ecnh duy\u1ec7t \/ viewport). <\/p>\n\n\n\n<p>Lazysizes l\u00e0 l\u1ef1a ch\u1ecdn t\u1ed1t v\u00ec n\u00f3 s\u1eed d\u1ee5ng <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Intersection_Observer_API\" target=\"_blank\" rel=\"noreferrer noopener\">API Intersection Observer<\/a> (\u1edf tr\u00ecnh duy\u1ec7t n\u00e0o kh\u1ea3 d\u1ee5ng) c\u00f3 hi\u1ec7u n\u0103ng cao \u0111\u1ec3 nh\u1eadn bi\u1ebft ph\u1ea7n t\u1eed n\u00e0o c\u1ee7a trang \u0111ang \u1edf trong viewport. \u0110i\u1ec1u n\u00e0y gi\u00fap n\u00f3 c\u00f3 hi\u1ec7u su\u1ea5t cao h\u01a1n so v\u1edbi c\u00e1c gi\u1ea3i ph\u00e1p c\u0169 s\u1eed d\u1ee5ng c\u00e1ch ti\u1ebfp c\u1eadn ki\u1ec3u nh\u01b0 s\u1eed d\u1ee5ng c\u00e1c tr\u00ecnh x\u1eed l\u00fd s\u1ef1 ki\u1ec7n (event handlers \/ xem v\u00ed d\u1ee5 \u1edf b\u00e0i <a href=\"https:\/\/kiencang.net\/lazy-load-anh-va-video\/#Lazy_load_anh\" target=\"_blank\" rel=\"noreferrer noopener\">kiencang.net\/lazy-load-anh-va-video\/#Lazy_load_anh<\/a> \u1edf ph\u1ea7n tr\u00ecnh x\u1eed l\u00fd s\u1ef1 ki\u1ec7n).<\/p>\n\n\n\n<p>PS: <a href=\"https:\/\/caniuse.com\/intersectionobserver\" target=\"_blank\" rel=\"noreferrer noopener\">th\u1ed1ng k\u00ea t\u1eeb Can I Use th\u00ec API Intersection Observer<\/a> \u0111\u01b0\u1ee3c t\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t l\u1edbn h\u1ed7 tr\u1ee3.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Th\u00eam lazysizes v\u00e0o website<\/h2>\n\n\n\n<p>\u0110\u00e2y l\u00e0 c\u00e1ch \u0111\u01a1n gi\u1ea3n \u0111\u1ec3 th\u00eam lazysizes:<\/p>\n\n\n\n<ul>\n<li>Th\u00eam th\u01b0 vi\u1ec7n lazysizes v\u00e0o c\u00e1c trang c\u1ee7a b\u1ea1n;<\/li>\n\n\n\n<li>L\u1ef1a ch\u1ecdn c\u00e1c \u1ea3nh m\u00e0 b\u1ea1n mu\u1ed1n lazy load (t\u1ea3i l\u01b0\u1eddi \u1ea3nh);<\/li>\n\n\n\n<li>C\u1eadp nh\u1eadt th\u1ebb <code>&lt;img&gt;<\/code> v\u00e0\/ho\u1eb7c th\u1ebb <code>&lt;picture&gt;<\/code> cho c\u00e1c \u1ea3nh \u0111\u00f3.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Th\u00eam m\u00e3 lazysizes v\u00e0o trang<\/h3>\n\n\n\n<p>Th\u00eam m\u00e3 lazysizes v\u00e0o c\u00e1c trang c\u1ee7a b\u1ea1n nh\u01b0 d\u01b0\u1edbi \u0111\u00e2y (\u0111\u01b0a n\u00f3 v\u00e0o trong th\u1ebb <code>head<\/code>, v\u00e0 b\u00ean d\u01b0\u1edbi CSS v\u00e0 JS kh\u00e1c):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"lazysizes.min.js\" async&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">C\u1eadp nh\u1eadt c\u00e1c th\u1ebb &lt;img&gt; v\u00e0\/ho\u1eb7c &lt;picture&gt;<\/h3>\n\n\n\n<p>H\u01b0\u1edbng d\u1eabn cho th\u1ebb <code>&lt;img&gt;<\/code>:<\/p>\n\n\n\n<p><strong>Tr\u01b0\u1edbc:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"flower.jpg\" alt=\"\"&gt;<\/code><\/pre>\n\n\n\n<p><strong>Sau:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img data-src=\"flower.jpg\" class=\"lazyload\" alt=\"\"&gt;<\/code><\/pre>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 xem trang v\u00ed d\u1ee5 \u00e1p d\u1ee5ng lazysizes v\u1edbi th\u1ebb &lt;img>:<a href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-demo1.html\" target=\"_blank\" rel=\"noreferrer noopener\"> static.kiencang.net\/2020\/lazysizes-demo1.html<\/a><\/p>\n\n\n\n<p>Khi b\u1ea1n c\u1eadp nh\u1eadt th\u1ebb <code>&lt;img&gt;<\/code>, b\u1ea1n th\u1ef1c hi\u1ec7n hai thay \u0111\u1ed5i:<\/p>\n\n\n\n<ul>\n<li><strong>B\u1ed5 sung class <\/strong><em>lazyload<\/em>: \u0110i\u1ec1u n\u00e0y cho lazysizes bi\u1ebft r\u1eb1ng \u0111\u00e2y l\u00e0 \u1ea3nh n\u00ean \u00e1p d\u1ee5ng t\u1ea3i l\u01b0\u1eddi bi\u1ebfng;<\/li>\n\n\n\n<li><strong>Thay \u0111\u1ed5i thu\u1ed9c t\u00ednh<\/strong> <em>src<\/em> <strong>th\u00e0nh<\/strong> <em>data-src<\/em>: Khi \u0111\u1ebfn th\u1eddi \u0111i\u1ec3m c\u1ea7n t\u1ea3i \u1ea3nh, lazysizes s\u1ebd thi\u1ebft l\u1eadp gi\u00e1 tr\u1ecb thu\u1ed9c t\u00ednh <code>src<\/code> c\u1ee7a \u1ea3nh b\u1eb1ng gi\u00e1 tr\u1ecb l\u1ea5y t\u1eeb thu\u1ed9c t\u00ednh <code>data-src<\/code>;<\/li>\n<\/ul>\n\n\n\n<p>H\u01b0\u1edbng d\u1eabn cho th\u1ebb <code>&lt;picture&gt;<\/code>:<\/p>\n\n\n\n<p><strong>Tr\u01b0\u1edbc:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;picture&gt;\n  &lt;source type=\"image\/webp\" srcset=\"flower.webp\"&gt;\n  &lt;source type=\"image\/jpeg\" srcset=\"flower.jpg\"&gt;\n  &lt;img src=\"flower.jpg\" alt=\"\"&gt;\n&lt;\/picture&gt;<\/code><\/pre>\n\n\n\n<p><strong>Sau:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;picture&gt;\n  &lt;source type=\"image\/webp\" data-srcset=\"flower.webp\"&gt;\n  &lt;source type=\"image\/jpeg\" data-srcset=\"flower.jpg\"&gt;\n  &lt;img data-src=\"flower.jpg\" class=\"lazyload\" alt=\"\"&gt;\n&lt;\/picture&gt;<\/code><\/pre>\n\n\n\n<p>Trang v\u00ed d\u1ee5 \u00e1p d\u1ee5ng lazysizes v\u1edbi th\u1ebb picture: <a href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-picture.html\" target=\"_blank\" rel=\"noreferrer noopener\">static.kiencang.net\/2020\/lazysizes-picture.html<\/a><\/p>\n\n\n\n<p>Khi b\u1ea1n c\u1eadp nh\u1eadt c\u00e1c th\u1ebb <code>&lt;picture&gt;<\/code> b\u1ea1n th\u1ef1c hi\u1ec7n hai thay \u0111\u1ed5i:<\/p>\n\n\n\n<ul>\n<li>Th\u00eam class <em>lazyload<\/em> cho th\u1ebb <code>&lt;img&gt;<\/code><\/li>\n\n\n\n<li>Thay \u0111\u1ed5i thu\u1ed9c t\u00ednh <code>srcset<\/code> c\u1ee7a th\u1ebb <code>&lt;source&gt;<\/code> th\u00e0nh <code>data-srcset<\/code>.<\/li>\n<\/ul>\n\n\n\n<p>Khi s\u1eed d\u1ee5ng <a href=\"https:\/\/kiencang.net\/dinh-dang-anh-webp\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u0111\u1ecbnh d\u1ea1ng \u1ea3nh webp<\/a> trong ph\u1ea7n source, tr\u00ecnh duy\u1ec7t s\u1ebd d\u00f9ng \u1ea3nh \u0111\u1ecbnh d\u1ea1ng n\u00e0y \u0111\u1ec3 hi\u1ec3n th\u1ecb tr\u00ean tr\u00ecnh duy\u1ec7t ph\u00f9 h\u1ee3p:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/anh-dinh-dang-webp.png\" alt=\"\u1ea3nh \u0111\u1ecbnh d\u1ea1ng webp\" class=\"wp-image-15925\"\/><\/figure><\/div>\n\n\n<p>Tr\u00ean tr\u00ecnh duy\u1ec7t kh\u00f4ng h\u1ed7 tr\u1ee3 webp, tr\u00ecnh duy\u1ec7t v\u1eabn hi\u1ec3n th\u1ecb \u1ea3nh b\u00ecnh th\u01b0\u1eddng, v\u00ec ch\u00fang ta \u0111\u00e3 th\u1ef1c hi\u1ec7n d\u1ef1 ph\u00f2ng (fallback) b\u1eb1ng \u1ea3nh \u0111\u1ecbnh d\u1ea1ng jpg, v\u00ed d\u1ee5 d\u01b0\u1edbi \u0111\u00e2y l\u00e0 tr\u00ecnh duy\u1ec7t IE 11:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/hien-thi-anh-jpg.png\" alt=\"v\u1eabn hi\u1ec3n th\u1ecb \u1ea3nh JPG tr\u00ean IE 11\" class=\"wp-image-15931\"\/><\/figure><\/div>\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Ki\u1ec3m tra<\/h2>\n\n\n\n<p>B\u1ea1n m\u1edf DevTools v\u00e0 cu\u1ed9n trang \u0111\u1ec3 xem c\u00e1c thay \u0111\u1ed5i di\u1ec5n ra. Trong qu\u00e1 tr\u00ecnh b\u1ea1n cu\u1ed9n, b\u1ea1n ph\u1ea3i th\u1ea5y c\u00e1c y\u00eau c\u1ea7u m\u1ea1ng m\u1edbi xu\u1ea5t hi\u1ec7n v\u00e0 class c\u1ee7a th\u1ebb <code>&lt;img&gt;<\/code> ph\u1ea3i thay \u0111\u1ed5i t\u1eeb <code>lazyload<\/code> th\u00e0nh <code>lazyloaded<\/code>.<\/p>\n\n\n\n<p>Th\u00eam v\u00e0o \u0111\u00f3, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng Lighthouse \u0111\u1ec3 ki\u1ec3m tra xem b\u1ea1n c\u00f3 b\u1ecf qu\u00ean b\u1ea5t c\u1ee9 \u1ea3nh n\u00e0o d\u01b0\u1edbi m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean hay kh\u00f4ng. B\u1ea1n ch\u1ea1y ki\u1ec3m tra hi\u1ec7u su\u1ea5t c\u1ee7a Lighthouse (<strong>Lighthouse &gt; Options &gt; Performance<\/strong>) v\u00e0 xem c\u00e1c k\u1ebft qu\u1ea3 \u1edf khu v\u1ef1c <strong>Defer offscreen images<\/strong> (Tr\u00ec ho\u00e3n t\u1ea3i c\u00e1c \u1ea3nh ngo\u00e0i m\u00e0n h\u00ecnh).<\/p>\n\n\n\n<p><em>(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: Use lazysizes to lazyload images, t\u00e1c gi\u1ea3: Katie Hempenius, trang web[.]dev)<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p><strong>V\u00e0i l\u1eddi c\u1ee7a ng\u01b0\u1eddi d\u1ecbch<\/strong>: T\u1eeb b\u00e0i vi\u1ebft n\u00e0y t\u00f4i th\u1ea5y c\u00f3 m\u1ed9t tri\u1ec3n v\u1ecdng r\u1ea5t l\u1edbn \u0111\u1ec3 tri\u1ec3n khai lazysizes tr\u00ean trang WordPress &amp; \u0111\u1eb7c bi\u1ec7t l\u00e0 c\u00e1c trang b\u1ea1n t\u1ef1 vi\u1ebft. M\u1eb7c d\u00f9 th\u01b0 vi\u1ec7n n\u00e0y kh\u00f4ng c\u00f3 plugin ch\u00ednh th\u1ee9c cho WP (c\u00f3 m\u1ed9t <a rel=\"noreferrer noopener nofollow\" href=\"https:\/\/wordpress.org\/plugins\/lazysizes\/\" target=\"_blank\">plugin c\u00f3 t\u00ean t\u01b0\u01a1ng t\u1ef1<\/a>, nh\u01b0ng ch\u1ec9 l\u00e0 <em>h\u00e0ng nh\u00e1i t\u00ean<\/em> m\u00e0 th\u00f4i, kh\u00f4ng hi\u1ec3u sao t\u00e1c gi\u1ea3 th\u01b0 vi\u1ec7n l\u1ea1i \u0111\u1ed3ng \u00fd cho t\u00e1c gi\u1ea3 plugin l\u1ea5y t\u00ean \u0111\u00f3, tuy nhi\u00ean, \u00edt nh\u1ea5t th\u00ec t\u00e1c gi\u1ea3 plugin c\u0169ng c\u00f4ng khai th\u00f4ng tin n\u00e0y!). <\/p>\n\n\n\n<p>OK, quay l\u1ea1i ch\u1ee7 \u0111\u1ec1 ch\u00ednh, v\u1edbi nh\u1eefng \u01b0u \u0111i\u1ec3m m\u00e0 lazysizes mang l\u1ea1i, n\u00f3 r\u00f5 r\u00e0ng m\u1ea1nh h\u01a1n t\u1ea5t c\u1ea3 c\u00e1c plugin m\u00e0 t\u00f4i bi\u1ebft, kh\u1ea3 n\u0103ng t\u00f9y ch\u1ec9nh s\u00e2u n\u00e0y c\u00f3 l\u1ebd r\u1ea5t th\u00edch h\u1ee3p cho nh\u1eefng ai am hi\u1ec3u ch\u00fat \u00edt v\u1ec1 l\u1eadp tr\u00ecnh v\u00e0 can thi\u1ec7p tr\u00ean nh\u1eefng trang quan tr\u1ecdng nh\u1ea5t \u0111\u1ec3 t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 h\u01a1n n\u1eefa. <\/p>\n\n\n\n<p>K\u1ebft h\u1ee3p lazysizes + \u1ea3nh webp + m\u00e3 d\u1ef1 ph\u00f2ng <code>&lt;noscript&gt;<\/code> s\u1ebd l\u00e0 combo m\u00e0 t\u00f4i ngh\u0129 s\u1ebd r\u1ea5t th\u00fa v\u1ecb, t\u00f4i s\u1ebd s\u1edbm th\u1eed nghi\u1ec7m n\u00f3, v\u00e0 vi\u1ebft m\u1ed9t b\u00e0i sau. Xin ch\u00e0o v\u00e0 h\u1eb9n g\u1eb7p l\u1ea1i.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lazy load l\u00e0 chi\u1ebfn l\u01b0\u1ee3c trong \u0111\u00f3 ng\u01b0\u1eddi ta ch\u1ec9 t\u1ea3i c\u00e1c t\u00e0i nguy\u00ean m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u1ea7n, ch\u1ee9 kh\u00f4ng t\u1ea3i t\u1ea5t c\u1ea3 tr\u01b0\u1edbc trong l\u01b0\u1ee3t t\u1ea3i \u0111\u1ea7u ti\u00ean. C\u00e1ch ti\u1ebfp c\u1eadn n\u00e0y gi\u1ea3i ph\u00f3ng cho c\u00e1c t\u00e0i nguy\u00ean ch\u01b0a c\u1ea7n thi\u1ebft trong l\u1ea7n t\u1ea3i \u0111\u1ea7u ti\u00ean (initial page load) v\u00e0 tr\u00e1nh ph\u1ea3i t\u1ea3i m\u1ed9t &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,275],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>S\u1eed d\u1ee5ng lazysizes \u0111\u1ec3 lazy load \u1ea3nh &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"description\" content=\"Chia s\u1ebb \u0111o\u1ea1n m\u00e3 t\u00edch h\u1ee3p lazysizes v\u00e0o th\u1ebb \u1ea3nh \u0111\u1ec3 lazy load. Trong \u0111\u00f3 c\u00f3 c\u1ea3 v\u00ed d\u1ee5 v\u1ec1 s\u1eed d\u1ee5ng WebP, \u0111\u1ecbnh d\u1ea1ng \u1ea3nh ti\u1ebft ki\u1ec7m dung l\u01b0\u1ee3ng so v\u1edbi JPG v\u00e0 PNG\" \/>\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\/lazysizes-lazy-load-anh\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"S\u1eed d\u1ee5ng lazysizes \u0111\u1ec3 lazy load \u1ea3nh &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"Chia s\u1ebb \u0111o\u1ea1n m\u00e3 t\u00edch h\u1ee3p lazysizes v\u00e0o th\u1ebb \u1ea3nh \u0111\u1ec3 lazy load. Trong \u0111\u00f3 c\u00f3 c\u1ea3 v\u00ed d\u1ee5 v\u1ec1 s\u1eed d\u1ee5ng WebP, \u0111\u1ecbnh d\u1ea1ng \u1ea3nh ti\u1ebft ki\u1ec7m dung l\u01b0\u1ee3ng so v\u1edbi JPG v\u00e0 PNG\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/lazysizes-lazy-load-anh\/\" \/>\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-04-06T06:17:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-25T05:48:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/lazy-load.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=\"5 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"S\u1eed d\u1ee5ng lazysizes \u0111\u1ec3 lazy load \u1ea3nh &#8226; Ki\u1ebfn c\u00e0ng","description":"Chia s\u1ebb \u0111o\u1ea1n m\u00e3 t\u00edch h\u1ee3p lazysizes v\u00e0o th\u1ebb \u1ea3nh \u0111\u1ec3 lazy load. Trong \u0111\u00f3 c\u00f3 c\u1ea3 v\u00ed d\u1ee5 v\u1ec1 s\u1eed d\u1ee5ng WebP, \u0111\u1ecbnh d\u1ea1ng \u1ea3nh ti\u1ebft ki\u1ec7m dung l\u01b0\u1ee3ng so v\u1edbi JPG v\u00e0 PNG","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\/lazysizes-lazy-load-anh\/","og_locale":"vi_VN","og_type":"article","og_title":"S\u1eed d\u1ee5ng lazysizes \u0111\u1ec3 lazy load \u1ea3nh &#8226; Ki\u1ebfn c\u00e0ng","og_description":"Chia s\u1ebb \u0111o\u1ea1n m\u00e3 t\u00edch h\u1ee3p lazysizes v\u00e0o th\u1ebb \u1ea3nh \u0111\u1ec3 lazy load. Trong \u0111\u00f3 c\u00f3 c\u1ea3 v\u00ed d\u1ee5 v\u1ec1 s\u1eed d\u1ee5ng WebP, \u0111\u1ecbnh d\u1ea1ng \u1ea3nh ti\u1ebft ki\u1ec7m dung l\u01b0\u1ee3ng so v\u1edbi JPG v\u00e0 PNG","og_url":"https:\/\/kiencang.net\/lazysizes-lazy-load-anh\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2020-04-06T06:17:59+00:00","article_modified_time":"2023-08-25T05:48:59+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/lazy-load.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":"5 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/lazysizes-lazy-load-anh\/","url":"https:\/\/kiencang.net\/lazysizes-lazy-load-anh\/","name":"S\u1eed d\u1ee5ng lazysizes \u0111\u1ec3 lazy load \u1ea3nh &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2020-04-06T06:17:59+00:00","dateModified":"2023-08-25T05:48:59+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"description":"Chia s\u1ebb \u0111o\u1ea1n m\u00e3 t\u00edch h\u1ee3p lazysizes v\u00e0o th\u1ebb \u1ea3nh \u0111\u1ec3 lazy load. Trong \u0111\u00f3 c\u00f3 c\u1ea3 v\u00ed d\u1ee5 v\u1ec1 s\u1eed d\u1ee5ng WebP, \u0111\u1ecbnh d\u1ea1ng \u1ea3nh ti\u1ebft ki\u1ec7m dung l\u01b0\u1ee3ng so v\u1edbi JPG v\u00e0 PNG","breadcrumb":{"@id":"https:\/\/kiencang.net\/lazysizes-lazy-load-anh\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/lazysizes-lazy-load-anh\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/lazysizes-lazy-load-anh\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"S\u1eed d\u1ee5ng lazysizes \u0111\u1ec3 lazy load \u1ea3nh"}]},{"@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\/15909"}],"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=15909"}],"version-history":[{"count":1,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/15909\/revisions"}],"predecessor-version":[{"id":24615,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/15909\/revisions\/24615"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=15909"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=15909"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=15909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}