{"id":3182,"date":"2021-04-18T09:36:09","date_gmt":"2021-04-18T02:36:09","guid":{"rendered":"https:\/\/webvocuc.com\/blog\/?p=3182"},"modified":"2021-04-18T09:39:14","modified_gmt":"2021-04-18T02:39:14","slug":"nhung-bi-quyet-toi-uu-hieu-nang-website","status":"publish","type":"post","link":"https:\/\/webvocuc.com\/blog\/nhung-bi-quyet-toi-uu-hieu-nang-website.html","title":{"rendered":"Nh\u1eefng b\u00ed quy\u1ebft t\u1ed1i \u01b0u hi\u1ec7u n\u0103ng website"},"content":{"rendered":"<p><a href=\"https:\/\/webvocuc.com\/blog\/nhung-bi-quyet-toi-uu-hieu-nang-website.html\">Nh\u1eefng b\u00ed quy\u1ebft t\u1ed1i \u01b0u hi\u1ec7u n\u0103ng website<\/a>. Ngo\u00e0i vi\u1ec7c <a href=\"https:\/\/webvocuc.com\/\">thi\u1ebft k\u1ebf website<\/a> th\u1eadt \u1ea5n t\u01b0\u1ee3ng th\u00ec vi\u1ec7c t\u1ed1i \u01b0u hi\u1ec7u n\u0103ng n\u00ean \u0111\u01b0\u1ee3c \u01b0u ti\u00ean.<\/p>\n<h2><strong>Nh\u1eefng b\u00ed quy\u1ebft t\u1ed1i \u01b0u hi\u1ec7u n\u0103ng website<\/strong><\/h2>\n<h3><strong>T\u1ed1i \u01b0u h\u00ecnh \u1ea3nh<\/strong><\/h3>\n<p>Theo cu\u1ed9c kh\u1ea3o s\u00e1t v\u1edbi 20 chuy\u00ean gia v\u1ec1 website \u0111\u00e3 \u0111\u01b0a ra \u00fd ki\u1ebfn v\u1ec1 l\u1ed7i t\u1ed1i \u01b0u c\u00e1c website hay m\u1eafc ph\u1ea3i th\u00ec 46% trong s\u1ed1 chuy\u00ean gia cho bi\u1ebft ti\u00eau ch\u00ed \u0111\u1ea7u ti\u00ean h\u1ecd l\u00e0m l\u00e0 t\u1ed1i \u01b0u h\u00ecnh \u1ea3nh.<\/p>\n<p>Theo b\u00e1o c\u00e1o c\u1ee7a HTTP Archive n\u0103m 2016 th\u00ec 64% dung l\u01b0\u1ee3ng c\u1ee7a website l\u00e0 \u0111\u1ebfn t\u1eeb h\u00ecnh \u1ea3nh trong trang web.<\/p>\n<p>Theo Google, h\u00ecnh theo \u0111\u1ecbnh d\u1ea1ng WebP lo\u1ea1i lossless nh\u1ecf h\u01a1n PNG 26% v\u00e0 h\u00ecnh \u1ea3nh JPEG 25-34%.<\/p>\n<p>Sau \u0111\u00e2y l\u00e0 c\u00e1c \u0111\u01a1n v\u1ecb cung c\u1ea5p c\u00f4ng c\u1ee5 d\u00f9ng \u0111\u1ec3 n\u00e9n v\u00e0 t\u1ed1i \u01b0u h\u00ecnh \u1ea3nh cho b\u1ea1n.<\/p>\n<p><em><strong>\u00a0 \u00a0Plugins:<\/strong><\/em><\/p>\n<ul>\n<li>Grunt:\u00a0<a href=\"https:\/\/www.npmjs.com\/package\/grunt-contrib-imagemin\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">grunt-contrib-imagemin<\/a><\/li>\n<li>Gulp:\u00a0<a href=\"https:\/\/www.npmjs.com\/package\/gulp-imagemin\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">gulp-imagemin<\/a><\/li>\n<\/ul>\n<p><em><strong>\u00a0 \u00a0C\u00f4ng c\u1ee5 c\u1ee7a \u0111\u1ed1i t\u00e1c:<\/strong><\/em><\/p>\n<ul>\n<li><a href=\"https:\/\/tinypng.com\/?utm_source=KeyCDN&amp;utm_medium=link\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">TinyPNG<\/a><\/li>\n<li><a href=\"https:\/\/kraken.io\/?utm_source=KeyCDN&amp;utm_medium=link\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Kraken.io<\/a><\/li>\n<li><a href=\"http:\/\/www.jpegmini.com\/?utm_source=KeyCDN&amp;utm_medium=link\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">JPEGmini<\/a>\u00a0(app available for OSX, iOS, Windows)<\/li>\n<\/ul>\n<h3><strong>Gi\u1ea3m b\u1edbt c\u00e1c request HTTP<\/strong><\/h3>\n<p>Khi tr\u00ecnh duy\u1ec7t c\u1ee7a b\u1ea1n l\u1ea5y d\u1eef li\u1ec7u t\u1eeb m\u00e1y ch\u1ee7 th\u00ec n\u00f3 s\u1ebd d\u00f9ng HTTP (Hypertext Transfer Protocol). \u0110\u00e2y l\u00e0 ph\u01b0\u01a1ng th\u1ee9c y\u00eau c\u1ea7u hay ph\u1ea3n h\u1ed3i gi\u1eefa m\u00e1y kh\u00e1ch v\u00e0 m\u00e1y ch\u1ee7.<\/p>\n<p>Nh\u00ecn chung c\u00e0ng nhi\u1ec1u y\u00eau c\u1ea7u HTTP trang web b\u1ea1n th\u1ef1c hi\u1ec7n, n\u00f3 s\u1ebd c\u00e0ng t\u1ea3i c\u00e0ng ch\u1eadm h\u01a1n.<\/p>\n<p>C\u00f3 nhi\u1ec1u c\u00e1ch b\u1ea1n c\u00f3 th\u1ec3 gi\u1ea3m b\u1edbt s\u1ed1 l\u01b0\u1ee3ng y\u00eau c\u1ea7u v\u00ed d\u1ee5 nh\u01b0:<\/p>\n<ul>\n<li>N\u1ed9i tuy\u1ebfn JavaScipt<\/li>\n<li>S\u1eed d\u1ee5ng CSS Sprites<\/li>\n<li>Gi\u1ea3m b\u1edbt l\u01b0\u1ee3ng n\u1ed9i dung c\u1ee7a c\u00e1c plugin \u1edf b\u00ean th\u1ee9 3 l\u00e0m t\u0103ng l\u01b0\u1ee3ng y\u00eau c\u1ea7u \u1edf b\u00ean ngo\u00e0i<\/li>\n<li>Kh\u00f4ng s\u1eed d\u1ee5ng framework b\u00ean th\u1ee9 3 tr\u1eeb khi th\u1eadt s\u1ef1 c\u1ea7n thi\u1ebft<\/li>\n<li>D\u00f9ng \u00edt code h\u01a1n c\u00e0ng t\u1ed1t<\/li>\n<li>K\u1ebft h\u1ee3p file CSS v\u00e0 JS v\u1edbi nhau<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-3184 size-full aligncenter\" src=\"https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2021\/04\/Nhung-bi-quyet-toi-uu-hieu-nang-website.jpg\" alt=\"Nh\u1eefng b\u00ed quy\u1ebft t\u1ed1i \u01b0u hi\u1ec7u n\u0103ng website\" width=\"555\" height=\"257\" title=\"\" srcset=\"https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2021\/04\/Nhung-bi-quyet-toi-uu-hieu-nang-website.jpg 555w, https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2021\/04\/Nhung-bi-quyet-toi-uu-hieu-nang-website-300x139.jpg 300w, https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2021\/04\/Nhung-bi-quyet-toi-uu-hieu-nang-website-525x243.jpg 525w\" sizes=\"auto, (max-width: 555px) 100vw, 555px\" \/><\/p>\n<h3><strong>Gi\u1ea3m b\u1edbt CSS v\u00e0 JavaScript<\/strong><\/h3>\n<p>Gi\u1ea3m thi\u1ec3u t\u00e0i nguy\u00ean c\u00f3 ngh\u0129a l\u00e0 x\u00f3a nh\u1eefng k\u00fd t\u1ef1 kh\u00f4ng c\u1ea7n thi\u1ebft trong HTML, JavaScript, v\u00e0 CSS do b\u1ea1n ho\u1eb7c\u00a0c\u00f4ng c\u1ee5 <strong>thi\u1ebft k\u1ebf website<\/strong> t\u1ea1o ra, nh\u01b0:<\/p>\n<ul>\n<li>Nh\u1eefng k\u00fd t\u1ef1 kho\u1ea3ng tr\u1eafng (white space)<\/li>\n<li>Nh\u1eefng k\u00fd t\u1ef1 xu\u1ed1ng d\u00f2ng<\/li>\n<li>Comment kh\u00f4ng c\u1ea7n<\/li>\n<li>D\u1ea5u ph\u00e2n c\u00e1ch<\/li>\n<\/ul>\n<p>\u0110i\u1ec1u n\u00e0y gi\u00fap t\u0103ng t\u1ed1c th\u1eddi gian t\u1ea3i c\u1ee7a b\u1ea1n v\u00ec n\u00f3 gi\u1ea3m b\u1edbt l\u01b0\u1ee3ng code ph\u1ea3i \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u t\u1eeb server.<\/p>\n<h3><strong>\u0110\u01b0\u1eddng g\u0103ng (Critical Path) v\u00e0 t\u00e0i nguy\u00ean ch\u1eb7n th\u00f4ng d\u1ecbch (CSS + JS)<\/strong><\/h3>\n<p>Khi n\u00f3i \u0111\u1ebfn ph\u00e2n t\u00edch t\u1ed1c \u0111\u1ed9 c\u1ee7a m\u1ed9t trang web, b\u1ea1n lu\u00f4n c\u1ea7n c\u00e2n nh\u1eafc nh\u1eefng th\u1ee9 c\u00f3 th\u1ec3 ch\u1eb7n DOM, g\u00e2y ch\u1eadm tr\u1ec5 khi t\u1ea3i trang web. N\u00f3 c\u0169ng \u0111\u01b0\u1ee3c bi\u1ebft \u0111\u1ebfn l\u00e0 \u00a0t\u00e0i nguy\u00ean ch\u1eb7n th\u00f4ng d\u1ecbch (render blocking resources), nh\u01b0 l\u00e0 HTML, CSS( bao g\u1ed3m c\u1ea3 font web), v\u00e0 JavaScript. Sau \u0111\u00e2y l\u00e0 m\u1ed9t s\u1ed1 g\u1ee3i \u00fd \u0111\u1ec3 \u0111\u1ec1 ph\u00f2ng CSS v\u00e0 JavaScript c\u1ee7a b\u1ea1n ch\u1eb7n DOM b\u1eb1ng c\u00e1ch t\u1ed1i \u01b0u \u0111\u01b0\u1eddng g\u0103ng th\u00f4ng d\u1ecbch n\u00e0y.<\/p>\n<p><strong>\u00a0 \u00a0CSS<\/strong><\/p>\n<ul>\n<li>G\u1ecdi t\u00ean file CSS r\u00f5 r\u00e0ng.<\/li>\n<li>\u00a0D\u00f9ng media queries \u0111\u1ec3 \u0111\u00e1nh d\u1ea5u nh\u1eefng t\u00e0i nguy\u00ean CSS kh\u00f4ng ph\u1ea3i l\u00e0 t\u00e0i nguy\u00ean ch\u1eb7n th\u00f4ng d\u1ecbch.<\/li>\n<li>Gi\u1ea3m thi\u1ec3u l\u01b0\u1ee3ng file CSS( g\u1ed9p c\u00e1c file CSS c\u1ee7a b\u1ea1n v\u00e0o m\u1ed9t file).<\/li>\n<li>Gi\u1ea3m b\u1edbt c\u00e1c CSS kh\u00f4ng c\u1ea7n thi\u1ebft( b\u1ecf b\u1edbt c\u00e1c kho\u1ea3ng tr\u1ed1ng, k\u00fd t\u1ef1, comment, v\u00e2n v\u00e2n).<\/li>\n<li>D\u00f9ng \u00edt CSS theo t\u1ed5ng qu\u00e1t.<\/li>\n<\/ul>\n<p><em><strong>\u00a0 \u00a0<\/strong><\/em><strong>JavaScript<\/strong><\/p>\n<p>Khi nh\u1eafc \u0111\u1ebfn JavaScript c\u00f3 m\u1ed9t v\u00e0i ph\u01b0\u01a1ng ph\u00e1p t\u1ed1t nh\u01b0:<\/p>\n<ul>\n<li>Di chuy\u1ec3n script trong trang xu\u1ed1ng d\u01b0\u1edbi trang ngay tr\u01b0\u1edbc tag &lt;\/body&gt;.<\/li>\n<li>D\u00f9ng l\u1ec7nh async ho\u1eb7c defer \u0111\u1ec3 tr\u00e1nh ch\u1eb7n c\u00e1c th\u00f4ng d\u1ecbch.<\/li>\n<li>G\u1ed9p c\u00e1c file JS v\u00e0o 1 file g\u1ecdn nh\u1ea5t.<\/li>\n<li>Gi\u1ea3m thi\u1ec3u JavaScript (lo\u1ea1i b\u1ecf kho\u1ea3ng tr\u1eafng, k\u00fd t\u1ef1, v\u00e2n v\u00e2n)<\/li>\n<\/ul>\n<h3><strong>Gi\u1ea3m \u0111\u1ed9 tr\u1ec5 CDN<\/strong><\/h3>\n<p>CDN (Content Delivery Network) c\u00f3 th\u1ec3 hi\u1ec3u l\u00e0 m\u1ed9t h\u1ec7 th\u1ed1ng c\u00e1c server \u0111\u01b0\u1ee3c \u0111\u1eb7t r\u1ea3i r\u00e1c \u1edf kh\u1eafp n\u01a1i. N\u00f3 l\u00e0m nhi\u1ec7m v\u1ee5 l\u01b0u l\u1ea1i b\u1ea3n sao c\u1ee7a c\u00e1c n\u1ed9i dung t\u0129nh c\u00f3 b\u00ean trong website. Sau \u0111\u00f3 ph\u00e2n t\u00e1n n\u00f3 ra nhi\u1ec1u m\u00e1y ch\u1ee7 kh\u00e1c n\u1eefa (\u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 PoP \u2013 Points of Presence) v\u00e0 t\u1eeb c\u00e1c PoP \u0111\u00f3 n\u00f3 s\u1ebd g\u1eedi t\u1edbi cho ng\u01b0\u1eddi d\u00f9ng khi h\u1ecd truy c\u1eadp v\u00e0o website c\u1ee7a b\u1ea1n.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3186 size-full\" src=\"https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2021\/04\/Nhung-bi-quyet-toi-uu-hieu-nang-website-1.jpg\" alt=\"Nh\u1eefng b\u00ed quy\u1ebft t\u1ed1i \u01b0u hi\u1ec7u n\u0103ng website\" width=\"900\" height=\"560\" title=\"\" srcset=\"https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2021\/04\/Nhung-bi-quyet-toi-uu-hieu-nang-website-1.jpg 900w, https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2021\/04\/Nhung-bi-quyet-toi-uu-hieu-nang-website-1-300x187.jpg 300w, https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2021\/04\/Nhung-bi-quyet-toi-uu-hieu-nang-website-1-768x478.jpg 768w, https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2021\/04\/Nhung-bi-quyet-toi-uu-hieu-nang-website-1-525x327.jpg 525w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/p>\n<h3><strong>TTFB<\/strong><\/h3>\n<p>Th\u1eddi gian \u0111\u1ebfn byte \u0111\u1ea7u ti\u00ean (TTFB) l\u00e0 ph\u01b0\u01a1ng ph\u00e1p \u0111o l\u01b0\u1eddng t\u00ednh responsive c\u1ee7a m\u1ed9t web server. C\u01a1 b\u1ea3n l\u00e0 kho\u1ea3ng th\u1eddi gian m\u1ea5t \u0111\u1ec3 tr\u00ecnh duy\u1ec7t c\u1ee7a b\u1ea1n b\u1eaft \u0111\u1ea7u nh\u1eadn th\u00f4ng tin \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u t\u1eeb server.<\/p>\n<p>B\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng CDN n\u00e0y, m\u1ed9t m\u00e1y ch\u1ee7 host trang web nhanh g\u1ecdn v\u00e0 m\u1ed9t \u0111\u01a1n v\u1ecb cung c\u1ea5p DNS \u0111\u00e1ng tin c\u1eady b\u1ea1n c\u00f3 th\u1ec3 gi\u1ea3m \u0111\u00e1ng k\u1ec3 th\u1eddi gian TTFB t\u1ed5ng quan cho web.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nh\u1eefng b\u00ed quy\u1ebft t\u1ed1i \u01b0u hi\u1ec7u n\u0103ng website. Ngo\u00e0i vi\u1ec7c thi\u1ebft k\u1ebf website th\u1eadt \u1ea5n t\u01b0\u1ee3ng th\u00ec vi\u1ec7c t\u1ed1i \u01b0u hi\u1ec7u n\u0103ng n\u00ean \u0111\u01b0\u1ee3c \u01b0u ti\u00ean. Nh\u1eefng b\u00ed quy\u1ebft t\u1ed1i \u01b0u hi\u1ec7u n\u0103ng website T\u1ed1i \u01b0u h\u00ecnh \u1ea3nh Theo cu\u1ed9c kh\u1ea3o s\u00e1t v\u1edbi 20 chuy\u00ean gia v\u1ec1 website \u0111\u00e3 \u0111\u01b0a ra \u00fd ki\u1ebfn v\u1ec1 l\u1ed7i [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":3184,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3182","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ban-tin-webvocuc-com"],"jetpack_featured_media_url":"https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2021\/04\/Nhung-bi-quyet-toi-uu-hieu-nang-website.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/3182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/comments?post=3182"}],"version-history":[{"count":0,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/3182\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/media\/3184"}],"wp:attachment":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/media?parent=3182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/categories?post=3182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/tags?post=3182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}