{"id":13854,"date":"2019-12-09T02:37:30","date_gmt":"2019-12-09T02:37:30","guid":{"rendered":"https:\/\/kiencang.net\/?p=13854"},"modified":"2019-12-09T02:37:30","modified_gmt":"2019-12-09T02:37:30","slug":"trich-xuat-critical-css","status":"publish","type":"post","link":"https:\/\/kiencang.net\/trich-xuat-critical-css\/","title":{"rendered":"Tr\u00edch xu\u1ea5t CSS quan tr\u1ecdng (critical CSS)"},"content":{"rendered":"\n<p>T\u00f3m t\u1eaft: h\u1ecdc c\u00e1ch c\u1ea3i thi\u1ec7n th\u1eddi gian hi\u1ec3n th\u1ecb website nhanh h\u01a1n v\u1edbi c\u00e1c k\u1ef9 thu\u1eadt critical CSS.<\/p>\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/\" target=\"_blank\">Tr\u00ecnh duy\u1ec7t ph\u1ea3i t\u1ea3i v\u00e0 ph\u00e2n t\u00edch c\u00fa ph\u00e1p (parse) c\u00e1c file CSS tr\u01b0\u1edbc khi n\u00f3 c\u00f3 th\u1ec3 hi\u1ec3n th\u1ecb trang<\/a>, \u0111i\u1ec1u n\u00e0y l\u00e0m cho CSS l\u00e0 ngu\u1ed3n ch\u1eb7n hi\u1ec3n th\u1ecb (render-blocking). N\u1ebfu c\u00e1c file CSS c\u00f3 k\u00edch th\u01b0\u1edbc l\u1edbn, ho\u1eb7c \u0111i\u1ec1u ki\u1ec7n m\u1ea1ng ch\u1eadm ch\u1ea1p (\u0111\u1ee9t c\u00e1p, k\u1ebft n\u1ed1i tr\u00ean di \u0111\u1ed9ng y\u1ebfu &amp; kh\u00f4ng \u1ed5n \u0111\u1ecbnh), c\u00e1c y\u00eau c\u1ea7u cho file CSS c\u00f3 th\u1ec3 l\u00e0m gia t\u0103ng th\u1eddi gian \u0111\u00e1ng k\u1ec3 vi\u1ec7c hi\u1ec3n th\u1ecb web.<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\">A. Thu\u1eadt ng\u1eef ch\u00ednh<\/h2>\n\n\n<p>Critical CSS hay CSS quan tr\u1ecdng l\u00e0 k\u1ef9 thu\u1eadt tr\u00edch xu\u1ea5t CSS cho <a href=\"https:\/\/kiencang.net\/man-hinh-dau-tien\/\" target=\"_blank\" rel=\"noreferrer noopener\">n\u1ed9i dung thu\u1ed9c m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean<\/a> (above the fold) \u0111\u1ec3 vi\u1ec7c hi\u1ec3n th\u1ecb n\u1ed9i dung cho ng\u01b0\u1eddi d\u00f9ng l\u00e0 nhanh nh\u1ea5t c\u00f3 th\u1ec3.<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/above-the-fold.png\" alt=\"above the fold\" class=\"wp-image-13855\"\/><\/figure><\/div>\n\n\n<ul><li><em>Above the fold<\/em> l\u00e0 t\u1ea5t c\u1ea3 n\u1ed9i dung m\u00e0 ng\u01b0\u1eddi d\u00f9ng nh\u00ecn th\u1ea5y khi trang t\u1ea3i, tr\u01b0\u1edbc khi c\u00f3 b\u1ea5t k\u1ef3 h\u00e0nh vi cu\u1ed9n chu\u1ed9t n\u00e0o. Kh\u00f4ng c\u00f3 chi\u1ec1u cao x\u00e1c \u0111\u1ecbnh chung cho n\u1ed9i dung \u0111\u01b0\u1ee3c xem l\u00e0 thu\u1ed9c m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean, v\u00ec c\u00f3 v\u00f4 s\u1ed1 thi\u1ebft b\u1ecb v\u1edbi c\u00e1c k\u00edch c\u1ee1 m\u00e0n h\u00ecnh kh\u00e1c nhau (\u0111i\u1ec7n tho\u1ea1i, laptop, m\u00e1y b\u00e0n, m\u00e1y t\u00ednh b\u1ea3ng).<\/li><\/ul>\n\n\n<p><a href=\"https:\/\/kiencang.net\/noi-tuyen-cac-css-nho\/\" target=\"_blank\" rel=\"noreferrer noopener\">N\u1ed9i tuy\u1ebfn style (inline CSS)<\/a> v\u1eeba tr\u00edch xu\u1ea5t v\u00e0o trong th\u1ebb <strong>&lt;head&gt;<\/strong> c\u1ee7a t\u00e0i li\u1ec7u HTML lo\u1ea1i b\u1ecf nhu c\u1ea7u t\u1ea1o th\u00eam y\u00eau c\u1ea7u b\u1ed5 sung \u0111\u1ec3 l\u1ea5y c\u00e1c style n\u00e0y. CSS c\u00f2n l\u1ea1i c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c t\u1ea3i kh\u00f4ng \u0111\u1ed3ng b\u1ed9 (asynchronously).<\/p>\n\n\n<div class=\"wp-block-image wp-image-13856 size-full\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/inline-critical-css.png\" alt=\"n\u1ed9i tuy\u1ebfn critical CSS\" class=\"wp-image-13856\"\/><figcaption>N\u1ed9i tuy\u1ebfn critical CSS<\/figcaption><\/figure><\/div>\n\n\n<p>C\u1ea3i thi\u1ec7n th\u1eddi gian hi\u1ec3n th\u1ecb (render) c\u00f3 th\u1ec3 <strong>t\u1ea1o ra s\u1ef1 kh\u00e1c bi\u1ec7t l\u1edbn<\/strong> trong hi\u1ec7u su\u1ea5t\/t\u1ed1c \u0111\u1ed9 nh\u1eadn th\u1ee9c (perceived performance), \u0111\u1eb7c bi\u1ec7t d\u01b0\u1edbi \u0111i\u1ec1u ki\u1ec7n \u0111\u01b0\u1eddng truy\u1ec1n internet ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p. Tr\u00ean k\u1ebft n\u1ed1i di \u0111\u1ed9ng c\u00f3 \u0111\u1ed9 tr\u1ec5 cao (high latency) \u0111\u00e2y l\u00e0 v\u1ea5n \u0111\u1ec1 c\u1ea3n tr\u1edf l\u1edbn b\u1ea5t k\u1ec3 b\u0103ng th\u00f4ng l\u00e0 bao nhi\u00eau \u0111i n\u1eefa.<\/p>\n\n\n<div class=\"wp-block-image wp-image-13857 size-full\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/filmstrip-comparison.png\" alt=\"So s\u00e1nh vi\u1ec7c n\u1ed9i tuy\u1ebfn critical CSS v\u00e0 c\u00f3 CSS ch\u1eb7n hi\u1ec3n th\u1ecb\" class=\"wp-image-13857\"\/><figcaption>So s\u00e1nh vi\u1ec7c t\u1ea3i trang, v\u1edbi vi\u1ec7c c\u00f3 CSS ch\u1eb7n hi\u1ec3n th\u1ecb l\u1edbn (ph\u00eda tr\u00ean) v\u00e0 c\u00f9ng trang \u0111\u00f3 v\u1edbi critical CSS \u0111\u01b0\u1ee3c n\u1ed9i tuy\u1ebfn (ph\u00eda d\u01b0\u1edbi) tr\u00ean m\u1ea1ng k\u1ebft n\u1ed1i 3G<\/figcaption><\/figure><\/div>\n\n\n<p>N\u1ebfu b\u1ea1n c\u00f3 k\u1ebft qu\u1ea3 FCP (<a href=\"https:\/\/kiencang.net\/first-contentful-paint-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">First Contentful Paint<\/a> \/ Th\u1eddi gian \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng th\u1ea5y n\u1ed9i dung \u0111\u1ea7u ti\u00ean tr\u00ean trang) t\u1ec7 v\u00e0 th\u1ea5y th\u00f4ng b\u00e1o &#8220;<a href=\"https:\/\/kiencang.net\/loai-bo-tai-nguyen-chan-hien-thi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Lo\u1ea1i b\u1ecf c\u00e1c t\u00e0i nguy\u00ean ch\u1eb7n hi\u1ec3n th\u1ecb<\/a> \/ Eliminate render-blocking resources&#8221; trong Lighthouse th\u00ec \u0111\u00e2y s\u1ebd l\u00e0 c\u01a1 h\u1ed9i t\u1ed1t \u0111\u1ec3 b\u1ea1n tri\u1ec3n khai critical CSS.<\/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-chan-hien-thi.png\" alt=\"lo\u1ea1i b\u1ecf n\u1ed9i dung ch\u1eb7n hi\u1ec3n th\u1ecb\" class=\"wp-image-13858\"\/><\/figure><\/div>\n\n\n<p><strong>L\u01b0u \u00fd<\/strong>: C\u1ea7n nh\u1edb l\u00e0 n\u1ebfu b\u1ea1n n\u1ed9i tuy\u1ebfn m\u1ed9t l\u01b0\u1ee3ng l\u1edbn CSS, n\u00f3 s\u1ebd tr\u00ec ho\u00e3n vi\u1ec7c truy\u1ec1n t\u1ea3i (transmission) ph\u1ea7n c\u00f2n l\u1ea1i c\u1ee7a t\u00e0i li\u1ec7u HTML. <em>N\u1ebfu m\u1ecdi th\u1ee9 \u0111\u1ec1u \u0111\u01b0\u1ee3c \u01b0u ti\u00ean th\u00ec s\u1ebd kh\u00f4ng c\u00f3 g\u00ec \u0111\u01b0\u1ee3c \u01b0u ti\u00ean c\u1ea3<\/em>! N\u1ed9i tuy\u1ebfn c\u0169ng c\u00f3 \u0111i\u1ec3m y\u1ebfu l\u00e0 n\u00f3 ng\u0103n <a href=\"https:\/\/kiencang.net\/bo-nho-dem-trinh-duyet\/\" target=\"_blank\" rel=\"noreferrer noopener\">tr\u00ecnh duy\u1ec7t cache<\/a> CSS \u0111\u1ec3 s\u1eed d\u1ee5ng l\u1ea1i cho nh\u1eefng l\u1ea7n t\u1ea3i trang ti\u1ebfp theo (reuse on subsequent page loads), v\u00ec th\u1ebf t\u1ed1t nh\u1ea5t l\u00e0 b\u1ea1n h\u00e3y s\u1eed d\u1ee5ng n\u00f3 m\u1ed9t c\u00e1ch c\u1ea9n th\u1eadn.<\/p>\n\n\n<p>\u0110\u1ec3 t\u1ed1i thi\u1ec3u h\u00f3a s\u1ed1 l\u01b0\u1ee3ng roundtrip cho l\u1ea7n render \u0111\u1ea7u ti\u00ean, b\u1ea1n c\u1ea7n h\u01b0\u1edbng \u0111\u1ebfn vi\u1ec7c <em>gi\u1eef n\u1ed9i dung thu\u1ed9c m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean c\u00f3 k\u00edch c\u1ee1 d\u01b0\u1edbi 14 KB (\u0111\u00e3 n\u00e9n, v\u00ed d\u1ee5 <a href=\"https:\/\/kiencang.net\/bat-nen-gzip\/\" target=\"_blank\" rel=\"noreferrer noopener\">th\u00f4ng qua gzip<\/a>)<\/em>.<\/p>\n\n\n<p>C\u00e1c k\u1ebft n\u1ed1i TCP m\u1edbi kh\u00f4ng th\u1ec3 ngay l\u1eadp t\u1ee9c s\u1eed d\u1ee5ng to\u00e0n b\u1ed9 b\u0103ng th\u00f4ng <em>kh\u1ea3 d\u1ee5ng<\/em> gi\u1eefa m\u00e1y kh\u00e1ch v\u00e0 m\u00e1y ch\u1ee7, t\u1ea5t c\u1ea3 \u0111\u1ec1u tr\u1ea3i qua qu\u00e1 tr\u00ecnh kh\u1edfi \u0111\u1ed9ng ch\u1eadm \u0111\u1ec3 tr\u00e1nh qu\u00e1 t\u1ea3i k\u1ebft n\u1ed1i- t\u1ee9c l\u00e0 tr\u00e1nh vi\u1ec7c c\u00f3 nhi\u1ec1u d\u1eef li\u1ec7u h\u01a1n so v\u1edbi kh\u1ed1i l\u01b0\u1ee3ng n\u00f3 c\u00f3 th\u1ec3 mang. Trong qu\u00e1 tr\u00ecnh n\u00e0y, m\u00e1y ch\u1ee7 b\u1eaft \u0111\u1ea7u chuy\u1ec3n m\u1ed9t l\u01b0\u1ee3ng nh\u1ecf d\u1eef li\u1ec7u v\u00e0 n\u1ebfu n\u00f3 \u0111\u1ebfn \u0111\u01b0\u1ee3c m\u00e1y kh\u00e1ch trong \u0111i\u1ec1u ki\u1ec7n ho\u00e0n h\u1ea3o, n\u00f3 nh\u00e2n \u0111\u00f4i s\u1ed1 l\u01b0\u1ee3ng trong roundtrip k\u1ebf ti\u1ebfp. V\u1edbi h\u1ea7u h\u1ebft m\u00e1y ch\u1ee7, 10 packets (g\u00f3i) ho\u1eb7c x\u1ea5p x\u1ec9 14 KB l\u00e0 gi\u00e1 tr\u1ecb l\u1edbn nh\u1ea5t c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c truy\u1ec1n trong roundtrip \u0111\u1ea7u ti\u00ean.<\/p>\n\n\n<p>T\u00e1c \u0111\u1ed9ng hi\u1ec7u su\u1ea5t m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ea1t \u0111\u01b0\u1ee3c v\u1edbi k\u1ef9 thu\u1eadt n\u00e0y ph\u1ee5 thu\u1ed9c v\u00e0o ki\u1ec3u website c\u1ee7a b\u1ea1n. N\u00f3i chung, website c\u00e0ng c\u00f3 nhi\u1ec1u CSS, th\u00ec vi\u1ec7c n\u1ed9i tuy\u1ebfn CSS c\u00e0ng c\u00f3 kh\u1ea3 n\u0103ng t\u00e1c \u0111\u1ed9ng t\u00edch c\u1ef1c nhi\u1ec1u h\u01a1n.<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\">T\u1ed5ng quan v\u1ec1 c\u00e1c c\u00f4ng c\u1ee5<\/h2>\n\n\n<p>C\u00f3 m\u1ed9t s\u1ed1 c\u00f4ng c\u1ee5 tuy\u1ec7t v\u1eddi c\u00f3 th\u1ec3 t\u1ef1 \u0111\u1ed9ng x\u00e1c \u0111\u1ecbnh critical CSS cho trang. \u0110\u00e2y l\u00e0 tin t\u1ed1t b\u1edfi v\u00ec l\u00e0m \u0111i\u1ec1u n\u00e0y theo c\u00e1ch th\u1ee7 c\u00f4ng l\u00e0 qu\u00e1 tr\u00ecnh t\u1ebb nh\u1ea1t, nh\u00e0m ch\u00e1n (v\u00e0 d\u1ec5 c\u00f3 sai s\u00f3t). N\u00f3 y\u00eau c\u1ea7u ph\u00e2n t\u00edch to\u00e0n b\u1ed9 DOM \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh style \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho m\u1ed7i th\u00e0nh ph\u1ea7n trong viewpot (khung nh\u00ecn tr\u00ecnh duy\u1ec7t).<\/p>\n\n\n<h3 class=\"wp-block-heading\">Critical<\/h3>\n\n\n<p>C\u00f4ng c\u1ee5 <a href=\"https:\/\/github.com\/addyosmani\/critical\" target=\"_blank\" rel=\"noreferrer noopener\">Critical<\/a> tr\u00edch xu\u1ea5t, t\u1ed1i thi\u1ec3u h\u00f3a (minifies) v\u00e0 n\u1ed9i tuy\u1ebfn CSS thu\u1ed9c m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean, n\u00f3 c\u00f3 s\u1eb5n d\u01b0\u1edbi d\u1ea1ng <a href=\"https:\/\/www.npmjs.com\/package\/critical\" target=\"_blank\" rel=\"noreferrer noopener\">module npm<\/a>. N\u00f3 c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng v\u1edbi Gulp (tr\u1ef1c ti\u1ebfp) ho\u1eb7c v\u1edbi Grunt (nh\u01b0 m\u1ed9t <a href=\"https:\/\/github.com\/bezoerb\/grunt-critical\" target=\"_blank\" rel=\"noreferrer noopener\">plugin<\/a>) v\u00e0 c\u0169ng c\u00f3 m\u1ed9t <a href=\"https:\/\/github.com\/anthonygore\/html-critical-webpack-plugin\" target=\"_blank\" rel=\"noreferrer noopener\">plugin webpack<\/a>.<\/p>\n\n\n<p>\u0110\u00e2y l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 \u0111\u01a1n gi\u1ea3n c\u00f3 nhi\u1ec1u \u0111\u1ea7u t\u01b0 v\u00e0o quy tr\u00ecnh. B\u1ea1n th\u1eadm ch\u00ed kh\u00f4ng c\u1ea7n ch\u1ec9 \u0111\u1ecbnh stylesheets, c\u00f4ng c\u1ee5 Critical t\u1ef1 \u0111\u1ed9ng x\u00e1c \u0111\u1ecbnh ch\u00fang. N\u00f3 c\u0169ng h\u1ed7 tr\u1ee3 tr\u00edch xu\u1ea5t critical CSS cho nhi\u1ec1u m\u00e0n h\u00ecnh c\u00f3 \u0111\u1ed9 ph\u00e2n gi\u1ea3i kh\u00e1c nhau.<\/p>\n\n\n<h3 class=\"wp-block-heading\">criticalCSS<\/h3>\n\n\n<p><a href=\"https:\/\/github.com\/filamentgroup\/criticalCSS\" target=\"_blank\" rel=\"noreferrer noopener\">CriticalCSS<\/a> l\u00e0 m\u1ed9t <a href=\"https:\/\/www.npmjs.com\/package\/criticalcss\" target=\"_blank\" rel=\"noreferrer noopener\">module npm<\/a> kh\u00e1c tr\u00edch xu\u1ea5t CSS trong m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean. N\u00f3 c\u0169ng c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c cung c\u1ea5p d\u01b0\u1edbi d\u1ea1ng CLI.<\/p>\n\n\n<p>N\u00f3 kh\u00f4ng c\u00f3 l\u1ef1a ch\u1ecdn n\u1ed9i tuy\u1ebfn v\u00e0 minify critical CSS, nh\u01b0ng n\u00f3 cho ph\u00e9p b\u1ea1n c\u00f3 c\u00e1c quy t\u1eafc b\u1eaft bu\u1ed9c kh\u00f4ng th\u1ef1c s\u1ef1 thu\u1ed9c v\u1ec1 citical CSS v\u00e0 cho ph\u00e9p b\u1ea1n quy\u1ec1n ki\u1ec3m so\u00e1t chi ti\u1ebft h\u01a1n bao g\u1ed3m c\u1ea3 c\u00e1c khai b\u00e1o <a href=\"https:\/\/kiencang.net\/nhung-font-web-font-face\/\" target=\"_blank\" rel=\"noreferrer noopener\">@font-face<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Penthouse<\/h3>\n\n\n<p><a href=\"https:\/\/github.com\/pocketjoso\/penthouse\" target=\"_blank\" rel=\"noreferrer noopener\">Penhouse<\/a> l\u00e0 l\u1ef1a ch\u1ecdn t\u1ed1t n\u1ebfu website ho\u1eb7c \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n c\u00f3 s\u1ed1 l\u01b0\u1ee3ng l\u1edbn style ho\u1eb7c style l\u00e0 d\u1ea1ng \u0111\u1ed9ng \u0111\u01b0\u1ee3c inject (b\u01a1m v\u00e0o) DOM (ph\u1ed5 bi\u1ebfn trong c\u00e1c \u1ee9ng d\u1ee5ng Angular). N\u00f3 s\u1eed d\u1ee5ng <a href=\"https:\/\/github.com\/GoogleChrome\/puppeteer\" target=\"_blank\" rel=\"noreferrer noopener\">Puppeteer<\/a>&#8230;v\u00e0 th\u1eadm ch\u00ed c\u00f3 c\u1ea3 <a href=\"https:\/\/jonassebastianohlsson.com\/criticalpathcssgenerator\/\" target=\"_blank\" rel=\"noreferrer noopener\">phi\u00ean b\u1ea3n l\u01b0u tr\u1eef tr\u1ef1c tuy\u1ebfn<\/a>.<\/p>\n\n\n<p>Penthouse kh\u00f4ng x\u00e1c \u0111\u1ecbnh stylesheets m\u1ed9t c\u00e1ch t\u1ef1 \u0111\u1ed9ng, b\u1ea1n ph\u1ea3i c\u00f3 file CSS v\u00e0 HTML c\u1ee5 th\u1ec3 m\u00e0 b\u1ea1n mu\u1ed1n n\u00f3 tr\u00edch xu\u1ea5t critical CSS. Ng\u01b0\u1ee3c l\u1ea1i, n\u00f3 r\u1ea5t t\u1ed1t trong vi\u1ec7c ch\u1ea1y nhi\u1ec1u c\u00f4ng vi\u1ec7c song song.<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\">V\u1edbi nh\u1eefng ai d\u00f9ng WordPress<\/h2>\n\n\n<p>C\u00e1c plugin cache ch\u1ea5t l\u01b0\u1ee3ng cao nh\u01b0 <a href=\"https:\/\/kiencang.net\/hd-plugin-litespeed-cache-p1\/\" target=\"_blank\" rel=\"noreferrer noopener\">LiteSpeed cache<\/a>, <a href=\"https:\/\/kiencang.net\/cach-dung-plugin-swift-performance\/\" target=\"_blank\" rel=\"noreferrer noopener\">Swift Performance<\/a>, WP-Rocket, hay <a href=\"https:\/\/kiencang.net\/huong-dan-plugin-flying-press\/\" target=\"_blank\" rel=\"noreferrer noopener\">FlyingPress<\/a> \u0111\u1ec1u c\u00f3 t\u00ednh n\u0103ng tr\u00edch xu\u1ea5t critical CSS. T\u1ed1c \u0111\u1ed9 tr\u00edch xu\u1ea5t v\u00e0 ch\u1ea5t l\u01b0\u1ee3ng critical CSS c\u1ee7a ch\u00fang kh\u00e1c nhau nh\u01b0ng nh\u00ecn chung l\u00e0 t\u1ed1t, d\u00f9 tr\u00ean m\u1ed9t s\u1ed1 website ph\u1ee9c t\u1ea1p c\u00f3 th\u1ec3 g\u00e2y l\u1ed7i. B\u1ea1n c\u1ea7n ki\u1ec3m tra k\u1ef9 l\u1ea1i giao di\u1ec7n website khi tri\u1ec3n khai critical CSS.<\/p>\n\n\n<p><em>(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft Extract critical CSS, t\u00e1c gi\u1ea3: Milica Mihajlija, website: web[.]dev \/ ph\u1ea7n n\u00f3i v\u1ec1 WordPress l\u00e0 b\u1ed5 sung th\u00eam)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>T\u00f3m t\u1eaft: h\u1ecdc c\u00e1ch c\u1ea3i thi\u1ec7n th\u1eddi gian hi\u1ec3n th\u1ecb website nhanh h\u01a1n v\u1edbi c\u00e1c k\u1ef9 thu\u1eadt critical CSS. Tr\u00ecnh duy\u1ec7t ph\u1ea3i t\u1ea3i v\u00e0 ph\u00e2n t\u00edch c\u00fa ph\u00e1p (parse) c\u00e1c file CSS tr\u01b0\u1edbc khi n\u00f3 c\u00f3 th\u1ec3 hi\u1ec3n th\u1ecb trang, \u0111i\u1ec1u n\u00e0y l\u00e0m cho CSS l\u00e0 ngu\u1ed3n ch\u1eb7n hi\u1ec3n th\u1ecb (render-blocking). N\u1ebfu c\u00e1c file CSS &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\u00edch xu\u1ea5t CSS quan tr\u1ecdng (critical CSS) &#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\/trich-xuat-critical-css\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tr\u00edch xu\u1ea5t CSS quan tr\u1ecdng (critical CSS) &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"T\u00f3m t\u1eaft: h\u1ecdc c\u00e1ch c\u1ea3i thi\u1ec7n th\u1eddi gian hi\u1ec3n th\u1ecb website nhanh h\u01a1n v\u1edbi c\u00e1c k\u1ef9 thu\u1eadt critical CSS. Tr\u00ecnh duy\u1ec7t ph\u1ea3i t\u1ea3i v\u00e0 ph\u00e2n t\u00edch c\u00fa ph\u00e1p (parse) c\u00e1c file CSS tr\u01b0\u1edbc khi n\u00f3 c\u00f3 th\u1ec3 hi\u1ec3n th\u1ecb trang, \u0111i\u1ec1u n\u00e0y l\u00e0m cho CSS l\u00e0 ngu\u1ed3n ch\u1eb7n hi\u1ec3n th\u1ecb (render-blocking). N\u1ebfu c\u00e1c file CSS &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/trich-xuat-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-09T02:37:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/above-the-fold.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=\"6 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tr\u00edch xu\u1ea5t CSS quan tr\u1ecdng (critical CSS) &#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\/trich-xuat-critical-css\/","og_locale":"vi_VN","og_type":"article","og_title":"Tr\u00edch xu\u1ea5t CSS quan tr\u1ecdng (critical CSS) &#8226; Ki\u1ebfn c\u00e0ng","og_description":"T\u00f3m t\u1eaft: h\u1ecdc c\u00e1ch c\u1ea3i thi\u1ec7n th\u1eddi gian hi\u1ec3n th\u1ecb website nhanh h\u01a1n v\u1edbi c\u00e1c k\u1ef9 thu\u1eadt critical CSS. Tr\u00ecnh duy\u1ec7t ph\u1ea3i t\u1ea3i v\u00e0 ph\u00e2n t\u00edch c\u00fa ph\u00e1p (parse) c\u00e1c file CSS tr\u01b0\u1edbc khi n\u00f3 c\u00f3 th\u1ec3 hi\u1ec3n th\u1ecb trang, \u0111i\u1ec1u n\u00e0y l\u00e0m cho CSS l\u00e0 ngu\u1ed3n ch\u1eb7n hi\u1ec3n th\u1ecb (render-blocking). N\u1ebfu c\u00e1c file CSS &hellip;","og_url":"https:\/\/kiencang.net\/trich-xuat-critical-css\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-09T02:37:30+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/above-the-fold.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":"6 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/trich-xuat-critical-css\/","url":"https:\/\/kiencang.net\/trich-xuat-critical-css\/","name":"Tr\u00edch xu\u1ea5t CSS quan tr\u1ecdng (critical CSS) &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-09T02:37:30+00:00","dateModified":"2019-12-09T02:37:30+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/trich-xuat-critical-css\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/trich-xuat-critical-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/trich-xuat-critical-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"Tr\u00edch xu\u1ea5t CSS quan tr\u1ecdng (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\/13854"}],"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=13854"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/13854\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=13854"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=13854"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=13854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}