{"id":2912,"date":"2020-12-15T10:07:50","date_gmt":"2020-12-15T03:07:50","guid":{"rendered":"https:\/\/halink.vn\/?p=2912"},"modified":"2020-12-15T10:07:50","modified_gmt":"2020-12-15T03:07:50","slug":"lazy-loading-la-gi","status":"publish","type":"post","link":"https:\/\/halink.vn\/lazy-loading-la-gi\/","title":{"rendered":"Lazy Loading l\u00e0 g\u00ec?"},"content":{"rendered":"

B\u1ea1n c\u00f3 bi\u1ebft r\u1eb1ng th\u1eddi gian t\u1ea3i trang d\u01b0\u1edbi 2 gi\u00e2y l\u00e0 l\u00fd t\u01b0\u1edfng cho website?<\/p>\n

T\u1ed1c \u0111\u1ed9 t\u1ea3i trang r\u1ea5t quan tr\u1ecdng \u0111\u1ed1i v\u1edbi c\u00e1c website ng\u00e0y nay v\u00ec m\u1ed9t s\u1ed1 l\u00fd do.\u00a0Ng\u01b0\u1eddi d\u00f9ng kh\u00f4ng th\u1ec3 truy c\u1eadp trang web c\u1ee7a b\u1ea1n ho\u1eb7c c\u1ea3m th\u1ea5y th\u1ea5t v\u1ecdng v\u00ec qu\u00e1 tr\u00ecnh t\u1ea3i trang l\u00e2u, c\u00f3 kh\u1ea3 n\u0103ng cao s\u1ebd t\u1eeb b\u1ecf th\u01b0\u01a1ng hi\u1ec7u c\u1ee7a b\u1ea1n v\u00e0 t\u00ecm ki\u1ebfm \u1edf n\u01a1i kh\u00e1c.<\/p>\n

\u0110\u1ed9 tr\u1ec5 t\u1ed1c \u0111\u1ed9 t\u1ea3i trang ch\u1ec9 500 mili gi\u00e2y c\u00f3 th\u1ec3\u00a0l\u00e0m t\u0103ng \u201cm\u1ee9c \u0111\u1ed9 th\u1ea5t v\u1ecdng\u201d h\u01a1n 26%\u00a0v\u00e0 gi\u1ea3m m\u1ee9c \u0111\u1ed9 t\u01b0\u01a1ng t\u00e1c 8%.\u00a0Theo th\u1ed1ng k\u00ea th\u1eddi gian t\u1ea3i trang l\u00fd t\u01b0\u1edfng l\u00e0 0-4 gi\u00e2y v\u00e0 nh\u1eadn th\u1ea5y r\u1eb1ng c\u00e1c trang t\u1ea3i d\u01b0\u1edbi m\u1ed9t gi\u00e2y s\u1ebd chuy\u1ec3n \u0111\u1ed5i v\u1edbi t\u1ed1c \u0111\u1ed9\u00a0cao\u00a0h\u01a1n\u00a0kho\u1ea3ng\u00a02,5 l\u1ea7n\u00a0so v\u1edbi c\u00e1c trang t\u1ea3i ch\u1eadm h\u01a1n 5 gi\u00e2y tr\u1edf l\u00ean.<\/p>\n

\u0110\u1ed1i v\u1edbi h\u1ea7u h\u1ebft m\u1ecdi ng\u01b0\u1eddi, kho\u1ea3ng th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 truy c\u1eadp trang web c\u1ee7a b\u1ea1n l\u00e0\u00a0tr\u1ea3i nghi\u1ec7m \u0111\u1ea7u ti\u00ean\u00a0c\u1ee7a h\u1ecd\u00a0v\u1edbi th\u01b0\u01a1ng hi\u1ec7u c\u1ee7a b\u1ea1n. Tuy nhi\u00ean kh\u00f4ng ph\u1ea3i trang web n\u00e0o c\u0169ng \u0111\u1ea1t \u0111\u01b0\u1ee3c t\u1ed1c \u0111\u1ed9 t\u1ea3i trang ti\u00eau chu\u1ea9n.<\/p>\n

\u0110\u00f3 l\u00e0 l\u00fac Lazy Loading xu\u1ea5t hi\u1ec7n. Lazy Loading l\u00e0 m\u1ed9t trong s\u1ed1 c\u00e1c c\u00e1ch t\u1ed1i \u01b0u h\u00f3a t\u1ed1c \u0111\u1ed9 trang quan tr\u1ecdng m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n \u0111\u1ec3 t\u0103ng hi\u1ec7u su\u1ea5t v\u00e0 mang l\u1ea1i cho m\u00ecnh c\u01a1 h\u1ed9i t\u1ed1t nh\u1ea5t \u0111\u1ec3 gi\u1eef ch\u00e2n ng\u01b0\u1eddi d\u00f9ng.<\/p>\n

\"Lazy<\/p>\n

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

Lazy Loading l\u00e0 m\u1ed9t k\u1ef9 thu\u1eadt cho ph\u00e9p b\u1ea1n tr\u00ec ho\u00e3n vi\u1ec7c t\u1ea3i c\u00e1c ph\u1ea7n t\u1eed \u00edt quan tr\u1ecdng cho \u0111\u1ebfn\u00a0khi\u00a0trang c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb.\u00a0\u0110\u00f3 l\u00e0 m\u1ed9t c\u00e1ch \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o ng\u01b0\u1eddi d\u00f9ng truy c\u1eadp v\u00e0o trang web c\u1ee7a b\u1ea1n nhanh h\u01a1n tr\u01b0\u1edbc khi n\u00f3 th\u1ef1c hi\u1ec7n c\u00f4ng vi\u1ec7c n\u1eb7ng nh\u1ecdc l\u00e0 t\u1ea3i m\u1ed9t s\u1ed1 ph\u1ea7n t\u1eed l\u1edbn h\u01a1n, kh\u00f4ng quan tr\u1ecdng tr\u00ean trang web c\u1ee7a b\u1ea1n.<\/p>\n

Trong thi\u1ebft k\u1ebf web chu\u1ea9n SEO<\/strong><\/a> c\u1ee7a b\u1ea1n s\u1ebd c\u00f3 r\u1ea5t nhi\u1ec1u h\u00ecnh \u1ea3nh, t\u1ec7p CSS, Javascript \u0111\u01b0\u1ee3c g\u1ecdi. Tuy nhi\u00ean kh\u00f4ng ph\u1ea3i trang n\u00e0o c\u0169ng d\u00f9ng h\u1ebft s\u1ed1 l\u01b0\u1ee3ng t\u00e0i nguy\u00ean n\u00e0y, ho\u1eb7c c\u00f3 nh\u1eefng t\u00e0i nguy\u00ean \u00edt quan tr\u1ecdng h\u01a1n. Do \u0111\u00f3, k\u1ef9 thu\u1eadt Lazy Loading cho ph\u00e9p trang web t\u1ea3i nh\u1eefng th\u00e0nh ph\u1ea7n c\u1ea7n thi\u1ebft v\u00e0 quan tr\u1ecdng tr\u01b0\u1edbc \u0111\u1ec3 hi\u1ec3n th\u1ecb ra m\u00e0n h\u00ecnh ch\u00ednh c\u1ee7a tr\u00ecnh duy\u1ec7t.<\/p>\n

V\u00ed d\u1ee5, trang web c\u00f3 m\u1ed9t b\u00e0i vi\u1ebft s\u1eed d\u1ee5ng kh\u00e1 nhi\u1ec1u h\u00ecnh \u1ea3nh, v\u00e0 t\u1ea5t nhi\u00ean n\u00f3 s\u1ebd r\u1ea3i \u0111\u1ec1u t\u1eeb \u0111\u1ea7u \u0111\u1ebfn cu\u1ed1i n\u1ed9i dung. Thay v\u00ec tr\u00ecnh duy\u1ec7t ph\u1ea3i t\u1ea3i to\u00e0n b\u1ed9 h\u00ecnh \u1ea3nh \u0111\u00f3, th\u00ec Lazy Loading s\u1ebd t\u1ea3i tr\u01b0\u1edbc nh\u1eefng h\u00ecnh \u1ea3nh \u1edf ph\u1ea7n \u0111\u1ea7u \u0111\u1ec3 hi\u1ec3n th\u1ecb \u0111\u1ea7y \u0111\u1ee7 tr\u00ean m\u00e0n h\u00ecnh. Ng\u01b0\u1eddi d\u00f9ng s\u1ebd nh\u00ecn th\u1ea5y trang web hi\u1ec3n th\u1ecb to\u00e0n b\u1ed9 n\u1ed9i dung tr\u00ean m\u00e0n h\u00ecnh m\u1ed9t c\u00e1ch nhanh ch\u00f3ng. Nh\u1eefng h\u00ecnh \u1ea3nh c\u00f2n l\u1ea1i s\u1ebd \u0111\u01b0\u1ee3c t\u1ea3i sau \u0111\u00f3 khi ph\u1ea7n \u0111\u1ea7u \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i xong.<\/p>\n

\"Lazy<\/p>\n

Khi n\u00e0o c\u1ea7n s\u1eed d\u1ee5ng Lazy Loading cho trang web?<\/h2>\n

Trang web c\u1ee7a b\u1ea1n ch\u1eadm kh\u00f4ng nh\u1ea5t thi\u1ebft c\u00f3 ngh\u0129a l\u00e0 b\u1ea1n ph\u1ea3i th\u1ef1c hi\u1ec7n k\u1ef9 thu\u1eadt Lazy Loading. C\u00e1ch ti\u1ebfp c\u1eadn t\u1ed1t h\u01a1n \u0111\u1ec3 t\u1ed1i \u01b0u h\u00f3a t\u1ed1c \u0111\u1ed9 trang l\u00e0 ch\u1ea1y thi\u1ebft k\u1ebf web<\/strong><\/a> c\u1ee7a b\u1ea1n th\u00f4ng qua c\u00f4ng c\u1ee5 \u0111o hi\u1ec7u su\u1ea5t t\u1ed1c \u0111\u1ed9 trang nh\u01b0 PageSpeed \u200b\u200bInsights ho\u1eb7c GTmetrix.<\/p>\n

\u1ede \u0111\u00f3, b\u1ea1n s\u1ebd nh\u1eadn \u0111\u01b0\u1ee3c m\u1ed9t s\u1ed1 \u0111\u1ec1 xu\u1ea5t c\u00f3 th\u1ec3 y\u00eau c\u1ea7u ho\u1eb7c kh\u00f4ng y\u00eau c\u1ea7u tri\u1ec3n khai t\u1ea3i ch\u1eadm cho h\u00ecnh \u1ea3nh, nh\u01b0ng ch\u1eafc ch\u1eafn s\u1ebd bao g\u1ed3m c\u00e1c y\u1ebfu t\u1ed1 kh\u00e1c c\u1ee7a t\u1ed1i \u01b0u h\u00f3a t\u1ed1c \u0111\u1ed9 trang nh\u01b0:<\/p>\n