{"id":22010,"date":"2020-08-10T23:45:47","date_gmt":"2020-08-10T16:45:47","guid":{"rendered":"https:\/\/speed.family\/?p=16392"},"modified":"2020-08-10T23:45:47","modified_gmt":"2020-08-10T16:45:47","slug":"lazyload-ecom-dung-khong","status":"publish","type":"post","link":"https:\/\/kiencang.net\/lazyload-ecom-dung-khong\/","title":{"rendered":"H\u00f3a ra r\u1ea5t nhi\u1ec1u c\u1eeda h\u00e0ng tr\u1ef1c tuy\u1ebfn \u0111ang s\u1eed d\u1ee5ng lazy load \u1ea3nh? C\u00f3 n\u00ean nh\u01b0 v\u1eady kh\u00f4ng? C\u00f2n t\u00f9y!"},"content":{"rendered":"\n

Tr\u00e1i v\u1edbi suy ngh\u0129 ban \u0111\u1ea7u c\u1ee7a t\u00f4i, trong qu\u00e1 tr\u00ecnh l\u00e0m vi\u1ec7c v\u1edbi kh\u00e1ch h\u00e0ng, t\u00f4i nh\u1eadn th\u1ea5y h\u1ea7u h\u1ebft c\u00e1c website b\u00e1n h\u00e0ng v\u1edbi nhi\u1ec1u h\u00ecnh minh h\u1ecda s\u1ea3n ph\u1ea9m ngay m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean<\/a> (d\u1ea1ng c\u1ee5m h\u00ecnh slide, v\u1edbi m\u1ed9t h\u00ecnh l\u1edbn \u0111\u1ea1i di\u1ec7n v\u00e0 c\u00e1c h\u00ecnh nh\u1ecf ch\u1ee5p c\u00e1c g\u00f3c \u0111\u1ed9 kh\u00e1c) v\u1eabn r\u1ea5t th\u00edch d\u00f9ng k\u1ef9 thu\u1eadt lazy load \u1ea3nh<\/a>?<\/p>\n\n\n

V\u00ed d\u1ee5 v\u1ec1 c\u1ee5m h\u00ecnh slide tr\u00f4ng gi\u1ed1ng nh\u01b0 th\u1ebf n\u00e0y:<\/p>\n\n\n

\"c\u1ee5m
C\u1ee5m h\u00ecnh slide s\u1ea3n ph\u1ea9m lu\u00f4n l\u00e0 m\u1ed9t ti\u00eau chu\u1ea9n tr\u00ean c\u00e1c trang b\u00e1n h\u00e0ng, \u0111\u00e2y l\u00e0 h\u00ecnh ch\u1ee5p m\u00e0n h\u00ecnh t\u1eeb website c\u1ee7a \u0110i\u1ec7n M\u00e1y Xanh<\/a>.<\/figcaption><\/figure><\/div>\n\n\n

V\u1eady \u0111i\u1ec1u \u0111\u00f3 c\u00f3 n\u00ean hay kh\u00f4ng? C\u00e2u tr\u1ea3 l\u1eddi th\u1ef1c s\u1ef1 kh\u00f3, v\u00ec c\u00f3 nhi\u1ec1u v\u1ea5n \u0111\u1ec1 li\u00ean quan chi ph\u1ed1i chuy\u1ec7n n\u00e0y.<\/p>\n\n\n

Lazy load \u1ea3nh tr\u00ean trang b\u00e1n h\u00e0ng, ngay c\u1ea3 v\u1edbi trang th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed l\u1edbn \u0111\u00e3 \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng r\u1ed3i, v\u00ed d\u1ee5 nh\u01b0 \u0110i\u1ec7n M\u00e1y Xanh. V\u1ea5n \u0111\u1ec1 v\u1ec1 \u0111\u1ed9 tr\u1ec5 \u0111\u01b0\u1ee3c kh\u1eafc ph\u1ee5c nhi\u1ec1u nh\u1edd CDN, m\u00e1y ch\u1ee7 tr\u00e2u b\u00f2, c\u00e1c k\u1ef9 thu\u1eadt lazy load ki\u1ec3u m\u1edbi nh\u01b0 LQIP<\/a> v\u00e0 t\u1ea3i tr\u01b0\u1edbc khi \u0111i v\u00e0o khung nh\u00ecn tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n

M\u1ed9t nguy\u00ean nh\u00e2n quan tr\u1ecdng kh\u00e1c c\u00f3 th\u1ec3 khi\u1ebfn nhi\u1ec1u ng\u01b0\u1eddi thi\u1ebft k\u1ebf ho\u1eb7c t\u1ed1i \u01b0u th\u00edch lazy load ngay c\u1ea3 h\u00ecnh minh h\u1ecda s\u1ea3n ph\u1ea9m ngay \u0111\u1ea7u l\u00e0 v\u00ec n\u00f3 gi\u00fap c\u1ea3i thi\u1ec7n \u0111i\u1ec3m s\u1ed1 Google PageSpeed Insights, c\u00e1i v\u1ed1n l\u00e0 ti\u00eau chu\u1ea9n v\u00e0ng trong c\u00e1c c\u00f4ng vi\u1ec7c li\u00ean quan \u0111\u1ebfn t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 website (nh\u01b0ng \u00e1p d\u1ee5ng m\u00e1y m\u00f3c n\u00f3 s\u1ebd th\u00e0nh nh\u01b0\u1ee3c \u0111i\u1ec3m, xem th\u00eam b\u00e0i t\u1ea1i sao \u0111i\u1ec3m tr\u00ean c\u00e1c c\u00f4ng c\u1ee5 \u0111\u00e1nh gi\u00e1 t\u1ed1c \u0111\u1ed9 l\u1ea1i kh\u00f4ng quan tr\u1ecdng<\/a>).<\/p>\n\n\n

Nhi\u1ec1u website s\u1eed d\u1ee5ng l\u1ea1i c\u1ee5m h\u00ecnh s\u1ea3n ph\u1ea9m d\u1ea1ng slide l\u00e0m h\u00ecnh minh h\u1ecda cho b\u00e0i vi\u1ebft m\u00f4 t\u1ea3 s\u1ea3n ph\u1ea9m ngay b\u00ean d\u01b0\u1edbi. \u0110\u00e2y l\u00e0 l\u1ef1a ch\u1ecdn kh\u00f4ng t\u1ec7 v\u00ec n\u00f3 s\u1ebd gi\u00fap b\u1ea1n \u0111\u1ee1 ph\u1ea3i t\u1ea3i c\u00e1c h\u00ecnh trong ph\u1ea7n m\u00f4 t\u1ea3, tuy nhi\u00ean khi \u1ea5y n\u1ebfu b\u1ea1n kh\u00f4ng lazy load \u1ea3nh \u1edf c\u1ee5m h\u00ecnh s\u1ea3n ph\u1ea9m d\u1ea1ng slide, GPI s\u1ebd \u0111\u00e1nh gi\u00e1 c\u00e1c h\u00ecnh l\u1edbn h\u01a1n b\u00ean d\u01b0\u1edbi d\u00f9ng chung h\u00ecnh \u0111\u00f3 c\u0169ng kh\u00f4ng \u0111\u01b0\u1ee3c lazy load v\u00e0 l\u00e0m t\u1ee5t \u0111i\u1ec3m s\u1ed1 \u0111i r\u1ea5t nhi\u1ec1u.<\/p>\n\n\n


\n\n\n

L\u1ef1a ch\u1ecdn c\u1ee7a t\u00f4i l\u00e0 g\u00ec?<\/h2>\n\n\n

Theo t\u00f4i n\u00ean t\u00e1ch hai c\u1ee5m h\u00ecnh \u0111\u00f3 ra, \u0111i\u1ec1u \u0111\u00f3 c\u00f3 th\u1ec3 c\u00f3 \u00edch \u1edf v\u00e0i kh\u00eda c\u1ea1nh:<\/p>\n\n\n