{"id":16870,"date":"2020-04-02T05:19:09","date_gmt":"2020-04-01T22:19:09","guid":{"rendered":"https:\/\/kiencang.net\/?p=15743"},"modified":"2023-08-23T09:47:01","modified_gmt":"2023-08-23T02:47:01","slug":"anh-lqip","status":"publish","type":"post","link":"https:\/\/kiencang.net\/anh-lqip\/","title":{"rendered":"Gi\u1edbi thi\u1ec7u LQIP – \u1ea2nh gi\u1eef ch\u1ed7 ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p"},"content":{"rendered":"\n

V\u1edbi l\u1eddi c\u1ee7a ng\u01b0\u1eddi d\u1ecbch (1): LQIP gi\u1ed1ng c\u1ea7u th\u1ee7 d\u1ef1 b\u1ecb, \u1ea3nh ch\u1ea5t l\u01b0\u1ee3ng cao gi\u1ed1ng nh\u01b0 c\u1ea7u th\u1ee7 ch\u00ednh. Khi b\u1ea1n s\u1eed d\u1ee5ng lazy load \u1ea3nh<\/a>, n\u1ebfu \u1ea3nh ch\u1ea5t l\u01b0\u1ee3ng cao ch\u01b0a k\u1ecbp t\u1ea3i, LQIP l\u00e0 c\u00e1ch xoa d\u1ecbu ng\u01b0\u1eddi d\u00f9ng, gi\u1ed1ng nh\u01b0 c\u1ea7u th\u1ee7 d\u1ef1 b\u1ecb l\u00e0 gi\u1ea3i ph\u00e1p t\u00ecnh th\u1ebf khi c\u1ea7u th\u1ee7 ch\u00ednh b\u1ecb ch\u1ea5n th\u01b0\u01a1ng, tuy ch\u01a1i kh\u00f4ng hay b\u1eb1ng nh\u01b0ng c\u00f2n h\u01a1n l\u00e0 thi \u0111\u1ea5u thi\u1ebfu ng\u01b0\u1eddi. LQIP k\u1ebft h\u1ee3p v\u1edbi t\u1ea3i tr\u01b0\u1edbc \u1ea3nh khi n\u00f3 \u0111i v\u00e0o khung nh\u00ecn tr\u00ecnh duy\u1ec7t (viewport) l\u00e0 b\u1ed9 \u0111\u00f4i ho\u00e0n h\u1ea3o khi b\u1ea1n mu\u1ed1n tri\u1ec3n khai lazy load v\u1edbi \u00edt \u1ea3nh h\u01b0\u1edfng ti\u00eau c\u1ef1c \u0111\u1ebfn tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng. OK, gi\u1edd ch\u00fang ta \u0111i v\u00e0o ph\u1ea7n ch\u00ednh nh\u00e9.<\/p>\n\n\n\n

—<\/p>\n\n\n\n

V\u1edbi c\u00e1c trang web ng\u00e0y nay, \u1ea3nh l\u00e0 m\u1ed9t th\u00e1ch th\u1ee9c th\u1ef1c s\u1ef1.<\/p>\n\n\n\n

M\u1ed9t m\u1eb7t, \u1ea3nh chi\u1ebfm \u0111\u1ebfn h\u01a1n 60% dung l\u01b0\u1ee3ng trang<\/a>. \u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 ch\u00fang ch\u1ecbu tr\u00e1ch nhi\u1ec7m ch\u00ednh trong t\u1ed5ng th\u1eddi gian t\u1ea3i trang, v\u1ea5n \u0111\u1ec1 \u0111\u00f3 th\u00fac \u0111\u1ea9y c\u00e1c nh\u00f3m l\u1eadp tr\u00ecnh vi\u00ean c\u1ed1 g\u1eafng t\u1ea1o ra c\u00e1c \u1ea3nh c\u00e0ng nh\u1ecf c\u00e0ng t\u1ed1t (t\u00ednh tr\u00ean byte). M\u1eb7t kh\u00e1c, c\u00e1c thi\u1ebft b\u1ecb m\u1edbi khoe khoang kh\u1ea3 n\u0103ng hi\u1ec3n th\u1ecb retina v\u00e0 \u0111\u1ed9 ph\u00e2n gi\u1ea3i cao, c\u00f2n c\u00e1c nh\u00e0 thi\u1ebft k\u1ebf th\u00ec kh\u00e1t khao t\u1eadn d\u1ee5ng c\u00e1c m\u00e0n h\u00ecnh n\u00e0y \u0111\u1ec3 cung c\u1ea5p c\u00e1c \u1ea3nh \u0111\u1ed3 h\u1ecda \u0111\u1eb9p m\u1eaft v\u00e0 ho\u00e0nh tr\u00e1ng. V\u1edbi xu h\u01b0\u1edbng tr\u00ean, k\u1ebft h\u1ee3p v\u1edbi nhi\u1ec1u c\u00e1i kh\u00e1c n\u1eefa, d\u1eabn \u0111\u1ebfn s\u1ef1 gia t\u0103ng trung b\u00ecnh 30 KB \u1ea3nh tr\u00ean trang ch\u1ec9 t\u00ednh ri\u00eang v\u00e0o n\u0103m ngo\u00e1i (n\u0103m 2012, th\u1eddi \u0111i\u1ec3m b\u00e0i g\u1ed1c ti\u1ebfng Anh \u0111\u01b0\u1ee3c vi\u1ebft l\u00e0 n\u0103m 2013).<\/p>\n\n\n\n

T\u00f4i ngh\u0129 m\u00e2u thu\u1eabn n\u00e0y m\u1ed9t ph\u1ea7n l\u00e0 do “hi\u1ec7u su\u1ea5t t\u00ecnh hu\u1ed1ng”. N\u1ebfu b\u1ea1n \u0111ang \u1edf tr\u00ean k\u1ebft n\u1ed1i c\u00e1p quang t\u1ed1c \u0111\u1ed9 cao (c\u00f3 th\u1ec3 l\u00ean \u0111\u1ebfn v\u00e0i ch\u1ee5c MB \/ s) – gi\u1ed1ng nh\u01b0 h\u1ea7u h\u1ebft c\u00e1c nh\u00e0 thi\u1ebft k\u1ebf kh\u00e1c – \u1ea3nh ch\u1ea5t l\u01b0\u1ee3ng cao kh\u00f4ng l\u00e0m ch\u1eadm trang c\u1ee7a b\u1ea1n l\u00e0 bao, v\u00e0 s\u1ebd \u0111em \u0111\u1ebfn tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng phong ph\u00fa h\u01a1n (richer experience). N\u1ebfu b\u1ea1n tr\u00ean k\u1ebft n\u1ed1i di \u0111\u1ed9ng, b\u1ea1n s\u1ebd th\u00edch \u1ea3nh c\u00f3 ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p h\u01a1n tr\u00ean trang c\u00f3 k\u1ebft n\u1ed1i ch\u1eadm.<\/p>\n\n\n\n

May m\u1eafn thay, kh\u00f4ng ph\u1ea3i t\u1ea5t c\u1ea3 hy v\u1ecdng \u0111\u1ec1u m\u1ea5t h\u1ebft.<\/p>\n\n\n\n

V\u00e0i th\u00e1ng tr\u01b0\u1edbc \u0111\u00e2y ch\u00fang t\u00f4i \u0111\u00e3 t\u1ea1o ra c\u00e1ch t\u1ed1i \u01b0u h\u00f3a \u1ea3nh m\u1edbi g\u1ecdi l\u00e0 Low Quality Image Placeholders (\u1ea2nh gi\u1eef ch\u1ed7 ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p) ho\u1eb7c vi\u1ebft t\u1eaft l\u00e0 LQIP. C\u00e1ch t\u1ed1i \u01b0u h\u00f3a n\u00e0y t\u1ecf ra h\u1eefu \u00edch, n\u00f3 nh\u01b0 l\u00e0 m\u1ed9t d\u1ea1ng c\u1ea7u n\u1ed1i kh\u1ecfa l\u1ea5p kho\u1ea3ng tr\u1ed1ng gi\u1eefa k\u1ebft n\u1ed1i t\u1ed1c \u0111\u1ed9 cao v\u00e0 t\u1ed1c \u0111\u1ed9 th\u1ea5p, v\u00e0 gi\u1eefa ng\u01b0\u1eddi thi\u1ebft k\u1ebf v\u00e0 ng\u01b0\u1eddi l\u00e0m IT, v\u00ec th\u1ebf t\u00f4i ngh\u0129 r\u1eb1ng n\u00f3 r\u1ea5t \u0111\u00e1ng \u0111\u1ec3 chia s\u1ebb.<\/p>\n\n\n\n

\n\n\n\n
\n
\n

M\u1ee5c l\u1ee5c<\/p>\n