{"id":28123,"date":"2021-08-02T09:55:43","date_gmt":"2021-08-02T02:55:43","guid":{"rendered":"https:\/\/wiki.tino.org\/staging\/?p=28123"},"modified":"2021-08-02T09:55:46","modified_gmt":"2021-08-02T02:55:46","slug":"lazy-loading-la-gi","status":"publish","type":"post","link":"https:\/\/tino.vn\/blog\/lazy-loading-la-gi\/","title":{"rendered":"Lazy Loading l\u00e0 g\u00ec? T\u1ea1i sao n\u00ean tri\u1ec3n khai Lazy Loading?"},"content":{"rendered":"\n

M\u1ed9t ph\u01b0\u01a1ng ph\u00e1p gi\u00fap \u00edch cho b\u1ea1n trong vi\u1ec7c t\u1ed1i \u01b0u hi\u1ec7u su\u1ea5t ng\u01b0\u1eddi d\u00f9ng khi truy c\u1eadp v\u00e0o trang web, \u0111\u1ed3ng th\u1eddi ti\u1ebft ki\u1ec7m c\u1ea3 chi ph\u00ed v\u00e0 t\u00e0i nguy\u00ean c\u1ee7a h\u1ec7 th\u1ed1ng, \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 Lazy Loading. \u0110\u1ec3 hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1 ph\u01b0\u01a1ng ph\u00e1p n\u00e0y, m\u1eddi b\u1ea1n c\u00f9ng Tino Group t\u00ecm hi\u1ec3u v\u1ec1 Lazy Loading nh\u00e9!<\/strong><\/p>\n\n\n\n

Lazy Loading l\u00e0 g\u00ec?<\/strong><\/h2>\n\n\n\n

Lazy Loading l\u00e0 m\u1ed9t k\u1ef9 thu\u1eadt \u0111\u01b0\u1ee3c c\u00e1c trang web \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ed1i \u01b0u h\u00f3a th\u1eddi gian t\u1ea3i. V\u1edbi t\u00ednh n\u0103ng n\u00e0y, m\u1ed9t trang web ch\u1ec9 t\u1ea3i n\u1ed9i dung \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u v\u00e0 ch\u1edd t\u1ea3i th\u00eam c\u00e1c n\u1ed9i dung c\u00f2n l\u1ea1i khi ng\u01b0\u1eddi d\u00f9ng y\u00eau c\u1ea7u.<\/p>\n\n\n\n

Lazy Loading gi\u00fap b\u1ea1n gi\u1ea3m th\u1eddi gian m\u1edf trang web v\u00ec tr\u00ecnh duy\u1ec7t ch\u1ec9 t\u1ea3i m\u1ed9t n\u1ed9i dung tr\u00ean trang t\u1ea1i m\u1ed9t th\u1eddi \u0111i\u1ec3m nh\u1ea5t \u0111\u1ecbnh.<\/p>\n\n\n\n

\"lazy-loading-la-gi\"<\/figure><\/div>\n\n\n\n

Lazy Loading ho\u1ea1t \u0111\u1ed9ng nh\u01b0 th\u1ebf n\u00e0o?<\/strong><\/h3>\n\n\n\n

Khi b\u1ea1n th\u00eam t\u00e0i nguy\u00ean v\u00e0o trang web (h\u00ecnh \u1ea3nh, video,…), t\u00e0i nguy\u00ean s\u1ebd \u0111\u01b0\u1ee3c tham chi\u1ebfu \u0111\u1ebfn Placeholder (tr\u00ecnh gi\u1eef ch\u1ed7). Trong l\u00fac b\u1ea1n duy\u1ec7t web, t\u00e0i nguy\u00ean th\u1ef1c \u0111\u01b0\u1ee3c tr\u00ecnh duy\u1ec7t l\u01b0u v\u00e0o b\u1ed9 nh\u1edb \u0111\u1ec7m v\u00e0 thay th\u1ebf Placeholder khi t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb tr\u00ean m\u00e0n h\u00ecnh c\u1ee7a b\u1ea1n.<\/p>\n\n\n\n

V\u00ed d\u1ee5: N\u1ebfu b\u1ea1n t\u1ea3i m\u1ed9t trang web v\u00e0 r\u1eddi kh\u1ecfi trang web \u0111\u00f3 ngay l\u1eadp t\u1ee9c, th\u00ec ch\u1ec9 c\u00f3 duy nh\u1ea5t ph\u1ea7n tr\u00ean c\u1ee7a trang web \u0111\u01b0\u1ee3c t\u1ea3i.<\/p>\n\n\n\n

T\u1ea1i sao n\u00ean tri\u1ec3n khai Lazy Loading?<\/strong><\/h3>\n\n\n\n

Mang l\u1ea1i hi\u1ec7u su\u1ea5t t\u1ed1t h\u01a1n<\/strong><\/h4>\n\n\n\n

B\u1ea1n s\u1ebd nh\u1eadn th\u1ea5y s\u1ef1 c\u1ea3i thi\u1ec7n v\u1ec1 th\u1eddi gian t\u1ea3i c\u1ee7a trang web v\u1edbi Lazy Loading, l\u01b0\u1ee3ng d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c t\u1ea3i s\u1ebd gi\u1ea3m xu\u1ed1ng. Khi \u0111i\u1ec1u n\u00e0y x\u1ea3y ra, b\u1ea1n s\u1ebd t\u1ea3i \u00edt h\u00ecnh \u1ea3nh h\u01a1n tr\u00ean trang web, d\u1eabn \u0111\u1ebfn hi\u1ec7u su\u1ea5t trang web \u0111\u01b0\u1ee3c c\u1ea3i thi\u1ec7n t\u1ed1t h\u01a1n v\u00e0 s\u1eed d\u1ee5ng t\u00e0i nguy\u00ean h\u1ee3p l\u00fd h\u01a1n.<\/p>\n\n\n\n

Chi ph\u00ed th\u1ea5p<\/strong><\/h4>\n\n\n\n

Lazy Loading gi\u00fap qu\u1ea3n tr\u1ecb vi\u00ean<\/a> trang web gi\u1ea3m chi ph\u00ed b\u1eb1ng c\u00e1ch chuy\u1ec3n m\u1ed9t l\u01b0\u1ee3ng d\u1eef li\u1ec7u qua c\u00e1c m\u1ea1ng ph\u00e2n ph\u1ed1i n\u1ed9i dung. C\u00e1c m\u1ea1ng n\u00e0y t\u00ednh ph\u00ed cho m\u1ed7i byte d\u1eef li\u1ec7u v\u00e0 d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c truy\u1ec1n c\u00e0ng \u00edt th\u00ec chi ph\u00ed c\u00e0ng th\u1ea5p. Khi d\u1eef li\u1ec7u kh\u00f4ng \u0111\u1ebfn \u0111\u01b0\u1ee3c c\u00e1c m\u1ea1ng n\u00e0y do \u00edt y\u00eau c\u1ea7u, chi ph\u00ed ph\u00e2n ph\u1ed1i s\u1ebd gi\u1ea3m xu\u1ed1ng.<\/p>\n\n\n\n

\"lazy-loading-la-gi\"<\/figure><\/div>\n\n\n\n

SEO<\/strong><\/h4>\n\n\n\n

SEO<\/a> t\u1ed1t c\u00f3 ngh\u0129a l\u00e0 trang web c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c \u0111\u1ea3m b\u1ea3o v\u1ec1 t\u1ed1c \u0111\u1ed9 t\u1ea3i v\u00e0 ng\u01b0\u1eddi d\u00f9ng th\u00edch c\u00e1c trang web c\u00f3 t\u1ed1c \u0111\u1ed9 t\u1ea3i nhanh h\u01a1n. Lazy Loading gi\u00fap gi\u1ea3m t\u1ef7 l\u1ec7 tho\u00e1t xu\u1ed1ng m\u1ee9c th\u1ea5p h\u01a1n v\u00e0 x\u1ebfp h\u1ea1ng trang web \u0111\u01b0\u1ee3c c\u1ea3i thi\u1ec7n tr\u00ean Google. Khi Google nh\u1eadn th\u1ea5y trang web c\u1ee7a b\u1ea1n ph\u00f9 h\u1ee3p, b\u1ea1n s\u1ebd nh\u1eadn \u0111\u01b0\u1ee3c nhi\u1ec1u truy c\u1eadp h\u01a1n t\u1eeb ng\u01b0\u1eddi d\u00f9ng v\u00e0 c\u1ea3i thi\u1ec7n chuy\u1ec3n \u0111\u1ed5i tr\u00ean trang web.<\/p>\n\n\n\n

Tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng<\/strong><\/h4>\n\n\n\n

V\u1edbi s\u1ef1 c\u1ea1nh tranh cao, vi\u1ec7c ti\u1ebft ki\u1ec7m b\u0103ng th\u00f4ng v\u00e0 th\u1eddi gian cho ng\u01b0\u1eddi d\u00f9ng truy c\u1eadp c\u00e0ng nhi\u1ec1u c\u00e0ng t\u1ed1t. N\u1ebfu b\u1ea1n \u0111\u1ea3m b\u1ea3o ng\u01b0\u1eddi d\u00f9ng ch\u1ec9 truy c\u1eadp nhanh v\u00e0o nh\u1eefng g\u00ec \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u, \u0111i\u1ec1u \u0111\u00f3 s\u1ebd t\u0103ng c\u01a1 h\u1ed9i h\u1ecd quay tr\u1edf l\u1ea1i trang web, b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 ti\u1ebft ki\u1ec7m t\u00e0i nguy\u00ean tr\u00ean h\u1ec7 th\u1ed1ng.<\/p>\n\n\n\n

Lazy Loading \u0111\u01b0\u1ee3c tri\u1ec3n khai b\u1eb1ng nh\u1eefng ph\u01b0\u01a1ng ph\u00e1p g\u00ec?<\/strong><\/h3>\n\n\n\n