{"id":737,"date":"2020-03-30T10:40:22","date_gmt":"2020-03-30T10:40:22","guid":{"rendered":"https:\/\/egany.com\/blogs\/?p=737"},"modified":"2021-04-19T04:22:44","modified_gmt":"2021-04-19T04:22:44","slug":"pagespeed-4-nen-moi-thu-trong-website-ngoai-hinh-anh-thi-con-gi-nua","status":"publish","type":"post","link":"https:\/\/egany.com\/blogs\/pagespeed-4-nen-moi-thu-trong-website-ngoai-hinh-anh-thi-con-gi-nua\/","title":{"rendered":"PageSpeed 4: N\u00e9n m\u1ecdi th\u1ee9 trong website, ngo\u00e0i h\u00ecnh \u1ea3nh th\u00ec c\u00f2n g\u00ec n\u1eefa?"},"content":{"rendered":"

\u1ede nh\u1eefng b\u00e0i vi\u1ebft tr\u01b0\u1edbc, m\u00ecnh \u0111\u1ec1 c\u1eadp r\u1ea5t nhi\u1ec1u t\u1edbi t\u1edbi H\u00ecnh \u1ea3nh – 80% nguy\u00ean nh\u00e2n l\u00e0m website ch\u1eadm ri b\u00e0 r\u00ec<\/a> v\u00e0 c\u0169ng chia s\u1ebb cho m\u1ecdi ng\u01b0\u1eddi 7 c\u00f4ng c\u1ee5 n\u00e9n \u1ea3nh ph\u1ed5 bi\u1ebfn<\/a> \u0111\u1ec3 t\u1ef1 x\u1eed l\u00fd \u0111\u01b0\u1ee3c. D\u0129 nhi\u00ean nh\u1eefng vi\u1ec7c n\u00e0y ho\u00e0n to\u00e0n n\u1eb1m trong t\u1ea7m tay c\u1ee7a ch\u00fang ta – nh\u1eefng ng\u01b0\u1eddi kh\u00f4ng th\u1ef1c s\u1ef1 r\u00e0nh k\u0129 thu\u1eadt l\u1eafm.<\/p>\n

\n

Website \u0111\u00e2u ch\u1ec9 c\u00f3 h\u00ecnh \u1ea3nh, v\u1eady nh\u1eefng th\u1ee9 c\u00f2n l\u1ea1i l\u00e0 g\u00ec, ch\u1ea3 nh\u1ebd kh\u00f4ng c\u1ea7n n\u00e9n hay sao?<\/p>\n<\/blockquote>\n

Tr\u01b0\u1edbc khi vi\u1ebft b\u00e0i n\u00e0y, m\u00ecnh c\u0169ng suy ngh\u0129 kh\u00e1 nhi\u1ec1u l\u1ea7n c\u00f3 n\u00ean vi\u1ebft hay kh\u00f4ng v\u00ec n\u00f3 li\u00ean quan sang k\u0129 thu\u1eadt kh\u00e1 nhi\u1ec1u. Tuy nhi\u00ean, sau nhi\u1ec1u l\u1ea7n tr\u00e0 \u0111\u00e1 ch\u00e9m gi\u00f3 m\u00ecnh bi\u1ebft \u0111\u01b0\u1ee3c nhi\u1ec1u anh ch\u1ecb em t\u00f2 m\u00f2 mu\u1ed1n bi\u1ebft, kh\u00f4ng bi\u1ebft th\u00ec ng\u1ee9a ng\u00e1y kh\u00f3 ch\u1ecbu l\u1eafm.<\/p>\n

V\u1eady n\u00ean m\u00ecnh v\u1eabn quy\u1ebft \u0111\u1ecbnh vi\u1ebft b\u00e0i n\u00e0y \u0111\u1ec3 m\u1ecdi ng\u01b0\u1eddi c\u00f3 th\u1ec3 "C\u01b0\u1ee1i ng\u1ef1a xem hoa, ng\u00f3 qua cho bi\u1ebft"<\/em> v\u00e0 \u0111\u1ee1 t\u00f2 m\u00f2 h\u01a1n nh\u00e9!<\/p>\n

Hay ch\u00ed \u00edt l\u00e0 c\u0169ng bi\u1ebft bi\u1ebft khi n\u00e0o c\u1ea7n nh\u1edd c\u00e1c b\u1ea1n k\u0129 thu\u1eadt gi\u00fap m\u00ecnh x\u1eed l\u00fd. B\u00e0i tu\u1ea7n n\u00e0y v\u00ec v\u1eady c\u0169ng kh\u00e1 ng\u1eafn g\u1ecdn v\u00e0 d\u1ec5 \u0111\u1ecdc.<\/p>\n

Ngo\u00e0i h\u00ecnh \u1ea3nh, website c\u00f2n c\u00f3 nh\u1eefng g\u00ec?<\/h3>\n

Khi tr\u00ecnh duy\u1ec7t t\u1ea3i trang web b\u1ea1n tr\u01b0\u1edbc khi hi\u1ec3n th\u1ecb cho b\u1ea1n xem th\u00ec c\u00f3 nhi\u1ec1u t\u1eadp tin, nh\u01b0ng c\u01a1 b\u1ea3n s\u1ebd th\u01b0\u1eddng c\u00f3 HTML, CSS, JavaScript (JS), Font v\u00e0 d\u1eef li\u1ec7u d\u1ea1ng JSON t\u1ea3i th\u00f4ng qua API hi\u1ec7n t\u1ea1i hay g\u1eb7p.<\/p>\n

C\u00e1c \u0111\u1ecbnh d\u1ea1ng file tr\u00ean b\u1ea1n c\u00f3 th\u1ec3 Google hay Wiki l\u00e0 n\u1eafm \u0111\u1ea7y \u0111\u1ee7 th\u00f4ng tin ngay, t\u00f3m l\u1ea1i n\u00f3 l\u00e0 font ch\u1eef, c\u00e1c m\u00e3 \u0111\u00e1nh d\u1ea5u \u0111\u1ec3 tr\u00ecnh duy\u1ec7t \u0111\u1ecdc \u0111\u01b0\u1ee3c (HTML), \u0111\u1ecbnh d\u1ea1ng ki\u1ec3u (CSS) v\u00e0 x\u1eed l\u00fd t\u01b0\u01a1ng t\u00e1c (JS) t\u1eebng th\u00e0nh ph\u1ea7n tr\u00ean website c\u1ee7a b\u1ea1n. <\/p>\n

Front-end Developer – t\u1ea1m g\u1ecdi l\u00e0 l\u1eadp tr\u00ecnh vi\u00ean giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng – th\u01b0\u1eddng l\u00e0 ng\u01b0\u1eddi x\u1eed l\u00fd c\u00e1c d\u1ea1ng t\u1eadp tin (code) n\u00e0y \u0111\u1ec3 t\u1ea1o ra giao di\u1ec7n website t\u1eeb thi\u1ebft k\u1ebf s\u1eb5n c\u00f3.<\/p>\n

\n

C\u00e1c \u0111\u1ecbnh d\u1ea1ng t\u1eadp tin n\u00e0y c\u0169ng th\u01b0\u1eddng \u0111\u01b0\u1ee3c Front-end "n\u00e9n" l\u1ea1i b\u1eb1ng kh\u00e1i ni\u1ec7m Minify.<\/p>\n<\/blockquote>\n

Minify CSS v\u00e0 JS<\/h3>\n

N\u00f3 \u0111\u1ea1i kh\u00e1i l\u00e0 h\u00e0nh \u0111\u1ed9ng d\u00f9ng c\u00f4ng c\u1ee5 \u0111\u1ec3 n\u00e9n, thu g\u1ecdn, gi\u1ea3m dung l\u01b0\u1ee3ng t\u1eadp tin CSS v\u00e0 JS tr\u01b0\u1edbc khi \u0111\u01b0a l\u00ean m\u00f4i tr\u01b0\u1eddng web ch\u1ea1y th\u1eadt.<\/p>\n

\n

HTML th\u00ec c\u0169ng c\u00f3 c\u00e1ch l\u00e0m t\u01b0\u01a1ng t\u1ef1 nh\u01b0ng \u00edt khi \u0111\u01b0\u1ee3c nh\u1eafc t\u1edbi.<\/p>\n<\/blockquote>\n

Th\u01b0\u1eddng c\u00e1c c\u00f4ng c\u1ee5 n\u00e0y s\u1ebd \u0111\u1ecdc v\u00e0 l\u1ecdc b\u1ecf \u0111i c\u00e1c k\u00ed t\u1ef1 th\u1eeba (nh\u01b0 k\u00ed t\u1ef1 kho\u1ea3ng tr\u1eafng, xu\u1ed1ng d\u00f2ng)<\/em> v\u00e0 \u0111o\u1ea1n m\u00f4 t\u1ea3 (comment)<\/em> kh\u00f4ng c\u1ea7n thi\u1ebft.<\/p>\n

Xem v\u00ed d\u1ee5 n\u00e0y \u0111\u1ec3 hi\u1ec3u \u0111o\u1ea1n CSS tr\u01b0\u1edbc v\u00e0 sau khi Minify:<\/p>\n

\"\"<\/p>\n

CSS sau khi \u0111\u01b0\u1ee3c minify, ch\u1eef d\u00ednh ch\u00f9m l\u1ea1i, ti\u1ebft ki\u1ec7m \u0111\u01b0\u1ee3c 22.5% dung l\u01b0\u1ee3ng<\/p>\n

\u1ee6a.. \u1ee7a.. r\u1ed3i n\u00f3 d\u00ednh ch\u00f9m l\u1ea1i nh\u01b0 v\u1eady, mai m\u1ed1t sao s\u1eeda code \u0111\u01b0\u1ee3c?
\nB\u00ecnh t\u0129nh.. Kh\u00f4ng sao c\u1ea3.. Th\u01b0\u1eddng t\u1eadp tin ch\u01b0a minify v\u1eabn \u0111\u01b0\u1ee3c c\u00e1c Front-end Dev l\u01b0u tr\u1eef \u0111\u1ec3 d\u00e0nh d\u1ec5 ch\u1ec9nh s\u1eeda sau n\u00e0y, c\u00f2n b\u1ea3n \u0111\u00e3 minify ch\u1ec9 \u0111\u01b0a l\u00ean m\u00f4i tr\u01b0\u1eddng ch\u1ea1y th\u1ef1c t\u1ebf cho nh\u1eb9 th\u00f4i.
\nTrong th\u1ef1c t\u1ebf v\u1eabn c\u00f2n nhi\u1ec1u tr\u01b0\u1eddng h\u1ee3p b\u1ea3n ch\u1ea1y th\u1ef1c CSS ch\u01b0a minify nhi\u1ec1u, c\u00f3 th\u1ec3 l\u00e0 do.. qu\u00ean ho\u1eb7c giao di\u1ec7n s\u1eb5n c\u00f3 b\u00e1n c\u1ea7n b\u00e0n giao nh\u01b0 v\u1eady<\/em>, r\u1ed3i ng\u01b0\u1eddi mua kh\u00f4ng bi\u1ebft ho\u1eb7c qu\u00ean minify lu\u00f4n.<\/p>\n

\n

T\u00fam l\u1ea1i l\u00e0 nh\u1edb nh\u1eafc Front-end Developer gi\u00fap m\u00ecnh minify c\u00e1c t\u1eadp tin CSS v\u00e0 JS cho website nh\u1eb9 nh\u00e0ng h\u01a1n.<\/p>\n<\/blockquote>\n

\u00c0 qu\u00ean, c\u00f2n n\u00e9n t\u1eeb ph\u00eda m\u00e1y ch\u1ee7 n\u1eefa ch\u1ee9!<\/p>\n

N\u00e9n t\u1eeb m\u00e1y ch\u1ee7 (server) v\u1edbi GZIP<\/h3>\n

N\u1ebfu hay \u0111\u1ecdc c\u00e1c khuy\u1ebfn c\u00e1o c\u1ee7a Google PageSpeed v\u00e0 b\u00e0i vi\u1ebft tr\u00ean m\u1ea1ng, b\u1ea1n s\u1ebd b\u1eaft g\u1eb7p t\u1eeb kh\u00f3a GZip n\u00e0y. GZip th\u01b0\u1eddng li\u00ean quan t\u1edbi c\u00e1c b\u1ea1n Back-end \/ DevOps \/ System Engineer, c\u00e1c b\u1ea1n n\u00e0y s\u1ebd c\u00e0i \u0111\u1eb7t v\u00e0 thi\u1ebft l\u1eadp sao cho GZip Compression ho\u1ea1t \u0111\u1ed9ng \u0111\u01b0\u1ee3c tr\u00ean m\u00e1y ch\u1ee7 ch\u1ee9a website.<\/p>\n

\n

GZip Compression l\u00e0 ph\u01b0\u01a1ng ph\u00e1p n\u00e9n (hi\u1ec3u gi\u1ed1ng nh\u01b0 x\u00e0i WinZip\/WinRar) l\u00e0m gi\u1ea3m dung l\u01b0\u1ee3ng d\u1eef li\u1ec7u \u1edf m\u00e1y ch\u1ee7 tr\u01b0\u1edbc khi g\u1eedi \u0111\u1ebfn tr\u00ecnh duy\u1ec7t gi\u00fap ti\u1ebft ki\u1ec7m b\u0103ng th\u00f4ng, t\u0103ng t\u1ed1c \u0111\u1ed9 t\u1ea3i c\u1ee7a website.<\/p>\n<\/blockquote>\n

Ngh\u0129a l\u00e0 t\u1eadp tin \u0111\u01b0\u1ee3c n\u00e9n s\u1eb5n tr\u00ean m\u00e1y ch\u1ee7 r\u1ed3i, khi b\u1ea1n m\u1edf tr\u00ecnh duy\u1ec7t (v\u00ed d\u1ee5 Chrome) truy c\u1eadp website https:\/\/domain.com<\/a> th\u00ec m\u00e1y ch\u1ee7 tr\u1ea3 v\u1ec1 cho tr\u00ecnh duy\u1ec7t c\u00e1c t\u1eadp tin \u0111\u01b0\u1ee3c n\u00e9n m\u00e0 tr\u00ecnh duy\u1ec7t v\u1eabn c\u00f3 th\u1ec3 gi\u1ea3i m\u00e3 v\u00e0 \u0111\u1ecdc \u0111\u01b0\u1ee3c b\u00ecnh th\u01b0\u1eddng.<\/p>\n

\n

L\u01b0u \u00fd: GZip hi\u1ec7n ch\u1ec9 ho\u1ea1t \u0111\u1ed9ng t\u1ed1t v\u1edbi c\u00e1c t\u1eadp tin d\u1ea1ng v\u0103n b\u1ea3n (txt) n\u00ean n\u00e9n t\u1ed1t h\u1ea7u h\u1ebft c\u00e1c t\u1eadp tin nh\u01b0 HTML, CSS, JS, JSON.. ch\u1ee9 kh\u00f4ng n\u00e9n t\u1ed1t c\u00e1c t\u1eadp tin audio, video.<\/p>\n<\/blockquote>\n

Xem v\u00ed d\u1ee5 b\u00ean d\u01b0\u1edbi:
\n\"\"<\/p>\n

Dung l\u01b0\u1ee3ng sau khi n\u00e9n v\u1edbi GZip gi\u1ea3 h\u01a1n 82% (qu\u00e1 gh\u00ea).<\/p>\n

\n

Tin vui l\u00e0 c\u00e1c website ch\u1ea1y tr\u00ean c\u00e1c n\u1ec1n t\u1ea3ng c\u00f3 tr\u1ea3 ph\u00ed nh\u01b0 Shopify, Sapo, Haravan th\u00ec d\u01b0\u1edbi m\u00e1y ch\u1ee7 m\u1eb7c \u0111\u1ecbnh b\u1eadt t\u00ednh n\u0103ng GZip r\u1ed3i.<\/p>\n<\/blockquote>\n

N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng hosting\/server ri\u00eang (nh\u01b0 WordPress) th\u00ec ph\u1ea3i t\u1ef1 c\u00e0i \u0111\u1eb7t ho\u1eb7c b\u1eadt t\u00ednh n\u0103ng n\u00e0y l\u00ean. <\/p>\n

\u0110\u1ec3 ki\u1ec3m tra xem website m\u00ecnh \u0111\u00e3 \u0111\u01b0\u1ee3c b\u1eadt GZip ch\u01b0a c\u0169ng kh\u00e1 \u0111\u01a1n gi\u1ea3n. N\u1ebfu d\u00f9ng Chrome, b\u1ea1n c\u00f3 th\u1ec3 b\u1ea5m chu\u1ed9t ph\u1ea3i tr\u00ean tr\u00ecnh duy\u1ec7t r\u1ed3i ch\u1ecdn Inspect > xong ch\u1ecdn tab Network r\u1ed3i t\u1ea3i l\u1ea1i trang \u0111\u1ec3 xem nh\u01b0 \u1ea3nh n\u00e0y:
\n\"\"<\/p>\n

T\u1eadp tin n\u00e0y dung l\u01b0\u1ee3ng th\u1ef1c 39KB, b\u1eadt GZip n\u00ean t\u1ea3i v\u1ec1 ch\u1ec9 c\u00f3 7KB.<\/p>\n

T\u00f3m l\u1ea1i<\/h3>\n

Qua b\u00e0i n\u00e0y, b\u1ea1n bi\u1ebft \u0111\u01b0\u1ee3c th\u00eam kh\u00e1i ni\u1ec7m Minify v\u00e0 GZip \u0111\u1ec3 ki\u1ec3m tra xem website \u0111\u00e3 \u0111\u01b0\u1ee3c x\u1eed l\u00fd ch\u01b0a. N\u1ebfu ch\u01b0a th\u00ec h\u00fa m\u1ea5y \u00f4ng k\u0129 thu\u1eadt v\u00f4 n\u00e2ng c\u1ea5p v\u00e0 x\u1eed l\u00fd h\u1ed9. H\u1ebft r\u1ed3i.
\nH\u1eb9n g\u1eb7p l\u1ea1i m\u1ecdi ng\u01b0\u1eddi v\u00e0o tu\u1ea7n sau v\u1edbi t\u1eadp 05 nh\u00e9!<\/p>\n","protected":false},"excerpt":{"rendered":"

\u1ede nh\u1eefng b\u00e0i vi\u1ebft tr\u01b0\u1edbc, m\u00ecnh \u0111\u1ec1 c\u1eadp r\u1ea5t nhi\u1ec1u t\u1edbi t\u1edbi H\u00ecnh \u1ea3nh – 80% nguy\u00ean nh\u00e2n l\u00e0m website ch\u1eadm ri b\u00e0 r\u00ec v\u00e0 c\u0169ng chia s\u1ebb cho m\u1ecdi ng\u01b0\u1eddi 7 c\u00f4ng c\u1ee5 n\u00e9n \u1ea3nh ph\u1ed5 bi\u1ebfn \u0111\u1ec3 t\u1ef1 x\u1eed l\u00fd \u0111\u01b0\u1ee3c. D\u0129 nhi\u00ean nh\u1eefng vi\u1ec7c n\u00e0y ho\u00e0n to\u00e0n n\u1eb1m trong t\u1ea7m tay c\u1ee7a ch\u00fang ta – nh\u1eefng ng\u01b0\u1eddi kh\u00f4ng th\u1ef1c s\u1ef1 r\u00e0nh k\u0129 thu\u1eadt l\u1eafm. Website \u0111\u00e2u ch\u1ec9 c\u00f3 h\u00ecnh \u1ea3nh, v\u1eady nh\u1eefng th\u1ee9 c\u00f2n l\u1ea1i l\u00e0 g\u00ec, ch\u1ea3 nh\u1ebd kh\u00f4ng c\u1ea7n n\u00e9n hay sao? Tr\u01b0\u1edbc khi vi\u1ebft b\u00e0i n\u00e0y, m\u00ecnh c\u0169ng suy ngh\u0129 kh\u00e1 nhi\u1ec1u l\u1ea7n c\u00f3<\/p>\n","protected":false},"author":5,"featured_media":743,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[54],"tags":[56,55],"_links":{"self":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/posts\/737"}],"collection":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/comments?post=737"}],"version-history":[{"count":0,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/posts\/737\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/media\/743"}],"wp:attachment":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/media?parent=737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/categories?post=737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/tags?post=737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}