{"id":16868,"date":"2022-01-29T17:51:00","date_gmt":"2022-01-29T10:51:00","guid":{"rendered":"https:\/\/kiencang.net\/?p=15538"},"modified":"2023-08-22T23:13:08","modified_gmt":"2023-08-22T16:13:08","slug":"lazy-load-anh-va-video","status":"publish","type":"post","link":"https:\/\/kiencang.net\/lazy-load-anh-va-video\/","title":{"rendered":"Lazy load l\u00e0 g\u00ec: C\u00e1ch tri\u1ec3n khai lazy load \u1ea3nh v\u00e0 video tr\u00ean website"},"content":{"rendered":"\n<p><strong>V\u00e0i l\u1eddi c\u1ee7a ng\u01b0\u1eddi d\u1ecbch<\/strong>: B\u00e0i vi\u1ebft n\u00e0y ch\u1ee7 y\u1ebfu d\u00e0nh cho nh\u1eefng ai mu\u1ed1n t\u00ecm hi\u1ec3u s\u00e2u h\u01a1n v\u1ec1 lazy load, n\u00f3 \u0111\u00f2i h\u1ecfi b\u1ea1n ph\u1ea3i c\u00f3 hi\u1ec3u bi\u1ebft nh\u1ea5t \u0111\u1ecbnh v\u1ec1 HTML, JavaScript, CSS. V\u1edbi nh\u1eefng ai \u0111\u01a1n thu\u1ea7n ch\u1ec9 mu\u1ed1n \u00e1p d\u1ee5ng lazy load l\u00ean trang WordPress, c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u c\u00e1c plugin s\u1eb5n c\u00f3 ch\u1ea5t l\u01b0\u1ee3ng nh\u01b0 <a href=\"https:\/\/kiencang.net\/plugin-flying-images\/\" target=\"_blank\" rel=\"noreferrer noopener\">Flying Images<\/a>, <a href=\"https:\/\/kiencang.net\/gioi-thieu-plugin-a3-lazy-load\/\" target=\"_blank\" rel=\"noreferrer noopener\">a3 Lazy Load<\/a>, ho\u1eb7c s\u1eb5n c\u00f3 trong plugin cache, v\u00e2n v\u00e2n. Nh\u00ecn chung t\u00f4i \u1ee7ng h\u1ed9 t\u00ednh n\u0103ng lazy load, nh\u01b0ng nh\u01b0 m\u1ed9t c\u00e1ch t\u1ef1 ph\u1ea3n bi\u1ec7n, t\u00f4i ch\u1ee7 \u0111\u1ed9ng t\u00ecm hi\u1ec3u c\u00e1c \u0111i\u1ec3m y\u1ebfu c\u1ee7a n\u00f3, ch\u1eb3ng h\u1ea1n <a href=\"https:\/\/kiencang.net\/khong-nen-dung-lazy-load\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u1edf \u0111\u00e2y<\/a> v\u00e0 <a href=\"https:\/\/kiencang.net\/khong-nen-su-dung-lazy-load-anh-tren-thiet-bi-di-dong\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u1edf \u0111\u00e2y<\/a> v\u00e0 <a href=\"https:\/\/kiencang.net\/lazy-load-anh-khong-hap-dan\/\" target=\"_blank\" rel=\"noreferrer noopener\">c\u1ea3 \u0111\u00e2y n\u1eefa<\/a>.<\/p>\n\n\n\n<p><strong>L\u01b0u \u00fd<\/strong>: Hi\u1ec7n b\u1ea1n \u0111\u00e3 c\u00f3 th\u1ec3 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<\/a> (native lazy loading)! B\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o link v\u1eeba d\u1eabn \u0111\u1ec3 bi\u1ebft c\u00e1ch s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <em>loading<\/em> v\u00e0 t\u1eadn d\u1ee5ng th\u01b0 vi\u1ec7n c\u1ee7a b\u00ean th\u1ee9 ba \u0111\u00f3ng vai tr\u00f2 nh\u01b0 m\u1ed9t d\u1ef1 ph\u00f2ng (fallback) cho c\u00e1c tr\u00ecnh duy\u1ec7t v\u1eabn ch\u01b0a h\u1ed7 tr\u1ee3 thu\u1ed9c t\u00ednh n\u00e0y.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>Th\u00e0nh ph\u1ea7n <a href=\"http:\/\/beta.httparchive.org\/reports\/state-of-images?start=earliest&amp;end=latest\" target=\"_blank\" rel=\"noreferrer noopener\">\u1ea3nh<\/a> v\u00e0 <a href=\"http:\/\/beta.httparchive.org\/reports\/page-weight#bytesVideo\" target=\"_blank\" rel=\"noreferrer noopener\">video<\/a> tr\u00ean website th\u01b0\u1eddng chi\u1ebfm m\u1ed9t l\u01b0\u1ee3ng d\u1eef li\u1ec7u t\u1ea3i v\u1ec1 l\u1edbn. Kh\u00f4ng may l\u00e0 c\u00e1c b\u00ean li\u00ean quan \u0111\u1ebfn d\u1ef1 \u00e1n c\u00f3 th\u1ec3 kh\u00f4ng th\u00edch c\u1eaft gi\u1ea3m b\u1ea5t c\u1ee9 t\u00e0i nguy\u00ean media (\u0111a ph\u01b0\u01a1ng ti\u1ec7n) n\u00e0o t\u1eeb c\u00e1c \u1ee9ng d\u1ee5ng \u0111\u00e3 c\u00f3 c\u1ee7a h\u1ecd. T\u00ecnh hu\u1ed1ng b\u1ebf t\u1eafc nh\u01b0 v\u1eady g\u00e2y b\u1ef1c b\u1ed9i, \u0111\u1eb7c bi\u1ec7t khi t\u1ea5t c\u1ea3 m\u1ecdi ng\u01b0\u1eddi \u0111\u1ec1u mu\u1ed1n c\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t v\u00e0 t\u1ed1c \u0111\u1ed9, nh\u01b0ng l\u1ea1i kh\u00f4ng \u0111\u1ed3ng thu\u1eadn v\u1ec1 c\u00e1ch \u0111\u1ec3 \u0111\u1ea1t \u0111\u01b0\u1ee3c \u0111i\u1ec1u \u0111\u00f3. May thay, lazy load l\u00e0 gi\u1ea3i ph\u00e1p gi\u00fap b\u1ea1n c\u00f3 \u0111\u01b0\u1ee3c dung l\u01b0\u1ee3ng trang c\u1ea7n ph\u1ea3i t\u1ea3i l\u1ea7n \u0111\u1ea7u (initial page payload)* th\u1ea5p v\u00e0 th\u1eddi gian t\u1ea3i l\u1ea7n \u0111\u1ea7u ng\u1eafn h\u01a1n, nh\u01b0ng kh\u00f4ng b\u1eaft b\u1ea1n ph\u1ea3i c\u1eaft b\u1ecf n\u1ed9i dung.<\/p>\n\n\n\n<p>(*) initial page payload: dung l\u01b0\u1ee3ng trang t\u1ea3i l\u1ea7n \u0111\u1ea7u. T\u1eeb kh\u00f3a \u1edf \u0111\u00e2y l\u00e0 initial\/l\u1ea7n \u0111\u1ea7u. C\u00e1c trang kh\u00f4ng lazy load th\u00ec trang s\u1ebd t\u1ea3i m\u1ed9t l\u01b0\u1ee3t t\u1ea5t c\u1ea3 c\u00e1c t\u00e0i nguy\u00ean tr\u00ean trang, c\u00f2n v\u1edbi trang \u00e1p d\u1ee5ng lazy load, n\u1ed9i dung c\u1ee7a trang s\u1ebd kh\u00f4ng t\u1ea3i m\u1ed9t l\u01b0\u1ee3t t\u1ea5t c\u1ea3, m\u00e0 n\u00f3 s\u1ebd \u0111\u01b0\u1ee3c chia l\u00e0m nhi\u1ec1u l\u1ea7n, c\u00e1c n\u1ed9i dung lazy load s\u1ebd t\u1ea3i sau khi \u0111\u1ea1t \u0111i\u1ec1u ki\u1ec7n k\u00edch ho\u1ea1t (trigger).<\/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-6577d630ed7a4\" ><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-6577d630ed7a4\"  type=\"checkbox\" id=\"item-6577d630ed7a4\"><\/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\/lazy-load-anh-va-video\/#Lazy_load_la_gi\" title=\"Lazy load l\u00e0 g\u00ec?\">Lazy load l\u00e0 g\u00ec?<\/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\/lazy-load-anh-va-video\/#Tai_sao_lai_can_lazy_load_anh_hoac_video_ma_khong_tai_chung_luon_cho_roi\" title=\"T\u1ea1i sao l\u1ea1i c\u1ea7n lazy load \u1ea3nh ho\u1eb7c video m\u00e0 kh\u00f4ng t\u1ea3i ch\u00fang lu\u00f4n cho r\u1ed3i?\">T\u1ea1i sao l\u1ea1i c\u1ea7n lazy load \u1ea3nh ho\u1eb7c video m\u00e0 kh\u00f4ng t\u1ea3i ch\u00fang lu\u00f4n cho r\u1ed3i?<\/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\/lazy-load-anh-va-video\/#Lazy_load_anh\" title=\"Lazy load \u1ea3nh\">Lazy load \u1ea3nh<\/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\/lazy-load-anh-va-video\/#Lazy_load_video\" title=\"Lazy load video\">Lazy load video<\/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\/lazy-load-anh-va-video\/#Cac_thu_vien_lazy_load\" title=\"C\u00e1c th\u01b0 vi\u1ec7n lazy load\">C\u00e1c th\u01b0 vi\u1ec7n lazy load<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/kiencang.net\/lazy-load-anh-va-video\/#Rac_roi_nao_co_the_xay_ra\" title=\"R\u1eafc r\u1ed1i n\u00e0o c\u00f3 th\u1ec3 x\u1ea3y ra\">R\u1eafc r\u1ed1i n\u00e0o c\u00f3 th\u1ec3 x\u1ea3y ra<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/kiencang.net\/lazy-load-anh-va-video\/#Ket_luan\" title=\"K\u1ebft lu\u1eadn\">K\u1ebft lu\u1eadn<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\" id=\"lazy-load-la-gi\"><span class=\"ez-toc-section\" id=\"Lazy_load_la_gi\"><\/span>Lazy load l\u00e0 g\u00ec?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Lazy load l\u00e0 k\u1ef9 thu\u1eadt th\u1ef1c hi\u1ec7n tr\u00ec ho\u00e3n (defer) t\u1ea3i c\u00e1c t\u00e0i nguy\u00ean kh\u00f4ng quan tr\u1ecdng (non-critical resoureces) v\u00e0o th\u1eddi \u0111i\u1ec3m t\u1ea3i trang (page load time). Thay v\u00ec t\u1ea3i ngay l\u1eadp t\u1ee9c, c\u00e1c t\u00e0i nguy\u00ean kh\u00f4ng quan tr\u1ecdng n\u00e0y ch\u1ec9 t\u1ea3i v\u00e0o th\u1eddi \u0111i\u1ec3m c\u1ea7n thi\u1ebft (moment of need). Khi \u0111\u1ec1 c\u1eadp \u0111\u1ebfn \u1ea3nh, th\u00ec &#8220;kh\u00f4ng quan tr\u1ecdng&#8221; th\u01b0\u1eddng \u0111\u1ed3ng ngh\u0129a v\u1edbi &#8220;<a href=\"https:\/\/kiencang.net\/uu-tien-noi-dung-hien-thi\/\" target=\"_blank\" rel=\"noreferrer noopener\">ngo\u00e0i m\u00e0n h\u00ecnh \/ off-screen<\/a>&#8220;. N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng Lighthouse v\u00e0 ki\u1ec3m tra m\u1ed9t s\u1ed1 c\u01a1 h\u1ed9i c\u1ea3i thi\u1ec7n, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y v\u00e0i h\u01b0\u1edbng d\u1eabn trong \u0111\u1ecba h\u1ea1t n\u00e0y \u1edf d\u1ea1ng ki\u1ec3m tra c\u00e1c \u1ea3nh ngo\u00e0i m\u00e0n h\u00ecnh:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/kiem-tra-anh-ngoai-man-hinh.png\" alt=\"ki\u1ec3m tra \u1ea3nh ngo\u00e0i m\u00e0n h\u00ecnh\" class=\"wp-image-15544\"\/><\/figure>\n\n\n\n<p><strong>H\u00ecnh 1<\/strong>. M\u1ed9t ki\u1ec3m tra hi\u1ec7u su\u1ea5t c\u1ee7a Lighthouse x\u00e1c \u0111\u1ecbnh c\u00e1c \u1ea3nh ngo\u00e0i m\u00e0n h\u00ecnh, nh\u1eefng c\u00e1i l\u00e0 \u1ee9ng c\u1eed vi\u00ean ti\u1ec1m n\u0103ng \u00e1p d\u1ee5ng lazy load.<\/p>\n\n\n\n<p>B\u1ea1n c\u00f3 kh\u1ea3 n\u0103ng \u0111\u00e3 th\u1ea5y lazy load trong th\u1ef1c t\u1ebf r\u1ed3i, v\u00e0 n\u00f3 di\u1ec5n ra nh\u01b0 th\u1ebf n\u00e0y:<\/p>\n\n\n\n<ul>\n<li>B\u1ea1n truy c\u1eadp m\u1ed9t trang, v\u00e0 b\u1eaft \u0111\u1ea7u cu\u1ed9n chu\u1ed9t trong qu\u00e1 tr\u00ecnh \u0111\u1ecdc n\u1ed9i dung.<\/li>\n\n\n\n<li>\u0110\u1ebfn \u0111i\u1ec3m n\u00e0o \u0111\u00f3, b\u1ea1n cu\u1ed9n chu\u1ed9t \u0111\u1ebfn m\u1ed9t \u1ea3nh ch\u1edd s\u1eb5n\/gi\u1eef ch\u1ed7 (placeholder image) b\u00ean trong viewport (khung nh\u00ecn tr\u00ecnh duy\u1ec7t)**.<\/li>\n\n\n\n<li>\u1ea2nh ch\u1edd s\u1eb5n n\u00e0y \u0111\u1ed9t nhi\u00ean \u0111\u01b0\u1ee3c thay th\u1ebf b\u1eb1ng \u1ea3nh cu\u1ed1i c\u00f9ng (\u1ea3nh th\u1ef1c m\u00e0 b\u1ea1n mu\u1ed1n ng\u01b0\u1eddi d\u00f9ng xem).<\/li>\n<\/ul>\n\n\n\n<p>(**): Trong b\u00e0i vi\u1ebft n\u00e0y, ng\u01b0\u1eddi d\u1ecbch s\u1eed d\u1ee5ng song song viewport v\u00e0 khung nh\u00ecn tr\u00ecnh duy\u1ec7t, ch\u00fang c\u00f3 ngh\u0129a t\u01b0\u01a1ng \u0111\u01b0\u01a1ng.<\/p>\n\n\n\n<p>M\u1ed9t v\u00ed d\u1ee5 v\u1ec1 lazy load \u1ea3nh m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 t\u00ecm th\u1ea5y d\u1ec5 d\u00e0ng ch\u00ednh l\u00e0 c\u00e1c n\u1ec1n t\u1ea3ng xu\u1ea5t b\u1ea3n ph\u1ed5 bi\u1ebfn (popular publishing platform), ch\u1eb3ng h\u1ea1n nh\u01b0 <a href=\"https:\/\/medium.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Medium<\/a>, n\u00f3 ch\u1ec9 t\u1ea3i m\u1ed9t \u1ea3nh chi\u1ebfm ch\u1ed7 nh\u1eb9 nh\u00e0ng (lightweight) v\u00e0o th\u1eddi \u0111i\u1ec3m t\u1ea3i trang, v\u00e0 thay th\u1ebf ch\u00fang b\u1eb1ng c\u00e1c \u1ea3nh th\u1ef1c (c\u1ea7n lazy load) khi ch\u00fang \u0111\u01b0\u1ee3c cu\u1ed9n chu\u1ed9t \u0111\u1ebfn v\u00e0 n\u1eb1m trong (ho\u1eb7c g\u1ea7n) ph\u1ea7n viewport c\u1ee7a ng\u01b0\u1eddi d\u00f9ng. (V\u00ed d\u1ee5 demo na n\u00e1 medium: <a href=\"https:\/\/static.kiencang.net\/2020\/lazysizes-demo-LQIP1.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/static.kiencang.net\/2020\/lazysizes-demo-LQIP1.html<\/a>)<\/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\/vi-du-ve-lazy-load.jpg\" alt=\"v\u00ed d\u1ee5 v\u1ec1 lazy load \u1ea3nh\" class=\"wp-image-15546\"\/><\/figure><\/div>\n\n\n<p><strong>H\u00ecnh 2<\/strong>. M\u1ed9t v\u00ed d\u1ee5 v\u1ec1 lazy load \u1ea3nh trong th\u1ef1c t\u1ebf. M\u1ed9t \u1ea3nh chi\u1ebfm ch\u1ed7 \u0111\u01b0\u1ee3c t\u1ea3i \u1edf b\u00ean tr\u00e1i v\u00e0o th\u1eddi \u0111i\u1ec3m t\u1ea3i trang, v\u00e0 khi \u0111\u01b0\u1ee3c cu\u1ed9n \u0111\u1ebfn viewport, \u1ea3nh cu\u1ed1i c\u00f9ng (\u1ea3nh th\u1ef1c) \u0111\u01b0\u1ee3c t\u1ea3i v\u00e0o th\u1eddi \u0111i\u1ec3m ph\u00f9 h\u1ee3p \u0111\u1ec3 thay th\u1ebf \u1ea3nh chi\u1ebfm ch\u1ed7.<\/p>\n\n\n\n<p>N\u1ebfu b\u1ea1n kh\u00f4ng quen thu\u1ed9c v\u1edbi lazy load, b\u1ea1n c\u00f3 th\u1ec3 t\u1ef1 h\u1ecfi l\u1ee3i \u00edch c\u1ee7a k\u1ef9 thu\u1eadt n\u00e0y l\u00e0 g\u00ec. H\u00e3y \u0111\u1ecdc ti\u1ebfp \u0111\u1ec3 bi\u1ebft nh\u00e9!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"t\u1ea1i-sao-l\u1ea1i-c\u1ea7n-lazy-load-\u1ea3nh-ho\u1eb7c-video-ma-khong-t\u1ea3i-chung-luon-cho-r\u1ed3i\"><span class=\"ez-toc-section\" id=\"Tai_sao_lai_can_lazy_load_anh_hoac_video_ma_khong_tai_chung_luon_cho_roi\"><\/span>T\u1ea1i sao l\u1ea1i c\u1ea7n lazy load \u1ea3nh ho\u1eb7c video m\u00e0 kh\u00f4ng <em>t\u1ea3i<\/em> ch\u00fang lu\u00f4n cho r\u1ed3i?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>B\u1edfi v\u00ec c\u00f3 kh\u1ea3 n\u0103ng l\u00e0 b\u1ea1n \u0111ang t\u1ea3i v\u1ec1 c\u00e1c th\u00e0nh ph\u1ea7n tr\u00ean trang m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 <em>kh\u00f4ng bao gi\u1edd nh\u00ecn \u0111\u1ebfn<\/em>. \u0110i\u1ec1u n\u00e0y l\u00e0 v\u1ea5n \u0111\u1ec1 v\u00ec hai l\u00fd do sau:<\/p>\n\n\n\n<ul>\n<li><strong>N\u00f3 l\u00e0 s\u1ef1 l\u00e3ng ph\u00ed d\u1eef li\u1ec7u<\/strong>. Tr\u00ean c\u00e1c ki\u1ec3u k\u1ebft n\u1ed1i b\u0103ng th\u00f4ng kh\u00f4ng gi\u1edbi h\u1ea1n (unmetered), \u0111i\u1ec1u t\u1ed3i t\u1ec7 nh\u1ea5t c\u00f3 th\u1ec3 v\u1eabn ch\u01b0a x\u1ea3y ra \u0111\u00e2u (d\u00f9 b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng l\u01b0\u1ee3ng b\u0103ng th\u00f4ng qu\u00fd gi\u00e1 n\u00e0y \u0111\u1ec3 \u01b0u ti\u00ean t\u1ea3i c\u00e1c t\u00e0i nguy\u00ean kh\u00e1c m\u00e0 ng\u01b0\u1eddi d\u00f9ng th\u1ef1c s\u1ef1 s\u1ebd nh\u00ecn th\u1ea5y). Tr\u00ean c\u00e1c g\u00f3i gi\u1edbi h\u1ea1n d\u1eef li\u1ec7u, t\u1ea3i c\u00e1c th\u00e0nh ph\u1ea7n ng\u01b0\u1eddi d\u00f9ng kh\u00f4ng bao gi\u1edd nh\u00ecn \u0111\u1ebfn c\u00f3 th\u1ec3 l\u00e0m l\u00e3ng ph\u00ed ti\u1ec1n c\u1ee7a h\u1ecd (c\u1ee9 ngh\u0129 \u0111\u1ebfn ph\u00ed 3G cho di \u0111\u1ed9ng, t\u00ednh ti\u1ec1n theo dung l\u01b0\u1ee3ng l\u00e0 b\u1ea1n s\u1ebd hi\u1ec3u).<\/li>\n\n\n\n<li><strong>N\u00f3 l\u00e0m l\u00e3ng ph\u00ed th\u1eddi gian x\u1eed l\u00fd, pin v\u00e0 c\u00e1c t\u00e0i nguy\u00ean h\u1ec7 th\u1ed1ng kh\u00e1c<\/strong>. Sau khi m\u1ed9t t\u00e0i nguy\u00ean \u0111a ph\u01b0\u01a1ng ti\u1ec7n (media) \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1, tr\u00ecnh duy\u1ec7t <a href=\"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/\" target=\"_blank\" rel=\"noreferrer noopener\">ph\u1ea3i gi\u1ea3i m\u00e3 (decode) v\u00e0 k\u1ebft xu\u1ea5t (render) n\u1ed9i dung c\u1ee7a n\u00f3 trong khung nh\u00ecn tr\u00ecnh duy\u1ec7t<\/a>.<\/li>\n<\/ul>\n\n\n\n<p>Khi ch\u00fang ta lazy load \u1ea3nh v\u00e0 video, ch\u00fang ta l\u00e0m gi\u1ea3m th\u1eddi gian t\u1ea3i c\u1ea7n thi\u1ebft \u0111\u1ec3 t\u1ea3i trang l\u00fac ban \u0111\u1ea7u (initial page) th\u00f4ng qua gi\u1ea3m dung l\u01b0\u1ee3ng t\u1ea3i trang l\u00fac ban \u0111\u1ea7u, c\u0169ng nh\u01b0 gi\u1ea3m s\u1eed d\u1ee5ng t\u00e0i nguy\u00ean h\u1ec7 th\u1ed1ng, t\u1ea5t c\u1ea3 \u0111\u1ec1u \u1ea3nh h\u01b0\u1edfng t\u00edch c\u1ef1c \u0111\u1ebfn hi\u1ec7u su\u1ea5t. <\/p>\n\n\n\n<p>Trong h\u01b0\u1edbng d\u1eabn n\u00e0y, ch\u00fang ta s\u1ebd b\u00e0n v\u1ec1 m\u1ed9t s\u1ed1 k\u1ef9 thu\u1eadt v\u00e0 c\u00e1c ch\u1ec9 d\u1eabn \u0111\u1ec3 th\u1ef1c hi\u1ec7n lazy load \u1ea3nh v\u00e0 video c\u0169ng nh\u01b0 m\u1ed9t danh s\u00e1ch ng\u1eafn c\u00e1c th\u01b0 vi\u1ec7n ph\u1ed5 bi\u1ebfn th\u01b0\u1eddng \u0111\u01b0\u1ee3c d\u00f9ng.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"lazy-load-\u1ea3nh\"><span class=\"ez-toc-section\" id=\"Lazy_load_anh\"><\/span>Lazy load \u1ea3nh<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>C\u01a1 ch\u1ebf lazy load \u1ea3nh \u0111\u01a1n gi\u1ea3n v\u1ec1 m\u1eb7t l\u00fd thuy\u1ebft, nh\u01b0ng \u0111i v\u00e0o chi ti\u1ebft th\u00ec l\u1ea1i kh\u00e1 kh\u00f3 nh\u1eb1n (finicky). Th\u00eam v\u00e0o \u0111\u00f3 c\u00f3 m\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p ri\u00eang bi\u1ec7t c\u00f3 th\u1ec3 c\u00f3 c\u1ea3 l\u1ee3i \u00edch t\u1eeb lazy load. N\u00e0o, ch\u00fang ta c\u00f9ng b\u1eaft \u0111\u1ea7u t\u00ecm hi\u1ec3u c\u00e1ch lazy load c\u00e1c \u1ea3nh n\u1ed9i tuy\u1ebfn (inline) trong HTML.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"\u1ea3nh-n\u1ed9i-tuy\u1ebfn\">\u1ea2nh n\u1ed9i tuy\u1ebfn<\/h3>\n\n\n\n<p>C\u00e1c \u1ee9ng c\u1eed vi\u00ean ph\u1ed5 bi\u1ebfn nh\u1ea5t \u0111\u1ec3 lazy load l\u00e0 c\u00e1c \u1ea3nh s\u1eed d\u1ee5ng ph\u1ea7n t\u1eed <code>&lt;img&gt;<\/code>. Khi ch\u00fang ta lazy load c\u00e1c ph\u1ea7n t\u1eed <code>&lt;img&gt;<\/code>, ch\u00fang ta s\u1eed d\u1ee5ng JavaScript \u0111\u1ec3 ki\u1ec3m tra xem ch\u00fang c\u00f3 \u0111ang \u1edf trong viewport hay kh\u00f4ng. N\u1ebfu ch\u00fang c\u00f3, th\u00ec thu\u1ed9c t\u00ednh <code>src<\/code> c\u1ee7a ch\u00fang (v\u00e0 \u0111\u00f4i khi l\u00e0 <code>srcset<\/code>) s\u1ebd \u0111\u01b0\u1ee3c \u0111i\u1ec1n URL c\u1ee7a b\u1ee9c \u1ea3nh c\u1ea7n thi\u1ebft.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"s\u1eed-d\u1ee5ng-intersection-observer\">S\u1eed d\u1ee5ng Intersection Observer<\/h4>\n\n\n\n<p>N\u1ebfu b\u1ea1n t\u1eebng vi\u1ebft m\u00e3 lazy load tr\u01b0\u1edbc \u0111\u00e2y, b\u1ea1n c\u00f3 th\u1ec3 \u0111\u00e3 th\u1eed ho\u00e0n th\u00e0nh nhi\u1ec7m v\u1ee5 n\u00e0y b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00e1c tr\u00ecnh x\u1eed l\u00fd s\u1ef1 ki\u1ec7n (event handlers) nh\u01b0 <code>scroll<\/code> ho\u1eb7c <code>resize.<\/code> D\u00f9 c\u00e1ch ti\u1ebfp c\u1eadn n\u00e0y cho ph\u00e9p t\u01b0\u01a1ng th\u00edch v\u1edbi nhi\u1ec1u tr\u00ecnh duy\u1ec7t nh\u1ea5t, th\u00ec c\u00e1c tr\u00ecnh duy\u1ec7t hi\u1ec7n \u0111\u1ea1i b\u00e2y gi\u1edd cung c\u1ea5p c\u00e1ch th\u1ee9c hi\u1ec7u qu\u1ea3 h\u01a1n trong vi\u1ec7c ki\u1ec3m tra ph\u1ea7n t\u1eed \u0111ang hi\u1ec3n th\u1ecb ra ngo\u00e0i th\u00f4ng qua <a href=\"https:\/\/developers.google.com\/web\/updates\/2016\/04\/intersectionobserver\" target=\"_blank\" rel=\"noreferrer noopener\">API Intersection Observer<\/a>.<\/p>\n\n\n\n<p>L<strong>\u01b0u \u00fd<\/strong>: Nh\u01b0\u1ee3c \u0111i\u1ec3m c\u1ee7a Intersection Observer l\u00e0 n\u00f3 kh\u00f4ng \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 trong t\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t. N\u1ebfu v\u1ea5n \u0111\u1ec1 t\u01b0\u01a1ng th\u00edch v\u1edbi l\u01b0\u1ee3ng l\u1edbn tr\u00ecnh duy\u1ec7t l\u00e0 \u0111i\u1ec1u quan tr\u1ecdng h\u01a1n, h\u00e3y nh\u1edb \u0111\u1ecdc ph\u1ea7n k\u1ebf ti\u1ebfp, n\u00f3 s\u1ebd ch\u1ec9 cho b\u1ea1n c\u00e1ch lazy load \u1ea3nh s\u1eed d\u1ee5ng tr\u00ecnh x\u1eed l\u00fd s\u1ef1 ki\u1ec7n <code>scroll<\/code> v\u00e0 <code>resize<\/code>, tuy r\u1eb1ng so v\u1edbi API th\u00ec n\u00f3 k\u00e9m hi\u1ec7u qu\u1ea3 h\u01a1n.<\/p>\n\n\n\n<p>Intersection observer d\u1ec5 d\u00f9ng v\u00e0 d\u1ec5 \u0111\u1ecdc h\u01a1n m\u00e3 d\u1ef1a tr\u00ean nhi\u1ec1u tr\u00ecnh x\u1eed l\u00fd s\u1ef1 ki\u1ec7n kh\u00e1c nhau, b\u1edfi v\u00ec ng\u01b0\u1eddi l\u1eadp tr\u00ecnh ch\u1ec9 c\u1ea7n \u0111\u0103ng k\u00fd m\u1ed9t observer \u0111\u1ec3 quan s\u00e1t c\u00e1c ph\u1ea7n t\u1eed thay v\u00ec ph\u1ea3i vi\u1ebft m\u00e3 t\u1ebb nh\u1ea1t d\u00f9ng \u0111\u1ec3 nh\u1eadn di\u1ec7n ph\u1ea7n t\u1eed n\u00e0o \u0111ang hi\u1ec3n th\u1ecb. T\u1ea5t c\u1ea3 nh\u1eefng g\u00ec c\u00f2n l\u1ea1i ph\u1ea3i l\u00e0m v\u1edbi ng\u01b0\u1eddi l\u1eadp tr\u00ecnh l\u00e0 quy\u1ebft \u0111\u1ecbnh xem n\u00ean th\u1ef1c hi\u1ec7n \u0111i\u1ec1u g\u00ec khi ph\u1ea7n t\u1eed \u0111\u1eadp v\u00e0o m\u1eaft ng\u01b0\u1eddi d\u00f9ng. Gi\u1edd c\u00f9ng gi\u1ea3 \u0111\u1ecbnh \u0111\u00e2y l\u00e0 m\u1eabu m\u00e3 \u0111\u00e1nh d\u1ea5u c\u01a1 b\u1ea3n cho c\u00e1c ph\u1ea7n t\u1eed lazy load <code>&lt;img&gt;<\/code> c\u1ee7a ch\u00fang ta:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img class=\"lazy\" src=\"anh-giu-cho.jpg\" data-src=\"anh-de-lazy-load-1x.jpg\" data-srcset=\"anh-de-lazy-load-2x.jpg 2x, anh-de-lazy-load-1x.jpg 1x\" alt=\"T\u00f4i l\u00e0 \u1ea3nh!\"&gt;<\/code><\/pre>\n\n\n\n<p>C\u00f3 ba th\u00e0nh ph\u1ea7n li\u00ean quan c\u1ee7a m\u00e3 \u0111\u00e1nh d\u1ea5u n\u00e0y m\u00e0 ch\u00fang ta c\u1ea7n t\u1eadp trung v\u00e0o:<\/p>\n\n\n\n<ol>\n<li>Thu\u1ed9c t\u00ednh <em>class<\/em>, s\u1ebd \u0111\u01b0\u1ee3c JavaScript d\u00f9ng \u0111\u1ec3 l\u1ef1a ch\u1ecdn ph\u1ea7n t\u1eed (element).<\/li>\n\n\n\n<li>Thu\u1ed9c t\u00ednh <em>src<\/em>, \u0111\u00f3ng vai tr\u00f2 \u1ea3nh gi\u1eef ch\u1ed7, v\u00e0 s\u1ebd xu\u1ea5t hi\u1ec7n khi trang t\u1ea3i l\u1ea7n \u0111\u1ea7u ti\u00ean. \u1ea2nh gi\u1eef ch\u1ed7 n\u00e0y t\u1ea5t nhi\u00ean c\u00f3 k\u00edch c\u1ee1 r\u1ea5t nh\u1ecf.<\/li>\n\n\n\n<li>C\u00e1c thu\u1ed9c t\u00ednh <em>data-src<\/em> v\u00e0 <em>data-srcset<\/em> l\u00e0 n\u01a1i ch\u1ee9a URL \u1ea3nh th\u1ef1c m\u00e0 b\u1ea1n mu\u1ed1n hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng khi ph\u1ea7n t\u1eeb n\u1eb1m trong khung nh\u00ecn tr\u00ecnh duy\u1ec7t.<\/li>\n<\/ol>\n\n\n\n<p>Gi\u1edd ch\u00fang ta s\u1ebd h\u1ecdc c\u00e1ch s\u1eed d\u1ee5ng intersection observer trong JavaScript \u0111\u1ec3 lazy load \u1ea3nh b\u1eb1ng m\u00e3 \u0111\u00e1nh d\u1eabu m\u1eabu d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>document.addEventListener(\"DOMContentLoaded\", function() {\n  var lazyImages = &#91;].slice.call(document.querySelectorAll(\"img.lazy\"));\n  if (\"IntersectionObserver\" in window) {\n    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {\n      entries.forEach(function(entry) {\n        if (entry.isIntersecting) {\n          let lazyImage = entry.target;\n          lazyImage.src = lazyImage.dataset.src;\n          lazyImage.srcset = lazyImage.dataset.srcset;\n          lazyImage.classList.remove(\"lazy\");\n          lazyImageObserver.unobserve(lazyImage);\n        }\n      });\n    });\n    lazyImages.forEach(function(lazyImage) {\n      lazyImageObserver.observe(lazyImage);\n    });\n  } else {\n    \/\/ B\u1ea1n c\u00f3 th\u1ec3 th\u00eam c\u00e1c d\u1ef1 ph\u00f2ng \u1edf ph\u1ea7n n\u00e0y \u0111\u1ec3 t\u0103ng t\u00ednh t\u01b0\u01a1ng th\u00edch\n  }\n});<\/code><\/pre>\n\n\n\n<p>D\u1ef1a v\u00e0o s\u1ef1 ki\u1ec7n <em>DOMContentLoaded<\/em> c\u1ee7a t\u00e0i li\u1ec7u, \u0111o\u1ea1n m\u00e3 tr\u00ean truy v\u1ea5n DOM \u0111\u1ec3 l\u1ea5y t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed <code>&lt;img&gt;<\/code> c\u00f3 class l\u00e0 <em>lazy<\/em>. N\u1ebfu intersection observer kh\u1ea3 d\u1ee5ng, ch\u00fang ta s\u1ebd t\u1ea1o m\u1ed9t observer m\u1edbi \u0111\u1ec3 ch\u1ea1y callback khi ph\u1ea7n t\u1eed <em>img.lazy<\/em> \u0111i v\u00e0o khung nh\u00ecn tr\u00ecnh duy\u1ec7t. Ki\u1ec3m tra <a href=\"https:\/\/codepen.io\/malchata\/pen\/YeMyrQ\" target=\"_blank\" rel=\"noreferrer noopener\">v\u00ed d\u1ee5 tr\u00ean CodePen<\/a> \u0111\u1ec3 th\u1ea5y c\u00e1ch \u0111o\u1ea1n m\u00e3 n\u00e0y ho\u1ea1t \u0111\u1ed9ng trong th\u1ef1c t\u1ebf.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 t\u00f4i th\u1ef1c hi\u1ec7n d\u1ef1a v\u00e0o m\u00e3 m\u1eabu \u1edf tr\u00ean: <a href=\"https:\/\/static.kiencang.net\/2020\/hand-code-lazyload1.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/static.kiencang.net\/2020\/hand-code-lazyload1.html<\/a><\/p>\n\n\n\n<p><strong>L\u01b0u \u00fd<\/strong>: \u0110o\u1ea1n m\u00e3 \u1edf tr\u00ean s\u1eed d\u1ee5ng ph\u01b0\u01a1ng th\u1ee9c intersection observer c\u00f3 t\u00ean <strong>isIntersecting<\/strong>, \u0111\u00e2y l\u00e0 ph\u01b0\u01a1ng th\u1ee9c kh\u00f4ng c\u00f3 trong tri\u1ec3n khai c\u1ee7a intersection observer c\u1ee7a Edge phi\u00ean b\u1ea3n 15. Do \u0111\u00f3, \u0111o\u1ea1n m\u00e3 lazy load \u1edf tr\u00ean (v\u00e0 c\u00e1c \u0111o\u1ea1n m\u00e3 t\u01b0\u01a1ng t\u1ef1 kh\u00e1c) s\u1ebd l\u1ed7i tr\u00ean Edge. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"s\u1eed-d\u1ee5ng-trinh-x\u1eed-ly-s\u1ef1-ki\u1ec7n-cach-co-tinh-t\u01b0\u01a1ng-thich-cao-nh\u1ea5t\">S\u1eed d\u1ee5ng tr\u00ecnh x\u1eed l\u00fd s\u1ef1 ki\u1ec7n (c\u00e1ch c\u00f3 t\u00ednh t\u01b0\u01a1ng th\u00edch cao nh\u1ea5t)<\/h4>\n\n\n\n<p>D\u00f9 b\u1ea1n <em>ph\u1ea3i<\/em> s\u1eed d\u1ee5ng intersection observer \u0111\u1ec3 tri\u1ec3n khai lazy load, th\u00ec kh\u1ea3 n\u0103ng t\u01b0\u01a1ng th\u00edch v\u1edbi tr\u00ecnh duy\u1ec7t c\u1ee7a \u1ee9ng d\u1ee5ng v\u1eabn l\u00e0 \u0111i\u1ec1u quan tr\u1ecdng. B\u1ea1n c\u00f3 th\u1ec3 <a href=\"https:\/\/github.com\/w3c\/IntersectionObserver\/tree\/master\/polyfill\" target=\"_blank\" rel=\"noreferrer noopener\">tri\u1ec3n khai d\u1ef1 ph\u00f2ng cho intersection observer<\/a> (v\u00e0 \u0111\u00e2y l\u00e0 c\u00e1ch d\u1ec5 nh\u1ea5t), ngo\u00e0i ra b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 d\u1ef1 ph\u00f2ng cho \u0111o\u1ea1n m\u00e3 b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00e1c tr\u00ecnh x\u1eed l\u00fd s\u1ef1 ki\u1ec7n nh\u01b0 l\u00e0 <em>scroll<\/em>, <em>resize<\/em>, v\u00e0 c\u00f3 th\u1ec3 l\u00e0 <em>orientationchange<\/em> k\u00e8m s\u1ef1 ph\u1ed1i h\u1ee3p v\u1edbi <em>getBoundingClientRect<\/em> \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh xem li\u1ec7u m\u1ed9t ph\u1ea7n t\u1eed c\u00f3 \u1edf trong khung nh\u00ecn tr\u00ecnh duy\u1ec7t hay kh\u00f4ng.<\/p>\n\n\n\n<p>Gi\u1ea3 s\u1eed v\u1edbi c\u00f9ng m\u1eabu \u0111\u00e1nh d\u1ea5u t\u1eeb tr\u01b0\u1edbc, \u0111o\u1ea1n m\u00e3 JavaScript sau \u0111\u00e2y s\u1ebd cung c\u1ea5p t\u00ednh n\u0103ng lazy load:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>document.addEventListener(\"DOMContentLoaded\", function() {\n  let lazyImages = &#91;].slice.call(document.querySelectorAll(\"img.lazy\"));\n  let active = false;\n  const lazyLoad = function() {\n    if (active === false) {\n      active = true;\n      setTimeout(function() {\n        lazyImages.forEach(function(lazyImage) {\n          if ((lazyImage.getBoundingClientRect().top &lt;= window.innerHeight &amp;&amp; lazyImage.getBoundingClientRect().bottom &gt;= 0) &amp;&amp; getComputedStyle(lazyImage).display !== \"none\") {\n            lazyImage.src = lazyImage.dataset.src;\n            lazyImage.srcset = lazyImage.dataset.srcset;\n            lazyImage.classList.remove(\"lazy\");\n            lazyImages = lazyImages.filter(function(image) {\n              return image !== lazyImage;\n            });\n            if (lazyImages.length === 0) {\n              document.removeEventListener(\"scroll\", lazyLoad);\n              window.removeEventListener(\"resize\", lazyLoad);\n              window.removeEventListener(\"orientationchange\", lazyLoad);\n            }\n          }\n        });\n        active = false;\n      }, 200);\n    }\n  };\n  document.addEventListener(\"scroll\", lazyLoad);\n  window.addEventListener(\"resize\", lazyLoad);\n  window.addEventListener(\"orientationchange\", lazyLoad);\n});<\/code><\/pre>\n\n\n\n<p>\u0110o\u1ea1n m\u00e3 tr\u00ean s\u1eed d\u1ee5ng <em>getBoundingClientRect<\/em> trong tr\u00ecnh x\u1eed l\u00fd s\u1ef1 ki\u1ec7n <em>scroll<\/em> \u0111\u1ec3 ki\u1ec3m tra xem c\u00f3 b\u1ea5t k\u1ef3 ph\u1ea7n t\u1eed <em>img.lazy<\/em> n\u00e0o n\u1eb1m trong khung nh\u00ecn tr\u00ecnh duy\u1ec7t hay kh\u00f4ng. <em>setTimeout<\/em> \u0111\u01b0\u1ee3c g\u1ecdi \u0111\u1ec3 tr\u00ec ho\u00e3n x\u1eed l\u00fd, v\u00e0 bi\u1ebfn <em>active<\/em> ch\u1ee9a th\u00f4ng tin tr\u1ea1ng th\u00e1i qu\u00e1 tr\u00ecnh x\u1eed l\u00fd- c\u00e1i \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh c\u00e1c l\u1eddi g\u1ecdi li\u00ean quan \u0111\u1ebfn ch\u1ee9c n\u0103ng. V\u00ec \u1ea3nh \u0111\u01b0\u1ee3c lazy load, ch\u00fang s\u1ebd b\u1ecb lo\u1ea1i b\u1ecf kh\u1ecfi m\u1ea3ng ph\u1ea7n t\u1eed. Khi m\u1ea3ng ph\u1ea7n t\u1eed \u0111\u1ea1t \u0111\u1ebfn <em>length<\/em> l\u00e0 <em>0<\/em>, \u0111o\u1ea1n m\u00e3 c\u1ee7a tr\u00ecnh x\u1eed l\u00fd s\u1ef1 ki\u1ec7n scroll b\u1ecb lo\u1ea1i b\u1ecf. B\u1ea1n c\u00f3 th\u1ec3 xem <a href=\"https:\/\/codepen.io\/malchata\/pen\/mXoZGx\" target=\"_blank\" rel=\"noreferrer noopener\">v\u00ed d\u1ee5 n\u00e0y tr\u00ean CodePen<\/a> \u0111\u1ec3 th\u1ea5y \u0111o\u1ea1n m\u00e3 trong th\u1ef1c t\u1ebf.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 v\u1ec1 \u0111o\u1ea1n m\u00e3 s\u1eed d\u1ee5ng tr\u00ecnh x\u1eed l\u00fd s\u1ef1 ki\u1ec7n: <a href=\"https:\/\/static.kiencang.net\/2020\/hand-code-lazyload2.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/static.kiencang.net\/2020\/hand-code-lazyload2.html<\/a><\/p>\n\n\n\n<p>Trong khi \u0111o\u1ea1n m\u00e3 n\u00e0y ho\u1ea1t \u0111\u1ed9ng \u0111\u01b0\u1ee3c tr\u00ean h\u1ea7u h\u1ebft c\u00e1c tr\u00ecnh duy\u1ec7t, n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng c\u00f3 c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t khi l\u1eddi g\u1ecdi <em>setTimeout<\/em> l\u1eb7p l\u1ea1i c\u00f3 th\u1ec3 g\u00e2y l\u00e3ng ph\u00ed, ngay c\u1ea3 khi \u0111o\u1ea1n m\u00e3 b\u00ean trong ch\u00fang \u0111\u00e3 \u0111\u01b0\u1ee3c \u0111i\u1ec1u ch\u1ec9nh. Trong v\u00ed d\u1ee5 n\u00e0y, m\u1ed9t ki\u1ec3m tra \u0111\u01b0\u1ee3c ch\u1ea1y l\u1eb7p \u0111i l\u1eb7p l\u1ea1i v\u1edbi t\u1ea7n su\u1ea5t 200 mili gi\u00e2y khi t\u00e0i li\u1ec7u \u0111\u01b0\u1ee3c cu\u1ed9n ho\u1eb7c k\u00edch c\u1ee1 c\u1eeda s\u1ed5 thay \u0111\u1ed5i b\u1ea5t k\u1ec3 chuy\u1ec7n c\u00f3 \u1ea3nh trong viewport hay kh\u00f4ng. Th\u00eam v\u00e0o \u0111\u00f3, c\u00f4ng vi\u1ec7c theo d\u00f5i \u0111\u1ec3 bi\u1ebft c\u00f2n c\u00f3 bao nhi\u00eau ph\u1ea7n t\u1eed c\u00f2n l\u1ea1i c\u1ea7n lazy load th\u1eadt t\u1ebb nh\u1ea1t, v\u00e0 vi\u1ec7c b\u1ecf tr\u00ecnh x\u1eed l\u00fd s\u1ef1 ki\u1ec7n scroll \u0111\u01b0\u1ee3c \u0111\u1ec3 d\u00e0nh l\u1ea1i cho nh\u00e0 l\u1eadp tr\u00ecnh.<\/p>\n\n\n\n<p>K\u1ebft lu\u1eadn \u0111\u01a1n gi\u1ea3n: S\u1eed d\u1ee5ng intersection observer b\u1ea5t c\u1ee9 khi n\u00e0o c\u00f3 th\u1ec3, v\u00e0 th\u1ef1c hi\u1ec7n d\u1ef1 ph\u00f2ng b\u1eb1ng tr\u00ecnh x\u1eed l\u00fd s\u1ef1 ki\u1ec7n n\u1ebfu t\u00ednh t\u01b0\u01a1ng th\u00edch r\u1ed9ng nh\u1ea5t l\u00e0 y\u00eau c\u1ea7u quan tr\u1ecdng c\u1ee7a \u1ee9ng d\u1ee5ng.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"\u1ea3nh-trong-css\">\u1ea2nh trong CSS<\/h3>\n\n\n\n<p>D\u00f9 th\u1ebb <code>&lt;img&gt;<\/code> l\u00e0 c\u00e1ch s\u1eed d\u1ee5ng \u1ea3nh ph\u1ed5 bi\u1ebfn nh\u1ea5t tr\u00ean c\u00e1c trang web, th\u00ec \u1ea3nh c\u0169ng c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c g\u1ecdi (invoked) qua thu\u1ed9c t\u00ednh CSS l\u00e0 <em><a href=\"https:\/\/kiencang.net\/background-trong-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">background-image<\/a><\/em> (v\u00e0 c\u00e1c thu\u1ed9c t\u00ednh kh\u00e1c n\u1eefa). Kh\u00f4ng gi\u1ed1ng v\u1edbi ph\u1ea7n t\u1eed <code>&lt;img&gt;<\/code> s\u1ebd \u0111\u01b0\u1ee3c t\u1ea3i b\u1ea5t k\u1ec3 n\u00f3 c\u00f3 \u0111i v\u00e0o khung nh\u00ecn tr\u00ecnh duy\u1ec7t hay kh\u00f4ng, h\u00e0nh vi t\u1ea3i \u1ea3nh trong CSS \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n v\u1edbi nhi\u1ec1u suy \u0111o\u00e1n, t\u00ednh to\u00e1n (speculation) h\u01a1n. Khi t\u00e0i li\u1ec7u v\u00e0 m\u00f4 h\u00ecnh \u0111\u1ed1i t\u01b0\u1ee3ng CSS (the document and CSS object models) c\u0169ng nh\u01b0 c\u00e2y k\u1ebft xu\u1ea5t (render tree) \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng, tr\u00ecnh duy\u1ec7t s\u1ebd ki\u1ec3m tra c\u00e1ch CSS \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng v\u00e0o t\u00e0i li\u1ec7u tr\u01b0\u1edbc khi y\u00eau c\u1ea7u c\u00e1c t\u00e0i nguy\u00ean b\u00ean ngo\u00e0i. N\u1ebfu tr\u00ecnh duy\u1ec7t ph\u00e1t hi\u1ec7n m\u1ed9t quy t\u1eafc CSS li\u00ean quan \u0111\u1ebfn t\u00e0i nguy\u00ean b\u00ean ngo\u00e0i kh\u00f4ng \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng v\u00e0o t\u00e0i li\u1ec7u nh\u01b0 c\u00e1ch n\u00f3 \u0111ang \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng th\u00ec tr\u00ecnh duy\u1ec7t s\u1ebd kh\u00f4ng g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn t\u00e0i nguy\u00ean \u0111\u00f3.<\/p>\n\n\n\n<p>H\u00e0nh vi t\u00ednh to\u00e1n n\u00e0y c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 tr\u00ec ho\u00e3n c\u00e1c \u1ea3nh trong CSS b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng JavaScript \u0111\u1ec3 ph\u00e1t hi\u1ec7n khi m\u1ed9t ph\u1ea7n t\u1eed n\u1eb1m trong khung nh\u00ecn tr\u00ecnh duy\u1ec7t, v\u00e0 sau \u0111\u00f3 \u00e1p m\u1ed9t class v\u00e0o ph\u1ea7n t\u1eed m\u00e0 class \u0111\u00f3 \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng style g\u1ecdi \u1ea3nh n\u1ec1n (background image). C\u00e1i n\u00e0y s\u1ebd gi\u00fap \u1ea3nh \u0111\u01b0\u1ee3c t\u1ea3i v\u00e0o th\u1eddi \u0111i\u1ec3m c\u1ea7n thi\u1ebft thay v\u00ec t\u1ea3i ngay l\u00fac ban \u0111\u1ea7u. V\u00ed d\u1ee5, h\u00e3y l\u1ea5y m\u1ed9t ph\u1ea7n t\u1eed c\u00f3 ch\u1ee9a m\u1ed9t \u1ea3nh background l\u1edbn \u1edf v\u1ecb tr\u00ed thu h\u00fat:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"lazy-background\"&gt;\n  &lt;h1&gt;\u0110\u00e2y l\u00e0 ti\u00eau \u0111\u1ec1 thu h\u00fat s\u1ef1 ch\u00fa \u00fd c\u1ee7a b\u1ea1n!&lt;\/h1&gt;\n  &lt;p&gt;\u0110\u00e2y l\u00e0 ph\u1ea7n v\u0103n b\u1ea3n thu h\u00fat \u0111\u1ec3 thuy\u1ebft ph\u1ee5c b\u1ea1n mua h\u00e0ng!&lt;\/p&gt;\n  &lt;a href=\"\/buy-a-thing\"&gt;mua h\u00e0ng!&lt;\/a&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Ph\u1ea7n t\u1eed <em>div.lazy-background<\/em> th\u00f4ng th\u01b0\u1eddng s\u1ebd ch\u1ee9a \u1ea3nh background thu h\u00fat \u0111\u01b0\u1ee3c g\u1ecdi b\u1edfi m\u1ed9t s\u1ed1 m\u00e3 CSS. Trong v\u00ed d\u1ee5 v\u1ec1 lazy load n\u00e0y, ch\u00fang ta c\u00f3 th\u1ec3 c\u00f4 l\u1eadp thu\u1ed9c t\u00ednh <em>background-image<\/em> c\u1ee7a ph\u1ea7n t\u1eed <em>div.lazy-background<\/em> th\u00f4ng qua class <em>visible<\/em> &#8211; c\u00e1i m\u00e0 ch\u00fang ta ch\u1ec9 th\u00eam v\u00e0o ph\u1ea7n t\u1eed khi n\u00f3 \u1edf trong khung nh\u00ecn tr\u00ecnh duy\u1ec7t:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.lazy-background {\n  background-image: url(\"hero-placeholder.jpg\"); \/* \u0111\u00e2y ch\u1ec9 l\u00e0 \u1ea3nh gi\u1eef ch\u1ed7 m\u00e0 th\u00f4i *\/\n}\n.lazy-background.visible {\n  background-image: url(\"hero.jpg\"); \/* c\u00f2n \u0111\u00e2y m\u1edbi l\u00e0 \u1ea3nh th\u1eadt *\/\n}<\/code><\/pre>\n\n\n\n<p>B\u1eaft \u0111\u1ea7u t\u1eeb \u0111\u00e2y, ch\u00fang ta s\u1ebd s\u1eed d\u1ee5ng JavaScript \u0111\u1ec3 ki\u1ec3m tra xem ph\u1ea7n t\u1eed c\u00f3 \u1edf trong viewport hay kh\u00f4ng (b\u1eb1ng intersection observer!), v\u00e0 th\u00eam class <em>visible<\/em> v\u00e0o ph\u1ea7n t\u1eed <em>div.lazy-background<\/em> v\u00e0o th\u1eddi \u0111i\u1ec3m \u0111\u00f3, c\u00e1i m\u00e0 s\u1ebd gi\u00fap t\u1ea3i \u1ea3nh v\u1ec1:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>document.addEventListener(\"DOMContentLoaded\", function() {\n  var lazyBackgrounds = &#91;].slice.call(document.querySelectorAll(\".lazy-background\"));\n  if (\"IntersectionObserver\" in window) {\n    let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {\n      entries.forEach(function(entry) {\n        if (entry.isIntersecting) {\n          entry.target.classList.add(\"visible\");\n          lazyBackgroundObserver.unobserve(entry.target);\n        }\n      });\n    });\n    lazyBackgrounds.forEach(function(lazyBackground) {\n      lazyBackgroundObserver.observe(lazyBackground);\n    });\n  }\n});<\/code><\/pre>\n\n\n\n<p>Nh\u01b0 \u0111\u00e3 n\u00f3i t\u1eeb tr\u01b0\u1edbc, b\u1ea1n ch\u1eafc ch\u1eafn s\u1ebd mu\u1ed1n cung c\u1ea5p m\u1ed9t d\u1ef1 ph\u00f2ng cho ph\u01b0\u01a1ng th\u1ee9c intersection observer b\u1edfi v\u00ec kh\u00f4ng ph\u1ea3i t\u1ea5t c\u1ea3 tr\u00ecnh duy\u1ec7t \u0111\u1ec1u h\u1ed7 tr\u1ee3 n\u00f3 \u1edf th\u1eddi \u0111i\u1ec3m hi\u1ec7n t\u1ea1i. <a href=\"https:\/\/codepen.io\/malchata\/pen\/wyLMpR\" target=\"_blank\" rel=\"noreferrer noopener\">Ki\u1ec3m tra demo tr\u00ean CodePen<\/a> \u0111\u1ec3 xem c\u00e1ch \u0111o\u1ea1n m\u00e3 n\u00e0y ho\u1ea1t \u0111\u1ed9ng trong th\u1ef1c t\u1ebf nh\u01b0 th\u1ebf n\u00e0o.<\/p>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o m\u1eabu trang m\u00e0 t\u00f4i t\u1ea1o theo h\u01b0\u1edbng d\u1eabn tr\u00ean: <a href=\"https:\/\/static.kiencang.net\/2020\/lazyload-bgr-image.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/static.kiencang.net\/2020\/lazyload-bgr-image.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=\"lazy-load-video\"><span class=\"ez-toc-section\" id=\"Lazy_load_video\"><\/span>Lazy load video<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>C\u0169ng gi\u1ed1ng v\u1edbi ph\u1ea7n t\u1eed \u1ea3nh, ch\u00fang ta c\u0169ng c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng lazy load cho video. Khi ch\u00fang ta t\u1ea3i video trong b\u1ed1i c\u1ea3nh th\u00f4ng th\u01b0\u1eddng, n\u00f3 s\u1ebd s\u1eed d\u1ee5ng ph\u1ea7n t\u1eed <code>&lt;video&gt;<\/code> (m\u1eb7c d\u00f9 c\u0169ng c\u00f3 m\u1ed9t ph\u01b0\u01a1ng th\u1ee9c thay th\u1ebf s\u1eed d\u1ee5ng <code>&lt;img&gt;<\/code> \u0111\u1ec3 \u00e1p d\u1ee5ng tr\u00ean m\u1ed9t s\u1ed1 n\u1ec1n t\u1ea3ng b\u1ecb h\u1ea1n ch\u1ebf). M\u1eb7c d\u00f9 c\u00e1ch s\u1eed d\u1ee5ng lazy load <code>&lt;video&gt;<\/code> c\u00f2n t\u00f9y v\u00e0o t\u1eebng tr\u01b0\u1eddng h\u1ee3p c\u1ee5 th\u1ec3. Ch\u00fang ta s\u1ebd b\u00e0n v\u1ec1 m\u1ed9t s\u1ed1 k\u1ecbch b\u1ea3n c\u1ea7n c\u00e1c gi\u1ea3i ph\u00e1p kh\u00e1c nhau.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"v\u1edbi-video-khong-b\u1eadt-t\u1ef1-d\u1ed9ng-autoplay\">V\u1edbi video kh\u00f4ng b\u1eadt t\u1ef1 \u0111\u1ed9ng (autoplay)<\/h3>\n\n\n\n<p>V\u1edbi c\u00e1c video \u0111\u01b0\u1ee3c b\u1eadt b\u1edfi thao t\u00e1c ch\u1ee7 \u0111\u1ed9ng ban \u0111\u1ea7u c\u1ee7a ng\u01b0\u1eddi d\u00f9ng (v\u00ed d\u1ee5 video kh\u00f4ng b\u1eadt t\u1ef1 \u0111\u1ed9ng), th\u00ec ch\u1ec9 th\u1ecb thu\u1ed9c t\u00ednh <em>preload<\/em> tr\u00ean ph\u1ea7n t\u1eed <em>&lt;video&gt;<\/em> c\u00f3 th\u1ec3 r\u1ea5t c\u1ea7n thi\u1ebft:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;video controls preload=\"none\" poster=\"one-does-not-simply-placeholder.jpg\"&gt;\n  &lt;source src=\"one-does-not-simply.webm\" type=\"video\/webm\"&gt;\n  &lt;source src=\"one-does-not-simply.mp4\" type=\"video\/mp4\"&gt;\n&lt;\/video&gt;<\/code><\/pre>\n\n\n\n<p>\u1ede \u0111\u00e2y, ch\u00fang ta s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <em>preload<\/em> v\u1edbi gi\u00e1 tr\u1ecb <em>none<\/em> \u0111\u1ec3 ng\u0103n tr\u00ecnh duy\u1ec7t preload <em>m\u1ecdi<\/em> d\u1eef li\u1ec7u c\u1ee7a video. \u0110\u1ec3 gi\u1eef kh\u00f4ng gian, ch\u00fang ta s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <em>poster<\/em> trong ph\u1ea7n t\u1eed <em>&lt;video&gt;<\/em>. C\u1ea7n ph\u1ea3i l\u00e0m nh\u01b0 th\u1ebf l\u00e0 v\u00ec c\u00e1c h\u00e0nh vi m\u1eb7c \u0111\u1ecbnh trong vi\u1ec7c t\u1ea3i video c\u00f3 th\u1ec3 thay \u0111\u1ed5i nhi\u1ec1u gi\u1eefa c\u00e1c tr\u00ecnh duy\u1ec7t kh\u00e1c nhau:<\/p>\n\n\n\n<ul>\n<li>Trong Chrome, h\u00e0nh vi m\u1eb7c \u0111\u1ecbnh c\u1ee7a <em>preload<\/em> l\u00e0 <em>auto<\/em>, nh\u01b0ng trong Chrome 64, m\u1eb7c \u0111\u1ecbnh c\u1ee7a n\u00f3 gi\u1edd l\u00e0 <em>metadata<\/em>. Th\u1eadm ch\u00ed, tr\u00ean Chrome phi\u00ean b\u1ea3n m\u00e1y b\u00e0n, m\u1ed9t ph\u1ea7n video c\u00f3 th\u1ec3 preload b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng header <em>Content-Range<\/em>. Firefox, Edge v\u00e0 Internet Explorer 11 c\u0169ng c\u00f3 c\u00e1c h\u00e0nh vi t\u01b0\u01a1ng t\u1ef1.<\/li>\n\n\n\n<li>Gi\u1ed1ng Chrome tr\u00ean phi\u00ean b\u1ea3n m\u00e1y b\u00e0n, phi\u00ean b\u1ea3n 11 tr\u00ean m\u00e1y b\u00e0n c\u1ee7a Safari s\u1ebd preload m\u1ed9t ph\u1ea7n video. Trong phi\u00ean b\u1ea3n 11.2 (hi\u1ec7n l\u00e0 phi\u00ean b\u1ea3n k\u1ef9 thu\u1eadt xem tr\u01b0\u1edbc c\u1ee7a Safari) ch\u1ec9 si\u00eau d\u1eef li\u1ec7u (metadata) c\u1ee7a video l\u00e0 \u0111\u01b0\u1ee3c preload. <a href=\"https:\/\/developer.apple.com\/library\/content\/documentation\/AudioVideo\/Conceptual\/Using_HTML5_Audio_Video\/AudioandVideoTagBasics\/AudioandVideoTagBasics.html#\/\/apple_ref\/doc\/uid\/TP40009523-CH2-SW9\">V\u1edbi Safari tr\u00ean iOS, video kh\u00f4ng bao gi\u1edd \u0111\u01b0\u1ee3c preload<\/a>.<\/li>\n\n\n\n<li>Khi ch\u1ebf \u0111\u1ed9 Data Saver \u0111\u01b0\u1ee3c b\u1eadt, thu\u1ed9c t\u00ednh m\u1eb7c \u0111\u1ecbnh c\u1ee7a <em>preload<\/em> l\u00e0 <em>none<\/em>.<\/li>\n<\/ul>\n\n\n\n<p>Do h\u00e0nh vi m\u1eb7c \u0111\u1ecbnh c\u1ee7a tr\u00ecnh duy\u1ec7t li\u00ean quan \u0111\u1ebfn <em>preload<\/em> kh\u00f4ng th\u1ed1ng nh\u1ea5t gi\u1eefa c\u00e1c tr\u00ecnh duy\u1ec7t kh\u00e1c nhau, tuy\u00ean b\u1ed1 r\u00f5 r\u00e0ng s\u1ebd l\u00e0 c\u00e1ch l\u00e0m t\u1ed1t nh\u1ea5t. Trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y khi ng\u01b0\u1eddi d\u00f9ng b\u1eaft \u0111\u1ea7u b\u1eadt video, s\u1eed d\u1ee5ng <em>preload=none<\/em> l\u00e0 c\u00e1ch d\u1ec5 nh\u1ea5t \u0111\u1ec3 tr\u00ec ho\u00e3n t\u1ea3i video tr\u00ean t\u1ea5t c\u1ea3 c\u00e1c n\u1ec1n t\u1ea3ng. Thu\u1ed9c t\u00ednh preload kh\u00f4ng ph\u1ea3i l\u00e0 c\u00e1ch duy nh\u1ea5t \u0111\u1ec3 tr\u00ec ho\u00e3n t\u1ea3i video. B\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o th\u00eam b\u00e0i vi\u1ebft <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/media\/fast-playback-with-video-preload\" target=\"_blank\" rel=\"noreferrer noopener\">Fast Playback with Video Preload<\/a> \u0111\u1ec3 c\u00f3 \u0111\u01b0\u1ee3c m\u1ed9t s\u1ed1 \u00fd t\u01b0\u1edfng v\u00e0 c\u00e1i nh\u00ecn s\u00e2u h\u01a1n v\u00e0o c\u00e1ch l\u00e0m vi\u1ec7c v\u1edbi video playback trong JavaScript.<\/p>\n\n\n\n<p>Th\u1eadt kh\u00f4ng may, n\u00f3 kh\u00f4ng h\u1eefu \u00edch trong tr\u01b0\u1eddng h\u1ee3p ch\u00fang ta mu\u1ed1n s\u1eed d\u1ee5ng video thay cho <a href=\"https:\/\/kiencang.net\/gif-png-jpg-hoac-svg\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u1ea3nh \u0111\u1ed9ng GIF<\/a>, c\u00e1i ch\u00fang ta s\u1ebd b\u00e0n \u0111\u1ebfn ngay sau \u0111\u00e2y.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"v\u1edbi-video-dong-vai-tro-thay-th\u1ebf-\u1ea3nh-d\u1ed9ng-gif\">V\u1edbi video \u0111\u00f3ng vai tr\u00f2 thay th\u1ebf \u1ea3nh \u0111\u1ed9ng GIF<\/h3>\n\n\n\n<p>D\u00f9 \u1ea3nh \u0111\u1ed9ng GIF \u0111\u01b0\u1ee3c \u01b0a th\u00edch v\u00e0 s\u1eed d\u1ee5ng r\u1ed7ng r\u00e3i, ch\u00fang y\u1ebfu h\u01a1n khi so s\u00e1nh v\u1edbi video trong m\u1ed9t s\u1ed1 kh\u00eda c\u1ea1nh, \u0111\u1eb7c bi\u1ec7t l\u00e0 k\u00edch c\u1ee1 file \u0111\u1ea7u ra. \u1ea2nh \u0111\u1ed9ng GIF c\u00f3 th\u1ec3 c\u00f3 th\u1ec3 c\u00f3 k\u00edch c\u1ee1 d\u1eef li\u1ec7u l\u00ean \u0111\u1ebfn v\u00e0i magabytes. Video v\u1edbi ch\u1ea5t l\u01b0\u1ee3ng h\u00ecnh t\u01b0\u01a1ng t\u1ef1 c\u00f3 xu h\u01b0\u1edbng nh\u1ecf h\u01a1n nhi\u1ec1u v\u1ec1 m\u1eb7t dung l\u01b0\u1ee3ng.<\/p>\n\n\n\n<p>S\u1eed d\u1ee5ng ph\u1ea7n t\u1eed <em>&lt;video&gt;<\/em> \u0111\u1ec3 thay th\u1ebf \u1ea3nh \u0111\u1ed9ng GIF kh\u00f4ng \u0111\u01a1n gi\u1ea3n nh\u01b0 ph\u1ea7n t\u1eed <em>&lt;img&gt;<\/em>. \u1ea2nh \u0111\u1ed9ng GIF c\u00f3 ba h\u00e0nh vi sau c\u1ea7n \u0111\u01b0\u1ee3c video thay th\u1ebf k\u1ebf th\u1eeba:<\/p>\n\n\n\n<ol>\n<li>Ch\u00fang b\u1eadt t\u1ef1 \u0111\u1ed9ng khi t\u1ea3i v\u1ec1 xong.<\/li>\n\n\n\n<li>Ch\u00fang b\u1eadt \u0111i b\u1eadt l\u1ea1i li\u00ean t\u1ee5c (m\u1eb7c d\u00f9 kh\u00f4ng ph\u1ea3i l\u00fac n\u00e0o c\u0169ng nh\u01b0 v\u1eady).<\/li>\n\n\n\n<li>Ch\u00fang kh\u00f4ng g\u1eafn k\u00e8m \u00e2m thanh.<\/li>\n<\/ol>\n\n\n\n<p>\u0110\u1ec3 \u0111\u1ea1t \u0111\u01b0\u1ee3c k\u1ebft qu\u1ea3 t\u01b0\u01a1ng t\u1ef1, ph\u1ea7n t\u1eed <em>&lt;video&gt;<\/em> c\u1ea7n tr\u00f4ng gi\u1ed1ng nh\u01b0 th\u1ebf n\u00e0y:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;video autoplay muted loop playsinline&gt;\n  &lt;source src=\"one-does-not-simply.webm\" type=\"video\/webm\"&gt;\n  &lt;source src=\"one-does-not-simply.mp4\" type=\"video\/mp4\"&gt;\n&lt;\/video&gt;<\/code><\/pre>\n\n\n\n<p>C\u00e1c thu\u1ed9c t\u00ednh <em>autoplay\/t\u1ef1 \u0111\u1ed9ng b\u1eadt<\/em>, <em>muted\/t\u1eaft ti\u1ebfng<\/em>, <em>loop\/l\u1eb7p l\u1ea1i<\/em> \u0111\u00e3 t\u1ef1 gi\u1ea3i th\u00edch \u00fd ngh\u0129a c\u1ee7a ch\u00fang. <em>playsinline<\/em> l\u00e0 c\u1ea7n thi\u1ebft \u0111\u1ec3 b\u1eadt t\u1ef1 \u0111\u1ed9ng trong iOS. Gi\u1edd ch\u00fang ta c\u00f3 th\u1ec3 ph\u1ee5c v\u1ee5 video thay th\u1ebf \u1ea3nh GIF ho\u1ea1t \u0111\u1ed9ng \u0111\u01b0\u1ee3c tr\u00ean c\u00e1c n\u1ec1n t\u1ea3ng. Nh\u01b0ng l\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 lazy load n\u00f3? Chrome s\u1ebd lazy load video cho b\u1ea1n, nh\u01b0ng b\u1ea1n kh\u00f4ng th\u1ec3 t\u1ef1 tin cho r\u1eb1ng t\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u1ec1u cung c\u1ea5p h\u00e0nh vi t\u1ed1i \u01b0u n\u00e0y. Ph\u1ee5 thu\u1ed9c \u0111\u1ed1i t\u01b0\u1ee3ng ng\u01b0\u1eddi \u0111\u1ecdc v\u00e0 c\u00e1c y\u00eau c\u1ea7u \u1ee9ng d\u1ee5ng, b\u1ea1n c\u00f3 th\u1ec3 c\u1ea7n can thi\u1ec7p theo c\u00e1ch th\u1ee7 c\u00f4ng. \u0110\u1ec3 b\u1eaft \u0111\u1ea7u, h\u00e3y ch\u1ec9nh s\u1eeda m\u00e3 \u0111\u00e1nh d\u1ea5u <code>&lt;video&gt;<\/code><em> <\/em>c\u1ee7a b\u1ea1n cho ph\u00f9 h\u1ee3p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;video autoplay muted loop playsinline width=\"610\" height=\"254\" poster=\"one-does-not-simply.jpg\"&gt;\n  &lt;source data-src=\"one-does-not-simply.webm\" type=\"video\/webm\"&gt;\n  &lt;source data-src=\"one-does-not-simply.mp4\" type=\"video\/mp4\"&gt;\n&lt;\/video&gt;<\/code><\/pre>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 l\u01b0u \u00fd thu\u1ed9c t\u00ednh <em>poster <\/em>\u0111\u01b0\u1ee3c th\u00eam v\u00e0o, c\u00e1i cho ph\u00e9p b\u1ea1n ch\u1ec9 \u0111\u1ecbnh kh\u00f4ng gian gi\u1eef ch\u1ed7 cho ph\u1ea7n t\u1eed <code>&lt;video&gt;<\/code> cho \u0111\u1ebfn khi video \u0111\u01b0\u1ee3c lazy load. Nh\u01b0 v\u00ed d\u1ee5 v\u1ec1 <code>&lt;img&gt;<\/code> tr\u01b0\u1edbc \u0111\u00f3, ch\u00fang ta gi\u1ea5u URL video trong thu\u1ed9c t\u00ednh <code>data-src<\/code> trong t\u1eebng ph\u1ea7n t\u1eed <code>&lt;source&gt;<\/code>. T\u1eeb \u0111\u00f3 ch\u00fang ta s\u1eed d\u1ee5ng m\u1ed9t s\u1ed1 m\u00e3 JavaScript t\u01b0\u01a1ng t\u1ef1 v\u1edbi v\u00ed d\u1ee5 tr\u01b0\u1edbc \u0111\u00f3 \u0111\u1ec3 lazy load \u1ea3nh d\u1ef1a tr\u00ean intersection observer:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>document.addEventListener(\"DOMContentLoaded\", function() {\n  var lazyVideos = &#91;].slice.call(document.querySelectorAll(\"video.lazy\"));\n  if (\"IntersectionObserver\" in window) {\n    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {\n      entries.forEach(function(video) {\n        if (video.isIntersecting) {\n          for (var source in video.target.children) {\n            var videoSource = video.target.children&#91;source];\n            if (typeof videoSource.tagName === \"string\" &amp;&amp; videoSource.tagName === \"SOURCE\") {\n              videoSource.src = videoSource.dataset.src;\n            }\n          }\n          video.target.load();\n          video.target.classList.remove(\"lazy\");\n          lazyVideoObserver.unobserve(video.target);\n        }\n      });\n    });\n    lazyVideos.forEach(function(lazyVideo) {\n      lazyVideoObserver.observe(lazyVideo);\n    });\n  }\n});<\/code><\/pre>\n\n\n\n<p>Khi ch\u00fang ta lazy load ph\u1ea7n t\u1eed <code>&lt;video&gt;<\/code>, ch\u00fang ta c\u1ea7n \u0111i qua t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed con <code>&lt;source&gt;<\/code> v\u00e0 chuy\u1ec3n thu\u1ed9c t\u00ednh <code>data-src<\/code> c\u1ee7a n\u00f3 th\u00e0nh thu\u1ed9c t\u00ednh <em>src<\/em>. M\u1ed9t khi ch\u00fang ta l\u00e0m \u0111i\u1ec1u \u0111\u00f3, ch\u00fang ta c\u1ea7n k\u00edch ho\u1ea1t t\u1ea3i video b\u1eb1ng c\u00e1ch g\u1ecdi ph\u01b0\u01a1ng th\u1ee9c <em>load<\/em> c\u1ee7a ph\u1ea7n t\u1eed, sau \u0111\u00f3 t\u00e0i nguy\u00ean \u0111a ph\u01b0\u01a1ng ti\u1ec7n s\u1ebd t\u1ef1 \u0111\u1ed9ng ph\u00e1t t\u01b0\u01a1ng \u1ee9ng v\u1edbi thu\u1ed9c t\u00ednh <em>autoplay<\/em>.<\/p>\n\n\n\n<p>S\u1eed d\u1ee5ng ph\u01b0\u01a1ng th\u1ee9c n\u00e0y, ch\u00fang ta c\u00f3 \u0111\u01b0\u1ee3c gi\u1ea3i ph\u00e1p video m\u00f4 ph\u1ecfng h\u00e0nh vi c\u1ee7a \u1ea3nh \u0111\u1ed9ng GIF, nh\u01b0ng kh\u00f4ng ph\u00e1t sinh vi\u1ec7c s\u1eed d\u1ee5ng nhi\u1ec1u d\u1eef li\u1ec7u nh\u01b0 c\u00e1ch \u1ea3nh \u0111\u1ed9ng GIF th\u1ef1c hi\u1ec7n, v\u00e0 ch\u00fang ta c\u00f3 \u0111\u01b0\u1ee3c lazy load cho n\u1ed9i dung.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cac-th\u01b0-vi\u1ec7n-lazy-load\"><span class=\"ez-toc-section\" id=\"Cac_thu_vien_lazy_load\"><\/span>C\u00e1c th\u01b0 vi\u1ec7n lazy load<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>N\u1ebfu b\u1ea1n kh\u00f4ng mu\u1ed1n quan t\u00e2m \u0111\u1ebfn <em>c\u00e1ch<\/em> lazy load ho\u1ea1t \u0111\u1ed9ng d\u01b0\u1edbi ch\u1ebf \u0111\u1ed9 n\u1ec1n (hood) v\u00e0 ch\u1ec9 th\u00edch qu\u1ea5t lu\u00f4n th\u01b0 vi\u1ec7n cho \u0111\u01a1n gi\u1ea3n (ch\u1eb3ng c\u00f3 g\u00ec ph\u1ea3i x\u1ea5u h\u1ed5 trong chuy\u1ec7n n\u00e0y c\u1ea3!), th\u1ebf th\u00ec c\u00f3 c\u1ea3 t\u00e1 l\u1ef1a ch\u1ecdn cho b\u1ea1n. Nhi\u1ec1u th\u01b0 vi\u1ec7n s\u1eed d\u1ee5ng m\u1eabu m\u00e3 \u0111\u00e1nh d\u1ea5u t\u01b0\u01a1ng t\u1ef1 nh\u01b0 c\u00e1c m\u00e3 \u0111\u01b0\u1ee3c tr\u00ecnh b\u00e0y \u1edf tr\u00ean. B\u00ean d\u01b0\u1edbi l\u00e0 c\u00e1c th\u01b0 vi\u1ec7n lazy load c\u00f3 th\u1ec3 r\u1ea5t h\u1eefu d\u1ee5ng cho b\u1ea1n:<\/p>\n\n\n\n<ul>\n<li><a href=\"https:\/\/github.com\/aFarkas\/lazysizes\" target=\"_blank\" rel=\"noreferrer noopener\">lazysizes<\/a> l\u00e0 th\u01b0 vi\u1ec7n lazy load v\u1edbi \u0111\u1ea7y \u0111\u1ee7 t\u00ednh n\u0103ng c\u00f3 kh\u1ea3 n\u0103ng gi\u00fap b\u1ea1n lazy load \u1ea3nh v\u00e0 <em>iframe<\/em>. M\u1eabu c\u1ee7a n\u00f3 s\u1eed d\u1ee5ng kh\u00e1 gi\u1ed1ng v\u1edbi m\u00e3 trong c\u00e1c v\u00ed d\u1ee5 b\u00ean tr\u00ean, trong \u0111\u00f3 n\u00f3 t\u1ef1 \u0111\u1ed9ng li\u00ean k\u1ebft \u0111\u1ebfn class <em>lazyload<\/em> trong c\u00e1c ph\u1ea7n t\u1eed <em>&lt;img&gt;<\/em>, v\u00e0 y\u00eau c\u1ea7u b\u1ea1n ch\u1ec9 \u0111\u1ecbnh URL c\u1ee5 th\u1ec3 trong thu\u1ed9c t\u00ednh <em>data-src<\/em> v\u00e0\/ho\u1eb7c <em>data-srcset<\/em>, URL s\u1ebd \u0111\u01b0\u1ee3c chuy\u1ec3n t\u01b0\u01a1ng \u1ee9ng v\u00e0o trong thu\u1ed9c t\u00ednh <em>src<\/em> ho\u1eb7c <em>srcset<\/em>. Lazysizes s\u1eed d\u1ee5ng intersection observer (b\u1ea1n c\u00f3 th\u1ec3 v\u00e1 v\u00edu th\u00eam), v\u00e0 c\u00f3 th\u1ec3 m\u1edf r\u1ed9ng b\u1eb1ng <a href=\"https:\/\/github.com\/aFarkas\/lazysizes#available-plugins-in-this-repo\" target=\"_blank\" rel=\"noreferrer noopener\">m\u1ed9t s\u1ed1 plugin<\/a> \u0111\u1ec3 th\u1ef1c hi\u1ec7n nhi\u1ec7m v\u1ee5 lazy load video. B\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o <a href=\"https:\/\/kiencang.net\/lazysizes-js-lazy-load-anh-p1\/\" target=\"_blank\" rel=\"noreferrer noopener\">h\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng lazysizes.js \u1edf \u0111\u00e2y<\/a>.<\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/ApoorvSaxena\/lozad.js\" target=\"_blank\" rel=\"noreferrer noopener\">lozad.js<\/a> l\u00e0 l\u1ef1a ch\u1ecdn si\u00eau nh\u1eb9 d\u00e0nh cho b\u1ea1n, n\u00f3 ch\u1ec9 s\u1eed d\u1ee5ng intersection observer. Nh\u1edd v\u1eady m\u00e0 n\u00f3 r\u1ea5t hi\u1ec7u qu\u1ea3, nh\u01b0ng s\u1ebd c\u1ea7n v\u00e1 v\u00edu (polyfilled) th\u00eam tr\u01b0\u1edbc khi b\u1ea1n mu\u1ed1n tri\u1ec3n khai lozad.js tr\u00ean c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u1eddi c\u0169.<\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/dinbror\/blazy\" target=\"_blank\" rel=\"noreferrer noopener\">blazy<\/a> l\u00e0 t\u00f9y ch\u1ecdn kh\u00e1c c\u0169ng r\u1ea5t nh\u1eb9 nh\u00e0ng (n\u00f3 ch\u1ec9 c\u00f3 dung l\u01b0\u1ee3ng 1,4 KB). Gi\u1ed1ng nh\u01b0 lazysizes, n\u00f3 kh\u00f4ng c\u1ea7n b\u1ea5t k\u1ef3 ti\u1ec7n \u00edch c\u1ee7a b\u00ean th\u1ee9 ba n\u00e0o, blazy t\u01b0\u01a1ng th\u00edch v\u1edbi IE7+. Tuy nhi\u00ean, th\u1eadt kh\u00f4ng may, blazy l\u1ea1i kh\u00f4ng s\u1eed d\u1ee5ng intersection observer.<\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/malchata\/yall.js\" target=\"_blank\" rel=\"noreferrer noopener\">yall.js<\/a> l\u00e0 th\u01b0 vi\u1ec7n t\u00f4i vi\u1ebft (t\u00e1c gi\u1ea3 g\u1ed1c c\u1ee7a b\u00e0i ti\u1ebfng Anh), n\u00f3 s\u1eed d\u1ee5ng IntersectionObserver v\u00e0 d\u1ef1 ph\u00f2ng b\u1eb1ng c\u00e1c tr\u00ecnh x\u1eed l\u00fd s\u1ef1 ki\u1ec7n. Yall.js t\u01b0\u01a1ng th\u00edch v\u1edbi IE11 v\u00e0 c\u00e1c tr\u00ecnh duy\u1ec7t l\u1edbn kh\u00e1c.<\/li>\n\n\n\n<li>N\u1ebfu b\u1ea1n mu\u1ed1n t\u00ecm ki\u1ebfm th\u01b0 vi\u1ec7n lazy load chuy\u00ean cho React, b\u1ea1n c\u00f3 th\u1ec3 c\u00e2n nh\u1eafc s\u1eed d\u1ee5ng <a href=\"https:\/\/github.com\/jasonslyvia\/react-lazyload\" target=\"_blank\" rel=\"noreferrer noopener\">react-lazyload<\/a>. D\u00f9 n\u00f3 kh\u00f4ng s\u1eed d\u1ee5ng intersection observer, n\u00f3 v\u1eabn cung c\u1ea5p ph\u01b0\u01a1ng th\u1ee9c t\u01b0\u01a1ng t\u1ef1 trong vi\u1ec7c lazy load \u1ea3nh cho nh\u1eefng ai quen thu\u1ed9c ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng b\u1eb1ng React.<\/li>\n<\/ul>\n\n\n\n<p>C\u00e1c th\u01b0 vi\u1ec7n lazy load k\u1ec3 tr\u00ean \u0111\u1ec1u c\u00f3 t\u00e0i li\u1ec7u h\u01b0\u1edbng d\u1eabn chi ti\u1ebft, v\u1edbi nhi\u1ec1u m\u1eabu m\u00e3 \u0111\u00e1nh d\u1ea5u cho ph\u00e9p b\u1ea1n s\u1eed d\u1ee5ng nhi\u1ec1u ki\u1ec3u lazy load kh\u00e1c nhau. N\u1ebfu b\u1ea1n kh\u00f4ng th\u00e0nh th\u1ea1o m\u00e3 th\u00ec b\u1ea1n ch\u1ec9 c\u1ea7n ch\u1ecdn th\u01b0 vi\u1ec7n r\u1ed3i tri\u1ec3n khai th\u00f4i. \u0110i\u1ec1u \u0111\u00f3 s\u1ebd gi\u00fap ti\u1ebft ki\u1ec7m r\u1ea5t nhi\u1ec1u c\u00f4ng s\u1ee9c.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"r\u1eafc-r\u1ed1i-nao-co-th\u1ec3-x\u1ea3y-ra\"><span class=\"ez-toc-section\" id=\"Rac_roi_nao_co_the_xay_ra\"><\/span>R\u1eafc r\u1ed1i n\u00e0o c\u00f3 th\u1ec3 x\u1ea3y ra<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Lazy load \u1ea3nh v\u00e0 video c\u00f3 c\u00e1c \u1ea3nh h\u01b0\u1edfng t\u00edch c\u1ef1c l\u00ean hi\u1ec7u su\u1ea5t v\u00e0 t\u1ed1c \u0111\u1ed9, tuy nhi\u00ean kh\u00f4ng n\u00ean coi n\u00f3 l\u00e0 nhi\u1ec7m v\u1ee5 gi\u1ea3n \u0111\u01a1n. N\u1ebfu b\u1ea1n tri\u1ec3n khai sai, n\u00f3 c\u00f3 th\u1ec3 \u0111\u1ec3 l\u1ea1i h\u1eadu qu\u1ea3 kh\u00f4n l\u01b0\u1eddng. Do \u0111\u00f3 b\u1ea1n c\u1ea7n \u0111\u1ec3 \u00fd \u0111\u1ebfn c\u00e1c v\u1ea5n \u0111\u1ec1 quan tr\u1ecdng d\u01b0\u1edbi \u0111\u00e2y.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ghi-nh\u1edb-d\u01b0\u1eddng-bien-fold\">Ghi nh\u1edb \u0111\u01b0\u1eddng bi\u00ean fold<\/h3>\n\n\n\n<p>\u00dd t\u01b0\u1edfng lazy load m\u1ecdi t\u00e0i nguy\u00ean \u0111a ph\u01b0\u01a1ng ti\u1ec7n tr\u00ean trang b\u1eb1ng JavaScript r\u1ea5t h\u1ea5p d\u1eabn, nh\u01b0ng b\u1ea1n c\u1ea7n ch\u1ed1ng l\u1ea1i s\u1ef1 c\u00e1m d\u1ed7 n\u00e0y. B\u1ea5t c\u1ee9 <a href=\"https:\/\/kiencang.net\/uu-tien-noi-dung-hien-thi\/\" target=\"_blank\" rel=\"noreferrer noopener\">th\u1ee9 g\u00ec n\u1eb1m tr\u00ean m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean kh\u00f4ng c\u1ea7n lazy load<\/a>. C\u00e1c t\u00e0i nguy\u00ean n\u00e0y ph\u1ea3i \u0111\u01b0\u1ee3c xem nh\u01b0 l\u00e0 c\u00e1c t\u00e0i s\u1ea3n quan tr\u1ecdng, v\u00e0 v\u00ec th\u1ebf c\u1ea7n ph\u1ea3i \u0111\u01b0\u1ee3c t\u1ea3i theo c\u00e1ch th\u00f4ng th\u01b0\u1eddng.<\/p>\n\n\n\n<p>V\u1ea5n \u0111\u1ec1 tr\u1ecdng t\u00e2m trong vi\u1ec7c t\u1ea3i t\u00e0i nguy\u00ean \u0111a ph\u01b0\u01a1ng ti\u1ec7n quan tr\u1ecdng theo c\u00e1ch th\u00f4ng th\u01b0\u1eddng ch\u1ee9 kh\u00f4ng d\u00f9ng lazy load l\u00e0 v\u00ec vi\u1ec7c lazy load l\u00e0m tr\u00ec ho\u00e3n vi\u1ec7c t\u1ea3i c\u00e1c t\u00e0i nguy\u00ean \u0111\u00f3 cho \u0111\u1ebfn khi DOM c\u00f3 kh\u1ea3 n\u0103ng t\u01b0\u01a1ng t\u00e1c- khi t\u1eadp l\u1ec7nh t\u1ea3i xong v\u00e0 b\u1eaft \u0111\u1ea7u \u0111\u01b0\u1ee3c th\u1ef1c thi. V\u1edbi c\u00e1c \u1ea3nh n\u1eb1m b\u00ean d\u01b0\u1edbi \u0111\u01b0\u1eddng bi\u00ean fold, \u0111i\u1ec1u n\u00e0y kh\u00f4ng c\u00f3 v\u1ea5n \u0111\u1ec1 g\u00ec, nh\u01b0ng v\u1edbi c\u00e1c t\u00e0i nguy\u00ean quan tr\u1ecdng n\u1eb1m tr\u00ean \u0111\u01b0\u1eddng bi\u00ean fold n\u00f3 s\u1ebd t\u1ea3i nhanh h\u01a1n khi b\u1ea1n s\u1eed d\u1ee5ng ph\u1ea7n t\u1eed <code>&lt;img&gt;<\/code> ti\u00eau chu\u1ea9n.<\/p>\n\n\n\n<p>T\u1ea5t nhi\u00ean v\u1ecb tr\u00ed c\u1ee7a \u0111\u01b0\u1eddng bi\u00ean fold kh\u00f4ng r\u00f5 r\u00e0ng trong th\u1eddi \u0111\u1ea1i n\u00e0y, khi website \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb tr\u00ean nhi\u1ec1u m\u00e0n h\u00ecnh v\u1edbi c\u00e1c k\u00edch c\u1ee1 kh\u00e1c nhau. Nh\u1eefng n\u1ed9i dung m\u00e0 n\u1eb1m tr\u00ean m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean c\u1ee7a laptop c\u00f3 th\u1ec3 l\u1ea1i n\u1eb1m <em>d\u01b0\u1edbi<\/em> m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean tr\u00ean thi\u1ebft b\u1ecb di \u0111\u1ed9ng. Kh\u00f4ng c\u00f3 gi\u1ea3i ph\u00e1p ho\u00e0n h\u1ea3o n\u00e0o \u0111\u1ec3 gi\u1ea3i quy\u1ebft v\u1ea5n \u0111\u1ec1 n\u00e0y trong m\u1ecdi t\u00ecnh hu\u1ed1ng. B\u1ea1n c\u1ea7n ti\u1ebfn h\u00e0nh ki\u1ec3m k\u00ea c\u00e1c t\u00e0i nguy\u00ean quan tr\u1ecdng n\u1eb1m tr\u00ean trang, v\u00e0 t\u1ea3i nh\u1eefng \u1ea3nh n\u00e0y theo c\u00e1ch th\u00f4ng th\u01b0\u1eddng.<\/p>\n\n\n\n<p>Th\u00eam v\u00e0o \u0111\u00f3, b\u1ea1n c\u00f3 th\u1ec3 kh\u00f4ng mu\u1ed1n qu\u00e1 nghi\u00eam ng\u1eb7t v\u1ec1 \u0111\u01b0\u1eddng bi\u00ean fold c\u0169ng nh\u01b0 ng\u01b0\u1ee1ng k\u00edch ho\u1ea1t lazy load. M\u1ee5c ti\u00eau c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c c\u1ea3i thi\u1ec7n khi b\u1ea1n th\u00e0nh l\u1eadp m\u1ed9t v\u00f9ng \u0111\u1ec7m n\u1eb1m b\u00ean d\u01b0\u1edbi \u0111\u01b0\u1eddng bi\u00ean fold, nh\u1edd th\u1ebf \u1ea3nh c\u00f3 kh\u1ea3 n\u0103ng b\u1eaft \u0111\u1ea7u t\u1ea3i s\u1edbm tr\u01b0\u1edbc khi ng\u01b0\u1eddi d\u00f9ng cu\u1ed9n \u0111\u1ebfn ch\u00fang trong viewport. V\u00ed d\u1ee5, intersection observer API cho ph\u00e9p b\u1ea1n ch\u1ec9 \u0111\u1ecbnh thu\u1ed9c t\u00ednh <em>rootMargin<\/em> trong m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng t\u00f9y ch\u1ecdn khi b\u1ea1n t\u1ea1o m\u1ed9t <em>IntersectionObserver<\/em> m\u1edbi. \u0110i\u1ec1u n\u00e0y \u0111em \u0111\u1ebfn cho c\u00e1c ph\u1ea7n t\u1eed m\u1ed9t b\u1ed9 \u0111\u1ec7m, c\u00e1i s\u1ebd k\u00edch ho\u1ea1t h\u00e0nh vi lazy load tr\u01b0\u1edbc khi ph\u1ea7n t\u1eed \u0111i v\u00e0o khung nh\u00ecn tr\u00ecnh duy\u1ec7t (qua \u0111\u00f3 s\u1ebd gi\u00fap ng\u01b0\u1eddi d\u00f9ng th\u1ecfa m\u00e3n h\u01a1n nh\u1edd tr\u00e1nh \u0111\u01b0\u1ee3c hi\u1ec7n t\u01b0\u1ee3ng tr\u1ec5):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let lazyImageObserver = new IntersectionObserver(function(entries, observer) {\n  \/\/ Lazy loading image code goes here\n}, {\n  rootMargin: \"0px 0px 256px 0px\"\n});<\/code><\/pre>\n\n\n\n<p>N\u1ebfu b\u1ea1n th\u1ea5y gi\u00e1 tr\u1ecb c\u1ee7a rootMargin tr\u00f4ng gi\u1ed1ng gi\u00e1 tr\u1ecb m\u00e0 b\u1ea1n ch\u1ec9 \u0111\u1ecbnh cho margin (l\u1ec1) trong CSS th\u00ec \u0111\u00fang r\u1ed3i \u0111\u1ea5y \u1ea1! Trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y, ch\u00fang ta m\u1edf r\u1ed9ng l\u1ec1 \u0111\u00e1y c\u1ee7a ph\u1ea7n t\u1eed observing (khung nh\u00ecn tr\u00ecnh duy\u1ec7t theo m\u1eb7c \u0111\u1ecbnh, nh\u01b0ng \u0111i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 thay \u0111\u1ed5i) l\u00ean 256 pixel. \u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 ch\u1ee9c n\u0103ng g\u1ecdi s\u1ebd \u0111\u01b0\u1ee3c th\u1ef1c thi khi ph\u1ea7n t\u1eed \u1ea3nh c\u00e1ch 256 pixel so v\u1edbi viewport, n\u00f3i c\u00e1ch kh\u00e1c, \u1ea3nh s\u1ebd b\u1eaft \u0111\u1ea7u t\u1ea3i tr\u01b0\u1edbc khi ng\u01b0\u1eddi d\u00f9ng th\u1ef1c s\u1ef1 th\u1ea5y n\u00f3.<\/p>\n\n\n\n<p>\u0110\u1ec3 \u0111\u1ea1t \u0111\u01b0\u1ee3c hi\u1ec7u \u1ee9ng t\u01b0\u01a1ng t\u1ef1 khi s\u1eed d\u1ee5ng m\u00e3 x\u1eed l\u00fd s\u1ef1 ki\u1ec7n scroll, b\u1ea1n \u0111\u01a1n gi\u1ea3n ch\u1ec9 c\u1ea7n \u0111i\u1ec1u ch\u1ec9nh ki\u1ec3m tra <em>getBoundingClientRect<\/em> \u0111\u1ec3 n\u00f3 bao g\u1ed3m b\u1ed9 \u0111\u1ec7m, v\u00e0 b\u1ea1n s\u1ebd c\u00f3 \u0111\u01b0\u1ee3c hi\u1ec7u \u1ee9ng t\u01b0\u01a1ng t\u1ef1 trong tr\u00ecnh duy\u1ec7t kh\u00f4ng h\u1ed7 tr\u1ee3 intersection observer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"b\u1ed1-c\u1ee5c-thay-d\u1ed5i-va-cac-khong-gian-gi\u1eef-ch\u1ed7\">B\u1ed1 c\u1ee5c thay \u0111\u1ed5i v\u00e0 c\u00e1c kh\u00f4ng gian gi\u1eef ch\u1ed7<\/h3>\n\n\n\n<p>Lazy load t\u00e0i nguy\u00ean \u0111a ph\u01b0\u01a1ng ti\u1ec7n c\u00f3 th\u1ec3 l\u00e0 nguy\u00ean nh\u00e2n g\u00e2y thay \u0111\u1ed5i b\u1ed1 c\u1ee5c n\u1ebfu kh\u00f4ng gian gi\u1eef ch\u1ed7 kh\u00f4ng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng. Nh\u1eefng thay \u0111\u1ed5i n\u00e0y c\u00f3 th\u1ec3 l\u00e0m ph\u00e2n t\u00e1n m\u1ee9c \u0111\u1ed9 t\u1eadp trung, \u0111\u1ecbnh h\u01b0\u1edbng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng v\u00e0 k\u00edch ho\u1ea1t v\u1eadn h\u00e0nh c\u1ea5u tr\u00fac DOM t\u1ed1n k\u00e9m c\u0169ng nh\u01b0 ti\u00eau th\u1ee5 t\u00e0i nguy\u00ean h\u1ec7 th\u1ed1ng v\u00e0 g\u00f3p ph\u1ea7n gay ra hi\u1ec7n t\u01b0\u1ee3ng jank. \u00cdt nh\u1ea5t b\u1ea1n n\u00ean c\u00e2n nh\u1eafc s\u1eed d\u1ee5ng kh\u1ed1i m\u00e0u gi\u1eef ch\u1ed7 \u0111\u1ed3ng nh\u1ea5t c\u00f3 c\u00f9ng \u0111\u1ed9 ph\u00e2n gi\u1ea3i v\u1edbi \u1ea3nh nh\u1eafm \u0111\u1ebfn, ho\u1eb7c c\u00e1c k\u1ef9 thu\u1eadt nh\u01b0 <a href=\"https:\/\/kiencang.net\/anh-lqip\/\" target=\"_blank\" rel=\"noreferrer noopener\">LQIP<\/a> ho\u1eb7c <a href=\"https:\/\/github.com\/technopagan\/sqip\" target=\"_blank\" rel=\"noreferrer noopener\">SQIP<\/a> \u0111\u1ec3 g\u1ee3i \u00fd c\u00e1c ph\u1ea7n t\u1eed \u0111a ph\u01b0\u01a1ng ti\u1ec7n tr\u01b0\u1edbc khi n\u00f3 \u0111\u01b0\u1ee3c t\u1ea3i.<\/p>\n\n\n\n<p>V\u1edbi c\u00e1c th\u1ebb <code>&lt;img&gt;<\/code>, <em>src<\/em> ban \u0111\u1ea7u ph\u1ea3i ch\u1ec9 \u0111\u1ebfn kh\u00f4ng gian gi\u1eef ch\u1ed7 cho \u0111\u1ebfn khi thu\u1ed9c t\u00ednh \u0111\u00f3 \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt v\u1edbi URL \u1ea3nh cu\u1ed1i c\u00f9ng. S\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <em>poster<\/em> trong ph\u1ea7n t\u1eed <code>&lt;video&gt;<\/code> \u0111\u1ec3 tr\u1ecf \u0111\u1ebfn \u1ea3nh gi\u1eef ch\u1ed7. Ngo\u00e0i ra, s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <code>width<\/code> v\u00e0 <code>height<\/code> tr\u00ean c\u1ea3 th\u1ebb <code>&lt;video&gt;<\/code> l\u1eabn th\u1ebb <code>&lt;img&gt;<\/code>. \u0110i\u1ec1u n\u00e0y \u0111\u1ea3m b\u1ea3o vi\u1ec7c chuy\u1ec3n ti\u1ebfp t\u1eeb \u1ea3nh chi\u1ebfm ch\u1ed7 t\u1edbi \u1ea3nh th\u1ef1c s\u1ef1 kh\u00f4ng l\u00e0m thay \u0111\u1ed5i k\u00edch c\u1ee1 k\u1ebft xu\u1ea5t c\u1ee7a ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c d\u00f9ng l\u00e0m n\u01a1i bao ch\u1ee9a t\u00e0i nguy\u00ean \u0111a ph\u01b0\u01a1ng ti\u1ec7n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"d\u1ed9-tr\u1ec5-trong-nhi\u1ec7m-v\u1ee5-gi\u1ea3i-ma-hinh-\u1ea3nh\">\u0110\u1ed9 tr\u1ec5 trong nhi\u1ec7m v\u1ee5 gi\u1ea3i m\u00e3 h\u00ecnh \u1ea3nh<\/h3>\n\n\n\n<p>T\u1ea3i c\u00e1c \u1ea3nh c\u00f3 dung l\u01b0\u1ee3ng l\u1edbn trong JavaScript v\u00e0 \u0111\u1eb7t ch\u00fang v\u00e0o trong DOM c\u00f3 th\u1ec3 l\u00e0m lu\u1ed3ng ch\u00ednh b\u1ecb b\u1eadn r\u1ed9n, \u0111\u00e2y l\u00e0 nguy\u00ean nh\u00e2n l\u00e0m giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng kh\u00f4ng th\u1ec3 ph\u1ea3n h\u1ed3i trong th\u1eddi gian ng\u1eafn khi m\u00e0 tr\u00ecnh duy\u1ec7t ph\u1ea3i gi\u1ea3i m\u00e3 h\u00ecnh \u1ea3nh. Gi\u1ea3i m\u00e3 h\u00ecnh \u1ea3nh kh\u00f4ng \u0111\u1ed3ng b\u1ed9 (asynchronously) b\u1eb1ng ph\u01b0\u01a1ng th\u1ee9c decode tr\u01b0\u1edbc khi ch\u00e8n ch\u00fang v\u00e0o DOM c\u00f3 th\u1ec3 c\u1eaft gi\u1ea3m ki\u1ec3u jank n\u00e0y (\u0111\u1ed9 tr\u1ec5), nh\u01b0ng c\u1ea7n nh\u1eadn th\u1ee9c r\u00f5 l\u00e0: hi\u1ec7n ch\u00fang kh\u00f4ng kh\u1ea3 d\u1ee5ng tr\u00ean m\u1ecdi tr\u00ecnh duy\u1ec7t, v\u00e0 n\u00f3 l\u00e0m ph\u1ee9c t\u1ea1p th\u00eam logic c\u1ee7a lazy load. N\u1ebfu b\u1ea1n mu\u1ed1n s\u1eed d\u1ee5ng n\u00f3, b\u1ea1n s\u1ebd c\u1ea7n ki\u1ec3m tra l\u1ea1i n\u00f3. B\u00ean d\u01b0\u1edbi ch\u00fang t\u00f4i cho b\u1ea1n th\u1ea5y c\u00e1ch s\u1eed d\u1ee5ng <em>Image.decode()<\/em> \u0111i k\u00e8m d\u1ef1 ph\u00f2ng:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var newImage = new Image();\nnewImage.src = \"my-awesome-image.jpg\";\nif (\"decode\" in newImage) {\n  \/\/ Fancy decoding logic\n  newImage.decode().then(function() {\n    imageContainer.appendChild(newImage);\n  });\n} else {\n  \/\/ Regular image load\n  imageContainer.appendChild(newImage);\n}<\/code><\/pre>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 ng\u00e2m c\u1ee9u <a href=\"https:\/\/codepen.io\/malchata\/pen\/WzeZGW\" target=\"_blank\" rel=\"noreferrer noopener\">link CodePen<\/a> n\u00e0y \u0111\u1ec3 xem \u0111o\u1ea1n m\u00e3 t\u01b0\u01a1ng t\u1ef1 cho v\u00ed d\u1ee5 tr\u00ean trong th\u1ef1c t\u1ebf. N\u1ebfu h\u1ea7u h\u1ebft c\u00e1c \u1ea3nh c\u1ee7a b\u1ea1n kh\u00e1 nh\u1ecf, \u0111i\u1ec1u n\u00e0y s\u1ebd ch\u1eb3ng c\u00f3 \u00edch g\u00ec nhi\u1ec1u, nh\u01b0ng n\u00f3 ch\u1eafc ch\u1eafn c\u00f3 th\u1ec3 gi\u00fap b\u1ea1n c\u1eaft gi\u1ea3m hi\u1ec7n t\u01b0\u1ee3ng jank khi b\u1ea1n lazy load c\u00e1c \u1ea3nh k\u00edch c\u1ee1 l\u1edbn v\u00e0 ch\u00e8n ch\u00fang v\u00e0o trong DOM.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"khi-cac-tai-nguyen-khong-ch\u1ecbu-t\u1ea3i-v\u1ec1\">Khi c\u00e1c t\u00e0i nguy\u00ean kh\u00f4ng ch\u1ecbu t\u1ea3i v\u1ec1<\/h3>\n\n\n\n<p>\u0110\u00f4i khi c\u00e1c t\u00e0i nguy\u00ean \u0111a ph\u01b0\u01a1ng ti\u1ec7n kh\u00f4ng th\u1ec3 t\u1ea3i v\u1ec1 v\u00ec m\u1ed9t l\u00fd do n\u00e0o \u0111\u1ea5y ho\u1eb7c l\u1ed7i b\u1ea5t ch\u1ee3t. \u0110i\u1ec1u \u0111\u00f3 c\u00f3 th\u1ec3 x\u1ea3y ra khi n\u00e0o? N\u00f3 c\u00f2n t\u00f9y, nh\u01b0ng \u0111\u00e2y l\u00e0 m\u1ed9t t\u00ecnh hu\u1ed1ng gi\u1ea3 \u0111\u1ecbnh cho b\u1ea1n: B\u1ea1n c\u00f3 t\u00e0i li\u1ec7u HTML c\u00f3 ch\u00ednh s\u00e1ch cache trong m\u1ed9t th\u1eddi gian ng\u1eafn (v\u00ed d\u1ee5 5 ph\u00fat), v\u00e0 ng\u01b0\u1eddi d\u00f9ng gh\u00e9 th\u0103m website <em>ho\u1eb7c<\/em> ng\u01b0\u1eddi d\u00f9ng r\u1eddi tab c\u0169 m\u1edf trong m\u1ed9t th\u1eddi gian d\u00e0i (v\u00ed d\u1ee5 v\u00e0i ti\u1ebfng) r\u1ed3i sau \u0111\u00f3 h\u1ecd quay tr\u1edf l\u1ea1i \u0111\u1ec3 \u0111\u1ecdc ti\u1ebfp n\u1ed9i dung c\u1ee7a b\u1ea1n. T\u1ea1i m\u1ed9t s\u1ed1 \u0111i\u1ec3m trong qu\u00e1 tr\u00ecnh n\u00e0y, s\u1ebd xu\u1ea5t hi\u1ec7n t\u00e1i tri\u1ec3n khai. Trong qu\u00e1 tr\u00ecnh tri\u1ec3n khai n\u00e0y, t\u00ean m\u1ed9t t\u00e0i nguy\u00ean \u1ea3nh thay \u0111\u1ed5i d\u1ef1a tr\u00ean phi\u00ean b\u1ea3n hash, ho\u1eb7c b\u1ecb lo\u1ea1i b\u1ecf ho\u00e0n to\u00e0n. Khi \u0111\u1ebfn th\u1eddi \u0111i\u1ec3m ng\u01b0\u1eddi d\u00f9ng c\u1ea7n lazy load \u1ea3nh, t\u00e0i nguy\u00ean kh\u00f4ng c\u00f2n c\u00f3 s\u1eb5n n\u1eefa, v\u00e0 th\u1ebf l\u00e0 x\u1ea3y ra l\u1ed7i.<\/p>\n\n\n\n<p>Trong khi gi\u1ea3 \u0111\u1ecbnh tr\u00ean c\u1ea7n ph\u1ea3i th\u1eeba nh\u1eadn l\u00e0 \u00edt khi x\u1ea3y ra, n\u00f3 c\u00f3 th\u1ec3 v\u1eabn bu\u1ed9c b\u1ea1n ph\u1ea3i c\u00f3 k\u1ebf ho\u1eb7c d\u1ef1 ph\u00f2ng n\u1ebfu lazy load g\u1eb7p l\u1ed7i. V\u1edbi c\u00e1c \u1ea3nh, gi\u1ea3i ph\u00e1p c\u00f3 th\u1ec3 gi\u1ed1ng nh\u01b0 b\u00ean d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var newImage = new Image();\nnewImage.src = \"my-awesome-image.jpg\";\nnewImage.onerror = function(){\n  \/\/ Ch\u1ec9 th\u1ecb c\u1ea7n ph\u1ea3i l\u00e0m g\u00ec khi c\u00f3 l\u1ed7i\n};\nnewImage.onload = function(){\n  \/\/ T\u1ea3i \u1ea3nh\n};<\/code><\/pre>\n\n\n\n<p>\u0110i\u1ec1u m\u00e0 b\u1ea1n mu\u1ed1n l\u00e0m trong s\u1ef1 ki\u1ec7n l\u1ed7i c\u00f2n t\u00f9y thu\u1ed9c v\u00e0o \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n. V\u00ed d\u1ee5, b\u1ea1n c\u00f3 th\u1ec3 thay th\u1ebf \u1ea3nh gi\u1eef ch\u1ed7 b\u1eb1ng m\u1ed9t n\u00fat b\u1ea5m \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng c\u1ed1 g\u1eafng t\u1ea3i \u1ea3nh m\u1ed9t l\u1ea7n n\u1eefa, ho\u1eb7c \u0111\u01a1n gi\u1ea3n h\u01a1n th\u00ec hi\u1ec3n th\u1ecb m\u1ed9t th\u00f4ng b\u00e1o l\u1ed7i trong khu v\u1ef1c ch\u1ee9a \u1ea3nh chi\u1ebfm ch\u1ed7.<\/p>\n\n\n\n<p>C\u00e1c k\u1ecbch b\u1ea3n kh\u00e1c c\u0169ng c\u00f3 th\u1ec3 ph\u00e1t sinh. Cho d\u00f9 b\u1ea1n c\u00f3 l\u00e0m g\u00ec \u0111i n\u1eefa, \u00fd t\u01b0\u1edfng t\u1ed1t l\u00e0 th\u00f4ng b\u00e1o cho ng\u01b0\u1eddi dung khi l\u1ed7i xu\u1ea5t hi\u1ec7n, v\u00e0 c\u00f3 th\u1ec3 cung c\u1ea5p cho h\u1ecd h\u00e0nh \u0111\u1ed9ng n\u00e0o \u0111\u1ea5y \u0111\u1ec3 kh\u1eafc ph\u1ee5c n\u1ebfu c\u00f3 \u0111i\u1ec1u g\u00ec \u0111\u00f3 kh\u00f4ng \u1ed5n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"tinh-s\u1eb5n-co-c\u1ee7a-javascript\">T\u00ednh s\u1eb5n c\u00f3 c\u1ee7a JavaScript<\/h3>\n\n\n\n<p>B\u1ea1n kh\u00f4ng th\u1ec3 c\u1ee9 gi\u1ea3 \u0111\u1ecbnh r\u1eb1ng JavaScript l\u00fac n\u00e0o c\u0169ng s\u1eb5n c\u00f3 \u0111\u01b0\u1ee3c. N\u1ebfu b\u1ea1n th\u1ef1c hi\u1ec7n lazy load \u1ea3nh, h\u00e3y c\u00e2n nh\u1eafc \u0111\u1ebfn vi\u1ec7c cung c\u1ea5p m\u00e3 \u0111\u00e1nh d\u1ea5u <em>&lt;noscript&gt;<\/em> \u0111\u1ec3 n\u00f3 c\u00f3 th\u1ec3 hi\u1ec3n th\u1ecb \u0111\u01b0\u1ee3c \u1ea3nh trong tr\u01b0\u1eddng h\u1ee3p JavaScript kh\u00f4ng s\u1eb5n c\u00f3 (unavailable). V\u00ed d\u1ee5 b\u00ean d\u01b0\u1edbi tr\u00ecnh b\u00e0y c\u00e1ch \u0111\u01a1n gi\u1ea3n nh\u1ea5t \u0111\u1ec3 th\u1ef1c hi\u1ec7n d\u1ef1 ph\u00f2ng th\u00f4ng qua s\u1eed d\u1ee5ng ph\u1ea7n t\u1eed <em>&lt;noscript&gt;<\/em> \u0111\u1ec3 ph\u1ee5c v\u1ee5 \u1ea3nh n\u1ebfu JavaScripts b\u1ecb t\u1eaft (d\u00f9 th\u00f4ng th\u01b0\u1eddng, theo m\u1eb7c \u0111\u1ecbnh th\u00ec n\u00f3 lu\u00f4n b\u1eadt):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- H\u00ecnh \u1ea3nh th\u1ef1c t\u1ebf \u0111\u01b0\u1ee3c t\u1ea3i l\u01b0\u1eddi th\u00f4ng qua JavaScript --&gt;\n&lt;img class=\"lazy\" src=\"anh-giu-cho.jpg\" data-src=\"anh-can-lazy-load.jpg\" alt=\"T\u00f4i l\u00e0 \u1ea3nh!\"&gt;\n&lt;!-- Hi\u1ec3n th\u1ecb \u1ea3nh trong tr\u01b0\u1eddng h\u1ee3p JavaScript b\u1ecb t\u1eaft --&gt;\n&lt;noscript&gt;\n  &lt;img src=\"anh-can-lazy-load.jpg\" alt=\"T\u00f4i l\u00e0 \u1ea3nh!\"&gt;\n&lt;\/noscript&gt;<\/code><\/pre>\n\n\n\n<p>N\u1ebfu JavaScript b\u1ecb t\u1eaft, ng\u01b0\u1eddi d\u00f9ng s\u1ebd th\u1ea5y <em>c\u1ea3<\/em> \u1ea3nh chi\u1ebfm ch\u1ed7 v\u00e0 \u1ea3nh \u0111\u01b0\u1ee3c bao ch\u1ee9a trong ph\u1ea7n t\u1eed <code>&lt;noscript&gt;<\/code>. \u0110\u1ec3 x\u1eed l\u00fd v\u1ea5n \u0111\u1ec1 n\u00e0y, ch\u00fang ta \u0111\u1eb7t m\u1ed9t class <em>no-js<\/em> trong th\u1ebb <code>&lt;html&gt;<\/code> gi\u1ed1ng nh\u01b0 th\u1ebf n\u00e0y:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html class=\"no-js\"&gt;<\/code><\/pre>\n\n\n\n<p>Sau \u0111\u00f3 ch\u00fang ta \u0111\u1eb7t m\u1ed9t d\u00f2ng n\u1ed9i tuy\u1ebfn trong <code>&lt;head&gt;<\/code>, n\u00f3 c\u1ea7n ph\u1ea3i \u0111\u1ee9ng tr\u01b0\u1edbc b\u1ea5t c\u1ee9 style sheets n\u00e0o \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u th\u00f4ng qua th\u1ebb <code>&lt;link&gt;<\/code> \u0111\u1ec3 lo\u1ea1i b\u1ecf class <em>no-js<\/em> c\u1ee7a ph\u1ea7n t\u1eed <code>&lt;html&gt;<\/code> n\u1ebfu JavaScript \u0111\u01b0\u1ee3c b\u1eadt.<\/p>\n\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\n<p>Cu\u1ed1i c\u00f9ng, ch\u00fang ta c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng v\u00e0i d\u00f2ng CSS \u0111\u01a1n gi\u1ea3n \u0111\u1ec3 \u1ea9n c\u00e1c ph\u1ea7n t\u1eed c\u00f3 class l\u00e0 lazy khi JavaScript kh\u00f4ng s\u1eb5n c\u00f3, gi\u1ed1ng nh\u01b0 th\u1ebf n\u00e0y:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.no-js .lazy {\n  display: none;\n}<\/code><\/pre>\n\n\n\n<p>\u0110i\u1ec1u n\u00e0y s\u1ebd kh\u00f4ng ng\u0103n \u1ea3nh chi\u1ebfm ch\u1ed7 t\u1ea3i v\u1ec1, nh\u01b0ng \u0111em l\u1ea1i k\u1ebft qu\u1ea3 nh\u01b0 mong mu\u1ed1n. Nh\u1eefng ai t\u1eaft JavaScript s\u1ebd kh\u00f4ng ph\u1ea3i th\u1ea5y c\u00e1c \u1ea3nh gi\u1eef ch\u1ed7 kh\u00f4ng c\u00f3 \u00fd ngh\u0129a trong n\u1ed9i dung.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 s\u1eed d\u1ee5ng d\u1ef1 ph\u00f2ng <code>&lt;noscript&gt;<\/code>: <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\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=\"Ket_luan\"><\/span>K\u1ebft lu\u1eadn<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Khi \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng c\u1ea9n tr\u1ecdng, lazy load \u1ea3nh v\u00e0 video c\u00f3 th\u1ec3 gi\u00fap b\u1ea1n gi\u1ea3m \u0111\u00e1ng k\u1ec3 th\u1eddi gian t\u1ea3i l\u1ea7n \u0111\u1ea7u, c\u0169ng nh\u01b0 d\u1eef li\u1ec7u trang t\u1ea3i l\u1ea7n \u0111\u1ea7u. Ng\u01b0\u1eddi d\u00f9ng kh\u00f4ng ph\u1ea3i g\u00e1nh ch\u1ecbu c\u00e1c ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng v\u00e0 chi ph\u00ed x\u1eed l\u00fd c\u00e1c t\u1ea3i nguy\u00ean \u0111a ph\u01b0\u01a1ng ti\u1ec7n kh\u00f4ng c\u1ea7n thi\u1ebft m\u00e0 h\u1ecd c\u00f3 th\u1ec3 kh\u00f4ng bao gi\u1edd th\u1ea5y, nh\u01b0ng h\u1ecd c\u00f3 th\u1ec3 v\u1eabn th\u1ea5y \u0111\u01b0\u1ee3c c\u00e1c t\u00e0i nguy\u00ean \u0111\u00f3 n\u1ebfu h\u1ecd mu\u1ed1n.<\/p>\n\n\n\n<p>Khi c\u00e1c k\u1ef9 thu\u1eadt c\u1ea3i ti\u1ebfn hi\u1ec7u su\u1ea5t ng\u00e0y c\u00e0ng ph\u00e1t tri\u1ec3n, lazy load l\u00e0 ph\u01b0\u01a1ng th\u1ee9c t\u0103ng t\u1ed1c kh\u00f4ng g\u00e2y tranh c\u00e3i. N\u1ebfu b\u1ea1n c\u00f3 nhi\u1ec1u \u1ea3nh n\u1ed9i tuy\u1ebfn trong trang, \u0111\u00e2y l\u00e0 c\u00e1ch ho\u00e0n h\u1ea3o \u0111\u1ec3 c\u1eaft gi\u1ea3m d\u1eef li\u1ec7u t\u1ea3i v\u1ec1 kh\u00f4ng c\u1ea7n thi\u1ebft. Ng\u01b0\u1eddi d\u00f9ng c\u1ee7a b\u1ea1n v\u00e0 c\u00e1c b\u00ean li\u00ean quan thu\u1ed9c d\u1ef1 \u00e1n s\u1ebd r\u1ea5t c\u1ea3m \u01a1n v\u00ec \u0111i\u1ec1u \u0111\u00f3!<\/p>\n\n\n\n<p><em>(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft Lazy Loading Images and Video, t\u00e1c gi\u1ea3: Jeremy Wagner, trang web[.]dev)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>V\u00e0i l\u1eddi c\u1ee7a ng\u01b0\u1eddi d\u1ecbch: B\u00e0i vi\u1ebft n\u00e0y ch\u1ee7 y\u1ebfu d\u00e0nh cho nh\u1eefng ai mu\u1ed1n t\u00ecm hi\u1ec3u s\u00e2u h\u01a1n v\u1ec1 lazy load, n\u00f3 \u0111\u00f2i h\u1ecfi b\u1ea1n ph\u1ea3i c\u00f3 hi\u1ec3u bi\u1ebft nh\u1ea5t \u0111\u1ecbnh v\u1ec1 HTML, JavaScript, CSS. V\u1edbi nh\u1eefng ai \u0111\u01a1n thu\u1ea7n ch\u1ec9 mu\u1ed1n \u00e1p d\u1ee5ng lazy load l\u00ean trang WordPress, c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u c\u00e1c &hellip;<\/p>\n","protected":false},"author":1,"featured_media":24558,"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>Lazy load l\u00e0 g\u00ec: C\u00e1ch tri\u1ec3n khai lazy load \u1ea3nh v\u00e0 video tr\u00ean website &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"description\" content=\"V\u1edbi c\u00e1c trang web nhi\u1ec1u \u1ea3nh v\u00e0 video b\u1ea1n b\u1eaft bu\u1ed9c ph\u1ea3i t\u00ednh \u0111\u1ebfn chuy\u1ec7n lazy load c\u00e1c t\u00e0i nguy\u00ean \u0111a ph\u01b0\u01a1ng ti\u1ec7n n\u00e0y. N\u1ebfu kh\u00f4ng n\u00f3 s\u1ebd l\u00e0m t\u1ed1c \u0111\u1ed9 trang ch\u1eadm ch\u1ea1p \u0111i nhi\u1ec1u.\" \/>\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\/lazy-load-anh-va-video\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lazy load l\u00e0 g\u00ec: C\u00e1ch tri\u1ec3n khai lazy load \u1ea3nh v\u00e0 video tr\u00ean website &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"V\u1edbi c\u00e1c trang web nhi\u1ec1u \u1ea3nh v\u00e0 video b\u1ea1n b\u1eaft bu\u1ed9c ph\u1ea3i t\u00ednh \u0111\u1ebfn chuy\u1ec7n lazy load c\u00e1c t\u00e0i nguy\u00ean \u0111a ph\u01b0\u01a1ng ti\u1ec7n n\u00e0y. N\u1ebfu kh\u00f4ng n\u00f3 s\u1ebd l\u00e0m t\u1ed1c \u0111\u1ed9 trang ch\u1eadm ch\u1ea1p \u0111i nhi\u1ec1u.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/lazy-load-anh-va-video\/\" \/>\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=\"2022-01-29T10:51:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-22T16:13:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2022\/01\/LazyLoad.png\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"392\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/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=\"28 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Lazy load l\u00e0 g\u00ec: C\u00e1ch tri\u1ec3n khai lazy load \u1ea3nh v\u00e0 video tr\u00ean website &#8226; Ki\u1ebfn c\u00e0ng","description":"V\u1edbi c\u00e1c trang web nhi\u1ec1u \u1ea3nh v\u00e0 video b\u1ea1n b\u1eaft bu\u1ed9c ph\u1ea3i t\u00ednh \u0111\u1ebfn chuy\u1ec7n lazy load c\u00e1c t\u00e0i nguy\u00ean \u0111a ph\u01b0\u01a1ng ti\u1ec7n n\u00e0y. N\u1ebfu kh\u00f4ng n\u00f3 s\u1ebd l\u00e0m t\u1ed1c \u0111\u1ed9 trang ch\u1eadm ch\u1ea1p \u0111i nhi\u1ec1u.","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\/lazy-load-anh-va-video\/","og_locale":"vi_VN","og_type":"article","og_title":"Lazy load l\u00e0 g\u00ec: C\u00e1ch tri\u1ec3n khai lazy load \u1ea3nh v\u00e0 video tr\u00ean website &#8226; Ki\u1ebfn c\u00e0ng","og_description":"V\u1edbi c\u00e1c trang web nhi\u1ec1u \u1ea3nh v\u00e0 video b\u1ea1n b\u1eaft bu\u1ed9c ph\u1ea3i t\u00ednh \u0111\u1ebfn chuy\u1ec7n lazy load c\u00e1c t\u00e0i nguy\u00ean \u0111a ph\u01b0\u01a1ng ti\u1ec7n n\u00e0y. N\u1ebfu kh\u00f4ng n\u00f3 s\u1ebd l\u00e0m t\u1ed1c \u0111\u1ed9 trang ch\u1eadm ch\u1ea1p \u0111i nhi\u1ec1u.","og_url":"https:\/\/kiencang.net\/lazy-load-anh-va-video\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2022-01-29T10:51:00+00:00","article_modified_time":"2023-08-22T16:13:08+00:00","og_image":[{"width":750,"height":392,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2022\/01\/LazyLoad.png","type":"image\/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":"28 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/lazy-load-anh-va-video\/","url":"https:\/\/kiencang.net\/lazy-load-anh-va-video\/","name":"Lazy load l\u00e0 g\u00ec: C\u00e1ch tri\u1ec3n khai lazy load \u1ea3nh v\u00e0 video tr\u00ean website &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2022-01-29T10:51:00+00:00","dateModified":"2023-08-22T16:13:08+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"description":"V\u1edbi c\u00e1c trang web nhi\u1ec1u \u1ea3nh v\u00e0 video b\u1ea1n b\u1eaft bu\u1ed9c ph\u1ea3i t\u00ednh \u0111\u1ebfn chuy\u1ec7n lazy load c\u00e1c t\u00e0i nguy\u00ean \u0111a ph\u01b0\u01a1ng ti\u1ec7n n\u00e0y. N\u1ebfu kh\u00f4ng n\u00f3 s\u1ebd l\u00e0m t\u1ed1c \u0111\u1ed9 trang ch\u1eadm ch\u1ea1p \u0111i nhi\u1ec1u.","breadcrumb":{"@id":"https:\/\/kiencang.net\/lazy-load-anh-va-video\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/lazy-load-anh-va-video\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/lazy-load-anh-va-video\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"Lazy load l\u00e0 g\u00ec: C\u00e1ch tri\u1ec3n khai lazy load \u1ea3nh v\u00e0 video tr\u00ean website"}]},{"@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\/16868"}],"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=16868"}],"version-history":[{"count":1,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16868\/revisions"}],"predecessor-version":[{"id":24559,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16868\/revisions\/24559"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/24558"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=16868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=16868"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=16868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}