{"id":13953,"date":"2019-12-13T07:58:00","date_gmt":"2019-12-13T07:58:00","guid":{"rendered":"https:\/\/kiencang.net\/?p=13953"},"modified":"2019-12-13T07:58:00","modified_gmt":"2019-12-13T07:58:00","slug":"tri-hoan-css-khong-quan-trong","status":"publish","type":"post","link":"https:\/\/kiencang.net\/tri-hoan-css-khong-quan-trong\/","title":{"rendered":"Tr\u00ec ho\u00e3n t\u1ea3i CSS kh\u00f4ng quan tr\u1ecdng"},"content":{"rendered":"\n<p>C\u00e1c file CSS l\u00e0 lo\u1ea1i t\u00e0i nguy\u00ean ch\u1eb7n hi\u1ec3n th\u1ecb: ch\u00fang ph\u1ea3i \u0111\u01b0\u1ee3c t\u1ea3i xu\u1ed1ng (load) v\u00e0 x\u1eed l\u00fd (process) tr\u01b0\u1edbc khi <a href=\"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/\" target=\"_blank\" rel=\"noreferrer noopener\">tr\u00ecnh duy\u1ec7t render trang<\/a>. Trang web bao g\u1ed3m l\u01b0\u1ee3ng l\u1edbn c\u00e1c style kh\u00f4ng c\u1ea7n thi\u1ebft c\u00f3 th\u1ec3 m\u1ea5t nhi\u1ec1u th\u1eddi gian \u0111\u1ec3 render.<\/p>\n\n\n<p>Trong b\u00e0i h\u01b0\u1edbng d\u1eabn n\u00e0y, b\u1ea1n s\u1ebd h\u1ecdc \u0111\u01b0\u1ee3c c\u00e1ch l\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 tr\u00ec ho\u00e3n c\u00e1c CSS kh\u00f4ng quan tr\u1ecdng (non-critical CSS) v\u1edbi m\u1ee5c ti\u00eau t\u1ed1i \u01b0u h\u00f3a <a href=\"https:\/\/kiencang.net\/duong-dan-hien-thi-trang-quan-trong\/\" target=\"_blank\" rel=\"noreferrer noopener\">tuy\u1ebfn hi\u1ec3n th\u1ecb quan tr\u1ecdng<\/a> (critical rendering path), v\u00e0 c\u1ea3i thi\u1ec7n th\u1eddi gian th\u1ea5y n\u1ed9i dung \u0111\u1ea7u ti\u00ean xu\u1ea5t hi\u1ec7n (<a href=\"https:\/\/kiencang.net\/first-contentful-paint-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">First Contentful Paint \/ FCP<\/a>).<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_60 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >M\u1ee5c l\u1ee5c<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\" role=\"button\"><label for=\"item-6577d6cbac48c\" ><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input aria-label=\"Toggle\" aria-label=\"item-6577d6cbac48c\"  type=\"checkbox\" id=\"item-6577d6cbac48c\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/kiencang.net\/tri-hoan-css-khong-quan-trong\/#Tai_CSS_theo_cach_toi_uu\" title=\"T\u1ea3i CSS theo c\u00e1ch t\u1ed1i \u01b0u\">T\u1ea3i CSS theo c\u00e1ch t\u1ed1i \u01b0u<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/kiencang.net\/tri-hoan-css-khong-quan-trong\/#Tien_hanh_kiem_tra\" title=\"Ti\u1ebfn h\u00e0nh ki\u1ec3m tra\">Ti\u1ebfn h\u00e0nh ki\u1ec3m tra<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/kiencang.net\/tri-hoan-css-khong-quan-trong\/#Toi_uu\" title=\"T\u1ed1i \u01b0u\">T\u1ed1i \u01b0u<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/kiencang.net\/tri-hoan-css-khong-quan-trong\/#Kiem_tra_lai\" title=\"Ki\u1ec3m tra l\u1ea1i\">Ki\u1ec3m tra l\u1ea1i<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/kiencang.net\/tri-hoan-css-khong-quan-trong\/#Cac_buoc_tiep_theo_va_tham_khao\" title=\"C\u00e1c b\u01b0\u1edbc ti\u1ebfp theo v\u00e0 tham kh\u1ea3o\">C\u00e1c b\u01b0\u1edbc ti\u1ebfp theo v\u00e0 tham kh\u1ea3o<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tai_CSS_theo_cach_toi_uu\"><\/span>T\u1ea3i CSS theo c\u00e1ch t\u1ed1i \u01b0u<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>V\u00ed d\u1ee5 b\u00ean d\u01b0\u1edbi bao g\u1ed3m m\u1ed9t accordion v\u1edbi ba kh\u1ed1i v\u0103n b\u1ea3n \u1ea9n, m\u1ed7i kh\u1ed1i v\u0103n b\u1ea3n \u0111\u01b0\u1ee3c style v\u1edbi class kh\u00e1c nhau: <a href=\"https:\/\/defer-css-unoptimized.glitch.me\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/defer-css-unoptimized.glitch.me<\/a><\/p>\n\n\n<p>Trang n\u00e0y y\u00eau c\u1ea7u m\u1ed9t file CSS v\u1edbi t\u00e1m class, nh\u01b0ng kh\u00f4ng ph\u1ea3i t\u1ea5t c\u1ea3 \u0111\u1ec1u c\u1ea7n thi\u1ebft \u0111\u1ec3 render n\u1ed9i dung &#8220;th\u1ea5y b\u00ean ngo\u00e0i&#8221;.<\/p>\n\n\n<p>M\u1ee5c ti\u00eau c\u1ee7a h\u01b0\u1edbng d\u1eabn n\u00e0y l\u00e0 t\u1ed1i \u01b0u h\u00f3a trang tr\u00ean, nh\u1edd th\u1ebf ch\u1ec9 c\u00e1c style <strong>quan tr\u1ecdng<\/strong> l\u00e0 \u0111\u01b0\u1ee3c t\u1ea3i theo c\u00e1ch \u0111\u1ed3ng b\u1ed9 (synchronously), trong khi ph\u1ea7n c\u00f2n l\u1ea1i (nh\u01b0 nh\u1eefng c\u00e1i \u00e1p d\u1ee5ng cho kh\u1ed1i v\u0103n b\u1ea3n \u1ea9n b\u00ean d\u01b0\u1edbi) \u0111\u01b0\u1ee3c t\u1ea3i theo c\u00e1ch kh\u00f4ng ch\u1eb7n hi\u1ec3n th\u1ecb (non-blocking).<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tien_hanh_kiem_tra\"><\/span>Ti\u1ebfn h\u00e0nh ki\u1ec3m tra<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>Ch\u1ea1y <a href=\"https:\/\/web.dev\/discover-performance-opportunities-with-lighthouse\/#run-lighthouse-from-chrome-devtools\">Lighthouse<\/a> tr\u00ean trang v\u00e0 \u0111i \u0111\u1ebfn ph\u1ea7n <strong>Performance<\/strong>.<\/p>\n\n\n<p>B\u00e1o c\u00f3 cho th\u1ea5y ch\u1ec9 s\u1ed1 <strong>Fist Contentful Paint<\/strong> c\u00f3 gi\u00e1 tr\u1ecb l\u00e0 &#8220;1s&#8221;, v\u00e0 c\u00f3 c\u01a1 h\u1ed9i t\u0103ng t\u1ed1c nh\u1edd vi\u1ec7c <strong>Lo\u1ea1i b\u1ecf c\u00e1c t\u00e0i nguy\u00ean ch\u1eb7n hi\u1ec3n th\u1ecb<\/strong> (Eliminate render-blocking resources), tr\u1ecf \u0111\u1ebfn file <strong>style.css<\/strong>:<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/loai-bo-tai-nguyen-chan-hien-thi.png\" alt=\"lo\u1ea1i b\u1ecf t\u00e0i nguy\u00ean ch\u1eb7n hi\u1ec3n th\u1ecb\" class=\"wp-image-13954\"\/><\/figure><\/div>\n\n\n<p>L\u01b0u \u00fd: CSS m\u00e0 ch\u00fang t\u00f4i s\u1eed d\u1ee5ng trong trang web demo n\u00e0y kh\u00e1 nh\u1ecf. N\u1ebfu b\u1ea1n y\u00eau c\u1ea7u c\u00e1c file CSS l\u1edbn h\u01a1n (\u0111i\u1ec1u kh\u00f4ng ph\u1ea3i l\u00e0 hi\u1ebfm trong c\u00e1c s\u1ea3n ph\u1ea9m th\u1ef1c), v\u00e0 n\u1ebfu Lighthouse ph\u00e1t hi\u1ec7n trang c\u00f3 \u00edt nh\u1ea5t 2048 bytes (2 KB) quy t\u1eafc CSS kh\u00f4ng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong khi render n\u1ed9i dung thu\u1ed9c m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean (above the fold), b\u1ea1n s\u1ebd nh\u1eadn th\u00eam g\u1ee3i \u00fd \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 <a href=\"https:\/\/kiencang.net\/loai-bo-css-khong-su-dung\/\" target=\"_blank\" rel=\"noreferrer noopener\">Lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng<\/a>.<\/p>\n\n\n<p>\u0110\u1ec3 h\u00ecnh \u1ea3nh h\u00f3a c\u00e1ch CSS n\u00e0y ch\u1eb7n hi\u1ec7n th\u1ecb b\u1ea1n l\u00e0m nh\u01b0 sau:<\/p>\n\n\n<ol><li>M\u1edf <a href=\"https:\/\/defer-css-unoptimized.glitch.me\/\">trang<\/a> tr\u00ean Chrome.<\/li><li>Nh\u1ea5n <em>Control + Shift + J<\/em> ho\u1eb7c <em>Cmd + Option + J<\/em> (Mac), \u0111\u1ec3 m\u1edf DevTools (c\u00f4ng c\u1ee5 cho nh\u00e0 ph\u00e1t tri\u1ec3n \u0111\u01b0\u1ee3c t\u00edch h\u1ee3p s\u1eb5n trong tr\u00ecnh duy\u1ec7t Chrome).<\/li><li>V\u00e0o tab <strong>Preformance<\/strong> v\u00e0 click v\u00e0o n\u00fat <strong>Reload<\/strong>.<\/li><\/ol>\n\n\n<p>Trong trace k\u1ebft qu\u1ea3, b\u1ea1n s\u1ebd th\u1ea5y FCP \u0111\u01b0\u1ee3c \u0111\u00e1nh d\u1ea5u t\u1ea1i v\u1ecb tr\u00ed ngay sau khi CSS \u0111\u01b0\u1ee3c t\u1ea3i xong:<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/cdt-perf-unoptimized.png\" alt=\"ki\u1ec3m tra tr\u00ean DevTools\" class=\"wp-image-13955\"\/><\/figure><\/div>\n\n\n<p>\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ee3i t\u1ea5t c\u1ea3 CSS t\u1ea3i xong v\u00e0 x\u1eed l\u00fd ch\u00fang tr\u01b0\u1edbc khi \u0111\u01b0a ra \u0111\u01b0\u1ee3c b\u1ea5t c\u1ee9 pixel n\u00e0o tr\u00ean m\u00e0n h\u00ecnh.<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Toi_uu\"><\/span>T\u1ed1i \u01b0u<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>\u0110\u1ec3 t\u1ed1i \u01b0u trang n\u00e0y, b\u1ea1n c\u1ea7n bi\u1ebft class n\u00e0o \u0111\u01b0\u1ee3c xem l\u00e0 &#8220;quan tr\u1ecdng&#8221;. B\u1ea1n s\u1ebd s\u1eed d\u1ee5ng Coverage Tool \u0111\u1ec3 l\u00e0m \u0111i\u1ec1u n\u00e0y:<\/p>\n\n\n<ol><li>Trong DevTools, m\u1edf Command Menu b\u1eb1ng c\u00e1ch nh\u1ea5n t\u1ed5 h\u1ee3p ph\u00edm Control + Shift + P ho\u1eb7c Command + Shift + P (Mac);<\/li><li>G\u00f5 &#8220;Coverage&#8221; v\u00e0 ch\u1ecdn <strong>Show Coverage<\/strong>;<\/li><li>Click n\u00fat <strong>Reload<\/strong>, \u0111\u1ec3 t\u1ea3i l\u1ea1i trang v\u00e0 b\u1eaft \u0111\u1ea7u ghi l\u1ea1i coverage.<\/li><\/ol>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/coverage-unoptimized.png\" alt=\"coverage ch\u01b0a t\u1ed1i \u01b0u\" class=\"wp-image-13956\"\/><\/figure><\/div>\n\n\n<p>Click \u0111\u00fap v\u00e0o b\u00e1o c\u00e1o, \u0111\u1ec3 xem c\u00e1c class \u0111\u01b0\u1ee3c \u0111\u00e1nh d\u1ea5u trong hai m\u00e0u:<\/p>\n\n\n<ul><li>M\u00e0u xanh (<strong>quan tr\u1ecdng<\/strong>): \u0110\u00e2y l\u00e0 nh\u1eefng class m\u00e0 tr\u00ecnh duy\u1ec7t c\u1ea7n \u0111\u1ec3 render n\u1ed9i dung c\u1ea7n nh\u00ecn ngay (nh\u01b0 ti\u00eau \u0111\u1ec1 ch\u00ednh, ti\u00eau \u0111\u1ec1 ph\u1ee5, v\u00e0 n\u00fat accordion).<\/li><li>M\u00e0u \u0111\u1ecf (<strong>kh\u00f4ng quan tr\u1ecdng<\/strong>): \u0110\u00e2y l\u00e0 nh\u1eefng style \u00e1p d\u1ee5ng cho n\u1ed9i dung kh\u00f4ng nh\u00ecn th\u1ea5y ngay l\u1eadp t\u1ee9c (nh\u01b0 l\u00e0 c\u00e1c \u0111o\u1ea1n \u1ea9n b\u00ean trong accordions).<\/li><\/ul>\n\n\n<p>V\u1edbi th\u00f4ng tin n\u00e0y, b\u1ea1n t\u1ed1i \u01b0u h\u00f3a CSS c\u1ee7a m\u00ecnh \u0111\u1ec3 tr\u00ecnh duy\u1ec7t t\u1ea3i v\u00e0 x\u1eed l\u00fd style quan tr\u1ecdng ngay l\u1eadp t\u1ee9c ngay sau khi trang t\u1ea3i, trong khi tr\u00ec ho\u00e3n c\u00e1c CSS kh\u00f4ng quan tr\u1ecdng v\u1ec1 sau:<\/p>\n\n\n<ul><li>Tr\u00edch xu\u1ea5t c\u00e1c class \u0111\u01b0\u1ee3c \u0111\u00e1nh d\u1ea5u m\u00e0u xanh trong b\u00e1o c\u00e1o thu \u0111\u01b0\u1ee3c t\u1eeb c\u00f4ng c\u1ee5 coverage, v\u00e0 \u0111\u1ea9y c\u00e1c class n\u00e0y v\u00e0o b\u00ean trong kh\u1ed1i <em>&lt;style&gt;<\/em> \u1edf \u0111\u1ea7u trang:<\/li><\/ul>\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;style type=\"text\/css\"&gt;\n.accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}\n&lt;\/style&gt;<\/code><\/pre>\n\n\n<ul><li>Sau \u0111\u00f3 t\u1ea3i c\u00e1c class c\u00f2n l\u1ea1i theo ph\u01b0\u01a1ng th\u1ee9c kh\u00f4ng \u0111\u1ed3ng b\u1ed9, b\u1eb1ng c\u00e1ch \u00e1p d\u1ee5ng m\u1eabu b\u00ean d\u01b0\u1edbi \u0111\u00e2y:<\/li><\/ul>\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;link rel=\"preload\" href=\"styles.css\" as=\"style\" onload=\"this.onload=null;this.rel='stylesheet'\"&gt;\n&lt;noscript&gt;&lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;&lt;\/noscript&gt;<\/code><\/pre>\n\n\n<p>\u0110\u00e2y kh\u00f4ng ph\u1ea3i l\u00e0 c\u00e1ch t\u1ea3i CSS ti\u00eau chu\u1ea9n. \u0110\u00e2y l\u00e0 c\u00e1ch n\u00f3 ho\u1ea1t \u0111\u1ed9ng:<\/p>\n\n\n<ul><li><em>link rel=&#8221;preload&#8221; as=&#8221;style&#8221;<\/em> y\u00eau c\u1ea7u stylesheet t\u1ea3i kh\u00f4ng \u0111\u1ed3ng b\u1ed9. B\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u v\u1ec1 preload trong t\u00e0i li\u1ec7u h\u01b0\u1edbng d\u1eabn c\u1ee7a n\u00f3 \u1edf \u0111\u00e2y: <a href=\"https:\/\/kiencang.net\/preload-tai-nguyen-quan-trong\/\">https:\/\/kiencang.net\/preload-tai-nguyen-quan-trong\/<\/a><\/li><li>Thu\u1ed9c t\u00ednh <em>onload<\/em> trong <em>link<\/em> cho ph\u00e9p CSS \u0111\u01b0\u1ee3c x\u1eed l\u00fd khi n\u00f3 t\u1ea3i xong.<\/li><li>&#8220;V\u00f4 hi\u1ec7u h\u00f3a\/Nulling&#8221; tr\u00ecnh x\u1eed l\u00fd <em>onload<\/em> m\u1ed9t khi n\u00f3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng gi\u00fap m\u1ed9t s\u1ed1 tr\u00ecnh duy\u1ec7t tr\u00e1nh g\u1ecdi l\u1ea1i tr\u00ecnh x\u1eed l\u00fd khi chuy\u1ec3n \u0111\u1ed5i thu\u1ed9c t\u00ednh rel.<\/li><li>Tham chi\u1ebfu stylesheet b\u00ean trong ph\u1ea7n t\u1eed <em>noscript<\/em> ho\u1ea1t \u0111\u1ed9ng nh\u01b0 m\u1ed9t bi\u1ec7n ph\u00e1p d\u1ef1 ph\u00f2ng trong tr\u01b0\u1eddng h\u1ee3p tr\u00ecnh duy\u1ec7t kh\u00f4ng th\u1ef1c thi JavaScript.<\/li><\/ul>\n\n\n<p><a href=\"https:\/\/defer-css-optimized.glitch.me\/\">Trang k\u1ebft qu\u1ea3 sau ch\u1ec9nh s\u1eeda<\/a> gi\u1ed1ng y nh\u01b0 phi\u00ean b\u1ea3n ban \u0111\u1ea7u c\u1ee7a n\u00f3, th\u1eadm ch\u00ed l\u00e0 khi ph\u1ea7n l\u1edbn style \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i kh\u00f4ng \u0111\u1ed3ng b\u1ed9. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1ch c\u00e1c style \u0111\u01b0\u1ee3c inline v\u00e0 y\u00eau c\u1ea7u kh\u00f4ng \u0111\u1ed3ng b\u1ed9 cho CSS tr\u00f4ng nh\u01b0 th\u1ebf n\u00e0o trong file HTML (t\u00f4i\/ng\u01b0\u1eddi d\u1ecbch ch\u1ec9 copy n\u1ed9i dung trong tag <em>head<\/em>):<\/p>\n\n\n<pre class=\"wp-block-preformatted\">&lt;head&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n&lt;style type=\"text\/css\"&gt;\n.accordion-btn {\nwidth: 100%;\ntext-align: center;\nfont-size: 18px;\ncursor: pointer;\ncolor: #444;\nbackground-color: #ADD8E6;\npadding: 19px;\noutline: none;\nborder: none;\nborder-radius: 2px;\n}\n.container {\ndisplay: none;\npadding: 0 18px;\nbackground-color: white;\noverflow: hidden;\n}\nh1 {\nword-spacing: 5px;\ncolor: blue;\nfont-weight: bold;\ntext-align: center;\n}\n&lt;\/style&gt;\n&lt;link rel=\"preload\" href=\"style.css\" as=\"style\" onload=\"this.onload=null;this.rel='stylesheet'\"&gt;\n&lt;noscript&gt;\n&lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\n&lt;\/noscript&gt;\n&lt;\/head&gt;<\/pre>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Kiem_tra_lai\"><\/span>Ki\u1ec3m tra l\u1ea1i<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>S\u1eed d\u1ee5ng DevTools \u0111\u1ec3 ch\u1ea1y l\u1ea1i ki\u1ec3m tra v\u1ec1 Performance cho trang <a href=\"https:\/\/defer-css-optimized.glitch.me\/\">\u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a<\/a>.<\/p>\n\n\n<p>\u0110\u00e1nh d\u1ea5u FCP xu\u1ea5t hi\u1ec7n tr\u01b0\u1edbc khi trang y\u00eau c\u1ea7u CSS, \u0111i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 tr\u00ecnh duy\u1ec7t kh\u00f4ng c\u1ea7n \u0111\u1ee3i CSS t\u1ea3i tr\u01b0\u1edbc khi render trang:<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/cdt-perf-optimized.png\" alt=\"ki\u1ec3m tra l\u1ea1i hi\u1ec7u su\u1ea5t cho trang \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a\" class=\"wp-image-13957\"\/><\/figure><\/div>\n\n\n<p>B\u01b0\u1edbc cu\u1ed1i c\u00f9ng, ch\u1ea1y Lighthouse tr\u00ean trang \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a.<\/p>\n\n\n<p>Trong b\u00e1o c\u00e1o, b\u1ea1n s\u1ebd th\u1ea5y l\u00e0 FCP c\u1ee7a trang \u0111\u00e3 gi\u1ea3m \u0111\u01b0\u1ee3c 0,2s (c\u1ea3i thi\u1ec7n 20%):<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/lighthouse-metrics-optimized.png\" alt=\"b\u00e1o c\u00e1o lighthouse cho trang \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a\" class=\"wp-image-13958\"\/><\/figure><\/div>\n\n\n<p>Ph\u1ea7n g\u1ee3i \u00fd <strong>Lo\u1ea1i b\u1ecf t\u00e0i nguy\u00ean ch\u1eb7n hi\u1ec3n th\u1ecb<\/strong> kh\u00f4ng c\u00f2n xu\u1ea5t hi\u1ec7n d\u01b0\u1edbi khu v\u1ef1c <strong>C\u01a1 h\u1ed9i<\/strong> n\u1eefa, m\u00e0 gi\u1edd n\u00f3 n\u1eb1m trong khu v\u1ef1c <strong>C\u00e1c ti\u00eau chu\u1ea9n \u0111\u00e3 \u0111\u1ea1t (Pass Audits)<\/strong>:<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/lighthouse-opportunities-optimized.png\" alt=\"kh\u00f4ng c\u00f2n t\u00e0i nguy\u00ean ch\u1eb7n hi\u1ec3n th\u1ecb\" class=\"wp-image-13959\"\/><\/figure><\/div>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cac_buoc_tiep_theo_va_tham_khao\"><\/span>C\u00e1c b\u01b0\u1edbc ti\u1ebfp theo v\u00e0 tham kh\u1ea3o<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>Trong h\u01b0\u1edbng d\u1eabn n\u00e0y, b\u1ea1n s\u1eed d\u1ee5ng code vanilla (d\u1ea1ng code \u0111\u01a1n gi\u1ea3n, kh\u00f4ng c\u00f3 m\u00e3, t\u00e0i nguy\u00ean c\u1ee7a b\u00ean th\u1ee9 ba nh\u00fang v\u00e0o) \u0111\u1ec3 tri\u1ec3n khai t\u1ed1i \u01b0u. Trong b\u1ed1i c\u1ea3nh th\u1ef1c, s\u1eed d\u1ee5ng c\u00e1c h\u00e0m nh\u01b0 <a href=\"https:\/\/github.com\/filamentgroup\/loadCSS\/blob\/master\/README.md\">loadCSS<\/a> s\u1ebd l\u00e0 th\u1ef1c h\u00e0nh t\u1ed1t, n\u00f3 c\u00f3 th\u1ec3 gi\u1ea3n h\u00f3a h\u00e0nh \u0111\u1ed9ng n\u00e0y v\u00e0 l\u00e0m vi\u1ec7c \u1ed5n th\u1ecfa tr\u00ean nhi\u1ec1u tr\u00ecnh duy\u1ec7t. B\u1ed5 sung cho b\u00e0i vi\u1ebft n\u00e0y b\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o b\u00e0i <a href=\"https:\/\/kiencang.net\/trich-xuat-critical-css\/\">h\u01b0\u1edbng d\u1eabn tr\u00edch xu\u1ea5t critical CSS<\/a>, n\u00f3 c\u00f3 \u0111\u1ec1 c\u1eadp \u0111\u1ebfn m\u1ed9t s\u1ed1 c\u00f4ng c\u1ee5 ph\u1ed5 bi\u1ebfn nh\u1ea5t \u0111\u1ec3 tr\u00edch xu\u1ea5t CSS quan tr\u1ecdng v\u00e0 bao g\u1ed3m m\u1ed9t codelab \u0111\u1ec3 b\u1ea1n th\u1ea5y c\u00e1ch th\u1ee9c ch\u00fang ho\u1ea1t \u0111\u1ed9ng trong th\u1ef1c t\u1ebf.<\/p>\n\n\n<p><em>(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft Defer non-critical CSS, t\u00e1c gi\u1ea3: Demian Renzulli, trang: web[.]dev)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>C\u00e1c file CSS l\u00e0 lo\u1ea1i t\u00e0i nguy\u00ean ch\u1eb7n hi\u1ec3n th\u1ecb: ch\u00fang ph\u1ea3i \u0111\u01b0\u1ee3c t\u1ea3i xu\u1ed1ng (load) v\u00e0 x\u1eed l\u00fd (process) tr\u01b0\u1edbc khi tr\u00ecnh duy\u1ec7t render trang. Trang web bao g\u1ed3m l\u01b0\u1ee3ng l\u1edbn c\u00e1c style kh\u00f4ng c\u1ea7n thi\u1ebft c\u00f3 th\u1ec3 m\u1ea5t nhi\u1ec1u th\u1eddi gian \u0111\u1ec3 render. Trong b\u00e0i h\u01b0\u1edbng d\u1eabn n\u00e0y, b\u1ea1n s\u1ebd h\u1ecdc \u0111\u01b0\u1ee3c c\u00e1ch &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[262],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tr\u00ec ho\u00e3n t\u1ea3i CSS kh\u00f4ng quan tr\u1ecdng &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/tri-hoan-css-khong-quan-trong\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tr\u00ec ho\u00e3n t\u1ea3i CSS kh\u00f4ng quan tr\u1ecdng &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"C\u00e1c file CSS l\u00e0 lo\u1ea1i t\u00e0i nguy\u00ean ch\u1eb7n hi\u1ec3n th\u1ecb: ch\u00fang ph\u1ea3i \u0111\u01b0\u1ee3c t\u1ea3i xu\u1ed1ng (load) v\u00e0 x\u1eed l\u00fd (process) tr\u01b0\u1edbc khi tr\u00ecnh duy\u1ec7t render trang. Trang web bao g\u1ed3m l\u01b0\u1ee3ng l\u1edbn c\u00e1c style kh\u00f4ng c\u1ea7n thi\u1ebft c\u00f3 th\u1ec3 m\u1ea5t nhi\u1ec1u th\u1eddi gian \u0111\u1ec3 render. Trong b\u00e0i h\u01b0\u1edbng d\u1eabn n\u00e0y, b\u1ea1n s\u1ebd h\u1ecdc \u0111\u01b0\u1ee3c c\u00e1ch &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/tri-hoan-css-khong-quan-trong\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-13T07:58:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/loai-bo-tai-nguyen-chan-hien-thi.png\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tr\u00ec ho\u00e3n t\u1ea3i CSS kh\u00f4ng quan tr\u1ecdng &#8226; Ki\u1ebfn c\u00e0ng","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kiencang.net\/tri-hoan-css-khong-quan-trong\/","og_locale":"vi_VN","og_type":"article","og_title":"Tr\u00ec ho\u00e3n t\u1ea3i CSS kh\u00f4ng quan tr\u1ecdng &#8226; Ki\u1ebfn c\u00e0ng","og_description":"C\u00e1c file CSS l\u00e0 lo\u1ea1i t\u00e0i nguy\u00ean ch\u1eb7n hi\u1ec3n th\u1ecb: ch\u00fang ph\u1ea3i \u0111\u01b0\u1ee3c t\u1ea3i xu\u1ed1ng (load) v\u00e0 x\u1eed l\u00fd (process) tr\u01b0\u1edbc khi tr\u00ecnh duy\u1ec7t render trang. Trang web bao g\u1ed3m l\u01b0\u1ee3ng l\u1edbn c\u00e1c style kh\u00f4ng c\u1ea7n thi\u1ebft c\u00f3 th\u1ec3 m\u1ea5t nhi\u1ec1u th\u1eddi gian \u0111\u1ec3 render. Trong b\u00e0i h\u01b0\u1edbng d\u1eabn n\u00e0y, b\u1ea1n s\u1ebd h\u1ecdc \u0111\u01b0\u1ee3c c\u00e1ch &hellip;","og_url":"https:\/\/kiencang.net\/tri-hoan-css-khong-quan-trong\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-13T07:58:00+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/loai-bo-tai-nguyen-chan-hien-thi.png"}],"author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"7 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/tri-hoan-css-khong-quan-trong\/","url":"https:\/\/kiencang.net\/tri-hoan-css-khong-quan-trong\/","name":"Tr\u00ec ho\u00e3n t\u1ea3i CSS kh\u00f4ng quan tr\u1ecdng &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-13T07:58:00+00:00","dateModified":"2019-12-13T07:58:00+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/tri-hoan-css-khong-quan-trong\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/tri-hoan-css-khong-quan-trong\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/tri-hoan-css-khong-quan-trong\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"Tr\u00ec ho\u00e3n t\u1ea3i CSS kh\u00f4ng quan tr\u1ecdng"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/13953"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=13953"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/13953\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=13953"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=13953"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=13953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}