{"id":2386,"date":"2020-03-21T14:56:08","date_gmt":"2020-03-21T07:56:08","guid":{"rendered":"https:\/\/webvocuc.com\/blog\/?p=2386"},"modified":"2021-01-15T11:10:16","modified_gmt":"2021-01-15T04:10:16","slug":"5-cach-de-lam-trang-web-cua-ban-nhe-va-nhanh-hon","status":"publish","type":"post","link":"https:\/\/webvocuc.com\/blog\/5-cach-de-lam-trang-web-cua-ban-nhe-va-nhanh-hon.html","title":{"rendered":"5 c\u00e1ch \u0111\u1ec3 l\u00e0m trang web c\u1ee7a b\u1ea1n nh\u1eb9 v\u00e0 nhanh h\u01a1n"},"content":{"rendered":"<p>5 c\u00e1ch \u0111\u1ec3 <strong>l\u00e0m trang web<\/strong> c\u1ee7a b\u1ea1n nh\u1eb9 v\u00e0 nhanh h\u01a1n. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 5 c\u00e1ch m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 ho\u00e0n th\u00e0nh ch\u1ec9 trong v\u00e0i ph\u00fat \u0111\u1ec3 l\u00e0m trang web c\u1ee7a b\u1ea1n nhanh h\u01a1n cho t\u1ea5t c\u1ea3 ng\u01b0\u1eddi s\u1eed d\u1ee5ng.<\/p>\n<h3>1. L\u00e0m trang web t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng h\u00ecnh \u1ea3nh &#8211; <a href=\"https:\/\/imageoptim.com\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">ImageOptim<\/a><\/h3>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2387\" src=\"https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2020\/03\/5-cach-de-lam-trang-web-cua-ban-nhe-va-nhanh-hon.jpg\" alt=\"l\u00e0m trang web\" width=\"750\" height=\"600\" title=\"\" srcset=\"https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2020\/03\/5-cach-de-lam-trang-web-cua-ban-nhe-va-nhanh-hon.jpg 750w, https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2020\/03\/5-cach-de-lam-trang-web-cua-ban-nhe-va-nhanh-hon-300x240.jpg 300w, https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2020\/03\/5-cach-de-lam-trang-web-cua-ban-nhe-va-nhanh-hon-525x420.jpg 525w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>T\u1ed1i \u01b0u h\u00f3a dung l\u01b0\u1ee3ng \u1ea3nh l\u00e0 c\u00e1ch c\u01a1 b\u1ea3n trong vi\u1ec7c c\u1ea3i thi\u1ec7n th\u1eddi gian t\u1ea3i trang. Photoshop v\u00e0 c\u00e1c \u1ee9ng d\u1ee5ng ch\u1ec9nh s\u1eeda h\u00ecnh \u1ea3nh kh\u00e1c kh\u00f4ng c\u00f3 hi\u1ec7u qu\u1ea3 v\u1edbi vi\u1ec7c n\u00e9n h\u00ecnh \u1ea3nh, khi\u1ebfn nhi\u1ec1u KB th\u1eeba \u0111\u01b0\u1ee3c t\u1ea3i c\u00f9ng theo t\u1eebng truy v\u1ea5n. Tin t\u1ed1t l\u00e0 c\u00f3 r\u1ea5t nhi\u1ec1u ti\u1ec7n \u00edch \u0111\u1ec3 lo\u1ea1i b\u1ecf nh\u1eefng KB th\u1eeba th\u00e3i n\u00e0y.<\/p>\n<p>B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng n\u00e9n gzip bao nhi\u00eau b\u1ea1n mu\u1ed1n nh\u01b0ng k\u00edch th\u01b0\u1edbc KB th\u1eeba l\u00e0 l\u00e3ng ph\u00ed. V\u00ec v\u1eady s\u1eed d\u1ee5ng m\u1ed9t ti\u1ec7n \u00edch t\u1ed1i \u01b0u h\u00f3a h\u00ecnh \u1ea3nh s\u1ebd c\u00f3 gi\u00e1 tr\u1ecb nh\u01b0 b\u1ea5t k\u1ef3 chi\u1ebfn l\u01b0\u1ee3c kh\u00e1c m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng.<\/p>\n<h3>2. L\u00e0m trang web nh\u1eb9 b\u1eb1ng <a href=\"https:\/\/www.cloudflare.com\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">CloudFlare<\/a><\/h3>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2388\" src=\"https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2020\/03\/5-cach-de-lam-trang-web-cua-ban-nhe-va-nhanh-hon-2.png\" alt=\"l\u00e0m trang web\" width=\"1460\" height=\"730\" title=\"\" srcset=\"https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2020\/03\/5-cach-de-lam-trang-web-cua-ban-nhe-va-nhanh-hon-2.png 1460w, https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2020\/03\/5-cach-de-lam-trang-web-cua-ban-nhe-va-nhanh-hon-2-300x150.png 300w, https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2020\/03\/5-cach-de-lam-trang-web-cua-ban-nhe-va-nhanh-hon-2-768x384.png 768w, https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2020\/03\/5-cach-de-lam-trang-web-cua-ban-nhe-va-nhanh-hon-2-1024x512.png 1024w, https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2020\/03\/5-cach-de-lam-trang-web-cua-ban-nhe-va-nhanh-hon-2-525x263.png 525w, https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2020\/03\/5-cach-de-lam-trang-web-cua-ban-nhe-va-nhanh-hon-2-1050x525.png 1050w\" sizes=\"auto, (max-width: 1460px) 100vw, 1460px\" \/><\/p>\n<p>CloudFlare\u200a\u2014\u200am\u1ed9t d\u1ecbch v\u1ee5 m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u mi\u1ec5n ph\u00ed, cung c\u1ea5p cho b\u1ea1n v\u00f4 s\u1ed1 c\u1ea3i thi\u1ec7n:<\/p>\n<ul>\n<li>D\u1ecbch v\u1ee5 CDN (Content Delivery Network)<\/li>\n<li>N\u00e9n JavaScript, CSS v\u00e0 HTML<\/li>\n<li>D\u1ecbch v\u1ee5 sao l\u01b0u th\u1eddi gian ch\u1ebft<\/li>\n<li>Ng\u0103n ch\u1eb7n DDOS<\/li>\n<li>Ph\u00e2n ph\u1ed1i t\u00e0i nguy\u00ean d\u1ef1a theo v\u1ecb tr\u00ed c\u1ee7a ng\u01b0\u1eddi d\u00f9ng<\/li>\n<\/ul>\n<p>\u0110\u00e2y kh\u00f4ng ph\u1ea3i l\u00e0 n\u01a1i qu\u1ea3ng c\u00e1o\u200a\u2014\u200adavidwalsh.name s\u1eed d\u1ee5ng CloudFlare v\u00e0 \u0111\u00e3 s\u1eed d\u1ee5ng t\u1ea5t c\u1ea3 c\u00e1c t\u00ednh n\u0103ng c\u1ee7a n\u00f3. Trang web c\u1ee7a t\u00f4i \u0111\u00e3 ti\u1ebft ki\u1ec7m \u0111\u01b0\u1ee3c nhi\u1ec1u GB d\u1eef li\u1ec7u nh\u1edd CloudFlare. K\u1ec3 c\u1ea3 khi m\u00e1y ch\u1ee7 c\u1ee7a t\u00f4i b\u1ecb s\u1eadp, CloudFlare \u0111\u00e3 ph\u1ee5c v\u1ee5 c\u00e1c trang ho\u00e0n h\u1ea3o. M\u1ed9t chi\u1ebfn th\u1eafng ho\u00e0n to\u00e0n khi b\u1ea1n s\u1eed d\u1ee5ng CloudFlare.<\/p>\n<h3>3. Th\u01b0 vi\u1ec7n bi\u1ec3u t\u01b0\u1ee3ng Glyph nh\u1ecf h\u01a1n v\u1edbi Fontello<\/h3>\n<p>Font Glyph \u0111\u00e3 ph\u1ed5 bi\u1ebfn trong v\u00e0i n\u0103m nay v\u00e0 t\u00f4i s\u1ebd b\u1ecf qua vi\u1ec7c li\u1ec7t k\u00ea c\u00e1c l\u00fd do t\u1ea1i sao. Ch\u00fang ta \u0111\u00e3 bi\u1ebft l\u00fd do t\u1ea1i sao ch\u00fang l\u1ea1i tuy\u1ec7t v\u1eddi. V\u1ea5n \u0111\u1ec1 l\u00e0 ch\u00fang ta th\u01b0\u1eddng ch\u1ec9 s\u1eed d\u1ee5ng m\u1ed9t ph\u1ea7n nh\u1ecf trong c\u00e1c Font trong h\u1ecd. V\u00e0 m\u1eb7c d\u00f9 ch\u00fang ta \u00edt khi quan t\u00e2m, c\u00e1c t\u1eadp tin Font th\u01b0\u1eddng r\u1ea5t l\u1edbn. V\u00e0 th\u1eadt may khi nh\u1eefng ti\u1ec7n \u00edch nh\u01b0 Fontello t\u1ed3n t\u1ea1i.<\/p>\n<p>Fontello cho ph\u00e9p b\u1ea1n ch\u1ecdn c\u00e1c glyph ri\u00eang l\u1ebb t\u1eeb m\u1ed9t s\u1ed1 Font h\u00ecnh t\u01b0\u1ee3ng v\u00e0 do \u0111\u00f3 l\u00e0m cho dung l\u01b0\u1ee3ng Font c\u1ee7a b\u1ea1n nh\u1ecf h\u01a1n.<\/p>\n<h3>4. L\u00e0m trang web b\u1eb1ng c\u00e1ch t\u1ea1o c\u00e1c t\u1eadp tin t\u0129nh.<\/h3>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2389\" src=\"https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2020\/03\/5-cach-de-lam-trang-web-cua-ban-nhe-va-nhanh-hon-3.png\" alt=\"l\u00e0m trang web\" width=\"700\" height=\"405\" title=\"\" srcset=\"https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2020\/03\/5-cach-de-lam-trang-web-cua-ban-nhe-va-nhanh-hon-3.png 700w, https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2020\/03\/5-cach-de-lam-trang-web-cua-ban-nhe-va-nhanh-hon-3-300x174.png 300w, https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2020\/03\/5-cach-de-lam-trang-web-cua-ban-nhe-va-nhanh-hon-3-525x304.png 525w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>Ch\u00fang ta y\u00eau c\u00e1c script \u0111\u1ed9ng nh\u01b0ng t\u1ea1i sao ph\u1ee5c c\u00e1c trang \u0111\u1ed9ng trong khi c\u00e1c trang t\u0129nh c\u0169ng c\u00f3 th\u1ec3 l\u00e0m? \u0110\u00e2y l\u00e0 m\u1ed9t th\u1ef1c t\u1ebf th\u01b0\u1eddng th\u1ea5y v\u1edbi WordPress\u200a. N\u1ed9i dung b\u00e0i vi\u1ebft h\u1ea7u nh\u01b0 kh\u00f4ng thay \u0111\u1ed5i nh\u01b0ng c\u00e1c qu\u1ea3ng c\u00e1o v\u00e0 b\u00ecnh lu\u1eadn c\u00f3 th\u1ec3.<\/p>\n<p>T\u00ecm ki\u1ebfm nh\u1eefng \u0111i\u1ec3m quan tr\u1ecdng khi m\u1ed9t trang c\u00f3 th\u1ec3 thay \u0111\u1ed5i v\u00e0 t\u1ea1o ra n\u1ed9i dung t\u0129nh khi nh\u1eefng \u0111i\u1ec3m n\u00e0y x\u1ea3y ra. M\u1ed9t ti\u1ec7n \u00edch c\u1ee7a WordPress ng\u1ecdt ng\u00e0o v\u1edbi t\u00ean g\u1ecdi Really Static s\u1ebd th\u1ef1c hi\u1ec7n c\u00f4ng vi\u1ec7c n\u00e0y cho b\u1ea1n. T\u1ea5t nhi\u00ean h\u1ec7 th\u1ed1ng CMS kh\u00f4ng ph\u1ea3i WordPress s\u1ebd c\u1ea7n t\u1ea1o trang t\u00f9y ch\u1ec9nh nh\u01b0ng nh\u1eefng l\u1ee3i th\u1ebf v\u1ec1 t\u1ed1c \u0111\u1ed9 s\u1ebd c\u00f3 r\u1ea5t nhi\u1ec1u gi\u00e1 tr\u1ecb.<\/p>\n<p>N\u1ebfu b\u1ea1n c\u00f3 n\u1ed9i dung m\u00e0 b\u1ea1n c\u1ea7n xoay quanh trong c\u00e1c trang t\u0129nh n\u00e0y. Nh\u01b0 c\u00e1c qu\u1ea3ng c\u00e1o hay c\u00e1c li\u00ean k\u1ebft t\u1edbi n\u1ed9i dung hi\u1ec7n t\u1ea1i th\u00ec h\u00e3y xem x\u00e9t JavaScript v\u00e0 c\u00e1c truy v\u1ea5n AJAX \u0111\u1ec3 l\u1ea5y n\u1ed9i dung \u0111\u00f3\u200a. Trang s\u1ebd tr\u1edf th\u00e0nh t\u0129nh v\u00e0 JavaScript s\u1ebd \u0111\u01b0\u1ee3c ph\u1ee5c v\u1ee5 t\u1eeb CDN\u200a. Vi\u1ec7c xem x\u00e9t t\u1ed1c \u0111\u1ed9 sau \u0111\u00f3 s\u1ebd ch\u1ec9 c\u00f2n truy v\u1ea5n AJAX.<\/p>\n<h3>5. Lazyload c\u00e1c ngu\u1ed3n t\u00e0i nguy\u00ean ho\u1eb7c nh\u00fang?<\/h3>\n<p>M\u1ed9t tri\u1ec7u ch\u1ee9ng ph\u1ed5 bi\u1ebfn \u0111\u01b0\u1ee3c bi\u1ebft t\u1edbi c\u1ee7a c\u00e1c trang web ch\u1eadm \u0111i l\u00e0 s\u1ed1 l\u01b0\u1ee3ng truy v\u1ea5n m\u00e0 m\u1ed7i trang t\u1ea1o ra. Tr\u01b0\u1edbc \u0111\u00e2y ch\u00fang ta \u0111\u00e3 kh\u1eafc ph\u1ee5c v\u1ea5n \u0111\u1ec1 n\u00e0y v\u1edbi CSS\/\u1ea2nh sprite (cho t\u1ea5t c\u1ea3 \u1ea3nh v\u00e0o trong m\u1ed9t \u1ea3nh \u0111\u1ec3 gi\u1ea3m s\u1ed1 truy v\u1ea5n). N\u1ed1i c\u00e1c ngu\u1ed3n t\u00e0i nguy\u00ean JavaScript v\u00e0 CSS (concat) v\u00e0 s\u1eed d\u1ee5ng Data URI. B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 lazyload c\u00e1c t\u00e0i nguy\u00ean ho\u1eb7c ch\u1ec9 c\u1ea7n nh\u00fang ch\u00fang trong trang:<\/p>\n<p>document.querySelectorAll(&#8216;article pre&#8217;).length &amp;&amp; (function() {<\/p>\n<p>var mediaPath = &#8216;\/assets\/&#8217;;<\/p>\n<p>var stylesheet = document.createElement(&#8216;style&#8217;);<\/p>\n<p>stylesheet.setAttribute(&#8216;type&#8217;, &#8216;text\/css&#8217;);<\/p>\n<p>stylesheet.setAttribute(&#8216;rel&#8217;, &#8216;stylesheet&#8217;);<\/p>\n<p>stylesheet.setAttribute(&#8216;href&#8217;, mediaPath + &#8216;css\/syntax.css&#8217;);<\/p>\n<p>document.head.appendChild(stylesheet);<\/p>\n<p>var syntaxScript = document.createElement(&#8216;script&#8217;);<\/p>\n<p>syntaxScript.async = &#8216;true&#8217;;<\/p>\n<p>syntaxScript.src = mediaPath + &#8216;js\/syntax.js&#8217;;<\/p>\n<p>document.body.appendChild(syntaxScript);<\/p>\n<p>})();<\/p>\n<p>V\u00ed d\u1ee5 tr\u00ean ch\u1ec9 t\u1ea3i tr\u00ecnh t\u00f4 s\u00e1ng c\u00fa ph\u00e1p (Syntax Highlighter) ch\u1ec9 khi nh\u1eefng ph\u1ea7n t\u1eed tr\u00ean trang y\u00eau c\u1ea7u. B\u1ea1n c\u00f3 th\u1ec3 ti\u1ebft ki\u1ec7m truy v\u1ea5n th\u1eeba v\u00e0 nh\u00fang n\u00f3 ngay trong trang:<\/p>\n<p>&lt;style type=&#8221;text\/css&#8221;&gt;<\/p>\n<p>&lt;?php include(&#8216;media\/assets\/highlight.css&#8217;); ?&gt;<\/p>\n<p>&lt;\/style&gt;<\/p>\n<p>&lt;\/head&gt;<\/p>\n<p>Nh\u01b0 b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y, \u0111\u00e2y l\u00e0 c\u00e1ch t\u0103ng t\u1ed1c \u0111\u1ed9 v\u00f4 c\u00f9ng d\u1ec5 d\u00e0ng v\u00e0 trang c\u1ee7a b\u1ea1n c\u00f3 \u0111\u01b0\u1ee3c n\u1ebfu b\u1ea1n s\u1eb5n s\u00e0ng b\u1ecf ra n\u1ed7 l\u1ef1c v\u00e0i ph\u00fat \u0111\u1ec3 th\u1ef1c hi\u1ec7n. V\u00e0 khi b\u1ea1n ngh\u0129 v\u1ec1 s\u1ed1 kh\u00e1ch truy c\u1eadp m\u00e0 trang b\u1ea1n nh\u1eadn \u0111\u01b0\u1ee3c v\u00e0 sau \u0111\u00f3 l\u00e0 s\u1ed1 l\u01b0\u1ee3ng xem trang, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y t\u1ea1i sao nh\u1eefng t\u1ed1i \u01b0u nh\u1ecf n\u00e0y l\u00e0 r\u1ea5t quan tr\u1ecdng.<\/p>\n<p>Xem th\u00eam: <strong><a href=\"https:\/\/webvocuc.com\/blog\/cach-tao-website-mien-phi-don-gian-va-hieu-qua.html\" target=\"_blank\" rel=\"noopener noreferrer\">C\u00e1ch t\u1ea1o website mi\u1ec5n ph\u00ed \u0111\u01a1n gi\u1ea3n v\u00e0 hi\u1ec7u qu\u1ea3<\/a><\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>5 c\u00e1ch \u0111\u1ec3 l\u00e0m trang web c\u1ee7a b\u1ea1n nh\u1eb9 v\u00e0 nhanh h\u01a1n. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 5 c\u00e1ch m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 ho\u00e0n th\u00e0nh ch\u1ec9 trong v\u00e0i ph\u00fat \u0111\u1ec3 l\u00e0m trang web c\u1ee7a b\u1ea1n nhanh h\u01a1n cho t\u1ea5t c\u1ea3 ng\u01b0\u1eddi s\u1eed d\u1ee5ng. 1. L\u00e0m trang web t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng h\u00ecnh \u1ea3nh &#8211; ImageOptim T\u1ed1i \u01b0u [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":2390,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4],"tags":[218],"class_list":["post-2386","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-content","tag-lam-trang-web"],"jetpack_featured_media_url":"https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2020\/03\/5-cach-de-lam-trang-web-cua-ban-nhe-va-nhanh-hon-4.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/2386","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/comments?post=2386"}],"version-history":[{"count":0,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/2386\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/media\/2390"}],"wp:attachment":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/media?parent=2386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/categories?post=2386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/tags?post=2386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}