{"id":16869,"date":"2020-04-01T17:55:25","date_gmt":"2020-04-01T10:55:25","guid":{"rendered":"https:\/\/kiencang.net\/?p=15637"},"modified":"2020-04-01T17:55:25","modified_gmt":"2020-04-01T10:55:25","slug":"lazysizes-js-lazy-load-anh-p1","status":"publish","type":"post","link":"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p1\/","title":{"rendered":"Gi\u1edbi thi\u1ec7u th\u01b0 vi\u1ec7n lazysizes.js \u0111\u1ec3 lazy load \u1ea3nh (ph\u1ea7n 1)"},"content":{"rendered":"\n<p>V\u00e0i l\u1eddi c\u1ee7a ng\u01b0\u1eddi d\u1ecbch: Nh\u1edd b\u00e0i vi\u1ebft v\u1ec1 <a rel=\"noreferrer noopener\" href=\"https:\/\/kiencang.net\/lazy-load-anh-va-video\/\" target=\"_blank\">c\u00e1ch lazy load \u1ea3nh v\u00e0 video<\/a> (c\u00f3 n\u1ed9i dung r\u1ea5t c\u0103n b\u1ea3n) t\u00f4i bi\u1ebft \u0111\u1ebfn c\u00f4ng c\u1ee5 lazysizes.js (c\u1ee7a t\u00e1c gi\u1ea3 c\u00f3 nickname aFarkas), n\u00f3 \u0111\u01b0\u1ee3c khen ng\u1ee3i nhi\u1ec1u (r\u1ea5t hay \u0111\u01b0\u1ee3c nh\u1eafc t\u00ean trong <a rel=\"noreferrer noopener\" href=\"https:\/\/kiencang.net\/lazysizes-lazy-load-anh\/\" target=\"_blank\">c\u00e1c t\u00e0i li\u1ec7u h\u01b0\u1edbng d\u1eabn t\u0103ng t\u1ed1c c\u1ee7a Google<\/a>), do \u0111\u00f3 t\u00f4i quy\u1ebft \u0111\u1ecbnh \u0111\u1ea7u t\u01b0 th\u1eddi gian t\u00ecm hi\u1ec3u. <\/p>\n\n\n<p>V\u00ec b\u00e0i kh\u00e1 d\u00e0i n\u00ean \u0111\u01b0\u1ee3c chia l\u00e0m ba ph\u1ea7n. M\u1ed9t l\u1ea7n n\u1eefa th\u00ec b\u00e0i vi\u1ebft d\u1ea1ng n\u00e0y ch\u1ec9 d\u00e0nh cho nh\u1eefng ai mu\u1ed1n \u0111\u00e0o s\u00e2u v\u1ec1 lazy load v\u00e0 c\u00f3 \u00fd mu\u1ed1n tri\u1ec3n khai tr\u00ean c\u00e1c \u1ee9ng d\u1ee5ng m\u00e0 b\u1ea1n s\u1ebd vi\u1ebft sau n\u00e0y. <\/p>\n\n\n<p>N\u1ebfu \u0111\u01a1n thu\u1ea7n ch\u1ec9 <a rel=\"noreferrer noopener\" href=\"https:\/\/kiencang.net\/huong-dan-su-dung-wordpress\/\" target=\"_blank\">d\u00f9ng WordPress<\/a> b\u1ea1n c\u1ee9 x\u00e0i plugin ki\u1ec3u nh\u01b0 <a href=\"https:\/\/kiencang.net\/plugin-flying-images\/\" target=\"_blank\" rel=\"noreferrer noopener\">flying images<\/a> hay <a href=\"https:\/\/kiencang.net\/gioi-thieu-plugin-a3-lazy-load\/\" target=\"_blank\" rel=\"noreferrer noopener\">a3 Lazy Load<\/a> c\u00f3 l\u1ebd s\u1ebd nh\u1eb9 \u0111\u1ea7u h\u01a1n nhi\u1ec1u. Ngo\u00e0i ph\u1ea7n d\u1ecbch n\u1ed9i dung ch\u00ednh, t\u00f4i c\u00f3 \u0111\u01b0a th\u00eam c\u00e1c v\u00ed d\u1ee5 v\u00e0o cho d\u1ec5 hi\u1ec3u. OK, gi\u1edd ch\u00fang ta b\u1eaft \u0111\u1ea7u nh\u00e9.<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<p>C\u00f4ng c\u1ee5 n\u00e0y d\u00f9ng \u0111\u1ec3 lazy load \u1ea3nh (g\u1ed3m c\u1ea3 \u1ea3nh \u0111\u00e1p \u1ee9ng v\u00e0 th\u00f4ng th\u01b0\u1eddng), iframe (cho video) c\u00f3 hi\u1ec7u su\u1ea5t cao, <a href=\"https:\/\/kiencang.net\/viet-bai-chuan-seo\/\" target=\"_blank\" rel=\"noreferrer noopener\">th\u00e2n thi\u1ec7n v\u1edbi SEO<\/a>. N\u00f3 x\u00e1c \u0111\u1ecbnh b\u1ea5t k\u1ef3 thay \u0111\u1ed5i n\u00e0o trong khung nh\u00ecn tr\u00ecnh duy\u1ec7t (viewport) m\u00e0 \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t b\u1edfi t\u01b0\u01a1ng t\u00e1c c\u1ee7a ng\u01b0\u1eddi d\u00f9ng (user interaction), CSS ho\u1eb7c JavaScript m\u00e0 kh\u00f4ng c\u1ea7n b\u1ea1n ph\u1ea3i can thi\u1ec7p c\u1ea5u h\u00ecnh (configuration).<\/p>\n\n\n<p>Link ch\u00ednh th\u1ee9c c\u1ee7a th\u01b0 vi\u1ec7n n\u1eb1m \u1edf \u0111\u00e2y: <a href=\"https:\/\/github.com\/aFarkas\/lazysizes\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>github.com\/aFarkas\/lazysizes<\/strong><\/a> <\/p>\n\n\n<p><strong>Lazysizes<\/strong> l\u00e0 th\u01b0 vi\u1ec7n c\u00f3 t\u1ed1c \u0111\u1ed9 cao, t\u1ed1i \u01b0u SEO v\u00e0 t\u1ef1 kh\u1edfi t\u1ea1o (self-initializing) cho m\u1ee5c \u0111\u00edch lazy load \u1ea3nh (bao g\u1ed3m c\u1ea3 \u1ea3nh \u0111\u00e1p \u1ee9ng <em>picture \/ srcset<\/em>), iframe, script \/ widget v\u00e0 nhi\u1ec1u th\u00e0nh ph\u1ea7n kh\u00e1c n\u1eefa. N\u00f3 c\u0169ng \u01b0u ti\u00ean c\u00e1c t\u00e0i nguy\u00ean d\u1ef1a tr\u00ean s\u1ef1 kh\u00e1c bi\u1ec7t v\u1ec1 t\u1ea7m m\u1ee9c quan tr\u1ecdng, trong \u0111\u00f3 lazysizes \u01b0u ti\u00ean c\u00e1c ph\u1ea7n t\u1eed n\u1eb1m trong khung nh\u00ecn v\u00e0 g\u1ea7n khung nh\u00ecn tr\u00ecnh duy\u1ec7t (near view elements) \u0111\u1ec3 t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 t\u1ea3i nh\u1eadn th\u1ee9c (perceived performance) nhanh h\u01a1n.<\/p>\n\n\n<p>Th\u01b0 vi\u1ec7n n\u00e0y c\u0169ng c\u00f3 th\u1ec3 l\u00e0 c\u00f4ng c\u1ee5 h\u00e0ng \u0111\u1ea7u \u0111\u1ec3 b\u1ea1n t\u00edch h\u1ee3p \u1ea3nh \u0111\u00e1p \u1ee9ng (\u1ea3nh c\u00f3 kh\u1ea3 n\u0103ng co gi\u00e3n theo k\u00edch c\u1ee1 m\u00e3n h\u00ecnh \/ responsive images). N\u00f3 c\u00f3 th\u1ec3 t\u00ednh to\u00e1n t\u1ef1 \u0111\u1ed9ng thu\u1ed9c t\u00ednh <em>sizes<\/em> cho \u1ea3nh \u0111\u00e1p \u1ee9ng c\u1ee7a b\u1ea1n, lazysizes c\u0169ng cho ph\u00e9p b\u1ea1n chia s\u1ebb c\u00e1c truy v\u1ea5n media cho thu\u1ed9c t\u00ednh <em>media<\/em> c\u1ee7a b\u1ea1n b\u1eb1ng CSS, gi\u00fap t\u00e1ch bi\u1ec7t CSS (layout) kh\u1ecfi n\u1ed9i dung \/ c\u1ea5u tr\u00fac (HTML) v\u00e0 n\u00f3 th\u1ef1c hi\u1ec7n t\u00edch h\u1ee3p c\u00e1c \u1ea3nh \u0111\u00e1p \u1ee9ng v\u00e0o trong b\u1ea5t c\u1ee9 m\u00f4i tr\u01b0\u1eddng n\u00e0o theo c\u00e1ch th\u1ef1c s\u1ef1 \u0111\u01a1n gi\u1ea3n. Lazysizes c\u0169ng bao g\u1ed3m m\u1ed9t t\u1eadp h\u1ee3p c\u00e1c plugin t\u00f9y ch\u1ecdn \u0111\u1ec3 m\u1edf r\u1ed9ng h\u01a1n n\u1eefa ch\u1ee9c n\u0103ng c\u1ee7a n\u00f3.<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\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-6577d634bd935\" ><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-6577d634bd935\"  type=\"checkbox\" id=\"item-6577d634bd935\"><\/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\/lazysizes-js-lazy-load-anh-p1\/#Cach_lam\" title=\"C\u00e1ch l\u00e0m\">C\u00e1ch l\u00e0m<\/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\/lazysizes-js-lazy-load-anh-p1\/#Ho_tro_anh_dap_ung_picture_vahoac_srcset\" title=\"H\u1ed7 tr\u1ee3 \u1ea3nh \u0111\u00e1p \u1ee9ng (picture v\u00e0\/ho\u1eb7c srcset)\">H\u1ed7 tr\u1ee3 \u1ea3nh \u0111\u00e1p \u1ee9ng (picture v\u00e0\/ho\u1eb7c srcset)<\/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\/lazysizes-js-lazy-load-anh-p1\/#Tai_sao_lazysizes_duoc_danh_gia_rat_cao\" title=\"T\u1ea1i sao lazysizes \u0111\u01b0\u1ee3c \u0111\u00e1nh gi\u00e1 r\u1ea5t cao\">T\u1ea1i sao lazysizes \u0111\u01b0\u1ee3c \u0111\u00e1nh gi\u00e1 r\u1ea5t cao<\/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\/lazysizes-js-lazy-load-anh-p1\/#Tim_hieu_them_ve_API\" title=\"T\u00ecm hi\u1ec3u th\u00eam v\u1ec1 API\">T\u00ecm hi\u1ec3u th\u00eam v\u1ec1 API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p1\/#Cac_mau_ma_danh_dau_duoc_khuyen_khich_hoac_co_the_thuc_hien\" title=\"C\u00e1c m\u1eabu m\u00e3 \u0111\u00e1nh d\u1ea5u \u0111\u01b0\u1ee3c khuy\u1ebfn kh\u00edch ho\u1eb7c c\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n\">C\u00e1c m\u1eabu m\u00e3 \u0111\u00e1nh d\u1ea5u \u0111\u01b0\u1ee3c khuy\u1ebfn kh\u00edch ho\u1eb7c c\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cach_lam\"><\/span>C\u00e1ch l\u00e0m<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>1. T\u1ea3i <a href=\"http:\/\/afarkas.github.io\/lazysizes\/lazysizes.min.js\" target=\"_blank\" rel=\"noreferrer noopener\">m\u00e3 lazysizes.min.js v\u1ec1<\/a> v\u00e0 \u0111\u01b0a n\u00f3 v\u00e0o trong trang web c\u1ee7a b\u1ea1n. Ho\u1eb7c c\u00e0i \u0111\u1eb7t n\u00f3 th\u00f4ng qua npm: <em>npm install lazysizes &#8211;save<\/em> ho\u1eb7c bower <em>bower install lazysizes &#8211;save<\/em><\/p>\n\n\n<p>\u0110o\u1ea1n m\u00e3 \u0111\u1ec3 \u0111\u01b0a v\u00e0o trang nh\u01b0 sau (th\u01b0\u1eddng b\u1ea1n \u0111\u01b0a n\u00f3 v\u00e0o trong ph\u1ea7n &lt;head&gt;, n\u1eb1m b\u00ean d\u01b0\u1edbi CSS v\u00e0 JS kh\u00e1c):<em> <\/em><\/p>\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<p>Ngo\u00e0i vi\u1ec7c t\u1ea3i v\u1ec1 v\u00e0 t\u1ef1 host, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng CDN:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/lazysizes\/5.2.0\/lazysizes.min.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n<p>Ho\u1eb7c:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>import 'lazysizes';\n\/\/ import a plugin\nimport 'lazysizes\/plugins\/parent-fit\/ls.parent-fit';\n\/\/ Note: Never import\/require the *.min.js files from the npm package.<\/code><\/pre>\n\n\n<p>2. lazysizes kh\u00f4ng c\u1ea7n b\u1ea5t c\u1ee9 c\u1ea5u h\u00ecnh JS n\u00e0o: Ch\u1ec9 c\u1ea7n th\u00eam <em>class &#8220;lazyload&#8221;<\/em> v\u00e0o \u1ea3nh ho\u1eb7c iframe c\u1ee7a b\u1ea1n v\u00e0 k\u1ebft h\u1ee3p v\u1edbi thu\u1ed9c t\u00ednh <em>data-src<\/em> v\u00e0\/ho\u1eb7c <em>data-srcset<\/em>. M\u1ed9t t\u00f9y ch\u1ecdn n\u1eefa l\u00e0 b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 th\u00eam m\u1ed9t thu\u1ed9c t\u00ednh <em>src<\/em> v\u1edbi <a href=\"https:\/\/kiencang.net\/anh-lqip\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u1ea3nh gi\u1eef ch\u1ed7 ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p \/ low quality image placeholder<\/a> (\u0111\u00f3ng vai tr\u00f2 gi\u1eef ch\u1ed7 cho b\u1ee9c \u1ea3nh g\u1ed1c c\u1ea7n t\u1ea3i l\u01b0\u1eddi v\u00e0 ch\u1ee7 y\u1ebfu \u0111\u1ec3 qu\u00e1 tr\u00ecnh lazy load di\u1ec5n ra m\u01b0\u1ee3t m\u00e0 h\u01a1n):<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- kh\u00f4ng ph\u1ea3i \u1ea3nh \u0111\u00e1p \u1ee9ng: --&gt;\n&lt;img data-src=\"image.jpg\" class=\"lazyload\" \/&gt;<\/code><\/pre>\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 xem v\u00ed d\u1ee5 v\u1ec1 t\u1ea3i l\u01b0\u1eddi \u1ea3nh kh\u00f4ng \u0111\u00e1p \u1ee9ng t\u1ea1i \u0111\u01b0\u1eddng d\u1eabn n\u00e0y:  <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<p>\u0110\u1ec3 ki\u1ec3m tra hi\u1ec7u \u1ee9ng t\u1ea3i l\u01b0\u1eddi, tr\u00ean tr\u00ecnh duy\u1ec7t Chrome (desktop) b\u1ea1n l\u00e0m nh\u01b0 sau: <\/p>\n\n\n<ul><li>Nh\u1ea5n t\u1ed5 h\u1ee3p ph\u00edm <em>Ctrl + Shift + I<\/em><\/li><li>Chuy\u1ec3n sang tab <em>Network<\/em>, ch\u1ecdn <em>Disabale cache<\/em> (v\u00f4 hi\u1ec7u h\u00f3a <a href=\"https:\/\/kiencang.net\/bo-nho-dem-trinh-duyet\/\" target=\"_blank\" rel=\"noreferrer noopener\">cache tr\u00ecnh duy\u1ec7t<\/a> \u0111\u1ec3 m\u1ed7i l\u1ea7n b\u1ea1n reload, n\u00f3 s\u1ebd t\u1ea3i l\u1ea1i \u1ea3nh thay v\u00ec l\u1ea5y \u1ea3nh t\u1eeb cache, c\u00f3 nh\u01b0 v\u1eady m\u1edbi m\u00f4 ph\u1ecfng \/ gi\u1ea3 l\u1eadp \u0111\u01b0\u1ee3c ch\u00ednh x\u00e1c h\u00e0nh vi c\u1ee7a ng\u01b0\u1eddi d\u00f9ng l\u1ea7n \u0111\u1ea7u v\u00e0o trang c\u1ee7a b\u1ea1n)<\/li><li>\u1ede ngay b\u00ean d\u01b0\u1edbi ch\u1ecdn tab <em>Img<\/em> \u0111\u1ec3 ch\u1ec9 quan s\u00e1t h\u00e0nh vi t\u1ea3i \u1ea3nh v\u1ec1<\/li><\/ul>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/kiem-tra-lazy-load-tren-chrome.png\" alt=\"Ki\u1ec3m tra lazy load tr\u00ean Chrome\" class=\"wp-image-15679\"\/><\/figure><\/div>\n\n\n<p>\u1ede b\u00ean tay tr\u00e1i b\u1ea1n ch\u1ecdn thi\u1ebft b\u1ecb di \u0111\u1ed9ng mu\u1ed1n ki\u1ec3m tra, trong v\u00ed d\u1ee5 n\u00e0y t\u00f4i ch\u1ecdn iPhone 6\/7\/8 plus.<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/chon-thiet-bi.png\" alt=\"ch\u1ecdn thi\u1ebft b\u1ecb mu\u1ed1n ki\u1ec3m tra\" class=\"wp-image-15680\"\/><\/figure><\/div>\n\n\n<p>Ti\u1ebfp theo ch\u1ecdn k\u00edch c\u1ee1 100% cho d\u1ec5 quan s\u00e1t, n\u1ebfu m\u00e0n h\u00ecnh m\u00e1y t\u00ednh c\u1ee7a b\u1ea1n to b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ec3 to h\u01a1n (125%, 150%):<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/chon-kich-co.png\" alt=\"ch\u1ecdn k\u00edch c\u1ee1\" class=\"wp-image-15681\"\/><\/figure><\/div>\n\n\n<p>Cu\u1ed1i c\u00f9ng b\u1ea1n ch\u1ecdn t\u1ed1c \u0111\u1ed9 k\u1ebft n\u1ed1i\/\u0111i\u1ec1u ki\u1ec7n thi\u1ebft b\u1ecb:<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/toc-do-ket-noi.png\" alt=\"t\u1ed1c \u0111\u1ed9 k\u1ebft n\u1ed1i, \u0111i\u1ec1u ki\u1ec7n ph\u1ea7n c\u1ee9ng\" class=\"wp-image-15682\"\/><\/figure><\/div>\n\n\n<p>T\u1eeb tr\u00ean xu\u1ed1ng d\u01b0\u1edbi n\u00f3 s\u1ebd cho t\u1ed1c \u0111\u1ed9 k\u1ebft n\u1ed1i, hi\u1ec3n th\u1ecb lazy load t\u1eeb nhanh \u0111\u1ebfn ch\u1eadm (kh\u00f4ng t\u00ednh Offline). N\u1ebfu tr\u00ean \u0111\u01b0\u1eddng truy\u1ec1n t\u1ed1c \u0111\u1ed9 cao, ph\u1ea7n c\u1ee9ng t\u1ed1t lazy load s\u1ebd di\u1ec5n ra r\u1ea5t \u00eam v\u00e0 m\u01b0\u1ee3t, b\u1ea1n th\u1eadm ch\u00ed kh\u00f4ng nh\u00ecn th\u1ea5y \u1ea3nh t\u1ea3i (\u0111i\u1ec1u n\u00e0y t\u1ed1t h\u01a1n cho tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng). Nh\u01b0ng tr\u00ean \u0111\u01b0\u1eddng truy\u1ec1n ch\u1eadm ho\u1eb7c\/v\u00e0 ph\u1ea7n c\u1ee9ng y\u1ebfu \u1ea3nh s\u1ebd t\u1ea3i ch\u1eadm h\u01a1n v\u00e0 b\u1ea1n s\u1ebd nh\u1eadn ra. \u0110\u1ec3 d\u1ec5 d\u00e0ng quan s\u00e1t, b\u1ea1n c\u00f3 th\u1ec3 ch\u1ecdn <em>Mid-tier mobile<\/em> (\u00fd ch\u1ec9 d\u00f2ng \u0111i\u1ec7n tho\u1ea1i c\u1ea5p trung). Trong \u0111o\u1ea1n m\u00e3 nh\u00fang v\u1eeba r\u1ed3i t\u00f4i cho th\u00eam v\u00e0i b\u1ee9c \u1ea3nh c\u00f3 dung l\u01b0\u1ee3ng l\u1edbn (500 KB &#8211; 1 MB) \u1edf cu\u1ed1i \u0111\u1ec3 ngay c\u1ea3 khi b\u1ea1n ch\u1ecdn Online (c\u00f3 t\u1ed1c \u0111\u1ed9 cao nh\u1ea5t) b\u1ea1n s\u1ebd v\u1eabn nh\u1eadn ra hi\u1ec7n t\u01b0\u1ee3ng lazy load.<\/p>\n\n\n<p>Sau khi thi\u1ebft l\u1eadp xong, b\u1ea1n t\u1ea3i l\u1ea1i trang, b\u1ea1n s\u1ebd th\u1ea5y trang ch\u1ec9 t\u1ea3i tr\u01b0\u1edbc 13 b\u1ee9c \u1ea3nh (tr\u00ean t\u1ed5ng s\u1ed1 31 b\u1ee9c):<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/tai-luc-ban-dau-1024x644.png\" alt=\"t\u1ea3i l\u00fac ban \u0111\u1ea7u ch\u1ec9 m\u1ed9t s\u1ed1 b\u1ee9c \u1ea3nh\" class=\"wp-image-15683\"\/><figcaption> B\u1ea1n c\u0169ng c\u0169ng th\u1ea5y l\u01b0\u1ee3ng d\u1eef li\u1ec7u t\u1ea3i v\u1ec1 ch\u1ec9 kho\u1ea3ng 1 MB.  <\/figcaption><\/figure>\n\n\n<p>Ti\u1ebfp \u0111\u00f3 b\u1ea1n cu\u1ed9n chu\u1ed9t xu\u1ed1ng b\u00ean d\u01b0\u1edbi trong m\u00e0n h\u00ecnh gi\u1ea3 l\u1eadp, b\u1ea1n s\u1ebd th\u1ea5y tr\u00ecnh duy\u1ec7t t\u1ea3i d\u1ea7n c\u00e1c \u1ea3nh c\u00f2n l\u1ea1i v\u1ec1 t\u01b0\u01a1ng \u1ee9ng v\u1edbi qu\u00e1 tr\u00ecnh cu\u1ed9n chu\u1ed9t:<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/tai-anh-con-lai-ve-1024x611.png\" alt=\"t\u1ea3i \u1ea3nh c\u00f2n l\u1ea1i v\u1ec1\" class=\"wp-image-15684\"\/><figcaption> Tr\u00ecnh duy\u1ec7t t\u1ea3i \u0111\u1ee7 31 \u1ea3nh v\u1ec1, v\u1edbi h\u01a1n 5,8 MB d\u1eef li\u1ec7u<\/figcaption><\/figure>\n\n\n<p>\u0110\u1ec3 so s\u00e1nh gi\u1eefa \u1ea3nh theo ph\u01b0\u01a1ng th\u1ee9c t\u1ea3i l\u01b0\u1eddi v\u00e0 t\u1ea3i th\u00f4ng th\u01b0\u1eddng, t\u00f4i c\u00f3 t\u1ea1o m\u1ed9t trang c\u0169ng bao g\u1ed3m c\u00e1c \u1ea3nh tr\u00ean nh\u01b0ng t\u1ea3i theo c\u00e1ch th\u00f4ng th\u01b0\u1eddng, kh\u00f4ng c\u00f3 lazy load:  <a href=\"https:\/\/static.kiencang.net\/2020\/tai-anh-thong-thuong-demo1.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/static.kiencang.net\/2020\/tai-anh-thong-thuong-demo1.html<\/a> <\/p>\n\n\n<p>Ti\u1ebfp theo ch\u00fang ta s\u1ebd l\u00e0m quen v\u1edbi m\u00e3 s\u1eed d\u1ee5ng \u1ea3nh \u0111\u00e1p \u1ee9ng v\u1edbi vi\u1ec7c t\u00ednh to\u00e1n k\u00edch c\u1ee1 t\u1ef1 \u0111\u1ed9ng:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- \u1ea3nh \u0111\u00e1p \u1ee9ng v\u1edbi vi\u1ec7c t\u00ednh to\u00e1n k\u00edch c\u1ee1 t\u1ef1 \u0111\u1ed9ng: --&gt;\n&lt;img\n    data-sizes=\"auto\"\n    data-src=\"image2.jpg\"\n    data-srcset=\"image1.jpg 300w,\n    image2.jpg 600w,\n    image3.jpg 900w\" class=\"lazyload\" \/&gt;<\/code><\/pre>\n\n\n<p>Trang m\u1eabu demo \u0111o\u1ea1n m\u00e3 tr\u00ean \u1edf link n\u00e0y:  <a rel=\"noreferrer noopener\" href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-auto-resize-anh.html\" target=\"_blank\">https:\/\/static.kiencang.net\/2020\/lazysizes-auto-resize-anh.html<\/a> <\/p>\n\n\n<p>Ti\u1ebfp theo l\u00e0 \u0111o\u1ea1n m\u00e3 lazy load cho video:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- v\u00ed d\u1ee5 v\u1ec1 iframe --&gt;\n&lt;iframe frameborder=\"0\"\n    class=\"lazyload\"\n    allowfullscreen=\"\"\n    data-src=\"\/\/www.youtube.com\/embed\/ZfV-aYdU4uE\"&gt;\n&lt;\/iframe&gt;<\/code><\/pre>\n\n\n<p>C\u00f2n \u0111\u00e2y l\u00e0 trang m\u1eabu cho iframe YouTube: <a rel=\"noreferrer noopener\" href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-iframe.html\" target=\"_blank\">https:\/\/static.kiencang.net\/2020\/lazysizes-iframe.html<\/a><\/p>\n\n\n<p>N\u1ebfu b\u1ea1n d\u00f9ng WordPress, plugin r\u1ea5t t\u1ed1t \u0111\u1ec3 t\u1ea3i l\u01b0\u1eddi video l\u00e0: <a href=\"https:\/\/kiencang.net\/gioi-thieu-plugin-wp-youtube-lyte\/\" target=\"_blank\" rel=\"noreferrer noopener\">WP YouTube Lyte<\/a> (c\u0169ng l\u00e0 t\u00e1c gi\u1ea3 ph\u00e1t tri\u1ec3n <a href=\"https:\/\/kiencang.net\/plugin-autoptimize\/\" target=\"_blank\" rel=\"noreferrer noopener\">plugin Autoptimize<\/a> &#8211; r\u1ea5t n\u1ed5i ti\u1ebfng v\u00e0 ch\u1ea5t l\u01b0\u1ee3ng v\u1ec1 m\u1ea3ng t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9)<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Ho_tro_anh_dap_ung_picture_vahoac_srcset\"><\/span>H\u1ed7 tr\u1ee3 \u1ea3nh \u0111\u00e1p \u1ee9ng (picture v\u00e0\/ho\u1eb7c srcset)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>Lazysizes \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng d\u1ef1a tr\u00ean c\u00e1c ti\u00eau chu\u1ea9n v\u1ec1 \u1ea3nh \u0111\u00e1p \u1ee9ng v\u00e0 cho ph\u00e9p b\u1ea1n m\u1edf r\u1ed9ng n\u00f3 v\u1edbi c\u00e1c ch\u1ee9c n\u0103ng b\u1ed5 sung. \u0110\u1ec3 c\u00f3 th\u1ec3 c\u00f3 \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 \u1ea3nh \u0111\u00e1p \u1ee9ng tr\u00ean t\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t (full cross browser), b\u1ea1n ph\u1ea3i th\u1ef1c hi\u1ec7n v\u00e1 v\u00edu (polyfill) \u0111\u1ea7y \u0111\u1ee7 v\u1edbi c\u00e1c c\u00f4ng c\u1ee5 nh\u01b0 <a href=\"https:\/\/github.com\/scottjehl\/picturefill\" target=\"_blank\" rel=\"noreferrer noopener\">picturefill<\/a> ho\u1eb7c s\u1eed d\u1ee5ng ti\u1ec7n \u00edch si\u00eau nh\u1eb9 <a href=\"https:\/\/github.com\/aFarkas\/lazysizes\/blob\/gh-pages\/plugins\/respimg\" target=\"_blank\" rel=\"noreferrer noopener\">respimg polyfill plugin<\/a> ho\u1eb7c <a href=\"https:\/\/github.com\/aFarkas\/lazysizes\/blob\/gh-pages\/plugins\/rias\" target=\"_blank\" rel=\"noreferrer noopener\">responsive image on demand plugin<\/a>. Ngo\u00e0i ra b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecbnh ngh\u0129a m\u1ed9t d\u1ef1 ph\u00f2ng (fallback) theo c\u00e1ch \u0111\u01a1n gi\u1ea3n cho <em>src<\/em> th\u00f4ng qua thu\u1ed9c t\u00ednh <em>data-src<\/em>. N\u1ebfu b\u1ea1n mu\u1ed1n t\u00ecm hi\u1ec3u th\u00eam v\u1ec1 c\u00fa ph\u00e1p (syntax) c\u1ee7a \u1ea3nh \u0111\u00e1p \u1ee9ng, h\u00e3y th\u00eam kh\u1ea3o b\u00e0i vi\u1ebft sau \u0111\u00e2y: &#8220;<a href=\"https:\/\/jakearchibald.com\/2015\/anatomy-of-responsive-images\/\" target=\"_blank\" rel=\"noreferrer noopener\">M\u1ed5 s\u1ebb s\u00e2u v\u1ec1 \u1ea3nh \u0111\u00e1p \u1ee9ng<\/a>&#8220;.<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tai_sao_lazysizes_duoc_danh_gia_rat_cao\"><\/span>T\u1ea1i sao lazysizes \u0111\u01b0\u1ee3c \u0111\u00e1nh gi\u00e1 r\u1ea5t cao<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p><strong>lazysizes<\/strong> kh\u00e1c bi\u1ec7t so v\u1edbi c\u00e1c c\u00f4ng c\u1ee5 t\u1ea3i l\u01b0\u1eddi \u1ea3nh kh\u00e1c:<\/p>\n\n\n<ol><li><strong>Nh\u1eadn di\u1ec7n b\u1ea5t c\u1ee9 thay \u0111\u1ed5i n\u00e0o v\u1ec1 kh\u1ea3 n\u0103ng hi\u1ec3n th\u1ecb trong hi\u1ec7n t\u1ea1i v\u00e0 t\u01b0\u01a1ng lai c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed lazyload trong b\u1ea5t k\u1ef3 m\u00f4i tr\u01b0\u1eddng web n\u00e0o theo c\u00e1ch t\u1ef1 \u0111\u1ed9ng<\/strong>: \u0110o\u1ea1n m\u00e3 ho\u1ea1t \u0111\u1ed9ng ph\u1ed5 c\u1eadp, t\u1ef1 kh\u1edfi t\u1ea1o, t\u1ef1 c\u1ea5u h\u00ecnh, t\u1ef1 h\u1ee7y c\u00e1c th\u00e0nh ph\u1ea7n v\u00e0 nh\u1eadn di\u1ec7n b\u1ea5t k\u1ef3 thay \u0111\u1ed5i n\u00e0o v\u1ec1 kh\u1ea3 n\u0103ng hi\u1ec3n th\u1ecb c\u1ee7a b\u1ea5t k\u1ef3 ph\u1ea7n t\u1eed \u1ea3nh\/iframe trong hi\u1ec7n t\u1ea1i v\u00e0 t\u01b0\u01a1ng lai m\u1ed9t c\u00e1ch t\u1ef1 \u0111\u1ed9ng, kh\u00f4ng th\u00e0nh v\u1ea5n \u0111\u1ec1 l\u00e0 li\u1ec7u n\u00f3 c\u00f3 \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb th\u00f4ng qua t\u01b0\u01a1ng t\u00e1c c\u1ee7a ng\u01b0\u1eddi d\u00f9ng, m\u1ed9t ho\u1ea1t \u1ea3nh CSS \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t th\u00f4ng qua <em>:hover<\/em> ho\u1eb7c th\u00f4ng qua b\u1ea5t k\u1ef3 ki\u1ec3u h\u00e0nh vi JS n\u00e0o (b\u0103ng chuy\u1ec1n, slider, cu\u1ed9n chu\u1ed9t v\u00f4 t\u1eadn \/ infinite scroll, masonry, isotope\/filtering\/sorting, AJAX, SPAs&#8230;). N\u00f3 c\u0169ng l\u00e0m vi\u1ec7c t\u1ef1 \u0111\u1ed9ng khi k\u1ebft h\u1ee3p v\u1edbi b\u1ea5t k\u1ef3 th\u01b0 vi\u1ec7n JS-\/CSS-\/Frontend- n\u00e0o (v\u00ed d\u1ee5 jQuery mobile, Bootstrap, Backbone, Angular, React, Ember, b\u1ea1n c\u00f3 th\u1ec3 xem th\u00eam c\u00e1c extension cho <a href=\"https:\/\/github.com\/aFarkas\/lazysizes\/blob\/gh-pages\/plugins\/attrchange\" target=\"_blank\" rel=\"noreferrer noopener\">attrchange\/re-initialization<\/a>).<\/li><li><strong>H\u01b0\u1edbng \u0111\u1ebfn t\u01b0\u01a1ng lai (future-proof \/ kh\u00f4ng l\u1ed7i th\u1eddi)<\/strong>: lazysizes tr\u1ef1c ti\u1ebfp h\u1ed7 tr\u1ee3 c\u00e1c ti\u00eau chu\u1ea9n v\u1ec1 \u1ea3nh \u0111\u00e1p \u1ee9ng <em>(picture<\/em> v\u00e0 <em>srcset<\/em>)<\/li><li><strong>Chia t\u00e1ch c\u00e1c m\u1ed1i quan t\u00e2m<\/strong>: \u0110\u1ec3 h\u1ed7 tr\u1ee3 \u1ea3nh \u0111\u00e1p \u1ee9ng, n\u00f3 b\u1ed5 sung th\u00eam t\u00ednh to\u00e1n <em>sizes<\/em> t\u1ef1 \u0111\u1ed9ng c\u0169ng nh\u01b0 alias name cho t\u00ednh n\u0103ng truy v\u1ea5n media. C\u0169ng kh\u00f4ng c\u1ea7n th\u1ef1c hi\u1ec7n thay \u0111\u1ed5i JS n\u1ebfu b\u1ea1n th\u00eam kh\u1ed1i c\u00f3 th\u1ec3 cu\u1ed9n b\u1eb1ng CSS (overflow: auto) ho\u1eb7c t\u1ea1o m\u1ed9t mega menu ch\u1ee9a c\u00e1c \u1ea3nh.<\/li><li><strong>Hi\u1ec7u su\u1ea5t<\/strong>: n\u00f3 d\u1ef1a tr\u00ean c\u00e1c m\u00e3 th\u1ef1c h\u00e0nh t\u1ed1t nh\u1ea5t, c\u00f3 hi\u1ec7u su\u1ea5t cao (runtime <strong>v\u00e0<\/strong> network) \u0111\u1ec3 ho\u1ea1t \u0111\u1ed9ng nh\u1eb9 nh\u00e0ng \u1edf t\u1ed1c \u0111\u1ed9 60 fps v\u00e0 c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng v\u1edbi h\u00e0ng tr\u0103m \u1ea3nh\/iframe tr\u00ean c\u00e1c trang ho\u1eb7c \u1ee9ng d\u1ee5ng web n\u1eb7ng JS v\u00e0 CSS.<\/li><li><strong>Kh\u1ea3 n\u0103ng m\u1edf r\u1ed9ng<\/strong>: N\u00f3 cung c\u1ea5p c\u00e1c hook JS v\u00e0 CSS \u0111\u1ec3 m\u1edf r\u1ed9ng lazysizes v\u1edbi b\u1ea5t k\u1ef3 ki\u1ec3u lazy load n\u00e0o, kh\u1edfi t\u1ea1o lazy, trong view callback ho\u1eb7c hi\u1ec7u \u1ee9ng (xem th\u00eam c\u00e1c plugin\/m\u00e3 s\u1eb5n c\u00f3 b\u00ean d\u01b0\u1edbi)<\/li><li> <strong>Prefetch th\u00f4ng minh\/\u01afu ti\u00ean t\u00e0i nguy\u00ean th\u00f4ng minh<\/strong>: lazysizes prefetch\/preload c\u00e1c ph\u1ea7n t\u1eed \u1edf g\u1ea7n khung nh\u00ecn tr\u00ecnh duy\u1ec7t \u0111\u1ec3 c\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng, nh\u01b0ng ch\u1ec9 khi tr\u00ecnh duy\u1ec7t \u1edf trong th\u1eddi gian ngh\u1ec9 (xem th\u00eam c\u00e1c t\u00f9y ch\u1ecdn <em>expand<\/em>, <em>expFactor<\/em> v\u00e0 <em>loadMode<\/em> \/ xem <a href=\"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p2\/\" target=\"_blank\" rel=\"noreferrer noopener\">ph\u1ea7n 2 b\u00e0i gi\u1edbi thi\u1ec7u v\u1ec1 lazysizes<\/a>). \u0110\u00e2y l\u00e0 c\u00e1ch gi\u00fap lazy load nhanh h\u01a1n nh\u1edd vi\u1ec7c preload tr\u01b0\u1edbc c\u00e1c ph\u1ea7n t\u1eed c\u1ea7n lazy tr\u01b0\u1edbc khi n\u00f3 \u0111i v\u00e0o khung nh\u00ecn tr\u00ecnh duy\u1ec7t. <\/li><li><strong>Nh\u1eb9 nh\u00e0ng, nh\u01b0ng l\u00e0 gi\u1ea3i ph\u00e1p ho\u00e0n ch\u1ec9nh<\/strong>: lazysizes c\u00e2n b\u1eb1ng h\u1ee3p l\u00fd gi\u1eefa \u0111\u1ed9 d\u00e0i m\u00e3 v\u00e0 t\u1ed1c \u0111\u1ed9 c\u0169ng nh\u01b0 \u0111\u01b0a ra gi\u1ea3i ph\u00e1p tin c\u1eady.<\/li><li><strong>C\u1ea3i thi\u1ec7n SEO<\/strong>: lazysizes kh\u00f4ng \u1ea9n \u1ea3nh\/c\u00e1c ph\u1ea7n t\u1eed kh\u00e1c kh\u1ecfi t\u1ea7m m\u1eaft c\u1ee7a Google. Kh\u00f4ng th\u00e0nh v\u1ea5n \u0111\u1ec1 l\u00e0 b\u1ea1n \u0111ang s\u1eed d\u1ee5ng m\u1eabu m\u00e3 \u0111\u00e1nh d\u1ea5u n\u00e0o. Google kh\u00f4ng th\u1ec3 cu\u1ed9n chu\u1ed9t\/t\u01b0\u01a1ng t\u00e1c v\u1edbi trang web c\u1ee7a b\u1ea1n. lazysizes nh\u1eadn di\u1ec7n t\u00e1c nh\u00e2n ng\u01b0\u1eddi d\u00f9ng (user agent) c\u00f3 kh\u1ea3 n\u0103ng cu\u1ed9n chu\u1ed9t hay l\u00e0 kh\u00f4ng, v\u00e0 n\u1ebfu kh\u00f4ng, lazysizes s\u1ebd t\u1ef1 \u0111\u1ed9ng hi\u1ec3n th\u1ecb t\u1ea5t c\u1ea3 c\u00e1c \u1ea3nh ch\u1ee9 kh\u00f4ng lazy load n\u00f3 (\u00fd l\u00e0 v\u1edbi user agent l\u00e0 b\u1ecd t\u00ecm ki\u1ebfm nh\u01b0 c\u1ee7a Google, t\u00ednh n\u0103ng lazy load s\u1ebd b\u1ecb lo\u1ea1i b\u1ecf \u0111\u1ec3 m\u00e1y t\u00ecm ki\u1ebfm nh\u00ecn \u0111\u01b0\u1ee3c \u1ea3nh ngay, qua \u0111\u00f3 kh\u00f4ng l\u00e0m \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn SEO c\u1ee7a b\u1ea1n).<\/li><\/ol>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tim_hieu_them_ve_API\"><\/span>T\u00ecm hi\u1ec3u th\u00eam v\u1ec1 API<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p><strong>lazysize<\/strong>s \u0111i k\u00e8m v\u1edbi m\u00e3 \u0111\u00e1nh d\u1ea5u v\u00e0 JS API \u0111\u01a1n gi\u1ea3n. Th\u00f4ng th\u01b0\u1eddng b\u1ea1n s\u1ebd ch\u1ec9 c\u1ea7n s\u1eed d\u1ee5ng m\u00e3 \u0111\u00e1nh d\u1ea5u API.<\/p>\n\n\n<h3 class=\"wp-block-heading\">M\u00e3 \u0111\u00e1nh d\u1ea5u API<\/h3>\n\n\n<p>Th\u00eam <em>class lazyload<\/em> v\u00e0o t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed <em>img<\/em> v\u00e0 <em>iframe<\/em>, nh\u1eefng c\u00e1i m\u00e0 b\u1ea1n mu\u1ed1n lazy load. Thay v\u00ec s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <em>src<\/em> ho\u1eb7c <em>srcset<\/em> h\u00e3y s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <em>data-src<\/em> ho\u1eb7c <em>data-srcset<\/em>:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;img data-src=\"image.jpg\" class=\"lazyload\" \/&gt;\n&lt;!-- \u1ea3nh t\u1ed1i \u01b0u retina: --&gt;\n&lt;img data-srcset=\"responsive-image1.jpg 1x, responsive-image2.jpg 2x\" class=\"lazyload\" \/&gt;<\/code><\/pre>\n\n\n<p><strong>T\u1ef1 \u0111\u1ed9ng thi\u1ebft l\u1eadp thu\u1ed9c t\u00ednh <em>sizes<\/em><\/strong><\/p>\n\n\n<p><strong>lazysizes<\/strong> h\u1ed7 tr\u1ee3 thi\u1ebft l\u1eadp thu\u1ed9c t\u00ednh <em>sizes<\/em> t\u1ef1 \u0111\u1ed9ng, t\u01b0\u01a1ng \u1ee9ng v\u1edbi k\u00edch c\u1ee1 hi\u1ec7n t\u1ea1i c\u1ee7a h\u00ecnh \u1ea3nh &#8211; b\u1ea1n ch\u1ec9 c\u1ea7n thi\u1ebft l\u1eadp gi\u00e1 tr\u1ecb <em>data-sizes<\/em> th\u00e0nh <em>auto<\/em>.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;img\n\tdata-sizes=\"auto\"\n\tdata-srcset=\"responsive-image1.jpg 300w,\n\tresponsive-image2.jpg 600w,\n\tresponsive-image3.jpg 900w\"\n        class=\"lazyload\" \/&gt;<\/code><\/pre>\n\n\n<p><strong>Quan tr\u1ecdng<\/strong>: <strong>C\u00e1ch t\u00ednh to\u00e1n <em>sizes<\/em><\/strong>: Vi\u1ec7c t\u00ednh to\u00e1n t\u1ef1 \u0111\u1ed9ng k\u00edch c\u1ee1 (sizes) \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 hi\u1ec3n th\u1ecb chi\u1ec1u r\u1ed9ng c\u1ee7a \u1ea3nh. \u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 chi\u1ec1u r\u1ed9ng c\u1ee7a \u1ea3nh \u0111\u01b0\u1ee3c t\u00ednh to\u00e1n (\u00edt nh\u1ea5t l\u00e0 x\u1ea5p x\u1ec9) tr\u01b0\u1edbc khi b\u1ea3n th\u00e2n \u1ea3nh \u0111\u00f3 \u0111\u01b0\u1ee3c t\u1ea3i (\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 b\u1ea1n c\u00f3 th\u1ec3 kh\u00f4ng c\u1ea7n s\u1eed d\u1ee5ng <em>width: auto<\/em>). Th\u00f4ng th\u01b0\u1eddng quy t\u1eafc CSS chung sau \u0111\u00e2y c\u00f3 th\u1ec3 h\u1eefu \u00edch: <em>img[data-sizes=&#8221;auto&#8221;] { display: block; width: 100%; }<\/em> (xem th\u00eam ph\u1ea7n ch\u1ec9 \u0111\u1ecbnh k\u00edch c\u1ee1 \u1ea3nh\/iframe v\u1edbi c\u00e1c khuy\u1ebfn ngh\u1ecb v\u1ec1 \u0111\u1ecbnh ngh\u0129a t\u1ef7 l\u1ec7 khung h\u00ecnh, c\u0169ng trong b\u00e0i vi\u1ebft n\u00e0y). N\u1ebfu n\u00f3 c\u00f3 gi\u00e1 tr\u1ecb d\u01b0\u1edbi 40 (c\u00f3 th\u1ec3 ch\u1ec9nh gi\u00e1 tr\u1ecb n\u00e0y th\u00f4ng qua t\u00f9y ch\u1ecdn minSize), lazysizes \u0111i qua c\u00e2y DOM cho \u0111\u1ebfn khi n\u00f3 t\u00ecm \u0111\u01b0\u1ee3c ph\u1ea7n t\u1eeb cha m\u00e0 c\u00f3 gi\u00e1 tr\u1ecb h\u01a1n 40 v\u00e0 s\u1eed d\u1ee5ng con s\u1ed1 n\u00e0y.<\/p>\n\n\n<p>T\u00ednh n\u0103ng t\u1ef1 \u0111\u1ed9ng t\u00ednh to\u00e1n chi\u1ec1u r\u1ed9ng c\u1ee7a lazysizes c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u0111i\u1ec1u ch\u1ec9nh b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng s\u1ef1 ki\u1ec7n <em>lazybeforesizes<\/em>. Ngo\u00e0i ra, <a href=\"https:\/\/github.com\/aFarkas\/lazysizes\/tree\/gh-pages\/plugins\/parent-fit\" target=\"_blank\" rel=\"noreferrer noopener\">plugin parent fit<\/a> c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 \u0111\u1ecbnh k\u00edch c\u1ee1 \u1ea3nh cho kh\u1edbp v\u1edbi kh\u1ed1i cha ho\u1eb7c bao ch\u1ee9a, v\u00e0 l\u00e0 gi\u1ea3i ph\u00e1p duy nh\u1ea5t khi chi\u1ec1u cao c\u1ee7a \u1ea3nh c\u0169ng c\u1ea7n t\u00ednh \u0111\u1ebfn khi c\u1ea7n \u0111\u01b0a \u1ea3nh v\u00e0o kh\u00edt kh\u1edbp v\u1edbi ph\u1ea7n bao ch\u1ee9a c\u1ee7a n\u00f3 (\u0111i\u1ec1u n\u00e0y c\u0169ng bao g\u1ed3m vi\u1ec7c s\u1eed d\u1ee5ng <em>object-fit<\/em>).<\/p>\n\n\n<p>T\u00ednh n\u0103ng <em>data-sizes=&#8221;auto&#8221;<\/em> ch\u1ec9 c\u00f3 \u00fd ngh\u0129a n\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <em>data-srcset<\/em> \u0111i k\u00e8m v\u1edbi c\u00e1c m\u00f4 t\u1ea3 v\u1ec1 chi\u1ec1u r\u1ed9ng <em>width<\/em> \u0111\u1ec3 h\u00ecnh \u1ea3nh ph\u00f9 h\u1ee3p nh\u1ea5t c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c ch\u1ecdn (N\u00f3 kh\u00f4ng c\u00f3 \u00fd ngh\u0129a n\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng m\u00f4 t\u1ea3 x ho\u1eb7c ch\u1ec9 d\u00f9ng <em>src<\/em>).<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cac_mau_ma_danh_dau_duoc_khuyen_khich_hoac_co_the_thuc_hien\"><\/span>C\u00e1c m\u1eabu m\u00e3 \u0111\u00e1nh d\u1ea5u \u0111\u01b0\u1ee3c khuy\u1ebfn kh\u00edch ho\u1eb7c c\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>lazysizes cho ph\u00e9p b\u1ea1n vi\u1ebft v\u00f4 s\u1ed1 c\u00e1c m\u1eabu m\u00e3 \u0111\u00e1nh d\u1ea5u kh\u00e1c nhau. B\u1ea1n c\u00f3 th\u1ec3 t\u00ecm m\u1eabu \u0111\u00e1nh d\u1ea5u ph\u00f9 h\u1ee3p nh\u1ea5t cho b\u1ea3n th\u00e2n ho\u1eb7c ch\u1ecdn t\u00f9y \u00fd m\u1ed9t c\u00e1i b\u1eb1ng c\u00e1c \u0111o\u1ea1n m\u00e3 tham kh\u1ea3o d\u01b0\u1edbi \u0111\u00e2y (T\u1ea5t c\u1ea3 c\u00e1c m\u1eabu sau c\u0169ng c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng theo h\u01b0\u1edbng ngh\u1ec7 thu\u1eadt b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng ph\u1ea7n t\u1eed <em>picture<\/em>.)<\/p>\n\n\n<h3 class=\"wp-block-heading\">M\u1eabu \u0111\u01a1n gi\u1ea3n<\/h3>\n\n\n<p>Th\u00eam<em> <\/em>class<em> lazyload<\/em> v\u00e0 \u0111\u01a1n gi\u1ea3n b\u1ecf qua thu\u1ed9c t\u00ednh <em>src<\/em> ho\u1eb7c th\u00eam d\u1eef li\u1ec7u uri nh\u01b0 m\u1ed9t d\u1ef1 ph\u00f2ng (fallback) cho <em>src<\/em>.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;!--  v\u00ed d\u1ee5 v\u1ec1 \u1ea3nh \u0111\u00e1p \u1ee9ng --&gt;\n&lt;img\n class=\"lazyload\"\n data-srcset=\"image.jpg 1x, image2.jpg 2x\"\n alt=\"\u1ea3nh c\u1ee7a t\u00f4i\" \/&gt;\n&lt;!--  v\u00ed d\u1ee5 v\u1ec1 t\u1ed1i \u01b0u cho retina --&gt;\n&lt;img class=\"lazyload\"\n data-srcset=\"progressive-image.jpg 1x, progressive-image2.jpg 2x\"\n alt=\"\u1ea3nh c\u1ee7a t\u00f4i\" \/&gt;\n&lt;!-- ho\u1eb7c \u1ea3nh kh\u00f4ng \u0111\u00e1p \u1ee9ng: --&gt;\n&lt;img\n data-src=\"image.jpg\"\n class=\"lazyload\" \/&gt;<\/code><\/pre>\n\n\n<p>L\u01b0u \u00fd: trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n s\u1eed d\u1ee5ng c\u1ea3 <em>srcset\/data-srcset<\/em> ho\u1eb7c <em>picture<\/em>, ch\u00fang t\u00f4i khuy\u00ean b\u1ea1n n\u00ean m\u1edf r\u1ed9ng m\u1eabu n\u00e0y v\u1edbi <em>data-src<\/em> (xem m\u1eabu k\u1ebf ti\u1ebfp: K\u1ebft h\u1ee3p <em>data-srcset<\/em> v\u1edbi <em>data-src<\/em>) ho\u1eb7c v\u1edbi thu\u1ed9c t\u00ednh <em>src<\/em> ph\u00f9 h\u1ee3p (xem: &#8220;m\u1eabu hi\u1ec7n \u0111\u1ea1i&#8221; ho\u1eb7c &#8220;LQIP&#8221;).<\/p>\n\n\n<h3 class=\"wp-block-heading\">K\u1ebft h\u1ee3p <em>data-srcset<\/em> v\u1edbi <em>data-src<\/em><\/h3>\n\n\n<p>Trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n mu\u1ed1n s\u1eed d\u1ee5ng \u1ea3nh \u0111\u00e1p \u1ee9ng cho c\u00e1c tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3, nh\u01b0ng kh\u00f4ng mu\u1ed1n bao g\u1ed3m c\u00e1c m\u00e3 v\u00e1 v\u00edu (polyfill) th\u00eam, b\u1ea1n ch\u1ec9 c\u1ea7n \u0111\u01a1n gi\u1ea3n k\u1ebft h\u1ee3p <em>data-srcset<\/em> v\u1edbi m\u1ed9t thu\u1ed9c t\u00ednh <em>data-src<\/em>.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- v\u00ed d\u1ee5 v\u1ec1 \u1ea3nh \u0111\u00e1p \u1ee9ng: --&gt;\n&lt;img\n    data-sizes=\"auto\"\n    data-src=\"image3.jpg\"\n    data-srcset=\"image3.jpg 600w,\n     image1.jpg 220w,\n     image2.jpg 300w,\n     image3.jpg 600w,\n     image4.jpg 900w\"\n class=\"lazyload\" \/&gt;<\/code><\/pre>\n\n\n<p>L\u01b0u \u00fd: Do trong th\u1ef1c t\u1ebf <em>data-src<\/em> c\u0169ng s\u1ebd \u0111\u01b0\u1ee3c l\u1ea5y b\u1edfi &#8220;Read_Later&#8221; c\u1ee7a c\u00e1c \u1ee9ng d\u1ee5ng ho\u1eb7c c\u00e1c c\u00f4ng c\u1ee5 kh\u00e1c (v\u00ed d\u1ee5 Pin trong n\u00fat b\u1ea5m), m\u1eabu n\u00e0y v\u1eabn c\u00f3 \u00fd ngh\u0129a n\u1ebfu b\u1ea1n v\u1eabn d\u00f9ng polyfill. Trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n kh\u00f4ng s\u1eed d\u1ee5ng polyfill, khuy\u1ebfn c\u00e1o l\u00e0 \u1ee9ng vi\u00ean h\u00ecnh \u1ea3nh \u0111\u1ea7u ti\u00ean c\u1ea7n ph\u1ea3i kh\u1edbp v\u1edbi d\u1ef1 ph\u00f2ng <em>src<\/em>.<\/p>\n\n\n<h3 class=\"wp-block-heading\">\u1ea2nh gi\u1eef ch\u1ed7 ki\u1ec3u LQIP\/m\u1edd v\u00e0 k\u1ef9 thu\u1eadt \u1ea3nh m\u1edd hi\u1ec7n d\u1ea7n th\u00e0nh \u1ea3nh r\u00f5 (blur up)<\/h3>\n\n\n<p>N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng m\u00e3 m\u1eabu ki\u1ec3u LQIP (<a href=\"https:\/\/kiencang.net\/anh-lqip\/\" target=\"_blank\" rel=\"noreferrer noopener\">Low Quality Image Placeholder \/ \u1ea2nh gi\u1eef ch\u1ed7 ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p<\/a>), b\u1ea1n ch\u1ec9 c\u1ea7n th\u00eam \u1ea3nh ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p \u0111\u00f3 v\u00e0o <em>src<\/em>:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- v\u00ed d\u1ee5 v\u1ec1 \u1ea3nh \u0111\u00e1p \u1ee9ng: --&gt;\n&lt;img\n    data-sizes=\"auto\"\n    src=\"lqip-src.jpg\"\n    data-srcset=\"lqip-src.jpg 220w,\n    image2.jpg 300w,\n    image3.jpg 600w,\n    image4.jpg 900w\" class=\"lazyload\" \/&gt;\n&lt;!-- ho\u1eb7c \u1ea3nh kh\u00f4ng \u0111\u00e1p \u1ee9ng: --&gt;\n&lt;img src=\"lqip-src.jpg\" data-src=\"image.jpg\" class=\"lazyload\" \/&gt;<\/code><\/pre>\n\n\n<p>K\u1ef9 thu\u1eadt LQIP c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c t\u0103ng c\u01b0\u1eddng b\u1eb1ng c\u00e1ch k\u1ebft h\u1ee3p n\u00f3 v\u1edbi CSS transitions\/animation cho \u1ea3nh.<\/p>\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o th\u00eam <a href=\"https:\/\/jsfiddle.net\/trixta\/v0oq0412\/embedded\/result\/\" target=\"_blank\" rel=\"noreferrer noopener\">plugin Blur Up lazysizes<\/a> (khuy\u1ebfn kh\u00edch).<\/p>\n\n\n<p>\u0110\u00e2y l\u00e0 c\u00e1ch lazy load \u1ea3nh m\u00e0 t\u00f4i r\u1ea5t th\u00edch, b\u1edfi v\u00ec n\u00f3 s\u1ebd l\u00e0m cho c\u01a1 ch\u1ebf t\u1ea3i l\u01b0\u1eddi \u1ea3nh di\u1ec5n ra r\u1ea5t m\u01b0\u1ee3t m\u00e0. \u1ea2nh s\u1ebd hi\u1ec7n ra theo ki\u1ec3u t\u01b0\u01a1ng t\u1ef1 <a href=\"https:\/\/kiencang.net\/anh-jpeg-progressive-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u0111\u1ecbnh d\u1ea1ng JPEG Progressive<\/a> (k\u1ec3 c\u1ea3 \u1ea3nh PNG). C\u01a1 ch\u1ebf l\u00e0 tr\u00ecnh duy\u1ec7t s\u1ebd t\u1ea3i \u1ea3nh ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p c\u1ee7a b\u1ee9c \u1ea3nh g\u1ed1c tr\u01b0\u1edbc \u0111\u1ec3 gi\u1eef ch\u1ed7 (c\u00f3 dung l\u01b0\u1ee3ng r\u1ea5t nh\u1ecf, th\u01b0\u1eddng ch\u1ec9 t\u1eeb 1 \u0111\u1ebfn 10% dung l\u01b0\u1ee3ng c\u1ee7a \u1ea3nh g\u1ed1c ho\u1eb7c \u0111\u00f4i khi h\u01a1n t\u00f9y v\u00e0o l\u1ef1a ch\u1ecdn c\u1ee7a b\u1ea1n), sau \u0111\u00f3 n\u1ebfu ng\u01b0\u1eddi d\u00f9ng cu\u1ed9n chu\u1ed9t \u0111\u1ebfn, h\u1ecd s\u1ebd th\u1ea5y \u1ea3nh ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p tr\u01b0\u1edbc, r\u1ed3i lazysizes s\u1ebd thay th\u1ebf \u1ea3nh ch\u1ea5t l\u01b0\u1ee3ng k\u00e9m n\u00e0y b\u1eb1ng \u1ea3nh th\u1ef1c ch\u1ea5t l\u01b0\u1ee3ng cao. Nhi\u1ec1u trang web l\u1edbn nh\u01b0 medium.com \u0111ang \u00e1p d\u1ee5ng ki\u1ec3u lazy load \u1ea3nh n\u00e0y.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n\t.blur-up {\n\t\t-webkit-filter: blur(5px);\n\t\tfilter: blur(5px);\n\t\ttransition: filter 400ms, -webkit-filter 400ms;\n\t}\n\t.blur-up.lazyloaded {\n\t\t-webkit-filter: blur(0);\n\t\tfilter: blur(0);\n\t}\n&lt;\/style&gt;\n&lt;img src=\"lqip-src.jpg\" data-src=\"image.jpg\" class=\"lazyload blur-up\" \/&gt;\n&lt;!-- ... --&gt;\n&lt;style&gt;\n\t.fade-box .lazyload,\n\t .fade-box .lazyloading {\n\t\topacity: 0;\n\t\ttransition: opacity 400ms;\n\t}\n\t.fade-box img.lazyloaded {\n\t\topacity: 1;\n\t}\n&lt;\/style&gt;\n&lt;div class=\"ratio-box fade-box\"&gt;\n\t&lt;img src=\"lqip-src.jpg\" \/&gt;\n\t&lt;img data-src=\"image.jpg\" class=\"lazyload\" \/&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n<p>\u0110\u1ec3 gia t\u0103ng ch\u1ea5t l\u01b0\u1ee3ng ph\u1ea7n nh\u00ecn h\u01a1n n\u1eefa, th\u00ec \u1ea3nh ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p s\u1ebd \u0111\u01b0\u1ee3c l\u00e0m m\u1edd \u1ea3o b\u1eb1ng CSS th\u00f4ng qua <em>blur<\/em>, c\u00f2n \u0111\u1ec3 qu\u00e1 tr\u00ecnh chuy\u1ec3n \u1ea3nh di\u1ec5n ra nh\u1eb9 nh\u00e0ng, ta c\u0169ng \u00e1p d\u1ee5ng CSS th\u00f4ng qua thu\u1ed9c t\u00ednh <em>transition<\/em> v\u1edbi kho\u1ea3ng th\u1eddi gian t\u00f9y theo \u00fd b\u1ea1n, \u1edf tr\u00ean l\u00e0 400 ms. <\/p>\n\n\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 trang m\u1eabu \u00e1p d\u1ee5ng LQIP k\u1ebft h\u1ee3p CSS (v\u1edbi transition ch\u1ec9 200ms &#8211; blur up): <a rel=\"noreferrer noopener\" href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-demo-LQIP1.html\" target=\"_blank\">https:\/\/static.kiencang.net\/2020\/lazysizes-demo-LQIP1.html<\/a> (\u0111\u00e2y l\u00e0 m\u1eabu LQIP th\u00f4ng th\u01b0\u1eddng, kh\u00f4ng ph\u1ea3i \u1ea3nh \u0111\u00e1p \u1ee9ng).<\/p>\n\n\n<p>M\u1eabu t\u01b0\u01a1ng t\u1ef1 v\u1edbi transition 800ms blur up:  <a rel=\"noreferrer noopener\" href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-demo-LQIP-800ms.html\" target=\"_blank\">https:\/\/static.kiencang.net\/2020\/lazysizes-demo-LQIP-800ms.html<\/a> <\/p>\n\n\n<p>M\u1eabu t\u01b0\u01a1ng t\u1ef1 v\u1edbi transition 2000ms = 2s blur up (ch\u1ec9 \u0111\u1ec3 b\u1ea1n d\u1ec5 quan s\u00e1t, kh\u00f4ng n\u00ean l\u00e0m trong th\u1ef1c t\u1ebf v\u00ec qu\u00e1 tr\u00ecnh chuy\u1ec3n ti\u1ebfp v\u1edbi kho\u1ea3ng th\u1eddi gian nh\u01b0 th\u1ebf s\u1ebd h\u01a1i l\u00e2u): <a rel=\"noreferrer noopener\" href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-demo-LQIP-2000ms.html\" target=\"_blank\">https:\/\/static.kiencang.net\/2020\/lazysizes-demo-LQIP-2000ms.html<\/a><\/p>\n\n\n<p>Ri\u00eang v\u1edbi c\u00e1i fade-box, t\u00f4i c\u00f3 th\u1eed nh\u01b0ng kh\u00f4ng th\u00e0nh c\u00f4ng (n\u00f3 t\u1ea3i v\u1ec1 c\u1ea3 hai \u1ea3nh), hi\u1ec7n kh\u00f4ng r\u00f5 t\u1ea1i sao:  <a href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-fade-box.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/static.kiencang.net\/2020\/lazysizes-fade-box.html<\/a><\/p>\n\n\n<p>S\u1eed d\u1ee5ng LQIP s\u1ebd l\u00e0m t\u0103ng dung l\u01b0\u1ee3ng t\u1ea3i v\u1ec1 c\u1ee7a trang (so v\u1edbi vi\u1ec7c kh\u00f4ng d\u00f9ng) do trang ph\u1ea3i t\u1ea3i c\u1ea3 \u1ea3nh ch\u1edd ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p v\u00e0 \u1ea3nh ch\u1ea5t l\u01b0\u1ee3ng cao. Nh\u01b0ng \u0111i\u1ec1u n\u00e0y kh\u00f4ng th\u00e0nh v\u1ea5n \u0111\u1ec1, v\u00ec m\u1ee9c \u0111\u1ed9 gia t\u0103ng l\u00e0 nh\u1ecf (ho\u1eb7c r\u1ea5t nh\u1ecf), trong khi n\u00f3 \u0111em \u0111\u1ebfn kh\u1ea3 n\u0103ng c\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m c\u1ee7a ng\u01b0\u1eddi d\u00f9ng l\u00ean r\u1ea5t nhi\u1ec1u (v\u00e0 t\u1ea5t nhi\u00ean v\u1eabn t\u0103ng t\u1ed1c \u0111\u1ed9 t\u1ea3i trang l\u00fac ban \u0111\u1ea7u \/ initial page load time).<\/p>\n\n\n<p>N\u1ebfu b\u1ea1n mu\u1ed1n t\u1ef1 th\u1eed, c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00f4ng c\u1ee5 n\u00e0y \u0111\u1ec3 t\u1ea1o \u1ea3nh ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p cho \u1ea3nh ch\u1ea5t l\u01b0\u1ee3ng cao c\u1ee7a b\u1ea1n:  <a href=\"https:\/\/imagecompressor.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/imagecompressor.com\/<\/a> N\u00f3 c\u00f3 th\u1ec3 t\u1ea3i l\u00ean \u0111\u1ed3ng th\u1eddi 20 b\u1ee9c \u1ea3nh. B\u1ea1n nh\u1edb chuy\u1ec3n sang ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p nh\u1ea5t c\u00f3 th\u1ec3:<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/chuyen-anh-chat-luong-thap.png\" alt=\"chuy\u1ec3n \u1ea3nh ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p\" class=\"wp-image-15692\"\/><\/figure><\/div>\n\n\n<p>Ngo\u00e0i ra b\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng ph\u1ea7n m\u1ec1m m\u00e1y b\u00e0n c\u00f3 t\u00ean Caesium n\u1ebfu mu\u1ed1n \u00e1p d\u1ee5ng l\u00ean nhi\u1ec1u \u1ea3nh h\u01a1n c\u00f9ng l\u00fac (ngo\u00e0i ra ph\u1ea7n m\u1ec1m kh\u00f4ng g\u1eb7p v\u1ea5n \u0111\u1ec1 g\u00ec khi chuy\u1ec3n \u0111\u1ed5i \u1ea3nh c\u00f3 dung l\u01b0\u1ee3ng l\u1edbn): <a href=\"https:\/\/saerasoft.com\/caesium\/\">https:\/\/saerasoft.com\/caesium\/<\/a> <\/p>\n\n\n<p>\u0110i\u1ec3m m\u1ea5u ch\u1ed1t c\u1ee7a LQIP l\u00e0 b\u1ea1n ph\u1ea3i l\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 \u1ea3nh ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p c\u00f3 dung l\u01b0\u1ee3ng c\u00e0ng nh\u1ecf c\u00e0ng t\u1ed1t, v\u00ec \u1ea3nh n\u00e0y ch\u1ec9 \u0111\u00f3ng vai tr\u00f2 \u1ea3nh \u0111\u1ec7m, n\u00f3 ch\u1ec9 c\u1ea7n c\u00f3 c\u00e1c kh\u1ed1i h\u00ecnh m\u1edd m\u1edd l\u00e0 \u1ed5n r\u1ed3i.<\/p>\n\n\n<h3 class=\"wp-block-heading\">C\u00e1c m\u1eabu <em>srcset<\/em> transparent hi\u1ec7n \u0111\u1ea1i<\/h3>\n\n\n<p>K\u1ebft h\u1ee3p thu\u1ed9c t\u00ednh <em>src<\/em> th\u00f4ng th\u01b0\u1eddng v\u1edbi \u1ea3nh transparent (trong su\u1ed1t) ho\u1eb7c \u1ea3nh ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p b\u1eb1ng gi\u00e1 tr\u1ecb <em>srcset<\/em> v\u00e0 thu\u1ed9c t\u00ednh <em>data-srcset<\/em>. V\u1edbi c\u00e1ch n\u00e0y c\u00e1c tr\u00ecnh duy\u1ec7t hi\u1ec7n \u0111\u1ea1i s\u1ebd lazy load m\u00e0 kh\u00f4ng t\u1ea3i thu\u1ed9c t\u00ednh <em>src<\/em> v\u00e0 t\u1ea5t c\u1ea3 nh\u1eefng th\u1ee9 kh\u00e1c s\u1ebd ch\u1ec9 \u0111\u01a1n gi\u1ea3n l\u00e0 d\u1ef1 ph\u00f2ng cho thu\u1ed9c t\u00ednh <em>src<\/em> ban \u0111\u1ea7u (kh\u00f4ng c\u00f3 lazyload). M\u1eabu \u0111\u1eb9p m\u1eaft n\u00e0y c\u00f3 ngu\u1ed3n g\u1ed1c t\u1eeb t\u00e1c gi\u1ea3 @ivopetkov.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;img\n    src=\"image3.jpg\"\n    srcset=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\"\n\tdata-srcset=\"image3.jpg 600w,\n            image1.jpg 220w,\n\t    image2.jpg 300w,\n\t    image4.jpg 900w\"\n\tdata-sizes=\"auto\"\n\tclass=\"lazyload\" \/&gt;<\/code><\/pre>\n\n\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1eabu \u00e1p d\u1ee5ng \u1ea3nh trong su\u1ed1t: <a rel=\"noreferrer noopener\" href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-anh-trong-suot.html\" target=\"_blank\">https:\/\/static.kiencang.net\/2020\/lazysizes-anh-trong-suot.html<\/a> <\/p>\n\n\n<h3 class=\"wp-block-heading\">M\u1eabu m\u00e3 noscript<\/h3>\n\n\n<p>Trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n lo l\u1eafng v\u1ea5n \u0111\u1ec1 JavaScript b\u1ecb v\u00f4 hi\u1ec7u h\u00f3a, b\u1ea1n c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p m\u1eabu \u0111\u01a1n gi\u1ea3n d\u01b0\u1edbi \u0111\u00e2y v\u1edbi \u1ea3nh \u1edf b\u00ean trong ph\u1ea7n t\u1eed <em>noscript<\/em>.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n\t.no-js img.lazyload {\n    \tdisplay: none;\n    }\n&lt;\/style&gt;\n&lt;!-- noscript pattern --&gt;\n&lt;noscript&gt;\n\t&lt;img src=\"image.jpg\" \/&gt;\n&lt;\/noscript&gt;\n&lt;img src=\"transparent.jpg\" data-src=\"image.jpg\" class=\"lazyload\" \/&gt;<\/code><\/pre>\n\n\n<p>Nh\u01b0ng tr\u01b0\u1edbc h\u1ebft \u1edf th\u1ebb &lt;html&gt; b\u1ea1n c\u1ea7n th\u00eam class <em>no-js<\/em>:  <\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;html class=\"no-js\" lang=\"vi-VN\"&gt; <\/code><\/pre>\n\n\n<p>V\u00e0 th\u00eam \u0111o\u1ea1n m\u00e3 sau v\u00e0o trong &lt;head&gt; \u0111\u1ec3 lo\u1ea1i b\u1ecf class no-js trong tr\u01b0\u1eddng h\u1ee3p JavaScript \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;document.documentElement.classList.remove(\"no-js\");&lt;\/script&gt;<\/code><\/pre>\n\n\n<p>L\u01b0u \u00fd: c\u00f3 m\u1eabu noscript kh\u00e1c thay th\u1ebf, b\u1ea1n c\u00f3 th\u1ec3 xem th\u00eam t\u1ea1i \u0111\u00e2y <a href=\"https:\/\/github.com\/aFarkas\/lazysizes\/tree\/gh-pages\/plugins\/noscript\" target=\"_blank\" rel=\"noreferrer noopener\">extension noscript<\/a>.<\/p>\n\n\n<p>\u0110\u1ec3 gi\u1ea3 l\u1eadp vi\u1ec7c t\u1eaft JavaScript tr\u00ean tr\u00ecnh duy\u1ec7t Chrome b\u1ea1n l\u00e0m nh\u01b0 sau. Tr\u00ean thanh \u0111\u1ecba ch\u1ec9 b\u1ea1n copy \u0111o\u1ea1n n\u00e0y v\u00e0o r\u1ed3i nh\u1ea5n enter:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>chrome:\/\/settings\/content\/javascript<\/code><\/pre>\n\n\n<p>R\u1ed3i b\u1ea1n t\u1eaft JS nh\u01b0 h\u00ecnh d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/tat-JS.png\" alt=\"t\u1eaft JavaScript\" class=\"wp-image-15702\"\/><\/figure><\/div>\n\n\n<p>Khi v\u00f4 hi\u1ec7u h\u00f3a JS th\u00ec lazysies kh\u00f4ng th\u1ec3 ho\u1ea1t \u0111\u1ed9ng, trong tr\u01b0\u1eddng h\u1ee3p \u0111\u00f3 n\u1ebfu kh\u00f4ng c\u00f3 m\u00e3 d\u1ef1 ph\u00f2ng <em>&lt;noscript&gt;<\/em> th\u00ec \u1ea3nh tr\u00ean trang s\u1ebd b\u1ecb l\u1ed7i.<\/p>\n\n\n<p>N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng LQIP (<a rel=\"noreferrer noopener\" href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-demo-LQIP1.html\" target=\"_blank\">https:\/\/static.kiencang.net\/2020\/lazysizes-demo-LQIP1.html<\/a>), \u1ea3nh tr\u00ean trang ch\u1ec9 c\u00f2n hi\u1ec3u th\u1ecb \u1ea3nh m\u1edd, kh\u00f4ng c\u00f2n hi\u1ec3n th\u1ecb \u1ea3nh th\u1eadt ch\u1ea5t l\u01b0\u1ee3ng cao n\u1eefa, ki\u1ec3u nh\u01b0 th\u1ebf n\u00e0y:<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/loi-khong-javascript.png\" alt=\"l\u1ed7i kh\u00f4ng c\u00f3 javascript\" class=\"wp-image-15703\"\/><\/figure><\/div>\n\n\n<p>C\u00f2n v\u1edbi trang \u00e1p d\u1ee5ng lazyload th\u00f4ng th\u01b0\u1eddng (<a href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-demo1.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/static.kiencang.net\/2020\/lazysizes-demo1.html<\/a>), th\u1eadm ch\u00ed c\u00f2n m\u1ea5t lu\u00f4n \u1ea3nh:<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/anh-khong-hienthi.png\" alt=\"\u1ea3nh kh\u00f4ng hi\u1ec3n th\u1ecb do b\u1ecb v\u00f4 hi\u1ec7u h\u00f3a JavaScript\" class=\"wp-image-15704\"\/><\/figure><\/div>\n\n\n<p>M\u1eabu trang kh\u1eafc ph\u1ee5c hi\u1ec7n t\u01b0\u1ee3ng v\u00f4 hi\u1ec7u h\u00f3a JavaScript: <a href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-noscript.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/static.kiencang.net\/2020\/lazysizes-noscript.html<\/a> <\/p>\n\n\n<p>Hi\u1ec7n t\u01b0\u1ee3ng lazy load v\u1eabn b\u1ecb bi\u1ebfn m\u1ea5t tr\u00ean trang v\u00f4 hi\u1ec7u h\u00f3a JavaScript, noscript ch\u1ec9 gi\u00fap b\u1ea1n kh\u1eafc ph\u1ee5c hi\u1ec7n t\u01b0\u1ee3ng \u1ea3nh b\u1ecb m\u1ea5t. N\u1ebfu b\u1ea1n v\u1eabn mu\u1ed1n lazy load \u1ea3nh tr\u00ean trang b\u1ecb v\u00f4 hi\u1ec7u h\u00f3a JS, ch\u1ec9 c\u00f3 c\u00e1ch s\u1eed d\u1ee5ng <a href=\"https:\/\/kiencang.net\/native-lazy-loading-cho-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">lazy load c\u1ea5p \u0111\u1ed9 tr\u00ecnh duy\u1ec7t (native lazy loading)<\/a>.<\/p>\n\n\n<p>P\/S: Chuy\u1ec7n b\u1ecb v\u00f4 hi\u1ec7u h\u00f3a JavaScript r\u1ea5t nghi\u00eam tr\u1ecdng do tr\u00ean th\u1ef1c t\u1ebf r\u1ea5t nhi\u1ec1u trang web s\u1eed d\u1ee5ng JS nh\u01b0 m\u1ed9t ch\u1ee9c n\u0103ng thi\u1ebft y\u1ebfu. N\u00f3i c\u00e1ch kh\u00e1c, vi\u1ec7c v\u00f4 hi\u1ec7u h\u00f3a JS g\u1ea7n nh\u01b0 kh\u00f4ng th\u1ec3 x\u1ea3y ra, ch\u00ednh x\u00e1c h\u01a1n: r\u1ea5t hi\u1ebfm ng\u01b0\u1eddi l\u00e0m nh\u01b0 v\u1eady.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Thu\u1ed9c t\u00ednh [data-expand]<\/h3>\n\n\n<p>Th\u00f4ng th\u01b0\u1eddng lazysizes s\u1ebd m\u1edf r\u1ed9ng khung nh\u00ecn tr\u00ecnh duy\u1ec7t \u0111\u1ec3 t\u1ea3i l\u01b0\u1eddi tr\u01b0\u1edbc c\u00e1c \u1ea3nh\/iframe &#8211; l\u00e0 nh\u1eefng th\u00e0nh ph\u1ea7n m\u00e0 s\u1ebd s\u1edbm \u0111i v\u00e0o khung nh\u00ecn tr\u00ecnh duy\u1ec7t. Gi\u00e1 tr\u1ecb n\u00e0y c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u0111i\u1ec1u ch\u1ec9nh b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng t\u00f9y ch\u1ecdn <em>expand<\/em> (b\u1ea1n xem ph\u1ea7n 2 \u0111\u1ec3 bi\u1ebft c\u00e1ch d\u00f9ng gi\u00e1 tr\u1ecb n\u00e0y).<\/p>\n\n\n<p>Ngo\u00e0i ra t\u00f9y ch\u1ecdn chung n\u00e0y c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c ghi \u0111\u00e8 v\u1edbi thu\u1ed9c t\u00ednh <em>data-expand<\/em> cho t\u1eebng ph\u1ea7n t\u1eed. \u0110i\u1ec3m kh\u00e1c bi\u1ec7t so v\u1edbi t\u00f9y ch\u1ecdn chung <em>expand<\/em> l\u00e0 thu\u1ed9c t\u00ednh <em>data-expand<\/em> ch\u1ea5p nh\u1eadn gi\u00e1 tr\u1ecb \u00e2m (T\u1ea5t c\u1ea3 c\u00e1c gi\u00e1 tr\u1ecb, bao g\u1ed3m c\u1ea3 0).<\/p>\n\n\n<p>\u0110i\u1ec1u n\u00e0y \u0111\u1eb7c bi\u1ec7t h\u1eefu \u00edch trong m\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n.lazyload,\n.lazyloading {\n\topacity: 0;\n}\n.lazyloaded {\n\topacity: 1;\n\ttransition: opacity 300ms;\n}\n&lt;\/style&gt;\n&lt;div class=\"teaser lazyload\" data-expand=\"-20\"&gt;\n    &lt;img data-src=\"image.jpg\" class=\"lazyload\" \/&gt;\n    &lt;h1&gt;Teaser Title&lt;\/h1&gt;\n    &lt;p&gt;...&lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n<p>T\u00f4i c\u00f3 th\u1eed v\u1edbi data-expand, nh\u01b0ng l\u00e0m sai g\u00ec \u0111\u00f3 kh\u00f4ng r\u00f5 n\u00ean kh\u00f4ng th\u1ea5y kh\u00e1c bi\u1ec7t l\u1eafm so v\u1edbi kh\u00f4ng d\u00f9ng: <a rel=\"noreferrer noopener\" href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-data-expand.html\" target=\"_blank\">https:\/\/static.kiencang.net\/2020\/lazysizes-data-expand.html<\/a><\/p>\n\n\n<p>\u1ede ph\u1ea7n 2, t\u00f4i c\u00f3 nhi\u1ec1u v\u00ed d\u1ee5 v\u1ec1 expand, v\u00e0 n\u00f3 ho\u1ea1t \u0111\u1ed9ng r\u1ea5t t\u1ed1t.<\/p>\n\n\n<h3 class=\"wp-block-heading\">CSS API<\/h3>\n\n\n<p>lazysizes th\u00eam class c\u00f3 t\u00ean <em>lazyloading<\/em> trong khi \u1ea3nh t\u1ea3i v\u1ec1 v\u00e0 th\u00eam class <em>lazyloaded <\/em>s\u1edbm nh\u1ea5t c\u00f3 th\u1ec3 sau khi \u1ea3nh \u0111\u01b0\u1ee3c t\u1ea3i xong. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 th\u00eam c\u00e1c hi\u1ec7u \u1ee9ng unveil (t\u1ea1m d\u1ecbch: v\u00e9n m\u00e0n, ti\u1ebft l\u1ed9, \u00fd ch\u1ec9 vi\u1ec7c th\u1ec3 hi\u1ec7n \u1ea3nh th\u1ef1c c\u1ea7n lazy load):<\/p>\n\n\n<pre class=\"wp-block-code\"><code>\/* l\u00e0m m\u1edd \u1ea3nh sau khi t\u1ea3i *\/\n.lazyload,\n.lazyloading {\n\topacity: 0;\n}\n.lazyloaded {\n\topacity: 1;\n\ttransition: opacity 300ms;\n}<\/code><\/pre>\n\n\n<p>M\u1eabu trang \u00e1p d\u1ee5ng cho v\u00ed d\u1ee5 tr\u00ean: <a href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-css-api1.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/static.kiencang.net\/2020\/lazysizes-css-api1.html<\/a><\/p>\n\n\n<pre class=\"wp-block-code\"><code>\/* l\u00e0m m\u1edd \u1ea3nh trong khi t\u1ea3i v\u00e0 hi\u1ec3n th\u1ecb m\u1ed9t spinner \u0111ang t\u1ea3i d\u01b0\u1edbi d\u1ea1ng \u1ea3nh background (t\u1ed1t cho c\u00e1c \u1ea3nh d\u1ea1ng progressive) *\/\n.lazyload {\n\topacity: 0;\n}\n.lazyloading {\n\topacity: 1;\n\ttransition: opacity 300ms;\n\tbackground: #f7f7f7 url(loader.gif) no-repeat center;\n}<\/code><\/pre>\n\n\n<p>M\u1eabu trang \u00e1p d\u1ee5ng cho v\u00ed d\u1ee5 tr\u00ean: <a href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-css-api2.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/static.kiencang.net\/2020\/lazysizes-css-api2.html<\/a><\/p>\n\n\n<p>C\u00e1i <em>loader.gif<\/em> l\u00e0 \u1ea3nh \u0111\u1ed9ng GIF \u0111\u1ec3 cho bi\u1ebft \u1ea3nh \u0111ang t\u1ea3i, n\u00f3 ch\u00ednh l\u00e0 c\u00e1i n\u00e0y: <a rel=\"noreferrer noopener\" href=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/loading.gif\" target=\"_blank\">loading.gif<\/a> (ch\u1ec9 c\u00f3 \u0111i\u1ec1u \u1ea3nh GIF \u0111ang d\u00f9ng h\u01a1i n\u1eb7ng, b\u1ea1n n\u00ean s\u1eed d\u1ee5ng c\u00e1i c\u00f3 dung l\u01b0\u1ee3ng nh\u1ecf h\u01a1n, ch\u1eb3ng h\u1ea1n nh\u01b0 c\u00e1i n\u00e0y: <a rel=\"noreferrer noopener\" href=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/small-loading.gif\" target=\"_blank\">small-loading.gif<\/a>).<\/p>\n\n\n<p>K\u1ebft qu\u1ea3 l\u00e0 n\u1ebfu ng\u01b0\u1eddi d\u00f9ng \u0111i \u0111\u1ebfn ph\u1ea7n \u1ea3nh \u0111ang t\u1ea3i, n\u00f3 s\u1ebd tr\u00f4ng gi\u1ed1ng th\u1ebf n\u00e0y:<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/hieu-ung-loading.png\" alt=\"\u1ea3nh \u0111ang t\u1ea3i\" class=\"wp-image-15725\"\/><\/figure><\/div>\n\n\n<p>Ti\u1ec7n th\u1ec3 t\u00f4i l\u00e0m lu\u00f4n m\u1eabu d\u00e0nh cho c\u00e1i small loading (v\u1edbi transition 300 ms): <a rel=\"noreferrer noopener\" href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-css-api3.html\" target=\"_blank\">https:\/\/static.kiencang.net\/2020\/lazysizes-css-api3.html<\/a> (tr\u00f4ng \u0111\u1eb9p h\u01a1n th\u1eadt).<\/p>\n\n\n<p>V\u1edbi transition 2000 ms, k\u1ebft qu\u1ea3 tr\u00f4ng c\u0169ng kh\u00f4ng kh\u00e1c m\u00e1y: <a href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-css-api4.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/static.kiencang.net\/2020\/lazysizes-css-api4.html<\/a><\/p>\n\n\n<p>P\/S: H\u1ea7u h\u1ebft c\u00e1c \u1ea3nh s\u1ebd t\u1ea3i nhanh \u0111\u1ebfn n\u1ed7i m\u00e0 b\u1ea1n kh\u00f3 nh\u1eadn ra bi\u1ec3u t\u01b0\u1ee3ng c\u1ee7a loading, ch\u1ec9 tr\u1eeb c\u00e1c \u1ea3nh n\u1eb7ng, ho\u1eb7c tr\u00ean k\u1ebft n\u1ed1i ch\u1eadm m\u1edbi th\u1ea5y.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Bi\u1ec3u t\u01b0\u1ee3ng cho \u1ea3nh b\u1ecb h\u1ecfng<\/h3>\n\n\n<p>Trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n \u0111ang s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <em>alt<\/em> nh\u01b0ng kh\u00f4ng khai b\u00e1o thu\u1ed9c t\u00ednh <em>src<\/em> \/ <em>srcset<\/em> h\u1ec7 qu\u1ea3 l\u00e0 b\u1ea1n s\u1ebd nh\u1eadn \u0111\u01b0\u1ee3c m\u1ed9t bi\u1ec3u t\u01b0\u1ee3ng l\u00e0 h\u00ecnh \u1ea3nh b\u1ecb h\u1ecfng. <\/p>\n\n\n<p>C\u00f3 hai c\u00e1ch \u0111\u01a1n gi\u1ea3n \u0111\u1ec3 x\u1eed l\u00fd \u0111i\u1ec1u \u0111\u00f3.<\/p>\n\n\n<p>Ho\u1eb7c b\u1ea1n x\u00e1c \u0111\u1ecbnh src b\u1eb1ng \u1ea3nh base64 ki\u1ec3u nh\u01b0:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\"<\/code><\/pre>\n\n\n<p>Ho\u1eb7c b\u1ea1n th\u00eam \u0111o\u1ea1n m\u00e3 CSS sau:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>img.lazyload:not(&#91;src]) {\n\tvisibility: hidden;\n}<\/code><\/pre>\n\n\n<p>(M\u1eddi b\u1ea1n \u0111\u1ecdc <a href=\"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p2\/\" target=\"_blank\" rel=\"noreferrer noopener\">ti\u1ebfp ph\u1ea7n 2<\/a>)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>V\u00e0i l\u1eddi c\u1ee7a ng\u01b0\u1eddi d\u1ecbch: Nh\u1edd b\u00e0i vi\u1ebft v\u1ec1 c\u00e1ch lazy load \u1ea3nh v\u00e0 video (c\u00f3 n\u1ed9i dung r\u1ea5t c\u0103n b\u1ea3n) t\u00f4i bi\u1ebft \u0111\u1ebfn c\u00f4ng c\u1ee5 lazysizes.js (c\u1ee7a t\u00e1c gi\u1ea3 c\u00f3 nickname aFarkas), n\u00f3 \u0111\u01b0\u1ee3c khen ng\u1ee3i nhi\u1ec1u (r\u1ea5t hay \u0111\u01b0\u1ee3c nh\u1eafc t\u00ean trong c\u00e1c t\u00e0i li\u1ec7u h\u01b0\u1edbng d\u1eabn t\u0103ng t\u1ed1c c\u1ee7a Google), do \u0111\u00f3 &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[274,275],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Gi\u1edbi thi\u1ec7u th\u01b0 vi\u1ec7n lazysizes.js \u0111\u1ec3 lazy load \u1ea3nh (ph\u1ea7n 1) &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"description\" content=\"Lazysizes l\u00e0 m\u1ed9t trong c\u00e1c th\u01b0 vi\u1ec7n JavaScript ch\u1ea5t l\u01b0\u1ee3ng cao d\u00f9ng \u0111\u1ec3 lazy load \u1ea3nh v\u00e0 video. N\u00f3 c\u00f3 \u0111\u1ea7y \u0111\u1ee7 t\u00ednh n\u0103ng, hi\u1ec7u su\u1ea5t cao v\u00e0 th\u00e2n thi\u1ec7n v\u1edbi SEO.\" \/>\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-js-lazy-load-anh-p1\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gi\u1edbi thi\u1ec7u th\u01b0 vi\u1ec7n lazysizes.js \u0111\u1ec3 lazy load \u1ea3nh (ph\u1ea7n 1) &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"Lazysizes l\u00e0 m\u1ed9t trong c\u00e1c th\u01b0 vi\u1ec7n JavaScript ch\u1ea5t l\u01b0\u1ee3ng cao d\u00f9ng \u0111\u1ec3 lazy load \u1ea3nh v\u00e0 video. N\u00f3 c\u00f3 \u0111\u1ea7y \u0111\u1ee7 t\u00ednh n\u0103ng, hi\u1ec7u su\u1ea5t cao v\u00e0 th\u00e2n thi\u1ec7n v\u1edbi SEO.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p1\/\" \/>\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-01T10:55:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/kiem-tra-lazy-load-tren-chrome.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=\"21 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gi\u1edbi thi\u1ec7u th\u01b0 vi\u1ec7n lazysizes.js \u0111\u1ec3 lazy load \u1ea3nh (ph\u1ea7n 1) &#8226; Ki\u1ebfn c\u00e0ng","description":"Lazysizes l\u00e0 m\u1ed9t trong c\u00e1c th\u01b0 vi\u1ec7n JavaScript ch\u1ea5t l\u01b0\u1ee3ng cao d\u00f9ng \u0111\u1ec3 lazy load \u1ea3nh v\u00e0 video. N\u00f3 c\u00f3 \u0111\u1ea7y \u0111\u1ee7 t\u00ednh n\u0103ng, hi\u1ec7u su\u1ea5t cao v\u00e0 th\u00e2n thi\u1ec7n v\u1edbi SEO.","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-js-lazy-load-anh-p1\/","og_locale":"vi_VN","og_type":"article","og_title":"Gi\u1edbi thi\u1ec7u th\u01b0 vi\u1ec7n lazysizes.js \u0111\u1ec3 lazy load \u1ea3nh (ph\u1ea7n 1) &#8226; Ki\u1ebfn c\u00e0ng","og_description":"Lazysizes l\u00e0 m\u1ed9t trong c\u00e1c th\u01b0 vi\u1ec7n JavaScript ch\u1ea5t l\u01b0\u1ee3ng cao d\u00f9ng \u0111\u1ec3 lazy load \u1ea3nh v\u00e0 video. N\u00f3 c\u00f3 \u0111\u1ea7y \u0111\u1ee7 t\u00ednh n\u0103ng, hi\u1ec7u su\u1ea5t cao v\u00e0 th\u00e2n thi\u1ec7n v\u1edbi SEO.","og_url":"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p1\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2020-04-01T10:55:25+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/kiem-tra-lazy-load-tren-chrome.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":"21 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p1\/","url":"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p1\/","name":"Gi\u1edbi thi\u1ec7u th\u01b0 vi\u1ec7n lazysizes.js \u0111\u1ec3 lazy load \u1ea3nh (ph\u1ea7n 1) &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2020-04-01T10:55:25+00:00","dateModified":"2020-04-01T10:55:25+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"description":"Lazysizes l\u00e0 m\u1ed9t trong c\u00e1c th\u01b0 vi\u1ec7n JavaScript ch\u1ea5t l\u01b0\u1ee3ng cao d\u00f9ng \u0111\u1ec3 lazy load \u1ea3nh v\u00e0 video. N\u00f3 c\u00f3 \u0111\u1ea7y \u0111\u1ee7 t\u00ednh n\u0103ng, hi\u1ec7u su\u1ea5t cao v\u00e0 th\u00e2n thi\u1ec7n v\u1edbi SEO.","breadcrumb":{"@id":"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p1\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p1\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"Gi\u1edbi thi\u1ec7u th\u01b0 vi\u1ec7n lazysizes.js \u0111\u1ec3 lazy load \u1ea3nh (ph\u1ea7n 1)"}]},{"@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\/16869"}],"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=16869"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16869\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=16869"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=16869"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=16869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}