{"id":13828,"date":"2019-12-08T10:34:20","date_gmt":"2019-12-08T10:34:20","guid":{"rendered":"https:\/\/kiencang.net\/?p=13828"},"modified":"2019-12-08T10:34:20","modified_gmt":"2019-12-08T10:34:20","slug":"co-nen-dung-critical-css","status":"publish","type":"post","link":"https:\/\/kiencang.net\/co-nen-dung-critical-css\/","title":{"rendered":"B\u1ea1n c\u00f3 n\u00ean s\u1eed d\u1ee5ng critical CSS"},"content":{"rendered":"\n<p>T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd cho b\u1ea1n bi\u1ebft <a href=\"https:\/\/kiencang.net\/critical-css-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">critical CSS l\u00e0 g\u00ec?<\/a> C\u00e1ch n\u00f3 ho\u1ea1t \u0111\u1ed9ng v\u00e0 khi n\u00e0o b\u1ea1n n\u00ean s\u1eed d\u1ee5ng n\u00f3? V\u00e0 th\u1eadm ch\u00ed&#8230;khi n\u00e0o b\u1ea1n <em>kh\u00f4ng n\u00ean<\/em> s\u1eed d\u1ee5ng critical CSS?<\/p>\n\n\n<p>\u0110\u00e2y l\u00e0 m\u1ed9t h\u01b0\u1edbng d\u1eabn kh\u00e1c v\u1ec1 hi\u1ec7u su\u1ea5t c\u1ee7a WordPress kh\u00f4ng-h\u1ec1-ch\u00e9m-gi\u00f3 (cut-the-crap) t\u00f4i mu\u1ed1n d\u00e0nh cho b\u1ea1n&#8230;<\/p>\n\n\n<p>\u0110\u1ec3 t\u00f4i k\u1ec3 chuy\u1ec7n, h\u1ed3i tr\u01b0\u1edbc t\u00f4i nh\u1eadn \u0111\u01b0\u1ee3c m\u1ed9t c\u00e2u h\u1ecfi ng\u00e2y th\u01a1 t\u1eeb kh\u00e1ch h\u00e0ng t\u1eebng <a href=\"https:\/\/kiencang.net\/mua-hosting-cho-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">mua hosting<\/a> c\u1ee7a m\u00ecnh:<\/p>\n\n\n<blockquote class=\"wp-block-quote\"><p>N\u00e0y, t\u00f4i mu\u1ed1n h\u1ecfi b\u1ea1n nhanh m\u1ed9t c\u00e2u: B\u1ea1n \u0111\u00e3 bao gi\u1edd x\u1eed l\u00fd critical CSS ch\u01b0a? T\u00f4i \u0111ang c\u1ed1 g\u1eafng th\u1eed nghi\u1ec7m n\u00f3 nh\u01b0ng th\u01b0\u1eddng th\u00ec c\u00e1c plugin h\u1ee9a h\u1eb9n l\u1ea1i ch\u1eb3ng l\u00e0m t\u1ed1t cho l\u1eafm. Website \u0111\u00e3 c\u00f3 t\u1ed1c \u0111\u1ed9 r\u1ea5t nhanh r\u1ed3i (crazy fast) nh\u01b0ng n\u1ebfu n\u00f3 c\u00f3 th\u1ec3 nhanh h\u01a1n n\u1eefa th\u00ec t\u1ea1i sao l\u1ea1i kh\u00f4ng th\u1eed c\u01a1 ch\u1ee9?<\/p><\/blockquote>\n\n\n<p>T\u00f4i \u0111\u00e3 r\u1ea5t thi\u1ebfu ki\u00ean nh\u1eabn, t\u00f4i tr\u1ea3 l\u1eddi ngay l\u1eadp t\u1ee9c&#8230;&#8221;<em>C\u00e1i n\u00e0y kh\u00f4ng d\u00e0nh cho b\u1ea1n \u0111\u00e2u. \u0110\u00e2y l\u00e0 m\u1ed9t chi\u1ebfn thu\u1eadt c\u0169, gi\u1edd \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng tr\u1edf l\u1ea1i ph\u1ed5 bi\u1ebfn \u1edf nh\u1eefng ng\u01b0\u1eddi x\u00e2y d\u1ef1ng c\u00e1c website c\u1ed3ng k\u1ec1nh. B\u1ea1n kh\u00f4ng c\u00f3 v\u1ea5n \u0111\u1ec1 nh\u01b0 v\u1eady<\/em>&#8220;<\/p>\n\n\n<p>V\u00e0 m\u1ed9t th\u1eddi gian ng\u1eafn sau khi m\u1ed1i quan h\u1ec7 b\u1ecb ph\u00e1 v\u1ee1, t\u00f4i c\u1ea3m th\u1ea5y c\u1ea7n ph\u1ea3i chia s\u1ebb \u0111i\u1ec1u g\u00ec \u0111\u00f3 tr\u00ean blog c\u1ee7a m\u00ecnh&#8230;<\/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-6577d6ca57942\" ><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-6577d6ca57942\"  type=\"checkbox\" id=\"item-6577d6ca57942\"><\/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\/co-nen-dung-critical-css\/#Cach_%E2%80%9CCritical_CSS%E2%80%9D_lam_viec\" title=\"C\u00e1ch &#8220;Critical CSS&#8221; l\u00e0m vi\u1ec7c?\">C\u00e1ch &#8220;Critical CSS&#8221; l\u00e0m vi\u1ec7c?<\/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\/co-nen-dung-critical-css\/#Can_than_voi_%E2%80%9Ccritical_CSS%E2%80%9D\" title=\"C\u1ea9n th\u1eadn v\u1edbi &#8220;critical CSS&#8221;\">C\u1ea9n th\u1eadn v\u1edbi &#8220;critical CSS&#8221;<\/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\/co-nen-dung-critical-css\/#CSS_nen_chan_hien_thi\" title=\"CSS n\u00ean ch\u1eb7n hi\u1ec3n th\u1ecb!\">CSS n\u00ean ch\u1eb7n hi\u1ec3n th\u1ecb!<\/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\/co-nen-dung-critical-css\/#Cac_phuong_thuc_de_giam_CSS_khong_can_thiet\" title=\"C\u00e1c ph\u01b0\u01a1ng th\u1ee9c \u0111\u1ec3 gi\u1ea3m CSS kh\u00f4ng c\u1ea7n thi\u1ebft\">C\u00e1c ph\u01b0\u01a1ng th\u1ee9c \u0111\u1ec3 gi\u1ea3m CSS kh\u00f4ng c\u1ea7n thi\u1ebft<\/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\/co-nen-dung-critical-css\/#Ly_le_cho_viec_su_dung_va_chong_lai_viec_su_dung_critical_CSS\" title=\"L\u00fd l\u1ebd cho vi\u1ec7c s\u1eed d\u1ee5ng (v\u00e0 ch\u1ed1ng l\u1ea1i vi\u1ec7c s\u1eed d\u1ee5ng) critical CSS?\">L\u00fd l\u1ebd cho vi\u1ec7c s\u1eed d\u1ee5ng (v\u00e0 ch\u1ed1ng l\u1ea1i vi\u1ec7c s\u1eed d\u1ee5ng) critical CSS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/kiencang.net\/co-nen-dung-critical-css\/#Cac_cau_hoi_thuong_gap_ve_Critical_CSS\" title=\"C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p (v\u1ec1 Critical CSS)\">C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p (v\u1ec1 Critical CSS)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/kiencang.net\/co-nen-dung-critical-css\/#Loi_ban_cua_nguoi_dich\" title=\"L\u1eddi b\u00e0n c\u1ee7a ng\u01b0\u1eddi d\u1ecbch\">L\u1eddi b\u00e0n c\u1ee7a ng\u01b0\u1eddi d\u1ecbch<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cach_%E2%80%9CCritical_CSS%E2%80%9D_lam_viec\"><\/span>C\u00e1ch &#8220;Critical CSS&#8221; l\u00e0m vi\u1ec7c?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p><strong>Critical CSS l\u00e0 \u0111o\u1ea1n m\u00e3 CSS m\u00e0 trang web c\u1ee7a b\u1ea1n t\u1ea3i <em>l\u00fac ban \u0111\u1ea7u<\/em> \u0111\u1ec3 s\u1eed d\u1ee5ng ch\u1ec9 cho n\u1ed9i dung ATF (Above The Fold \/ <a href=\"https:\/\/kiencang.net\/uu-tien-noi-dung-hien-thi\/\" target=\"_blank\" rel=\"noreferrer noopener\">N\u1ed9i dung thu\u1ed9c m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean<\/a>) c\u1ee7a trang web, thay v\u00ec t\u1ea3i to\u00e0n b\u1ed9 CSS (entire CSS) cho to\u00e0n trang. \u00dd t\u01b0\u1edfng l\u00e0 b\u1eb1ng c\u00e1ch ch\u1ec9 t\u1ea3i &#8220;critical CSS&#8221; n\u00e0y, trang c\u1ee7a b\u1ea1n s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb nhanh h\u01a1n cho ng\u01b0\u1eddi d\u00f9ng, trong khi ph\u1ea7n c\u00f2n l\u1ea1i c\u1ee7a trang (n\u1ed9i dung t\u1eeb m\u00e0n h\u00ecnh th\u1ee9 hai tr\u1edf \u0111i) v\u1ed1n m\u1ea5t nhi\u1ec1u th\u1eddi gian h\u01a1n \u0111\u1ec3 t\u1ea3i v\u1ec1 v\u00e0 ph\u00e2n t\u00edch s\u1ebd \u0111\u01b0\u1ee3c tr\u00ec ho\u00e3n (defer) m\u00e0 kh\u00f4ng b\u1ecb \u0111\u1ec3 \u00fd.<\/strong><\/p>\n\n\n<p>Chi\u1ebfn thu\u1eadt n\u00e0y \u0111\u1eb7c bi\u1ec7t h\u1eefu \u00edch khi b\u1ea1n c\u00f3 r\u1ea5t nhi\u1ec1u CSS (gi\u1ea3 s\u1eed l\u00e0 b\u1ea5t c\u1ee9 dung l\u01b0\u1ee3ng CSS n\u00e0o tr\u00ean 60KB) c\u00e1i c\u1ea7n n\u1eeda gi\u00e2y ho\u1eb7c th\u1eadm ch\u00ed l\u00e2u h\u01a1n \u0111\u1ec3 x\u1eed l\u00fd. Ch\u00fang ta c\u1ea7n nh\u1edb l\u1ea1i c\u00e1ch video tr\u00ean internet t\u1eebng ho\u1ea1t \u0111\u1ed9ng nh\u01b0 th\u1ebf n\u00e0o? B\u1ea1n kh\u00f4ng th\u1ec3 xem \u0111\u01b0\u1ee3c video cho \u0111\u1ebfn khi to\u00e0n b\u1ed9 video \u0111\u01b0\u1ee3c t\u1ea3i xu\u1ed1ng! Nh\u01b0ng gi\u1edd \u0111\u00e2y v\u1edbi \u0111\u1ecbnh d\u1ea1ng d\u1eef li\u1ec7u streaming\/ph\u00e1t tr\u1ef1c tuy\u1ebfn, b\u1ea1n c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u xem ngay khi video t\u1ea3i \u0111\u01b0\u1ee3c v\u00e0i gi\u00e2y. Critical CSS l\u00e0m vi\u1ec7c t\u01b0\u01a1ng t\u1ef1, trang c\u00f3 th\u1ec3 hi\u1ec3n th\u1ecb m\u1ed9t khi CSS ban \u0111\u1ea7u (initial CSS) \u0111\u01b0\u1ee3c x\u1eed l\u00fd.<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Can_than_voi_%E2%80%9Ccritical_CSS%E2%80%9D\"><\/span>C\u1ea9n th\u1eadn v\u1edbi &#8220;critical CSS&#8221;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>Gi\u1ed1ng nh\u01b0 m\u1ecdi th\u1ee9 kh\u00e1c, c\u00f3 h\u00e0ng t\u00e1 c\u1ea3nh b\u00e1o v\u1edbi chi\u1ebfn thu\u1eadt n\u00e0y. T\u00f4i s\u1ebd li\u1ec7t k\u00ea nh\u1eefng c\u00e1i \u0111\u00e1ng ch\u00fa \u00fd:<\/p>\n\n\n<ul><li><strong>Ai l\u00e0 ng\u01b0\u1eddi x\u00e1c \u0111\u1ecbnh c\u00e1i n\u00e0o l\u00e0 &#8220;critical CSS&#8221;?<\/strong> &#8211; ng\u01b0\u1eddi coder? Ho\u1eb7c m\u1ed9t c\u00f4ng c\u1ee5 xu\u1ea5t m\u00e3 t\u1ef1 \u0111\u1ed9ng? T\u00f4i th\u00edch x\u1eed l\u00fd code tay (hand-coders) h\u01a1n v\u00ec s\u1ebd bi\u1ebft ch\u00ednh x\u00e1c th\u00e0nh ph\u1ea7n n\u00e0o th\u1ef1c s\u1ef1 n\u1eb1m tr\u00ean m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean trong khi c\u00e1c \u0111o\u1ea1n m\u00e3 t\u1ef1 \u0111\u1ed9ng ch\u1ec9 d\u1ef1 \u0111o\u00e1n d\u1ef1a tr\u00ean c\u00e1c thu\u1eadt to\u00e1n \u0111\u1ecbnh tr\u01b0\u1edbc. Li\u1ec7u pop-up GDPR (Quy \u0111\u1ecbnh chung v\u1ec1 b\u1ea3o v\u1ec7 d\u1eef li\u1ec7u) phi\u1ec1n nhi\u1ec5u c\u00f3 \u0111\u01b0\u1ee3c bao g\u1ed3m v\u00e0o hay kh\u00f4ng? Li\u1ec7u c\u00e1c icon mua h\u00e0ng c\u00f3 \u0111\u01b0\u1ee3c bao g\u1ed3m hay kh\u00f4ng? B\u1ea1n hi\u1ec3u \u00fd t\u00f4i ch\u1ee9&#8230;c\u00f3 qu\u00e1 nhi\u1ec1u th\u1ee9 ph\u1ea3i quy\u1ebft \u0111\u1ecbnh, \u0111\u1eafn \u0111o. Trong tr\u01b0\u1eddng h\u1ee3p x\u1ea5u nh\u1ea5t, c\u00e1c \u0111o\u1ea1n m\u00e3 critical CSS \u0111\u01b0\u1ee3c t\u1ea1o ra kh\u00f4ng \u0111\u00fang c\u00e1ch v\u00e0 ph\u00e1 v\u1ee1 style\/ch\u1ee9c n\u0103ng trang c\u1ee7a b\u1ea1n.<\/li><li><strong>Critical CSS c\u00f3 th\u1ec3 l\u00e0m \u1ea3nh h\u01b0\u1edfng x\u1ea5u \u0111\u1ebfn th\u1eddi gian t\u1ea3i trang cho nh\u1eefng l\u1ea7n gh\u00e9 th\u0103m sau n\u1ebfu b\u1ea1n c\u00f3 cache ph\u00eda tr\u00ecnh duy\u1ec7t<\/strong>. H\u00e3y ngh\u0129 v\u1ec1 \u0111i\u1ec1u n\u00e0y&#8230;v\u1edbi <a href=\"https:\/\/kiencang.net\/bo-nho-dem-trinh-duyet\/\" target=\"_blank\" rel=\"noreferrer noopener\">cache ph\u00eda tr\u00ecnh duy\u1ec7t<\/a> \u0111\u01b0\u1ee3c b\u1eadt, c\u00e1c th\u00e0nh ph\u1ea7n t\u0129nh nh\u01b0 \u1ea3nh v\u00e0 CSS\/JS \u0111\u01b0\u1ee3c cache trong tr\u00ecnh duy\u1ec7t ng\u01b0\u1eddi d\u00f9ng v\u00e0 \u0111\u01b0\u1ee3c t\u1ea3i c\u1ee5c b\u1ed9 t\u1eeb thi\u1ebft b\u1ecb c\u1ee7a h\u1ecd (c\u00e1i c\u00f3 th\u1eddi gian t\u1ea3i nhanh nh\u1ea5t). B\u1eb1ng c\u00e1ch n\u1ed9i tuy\u1ebfn critical CSS v\u00e0o trong t\u00e0i li\u1ec7u HTML, b\u1ea1n s\u1ebd c\u1ea7n nhi\u1ec1u th\u1eddi gian h\u01a1n \u0111\u1ec3 t\u1ea3i trang cho m\u1ed7i y\u00eau c\u1ea7u. Trong tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng cache ph\u00eda tr\u00ecnh duy\u1ec7t, t\u00f4i ngh\u0129 citical CSS ch\u1ec9 c\u00f3 \u00edch cho l\u1ea7n gh\u00e9 th\u0103m \u0111\u1ea7u ti\u00ean m\u00e0 th\u00f4i.<\/li><li><strong>T\u1ed5ng l\u01b0\u1ee3ng CSS c\u1ee7a b\u1ea1n r\u1ea5t nh\u1ecf<\/strong>, do v\u1eady vi\u1ec7c ph\u00e2n chia n\u00f3 th\u00e0nh nhi\u1ec1u ph\u1ea7n h\u01a1n l\u00e0m ch\u1eadm trang c\u1ee7a b\u1ea1n (b\u1eb1ng c\u00e1ch b\u1ed5 sung th\u00eam c\u00e1c y\u00eau c\u1ea7u HTTP) trong khi kh\u00f4ng t\u1ea1o ra \u0111\u01b0\u1ee3c th\u1eddi gian xu\u1ea5t trang nhanh h\u01a1n m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 c\u1ea3m nh\u1eadn \u0111\u01b0\u1ee3c.<\/li><li><strong>B\u1ea1n c\u00f3 r\u1ea5t nhi\u1ec1u critical CSS<\/strong> l\u00e0m gia t\u0103ng th\u00eam ph\u1ee9c t\u1ea1p trong khi kh\u00f4ng \u0111em l\u1ea1i b\u1ea5t k\u1ef3 c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 \u0111\u00e1ng ch\u00fa \u00fd n\u00e0o.<\/li><\/ul>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"CSS_nen_chan_hien_thi\"><\/span>CSS <em>n\u00ean<\/em> ch\u1eb7n hi\u1ec3n th\u1ecb!<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>T\u00f4i ph\u00e1t ch\u00e1n c\u00e1ch nh\u1eefng ng\u01b0\u1eddi m\u1edbi c\u1ed1 g\u1eafng tri\u1ec3n khai c\u00e1c k\u1ef9 thu\u1eadt t\u1ed1i \u01b0u h\u00f3a CSS (nh\u01b0 vi\u1ec7c g\u1ed9p CSS ho\u1eb7c critical CSS)!<\/p>\n\n\n<p><strong>H\u00e3y n\u00f3i th\u1eb3ng \u0111i\u1ec1u n\u00e0y &gt; CSS v\u1ec1 b\u1ea3n ch\u1ea5t \u0111\u01b0\u1ee3c gi\u1ea3 \u0111\u1ecbnh d\u00f9ng \u0111\u1ec3 &#8220;ch\u1eb7n hi\u1ec3n th\u1ecb&#8221;.<\/strong><\/p>\n\n\n<p>N\u00f3 ph\u1ea3i nh\u01b0 v\u1eady \u0111\u1ec3 b\u1ea1n kh\u00f4ng g\u1eb7p ph\u1ea3i c\u00e1c v\u1ea5n \u0111\u1ec1 FOUT\/FOUC\/<a href=\"https:\/\/kiencang.net\/sua-loi-foit-trong-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">FOIT<\/a> (Flash Of Unstyled Tex ho\u1eb7c Flash Of Unstyle Content\/hi\u1ec7u \u1ee9ng nh\u00e1y v\u0103n b\u1ea3n khi n\u1ed9i dung c\u1ee7a b\u1ea1n t\u1ea3i tr\u01b0\u1edbc style v\u00e0 v\u0103n b\u1ea3n b\u1ecb gi\u1eadt\/nh\u00e1y khi chuy\u1ec3n t\u1eeb tr\u1ea1ng th\u00e1i font th\u00f4ng th\u01b0\u1eddng sang font \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh trong CSS).<\/p>\n\n\n<p>V\u1ea5n \u0111\u1ec1 duy nh\u1ea5t b\u00e2y gi\u1edd l\u00e0 l\u00e0m gi\u1ea3m \u1ea3nh h\u01b0\u1edfng c\u1ee7a ch\u1eb7n hi\u1ec3n th\u1ecb c\u00e0ng nhi\u1ec1u c\u00e0ng t\u1ed1t. T\u00f4i th\u1eadm ch\u00ed gh\u00e9t m\u00f4 t\u1ea3 theo c\u00e1ch nh\u01b0 v\u1eady. N\u1ebfu t\u00f4i c\u00f3 th\u1ec3 t\u1ef1 quy\u1ebft, t\u00f4i s\u1ebd g\u1ecdi hi\u1ec7n t\u01b0\u1ee3ng n\u00e0y \u0111\u01a1n gi\u1ea3n l\u00e0 do &#8220;X\u1eed l\u00fd CSS&#8221;.<\/p>\n\n\n<p>Tr\u01b0\u1edbc \u0111\u00e2y, CSS kh\u00f4ng h\u1ec1 c\u1ed3ng k\u1ec1nh. Ch\u1ec9 c\u1ea7n v\u00e0i kilobytes l\u00e0 \u0111\u1ee7 \u0111\u1ec3 b\u1ea1n t\u1ea1o style cho to\u00e0n b\u1ed9 website. \u0110i\u1ec1u n\u00e0y d\u1ec5 d\u00e0ng \u0111\u1ea1t \u0111\u01b0\u1ee3c b\u1edfi v\u00ec trang c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf to\u00e0n b\u1ed9 trong m\u1ed9t l\u1ea7n, b\u1edfi m\u1ed9t ng\u01b0\u1eddi v\u00e0 v\u1edbi to\u00e0n b\u1ed9 h\u00ecnh dung trong \u0111\u1ea7u. Ng\u00e0y nay, c\u00e1c website \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng theo phong c\u00e1ch modul qu\u00e1 m\u1ee9c. Giao di\u1ec7n \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf ho\u1eb7c l\u1ef1a ch\u1ecdn trong n\u0103m 2016, t\u00f9y ch\u1ec9nh th\u00eam v\u00e0o n\u0103m 2017. C\u00f3 th\u1ec3 c\u00f3 15 &#8211; 30 plugin, m\u1ed7i c\u00e1i \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf b\u1edfi l\u1eadp tr\u00ecnh vi\u00ean kh\u00e1c nhau, v\u00e0 do v\u1eady c\u0169ng bao g\u1ed3m c\u00e1c \u0111o\u1ea1n m\u00e3 CSS ri\u00eang bi\u1ec7t c\u1ee7a t\u1eebng ng\u01b0\u1eddi.<\/p>\n\n\n<p>H\u00e3y \u0111o\u00e1n xem khi t\u1ea5t c\u1ea3 c\u00e1c \u0111o\u1ea1n m\u00e3 CSS n\u00e0y \u0111\u01b0\u1ee3c tr\u1ed9n l\u1eabn v\u1edbi nhau? S\u1ebd c\u00f3 nhi\u1ec1u \u0111o\u1ea1n CSS <em>ch\u1ed3ng ch\u00e9o<\/em> b\u1edfi c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n kh\u00e1c nhau ch\u00eam nh\u1eefng \u0111o\u1ea1n m\u00e3 CSS c\u1ee7a ri\u00eang h\u1ecd. L\u1ea5y v\u00ed d\u1ee5, theme c\u1ee7a b\u1ea1n \u0111\u00e3 c\u00f3 style cho n\u00fat b\u1ea5m (button) r\u1ed3i nh\u01b0ng n\u00f3 s\u1ebd \u0111\u01b0\u1ee3c ghi \u0111\u00e8 (over-ridden) b\u1edfi style n\u00fat b\u1ea5m \u0111\u01b0\u1ee3c t\u1ea1o b\u1edfi c\u00f4ng c\u1ee5 x\u00e2y d\u1ef1ng trang (page builder) v\u00e0 r\u1ed3i m\u1ed9t l\u1ea7n n\u1eefa n\u00f3 \u0111\u01b0\u1ee3c ghi \u0111\u00e8 b\u1edfi style c\u1ee7a pop up \u0111\u0103ng k\u00fd nh\u1eadn th\u01b0. N\u1ebfu b\u1ea1n vi\u1ebft m\u00e3 t\u1eeb ban \u0111\u1ea7u, t\u1ea5t c\u1ea3 \u0111i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 ch\u1ec9 l\u00e0 3 d\u00f2ng \u0111\u01a1n gi\u1ea3n&#8230;thay v\u00ec 9 d\u00f2ng, m\u00e0 6 trong s\u1ed1 ch\u00fang ghi \u0111\u00e8 l\u00ean c\u00e1i kh\u00e1c (dung l\u01b0\u1ee3ng CSS c\u1ed3ng k\u1ec1nh, \u0111\u1ed3ng th\u1eddi vi\u1ec7c ph\u00e2n t\u00edch c\u0169ng m\u1ea5t th\u1eddi gian h\u01a1n).<\/p>\n\n\n<p>H\u00e3y ti\u1ebfp t\u1ee5c n\u00e0o!&#8230;<\/p>\n\n\n<p>Cho d\u00f9 b\u1ea1n c\u00f3 l\u01b0\u1ee3ng CSS l\u1edbn nh\u01b0 th\u1ebf n\u00e0o (m\u1ed9t l\u1ea7n n\u1eefa, t\u00f4i \u0111\u1ecbnh ngh\u0129a &#8220;qu\u00e1 nhi\u1ec1u CSS&#8221; l\u00e0 c\u00f3 l\u01b0\u1ee3ng CSS t\u1eeb 60KB tr\u1edf l\u00ean), l\u00fd t\u01b0\u1edfng l\u00e0 gi\u1ea3m th\u1eddi gian x\u1eed l\u00fd c\u1ee7a n\u00f3 (ho\u1eb7c trong thu\u1eadt ng\u1eef c\u1ee7a pagespeed l\u00e0 th\u1eddi gian &#8220;ch\u1eb7n hi\u1ec3n th\u1ecb&#8221;).<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cac_phuong_thuc_de_giam_CSS_khong_can_thiet\"><\/span>C\u00e1c ph\u01b0\u01a1ng th\u1ee9c \u0111\u1ec3 gi\u1ea3m CSS kh\u00f4ng c\u1ea7n thi\u1ebft<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<ol><li><strong>N\u1ebfu CSS c\u1ee7a b\u1ea1n \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ed1i thi\u1ec3u h\u00f3a s\u1eb5n r\u1ed3i<\/strong> (d\u01b0\u1edbi 60kb, t\u1ed1t nh\u1ea5t l\u00e0 d\u01b0\u1edbi 30kb), th\u1ebf th\u00ec b\u1ea1n kh\u00f4ng c\u1ea7n ph\u1ea3i l\u00e0m b\u1ea5t k\u1ef3 \u0111i\u1ec1u g\u00ec c\u1ea3, v\u00ec n\u00f3 kh\u00f4ng l\u00e0m ch\u1eb7n hi\u1ec3n th\u1ecb.<\/li><li><strong>N\u1ebfu CSS c\u1ee7a b\u1ea1n c\u00f3 k\u00edch c\u1ee1 l\u1edbn,<\/strong> h\u00e3y c\u1ed1 g\u1eafng lo\u1ea1i b\u1ecf c\u00e0ng nhi\u1ec1u plugin kh\u00f4ng c\u1ea7n thi\u1ebft c\u00e0ng t\u1ed1t.<\/li><li><strong>N\u1ebfu b\u1ea1n ph\u1ea3i gi\u1eef l\u1ea1i <em>t\u1ea5t c\u1ea3<\/em> CSS n\u00e0y<\/strong>, v\u1eady th\u00ec h\u00e3y vi\u1ebft l\u1ea1i theme c\u1ee7a b\u1ea1n t\u1eeb ban \u0111\u1ea7u ho\u1eb7c c\u1ea5u tr\u00fac l\u1ea1i m\u00e3 (v\u1ec1 c\u01a1 b\u1ea3n vi\u1ebft l\u1ea1i code c\u1ee7a b\u1ea1n s\u1ea1ch h\u01a1n v\u00e0 ng\u1eafn g\u1ecdn h\u01a1n). V\u00e2ng, t\u00f4i ho\u00e0n to\u00e0n \u00fd th\u1ee9c \u0111\u01b0\u1ee3c chuy\u1ec7n h\u1ea7u h\u1ebft nh\u1eefng ai kh\u00f4ng ph\u1ea3i l\u00e0 coder kh\u00f4ng th\u1ec3 t\u1ef1 l\u00e0m \u0111\u01b0\u1ee3c \u0111i\u1ec1u n\u00e0y.<\/li><li><strong>L\u1ef1a ch\u1ecdn th\u1ef1c t\u1ebf nh\u1ea5t cho nh\u1eefng ng\u01b0\u1eddi m\u1edbi\/kh\u00f4ng ph\u1ea3i coder<\/strong> &#8211; chia file CSS c\u1ee7a b\u1ea1n th\u00e0nh nh\u1eefng file nh\u1ecf h\u01a1n v\u00ec th\u1ebf trang c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 t\u1ea3i nhanh h\u01a1n thay v\u00ec ph\u1ea3i \u0111\u1ee3i cho vi\u1ec7c t\u1ea3i to\u00e0n b\u1ed9 CSS. \u0110i\u1ec1u n\u00e0y x\u1ea3y ra m\u1ed9t c\u00e1ch t\u1ef1 nhi\u00ean ngo\u1ea1i tr\u1eeb khi m\u1ecdi ng\u01b0\u1eddi l\u00e0m nh\u1eefng vi\u1ec7c ng\u1edb ng\u1ea9n nh\u01b0 K\u1ebeT H\u1ee2P CSS (\u0111\u00fang v\u1eady, \u0111\u00e2y l\u00e0 m\u1ed9t chi\u1ebfn thu\u1eadt phi\u1ec1n nhi\u1ec5u kh\u00e1c \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 \u0111\u00e1nh l\u1eeba c\u00e1c c\u00f4ng c\u1ee5 pagespeed). T\u00f4i ch\u1ec9 c\u00f3 th\u1ec3 n\u00f3i r\u1eb1ng c\u00e1ch t\u1ed1t nh\u1ea5t \u0111\u1ec3 gi\u1ea3m c\u00e1c y\u00eau c\u1ea7u HTTP l\u00e0 TH\u1ef0C S\u1ef0 LO\u1ea0I B\u1ece C\u00c1C Y\u00caU C\u1ea6U \u0110\u00d3 (thay v\u00ec th\u1ef1c hi\u1ec7n k\u1ebft h\u1ee3p ch\u00fang l\u1ea1i v\u1edbi nhau). C\u00e1ch k\u1ebft h\u1ee3p\/g\u1ed9p m\u00e3 t\u01b0\u01a1ng \u0111\u01b0\u01a1ng v\u1edbi 5 kh\u00e1ch h\u00e0ng t\u1ea1i si\u00eau th\u1ecb k\u1ebft h\u1ee3p \u0111\u01a1n h\u00e0ng c\u1ee7a h\u1ecd th\u00e0nh m\u1ed9t \u0111\u01a1n h\u00e0ng kh\u1ed5ng l\u1ed3 v\u00e0 t\u1ea5t nhi\u00ean v\u1eabn t\u1ed1n nhi\u1ec1u th\u1eddi gian \u0111\u1ec3 gi\u1ea3i quy\u1ebft.<\/li><li><strong>Ho\u1eb7c tri\u1ec3n khai chi\u1ebfn thu\u1eadt &#8220;critical CSS&#8221;<\/strong>. N\u00f3 c\u00f3 th\u1ec3 h\u1eefu d\u1ee5ng n\u1ebfu b\u1ea1n c\u00f3 qu\u00e1 nhi\u1ec1u CSS. Nh\u01b0ng m\u1ed9t l\u1ea7n n\u1eefa th\u00ec \u0111i\u1ec1u t\u1ed1t h\u01a1n l\u00e0 b\u1ea1n lo\u1ea1i b\u1ecf t\u1ea5t c\u1ea3 nh\u1eefng \u0111o\u1ea1n m\u00e3 kh\u00f4ng c\u1ea7n thi\u1ebft.<\/li><\/ol>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Ly_le_cho_viec_su_dung_va_chong_lai_viec_su_dung_critical_CSS\"><\/span>L\u00fd l\u1ebd cho vi\u1ec7c s\u1eed d\u1ee5ng (v\u00e0 ch\u1ed1ng l\u1ea1i vi\u1ec7c s\u1eed d\u1ee5ng) critical CSS?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p><strong>\u1ee6ng h\u1ed9 vi\u1ec7c s\u1eed d\u1ee5ng critical CSS:<\/strong><\/p>\n\n\n<ul><li>Khi b\u1ea1n c\u00f3 r\u1ea5t nhi\u1ec1u CSS <em>v\u00e0<\/em> ph\u1ea7n l\u1edbn trong s\u1ed1 ch\u00fang kh\u00f4ng c\u1ea7n thi\u1ebft trong m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean.<\/li><\/ul>\n\n\n<p><strong>Ch\u1ed1ng l\u1ea1i vi\u1ec7c s\u1eed d\u1ee5ng citical CSS:<\/strong><\/p>\n\n\n<ul><li>Khi b\u1ea1n \u0111\u00e3 b\u1eadt cache ph\u00eda tr\u00ecnh duy\u1ec7t (browser cache). Cache ph\u00eda tr\u00ecnh duy\u1ec7t \u0111\u00e3 l\u01b0u s\u1eb5n c\u00e1c t\u00e0i nguy\u00ean t\u0129nh (nh\u01b0 CSS, JS v\u00e0 \u1ea3nh) v\u00e0o tr\u00ecnh duy\u1ec7t c\u1ee7a ng\u01b0\u1eddi s\u1eed d\u1ee5ng, v\u00ec th\u1ebf n\u00f3 kh\u00f4ng c\u1ea7n t\u1ea3i l\u1ea1i l\u1ea7n n\u1eefa. N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng critical CSS v\u00e0 n\u00f3 \u0111\u01b0\u1ee3c n\u1ed9i tuy\u1ebfn (inline) v\u00e0o t\u00e0i li\u1ec7u HTML, ng\u01b0\u1eddi d\u00f9ng s\u1ebd ph\u1ea3i t\u1ea3i l\u1ea1i c\u00e1c \u0111o\u1ea1n m\u00e3 critical CSS n\u00e0y khi th\u1ef1c hi\u1ec7n b\u1ea5t c\u1ee9 y\u00eau c\u1ea7u t\u1ea3i trang n\u00e0o. V\u00ec th\u1ebf, v\u1ec1 c\u01a1 b\u1ea3n&#8230;critical CSS ch\u1ec9 gi\u00fap b\u1ea1n cho l\u1ea7n gh\u00e9 th\u0103m \u0111\u1ea7u ti\u00ean (nh\u01b0ng s\u1ebd l\u00e0m ch\u1eadm l\u1ea1i \u1edf nh\u1eefng l\u1ea7n gh\u00e9 th\u0103m ti\u1ebfp theo c\u1ee7a c\u00f9ng user \u0111\u00f3).<\/li><li>Khi b\u1ea1n kh\u00f4ng c\u00f3 nhi\u1ec1u CSS.<\/li><li>Khi b\u1ea1n kh\u00f4ng c\u00f3 nhi\u1ec1u n\u1ed9i dung. C\u00f3 \u0111i\u1ec3m gi\u1edbi h\u1ea1n b\u1ea5t l\u1ee3i \u0111\u1ea1t \u0111\u1ebfn khi b\u1ea1n chia nh\u1ecf c\u00e1c y\u00eau c\u1ea7u h\u01a1n n\u1eefa trong khi b\u1ea1n kh\u00f4ng c\u00f3 nhi\u1ec1u n\u1ed9i dung HTML ho\u1eb7c c\u00e1c y\u00eau c\u1ea7u t\u1ea3i. Gi\u1ea3 s\u1eed b\u1ea1n ch\u1ec9 c\u00f3 12 y\u00eau c\u1ea7u v\u00e0 1KB n\u1ed9i dung HTML, s\u1ebd kh\u00f4ng c\u00f3 \u00fd ngh\u0129a khi t\u1ea1o th\u00eam m\u1ed9t y\u00eau c\u1ea7u HTTP v\u00e0 l\u00e0m t\u1ed5n h\u1ea1i th\u1eddi gian t\u1ea3i trang t\u1ed5ng th\u1ec3.<\/li><li>Khi m\u00e0 h\u1ea7u h\u1ebft CSS c\u1ee7a b\u1ea1n v\u1ed1n \u0111\u00e3 \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 render n\u1ed9i dung thu\u1ed9c m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean r\u1ed3i. N\u1ebfu b\u1ea1n c\u00f3 file critical CSS l\u00e0 45KB tr\u00ean t\u1ed5ng s\u1ed1 50KB CSS c\u1ee7a to\u00e0n trang, th\u1ebf th\u00ec t\u1ea1i sao b\u1ea1n ph\u1ea3i chia n\u00f3 th\u00e0nh 2 li\u00ean k\u1ebft?<\/li><li>Khi b\u1ea1n c\u00f3 r\u1ea5t nhi\u1ec1u trang v\u00e0 n\u00f3 kh\u00f4ng \u0111\u00e1ng \u0111\u1ec3 m\u00e1y ch\u1ee7 ph\u1ea3i ti\u1ebfn h\u00e0nh x\u1eed l\u00fd nh\u1eb1m t\u1ea1o ra critical CSS cho t\u1ea5t c\u1ea3 ch\u00fang<\/li><li>Khi b\u1ea1n kh\u00f4ng bi\u1ebft c\u00e1ch t\u1ea1o ra critical CSS th\u00edch h\u1ee3p cho trang c\u1ee7a b\u1ea1n.<\/li><li>Khi n\u00f3 t\u1ea1o ra c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 render.<\/li><\/ul>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cac_cau_hoi_thuong_gap_ve_Critical_CSS\"><\/span>C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p (v\u1ec1 Critical CSS)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p><strong>\u0110i\u1ec1u g\u00ec x\u1ea3y ra n\u1ebfu t\u00f4i c\u00f3 c\u00f4ng c\u1ee5 pagebuilder? Li\u1ec7u t\u00f4i c\u00f3 th\u1ec3 b\u1eadt n\u00f3 (critical CSS) l\u00ean sau \u0111\u00f3?<\/strong><\/p>\n\n\n<ul><li>Vi\u1ec7c c\u00f3 c\u00f4ng c\u1ee5 x\u00e2y d\u1ef1ng trang (pagebuilder) kh\u00f4ng nh\u1ea5t thi\u1ebft bi\u1ebfn b\u1ea1n th\u00e0nh \u1ee9ng c\u1eed vi\u00ean ho\u00e0n h\u1ea3o cho critical CSS. \u0110i\u1ec1u quan tr\u1ecdng nh\u1ea5t l\u00e0 b\u1ea1n t\u1ea3i h\u00e0ng t\u1ea5n CSS <em>v\u00e0<\/em> ph\u1ea7n l\u1edbn trong s\u1ed1 ch\u00fang kh\u00f4ng c\u1ea7n thi\u1ebft \u0111\u1ec3 render trang. Nh\u01b0ng \u1edf \u0111\u00e2y c\u00f3 kh\u00f3 kh\u0103n \u0111\u1ec3 \u00e1p d\u1ee5ng. Ph\u1ea7n l\u1edbn pagebuilder s\u1eed d\u1ee5ng t\u1ea5t c\u1ea3 CSS kh\u1ed5ng l\u1ed3 m\u00e0 h\u1ecd t\u1ea3i. Ho\u1eb7c \u1edf m\u1ed9t g\u00f3c \u0111\u1ed9 kh\u00e1c b\u1ea1n c\u00f3 m\u1ed9t c\u00f4ng c\u1ee5 pagebuilder nh\u01b0ng kh\u00f4ng th\u1ef1c s\u1ef1 s\u1eed d\u1ee5ng t\u1ea5t c\u1ea3 c\u00e1c t\u00f9y ch\u1ecdn \u0111i\u00ean r\u1ed3 v\u00e0 kh\u00f4ng t\u1ea3i nhi\u1ec1u CSS. Trong c\u1ea3 hai k\u1ecbch b\u1ea3n \u0111\u00f3, critical CSS v\u1eabn kh\u00f4ng \u0111\u01b0\u1ee3c khuy\u1ebfn kh\u00edch s\u1eed d\u1ee5ng.<\/li><\/ul>\n\n\n<p><strong>T\u00f4i c\u00f3 th\u1ec3 th\u1eed n\u00f3 kh\u00f4ng? T\u00f4i tuy\u1ec7t v\u1ecdng trong c\u00e1c thi\u1ebft l\u1eadp ng\u1eabu nhi\u00ean v\u00e0 hy v\u1ecdng t\u0103ng t\u1ed1c website c\u1ee7a m\u00ecnh.<\/strong><\/p>\n\n\n<ul><li>V\u00e2ng, b\u1ea1n c\u00f3 th\u1ec3 l\u00e0m b\u1ea5t c\u1ee9 \u0111i\u1ec1u g\u00ec b\u1ea1n mu\u1ed1n. Kh\u00f4ng c\u1ea7n s\u1ef1 cho ph\u00e9p c\u1ee7a t\u00f4i \u0111\u00e2u. B\u1ea1n c\u00f3 th\u1ec3 t\u00ecm \u0111\u1ecdc v\u00e0 th\u1ea5y t\u1ea5t c\u1ea3 nh\u1eefng x\u00e1c nh\u1eadn m\u00e0 b\u1ea1n mu\u1ed1n tr\u00ean h\u00e0ng tr\u0103m website kh\u00e1c.<\/li><\/ul>\n\n\n<p><strong>Nh\u01b0ng Google n\u00f3i r\u1eb1ng t\u00f4i c\u00f3 &#8220;CSS ch\u1eb7n hi\u1ec3n th\u1ecb&#8221;&#8230;<\/strong><\/p>\n\n\n<ul><li>CSS m\u1ed9t c\u00e1ch t\u1ef1 nhi\u00ean \u0111\u01b0\u1ee3c <em>gi\u1ea3 \u0111\u1ecbnh<\/em> l\u00e0 \u0111\u1ec3 ch\u1eb7n hi\u1ec3n th\u1ecb (\u0111\u1ec3 tr\u00e1nh c\u00e1c v\u1ea5n \u0111\u1ec1 nh\u01b0 FOUT\/FOUC m\u00e0 t\u00f4i \u0111\u00e3 \u0111\u1ec1 c\u1eadp \u1edf ph\u1ea7n tr\u00ean). T\u00f4i ngh\u0129 \u0111i\u1ec1u Google mu\u1ed1n n\u00f3i l\u00e0 CSS c\u1ee7a b\u1ea1n m\u1ea5t qu\u00e1 nhi\u1ec1u th\u1eddi gian \u0111\u1ec3 t\u1ea3i.<\/li><li>B\u1ea1n kh\u00f4ng th\u1ec3 ng\u0103n CSS c\u1ee7a b\u00ean th\u1ee9 ba ch\u1eb7n hi\u1ec3n th\u1ecb. Ch\u00fang kh\u00f4ng t\u1ea3i t\u1eeb m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n. B\u1ea1n kh\u00f4ng th\u1ec3 l\u00e0m \u0111\u01b0\u1ee3c g\u00ec v\u1edbi n\u00f3 ngo\u1ea1i tr\u1eeb vi\u1ec7c tr\u00e1nh ho\u1eb7c tr\u00ec ho\u00e3n (defer) c\u00e1c y\u00eau c\u1ea7u nh\u01b0 v\u1eady.<\/li><\/ul>\n\n\n<p><em>(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: Should you use Critical CSS?, t\u00e1c gi\u1ea3: Johnny Nguyen, website: WPJohnny)<\/em><\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Loi_ban_cua_nguoi_dich\"><\/span>L\u1eddi b\u00e0n c\u1ee7a ng\u01b0\u1eddi d\u1ecbch<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>Johnny Nguyen gi\u00fap ch\u00fang ta nh\u1eadn bi\u1ebft c\u00e1c nh\u01b0\u1ee3c \u0111i\u1ec3m quan tr\u1ecdng c\u1ee7a critical CSS, nh\u01b0ng t\u00f4i cho r\u1eb1ng quan \u0111i\u1ec3m c\u1ee7a anh \u1ea5y c\u00f3 ph\u1ea7n c\u1ef1c \u0111oan, v\u00ec th\u1ef1c t\u1ebf ph\u1ea7n l\u1edbn ng\u01b0\u1eddi qu\u1ea3n tr\u1ecb web ph\u1ea3i \u0111i mua giao di\u1ec7n v\u00e0 s\u1eed d\u1ee5ng h\u00e0ng t\u00e1 plugin, ngay c\u1ea3 khi c\u1ea9n th\u1eadn ch\u1ecdn l\u1ef1a, CSS c\u1ee7a nh\u1eefng website nh\u01b0 v\u1eady v\u1eabn l\u00ean \u0111\u1ebfn h\u00e0ng 100 KB, l\u00fac n\u00e0y r\u00f5 r\u00e0ng critical CSS \u0111\u00f3ng vai tr\u00f2 gi\u1ea3i c\u1ee9u quan tr\u1ecdng. \u0110i\u1ec1u Johnny Nguyen n\u00f3i ch\u1ec9 \u0111\u00fang khi m\u00e0 t\u1ea5t c\u1ea3 nh\u1eefng ng\u01b0\u1eddi s\u1edf h\u1eefu website c\u0169ng \u0111\u1ed3ng th\u1eddi l\u00e0 ng\u01b0\u1eddi (ho\u1eb7c \u0111\u1ee7 ti\u1ec1n thu\u00ea) l\u1eadp tr\u00ecnh vi\u00ean chuy\u00ean nghi\u1ec7p c\u00f3 hi\u1ec3u bi\u1ebft v\u1ec1 t\u1ed1i \u01b0u h\u00f3a hi\u1ec7u su\u1ea5t.<\/p>\n\n\n<p>T\u00f4i c\u00f3 m\u1ed9t s\u1ed1 ph\u1ea3n bi\u1ec7n:<\/p>\n\n\n<ul><li>Tr\u1eeb c\u00e1c website qu\u00e1 ph\u1ee9c t\u1ea1p t\u00f4i ch\u01b0a th\u1eed bao gi\u1edd, c\u00f2n v\u1edbi c\u00e1c blog nh\u01b0 trang n\u00e0y, t\u00f4i th\u1ea5y c\u00e1c c\u00f4ng c\u1ee5 tr\u00edch xu\u1ea5t t\u1ef1 \u0111\u1ed9ng critical CSS v\u1eabn cho ra c\u00e1c m\u00e3 \u0111\u1ee7 ch\u00ednh x\u00e1c \u0111\u1ec3 website ho\u1ea1t \u0111\u1ed9ng b\u00ecnh th\u01b0\u1eddng.<\/li><li>V\u1edbi v\u1ea5n \u0111\u1ec1 cache, h\u1ea7u h\u1ebft ng\u01b0\u1eddi ta ch\u1ec9 tr\u00edch xu\u1ea5t m\u1ed9t l\u01b0\u1ee3ng nh\u1ecf critical CSS th\u00f4i (n\u00f3 ch\u1ec9 d\u00e0nh cho m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean) \u0111\u1ec3 inline, c\u00f2n ph\u1ea7n l\u1edbn dung l\u01b0\u1ee3ng c\u00f2n l\u1ea1i \u0111\u01b0\u1ee3c cho v\u00e0o file ngo\u00e0i, v\u00e0 c\u00e1i n\u00e0y v\u1eabn \u0111\u01b0\u1ee3c cache b\u00ecnh th\u01b0\u1eddng.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>T\u00f3m t\u1eaft: B\u00e0i vi\u1ebft n\u00e0y s\u1ebd cho b\u1ea1n bi\u1ebft critical CSS l\u00e0 g\u00ec? C\u00e1ch n\u00f3 ho\u1ea1t \u0111\u1ed9ng v\u00e0 khi n\u00e0o b\u1ea1n n\u00ean s\u1eed d\u1ee5ng n\u00f3? V\u00e0 th\u1eadm ch\u00ed&#8230;khi n\u00e0o b\u1ea1n kh\u00f4ng n\u00ean s\u1eed d\u1ee5ng critical CSS? \u0110\u00e2y l\u00e0 m\u1ed9t h\u01b0\u1edbng d\u1eabn kh\u00e1c v\u1ec1 hi\u1ec7u su\u1ea5t c\u1ee7a WordPress kh\u00f4ng-h\u1ec1-ch\u00e9m-gi\u00f3 (cut-the-crap) t\u00f4i mu\u1ed1n d\u00e0nh cho b\u1ea1n&#8230; \u0110\u1ec3 &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>B\u1ea1n c\u00f3 n\u00ean s\u1eed d\u1ee5ng critical CSS &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"description\" content=\"M\u1ed9t c\u00e1i nh\u00ecn kh\u00e1c v\u1ec1 vi\u1ec7c s\u1eed d\u1ee5ng critical CSS. T\u00e1c gi\u1ea3 ph\u1ea3n \u0111\u1ed1i chuy\u1ec7n coi critical CSS l\u00e0 c\u00e1ch t\u0103ng t\u1ed1c chu\u1ea9n ch\u1ec9nh m\u00e0 m\u1ecdi trang c\u1ea7n tu\u00e2n theo.\" \/>\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\/co-nen-dung-critical-css\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"B\u1ea1n c\u00f3 n\u00ean s\u1eed d\u1ee5ng critical CSS &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"M\u1ed9t c\u00e1i nh\u00ecn kh\u00e1c v\u1ec1 vi\u1ec7c s\u1eed d\u1ee5ng critical CSS. T\u00e1c gi\u1ea3 ph\u1ea3n \u0111\u1ed1i chuy\u1ec7n coi critical CSS l\u00e0 c\u00e1ch t\u0103ng t\u1ed1c chu\u1ea9n ch\u1ec9nh m\u00e0 m\u1ecdi trang c\u1ea7n tu\u00e2n theo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/co-nen-dung-critical-css\/\" \/>\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-08T10:34:20+00:00\" \/>\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=\"11 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"B\u1ea1n c\u00f3 n\u00ean s\u1eed d\u1ee5ng critical CSS &#8226; Ki\u1ebfn c\u00e0ng","description":"M\u1ed9t c\u00e1i nh\u00ecn kh\u00e1c v\u1ec1 vi\u1ec7c s\u1eed d\u1ee5ng critical CSS. T\u00e1c gi\u1ea3 ph\u1ea3n \u0111\u1ed1i chuy\u1ec7n coi critical CSS l\u00e0 c\u00e1ch t\u0103ng t\u1ed1c chu\u1ea9n ch\u1ec9nh m\u00e0 m\u1ecdi trang c\u1ea7n tu\u00e2n theo.","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\/co-nen-dung-critical-css\/","og_locale":"vi_VN","og_type":"article","og_title":"B\u1ea1n c\u00f3 n\u00ean s\u1eed d\u1ee5ng critical CSS &#8226; Ki\u1ebfn c\u00e0ng","og_description":"M\u1ed9t c\u00e1i nh\u00ecn kh\u00e1c v\u1ec1 vi\u1ec7c s\u1eed d\u1ee5ng critical CSS. T\u00e1c gi\u1ea3 ph\u1ea3n \u0111\u1ed1i chuy\u1ec7n coi critical CSS l\u00e0 c\u00e1ch t\u0103ng t\u1ed1c chu\u1ea9n ch\u1ec9nh m\u00e0 m\u1ecdi trang c\u1ea7n tu\u00e2n theo.","og_url":"https:\/\/kiencang.net\/co-nen-dung-critical-css\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-08T10:34:20+00:00","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":"11 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/co-nen-dung-critical-css\/","url":"https:\/\/kiencang.net\/co-nen-dung-critical-css\/","name":"B\u1ea1n c\u00f3 n\u00ean s\u1eed d\u1ee5ng critical CSS &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-08T10:34:20+00:00","dateModified":"2019-12-08T10:34:20+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"description":"M\u1ed9t c\u00e1i nh\u00ecn kh\u00e1c v\u1ec1 vi\u1ec7c s\u1eed d\u1ee5ng critical CSS. T\u00e1c gi\u1ea3 ph\u1ea3n \u0111\u1ed1i chuy\u1ec7n coi critical CSS l\u00e0 c\u00e1ch t\u0103ng t\u1ed1c chu\u1ea9n ch\u1ec9nh m\u00e0 m\u1ecdi trang c\u1ea7n tu\u00e2n theo.","breadcrumb":{"@id":"https:\/\/kiencang.net\/co-nen-dung-critical-css\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/co-nen-dung-critical-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/co-nen-dung-critical-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"B\u1ea1n c\u00f3 n\u00ean s\u1eed d\u1ee5ng critical CSS"}]},{"@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\/13828"}],"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=13828"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/13828\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=13828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=13828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=13828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}