{"id":13965,"date":"2019-12-13T14:51:20","date_gmt":"2019-12-13T14:51:20","guid":{"rendered":"https:\/\/kiencang.net\/?p=13965"},"modified":"2022-08-30T08:19:35","modified_gmt":"2022-08-30T01:19:35","slug":"css-khong-su-dung-wordpress","status":"publish","type":"post","link":"https:\/\/kiencang.net\/css-khong-su-dung-wordpress\/","title":{"rendered":"Lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng trong WordPress: n\u00f3i d\u1ec5 h\u01a1n l\u00e0m"},"content":{"rendered":"\n<p>Khi b\u1ea1n ph\u00e2n t\u00edch trang th\u00f4ng qua c\u00f4ng c\u1ee5 <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google PageSpeed Insights<\/a>, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y l\u1ed7i nh\u01b0 th\u1ebf n\u00e0y v\u1ec1 &#8220;Lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng \/ Remove unsued CSS&#8221;:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/css-khong-su-dung-1.png\" alt=\"CSS kh\u00f4ng s\u1eed d\u1ee5ng\" class=\"wp-image-13967\"\/><\/figure><\/div>\n\n\n<p>T\u1ea1m d\u1ecbch ph\u1ea7n ch\u1ee5p m\u00e0n h\u00ecnh ph\u00eda tr\u00ean: <\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Lo\u1ea1i b\u1ecf c\u00e1c quy t\u1eafc\/thu\u1ed9c t\u00ednh kh\u00f4ng d\u00f9ng \u0111\u1ebfn trong CSS v\u00e0 tr\u00ec ho\u00e3n t\u1ea3i CSS kh\u00f4ng s\u1eed d\u1ee5ng trong <a href=\"https:\/\/kiencang.net\/uu-tien-noi-dung-hien-thi\/\" target=\"_blank\" rel=\"noreferrer noopener\">m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean<\/a> \u0111\u1ec3 gi\u1ea3m d\u1eef li\u1ec7u ti\u00eau th\u1ee5 b\u1edfi ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng. <\/p><\/blockquote>\n\n\n\n<p>B\u1ea1n c\u1ea7n xem x\u00e9t vi\u1ec7c gi\u1ea3m ho\u1eb7c chuy\u1ec3n \u0111\u1ed5i s\u1ed1 l\u01b0\u1ee3ng c\u00e1c plugin WordPress t\u1ea3i CSS kh\u00f4ng s\u1eed d\u1ee5ng trong trang. \u0110\u1ec3 x\u00e1c \u0111\u1ecbnh plugin n\u00e0o \u0111ang th\u00eam CSS kh\u00f4ng li\u00ean quan, b\u1ea1n h\u00e3y th\u1eed ch\u1ea1y code coverage trong Chrome DevTools. <\/p>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 x\u00e1c \u0111\u1ecbnh \u0111\u01b0\u1ee3c theme\/plugin t\u01b0\u01a1ng \u1ee9ng t\u1eeb URL c\u1ee7a CSS. \u0110\u1ec3 \u00fd \u0111\u1ebfn c\u00e1c plugin c\u00f3 nhi\u1ec1u CSS trong danh s\u00e1ch \u0111\u01b0\u1ee3c \u0111\u00e1nh d\u1ea5u \u0111\u1ecf trong code coverage. <strong>M\u1ed9t plugin ch\u1ec9 n\u00ean g\u1ecdi ra CSS n\u00e0o \u0111\u1ea5y n\u1ebfu n\u00f3 th\u1ef1c s\u1ef1 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng tr\u00ean trang<\/strong>.<\/p>\n\n\n\n<p>&#8212;<\/p>\n\n\n\n<p>OK. V\u1eady plugin n\u00e0o c\u00f3 th\u1ec3 gi\u00fap t\u00f4i lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng?!<\/p>\n\n\n\n<p>\u00c0 v\u00e2ng, chuy\u1ec7n n\u00e0y kh\u00f4ng d\u1ec5 \u0111\u00e2u \u1ea1.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\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-6577d73549a21\" ><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-6577d73549a21\"  type=\"checkbox\" id=\"item-6577d73549a21\"><\/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\/css-khong-su-dung-wordpress\/#1_CSS_khong_su_dung_la_gi\" title=\"#1. CSS kh\u00f4ng s\u1eed d\u1ee5ng l\u00e0 g\u00ec?\">#1. CSS kh\u00f4ng s\u1eed d\u1ee5ng l\u00e0 g\u00ec?<\/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\/css-khong-su-dung-wordpress\/#2_Tai_sao_viec_loai_bo_CSS_khong_su_dung_lai_rat_kho\" title=\"#2. T\u1ea1i sao vi\u1ec7c lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng l\u1ea1i r\u1ea5t kh\u00f3?\">#2. T\u1ea1i sao vi\u1ec7c lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng l\u1ea1i r\u1ea5t kh\u00f3?<\/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\/css-khong-su-dung-wordpress\/#3_Phuong_phap_tach_ma_code-splitting\" title=\"#3. Ph\u01b0\u01a1ng ph\u00e1p t\u00e1ch m\u00e3 (code-splitting)\">#3. Ph\u01b0\u01a1ng ph\u00e1p t\u00e1ch m\u00e3 (code-splitting)<\/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\/css-khong-su-dung-wordpress\/#4_Plugin_chen_CSS_vao_trang_khong_can_thiet_mong_muon\" title=\"#4. Plugin ch\u00e8n CSS v\u00e0o trang kh\u00f4ng c\u1ea7n thi\u1ebft \/ mong mu\u1ed1n\">#4. Plugin ch\u00e8n CSS v\u00e0o trang kh\u00f4ng c\u1ea7n thi\u1ebft \/ mong mu\u1ed1n<\/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\/css-khong-su-dung-wordpress\/#5_Lieu_%E2%80%9CCSS_khong_su_dung%E2%80%9D_co_phai_la_so_lieu_phu_phiem_trong_Google_PageSpeed\" title=\"#5. Li\u1ec7u &#8220;CSS kh\u00f4ng s\u1eed d\u1ee5ng&#8221; c\u00f3 ph\u1ea3i l\u00e0 s\u1ed1 li\u1ec7u ph\u00f9 phi\u1ebfm trong Google PageSpeed?\">#5. Li\u1ec7u &#8220;CSS kh\u00f4ng s\u1eed d\u1ee5ng&#8221; c\u00f3 ph\u1ea3i l\u00e0 s\u1ed1 li\u1ec7u ph\u00f9 phi\u1ebfm trong Google PageSpeed?<\/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\/css-khong-su-dung-wordpress\/#6_Lam_the_nao_de_loai_bo_CSS_khong_su_dung_trong_WordPress\" title=\"#6. L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng trong WordPress?\">#6. L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng trong WordPress?<\/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\/css-khong-su-dung-wordpress\/#7_Cach_tiep_can_tot_hon_dang_tin_cay_hon_de_loai_bo_CSS_khong_su_dung_trong_WordPress\" title=\"#7. C\u00e1ch ti\u1ebfp c\u1eadn t\u1ed1t h\u01a1n, \u0111\u00e1ng tin c\u1eady h\u01a1n \u0111\u1ec3 lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng tr\u1ecdng WordPress\">#7. C\u00e1ch ti\u1ebfp c\u1eadn t\u1ed1t h\u01a1n, \u0111\u00e1ng tin c\u1eady h\u01a1n \u0111\u1ec3 lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng tr\u1ecdng WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/kiencang.net\/css-khong-su-dung-wordpress\/#8_Ket_luan\" title=\"#8. K\u1ebft lu\u1eadn\">#8. K\u1ebft lu\u1eadn<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\" id=\"css-khong-s\u1eed-d\u1ee5ng-la-gi\"><span class=\"ez-toc-section\" id=\"1_CSS_khong_su_dung_la_gi\"><\/span>#1. CSS kh\u00f4ng s\u1eed d\u1ee5ng l\u00e0 g\u00ec?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Ng\u01b0\u1eddi l\u1eadp tr\u00ecnh vi\u1ebft giao di\u1ec7n theo c\u00e1ch m\u00e0 n\u00f3 c\u1ea7n c\u00f3 kh\u1ea3 n\u0103ng h\u1ed7 tr\u1ee3 \u0111\u01b0\u1ee3c cho h\u1ea7u k\u1ebft c\u00e1c ki\u1ec3u website nh\u01b0 blog, WooCommerce (trang th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed), di\u1ec5n \u0111\u00e0n, v\u00e2n v\u00e2n.<\/p>\n\n\n\n<p>T\u1ea5t c\u1ea3 c\u00e1c ki\u1ec3u website n\u00e0y c\u00f3 th\u1ec3 y\u00eau c\u1ea7u m\u1ed9t s\u1ed1 th\u00e0nh ph\u1ea7n HTML (v\u1edbi c\u00e1c bi\u1ebfn th\u1ec3 c\u1ee7a ri\u00eang ch\u00fang), ch\u1eb3ng h\u1ea1n nh\u01b0:<\/p>\n\n\n\n<ul><li>Typography (ki\u1ec3u ch\u1eef)<\/li><li>Icons<\/li><li>B\u1ea3ng bi\u1ec3u<\/li><li>Form v\u00e0 N\u00fat b\u1ea5m (button)<\/li><li>Widgets (v\u00ed d\u1ee5 b\u00e0i vi\u1ebft g\u1ea7n \u0111\u00e2y, b\u00e0i xem nhi\u1ec1u, l\u01b0\u1ee3t xem, d\u1ef1 b\u00e1o th\u1eddi ti\u1ebft);<\/li><li>Thanh \u0111i\u1ec1u h\u01b0\u1edbng (navigation bar)<\/li><li>WooCommerce <\/li><li>H\u1ed9p t\u00e1c gi\u1ea3 (th\u01b0\u1eddng \u1edf cu\u1ed1i b\u00e0i vi\u1ebft \u0111\u1ec3 cung c\u1ea5p th\u00eam th\u00f4ng tin v\u1ec1 t\u00e1c gi\u1ea3 b\u00e0i vi\u1ebft)<\/li><li>Thanh t\u00ecm ki\u1ebfm (m\u1eb7c \u0111\u1ecbnh c\u1ee7a WP ho\u1eb7c plugin ho\u1eb7c app c\u1ee7a b\u00ean th\u1ee9 ba nh\u01b0 Google hay <a href=\"https:\/\/kiencang.net\/cong-cu-tim-kiem-algolia-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Algolia<\/a>)<\/li><li><a href=\"https:\/\/kiencang.net\/chien-thuat-tang-toc-comment\/\" target=\"_blank\" rel=\"noreferrer noopener\">B\u00ecnh lu\u1eadn<\/a><\/li><li>Galleries (cho \u1ea3nh)<\/li><li>C\u00e1c n\u00fat m\u1ea1ng x\u00e3 h\u1ed9i (nh\u01b0 n\u00fat like, share)<\/li><\/ul>\n\n\n\n<p>Danh s\u00e1ch n\u00e0y c\u1ee9 k\u00e9o d\u00e0i m\u00e3i&#8230;<\/p>\n\n\n\n<p>99% th\u1eddi gian, c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n giao di\u1ec7n vi\u1ebft m\u1ecdi m\u00e3 CSS h\u1ecd c\u1ea7n v\u00e0o trong file duy nh\u1ea5t c\u00f3 t\u00ean <em>style.css<\/em>. D\u00f9 b\u1ea1n c\u00f3 s\u1eed d\u1ee5ng hay kh\u00f4ng, ng\u01b0\u1eddi d\u00f9ng c\u1ee7a b\u1ea1n s\u1ebd ph\u1ea3i nh\u1eadn CSS \u00e1p d\u1ee5ng cho t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed (element).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"n\u1ebfu-b\u1ea1n-khong-s\u1eed-d\u1ee5ng-t\u1ea5t-c\u1ea3-cac-ph\u1ea7n-t\u1eed-nay-thi-sao\">N\u1ebfu b\u1ea1n kh\u00f4ng s\u1eed d\u1ee5ng t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed n\u00e0y th\u00ec sao?<\/h3>\n\n\n\n<p>Trong blog c\u1ee7a t\u00f4i, t\u00f4i kh\u00f4ng c\u1ea7n WooCommerce, b\u00ecnh lu\u1eadn (v\u00ec t\u00f4i s\u1eed d\u1ee5ng \u1ee9ng d\u1ee5ng c\u1ee7a b\u00ean th\u1ee9 ba l\u00e0 <a href=\"https:\/\/disqus.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Disqus<\/a>), v\u00e0 nhi\u1ec1u th\u00e0nh ph\u1ea7n t\u01b0\u01a1ng t\u1ef1 kh\u00e1c. <\/p>\n\n\n\n<p>Ngo\u00e0i ra, m\u1ed9t s\u1ed1 th\u00e0nh ph\u1ea7n nh\u01b0 b\u1ea3ng, form, h\u1ed9p t\u00e1c gi\u1ea3, n\u00fat chia s\u1ebb ch\u1ec9 c\u1ea7n trong trang d\u1ea1ng b\u00e0i post, kh\u00f4ng c\u1ea7n thi\u1ebft trong trang ch\u1ee7.<\/p>\n\n\n\n<p>V\u00e2ng, \u0111\u00e2y ch\u00ednh l\u00e0 &#8220;<a href=\"https:\/\/kiencang.net\/loai-bo-css-khong-su-dung\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS kh\u00f4ng s\u1eed d\u1ee5ng<\/a>&#8220;.<\/p>\n\n\n\n<p>P\/S: Kh\u00f4ng ch\u1ec9 c\u00f3 c\u00e1c giao di\u1ec7n, c\u00e1c plugin c\u0169ng c\u00f3 th\u1ec3 ch\u00e8n (injecting) nhi\u1ec1u CSS b\u00ean ngo\u00e0i v\u00e0o.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"t\u1ea1i-sao-vi\u1ec7c-lo\u1ea1i-b\u1ecf-css-khong-s\u1eed-d\u1ee5ng-l\u1ea1i-r\u1ea5t-kho\"><span class=\"ez-toc-section\" id=\"2_Tai_sao_viec_loai_bo_CSS_khong_su_dung_lai_rat_kho\"><\/span>#2. T\u1ea1i sao vi\u1ec7c lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng l\u1ea1i r\u1ea5t kh\u00f3?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cac-class-d\u1ed9ng\">C\u00e1c class \u0111\u1ed9ng<\/h3>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 nghe n\u00f3i v\u1ec1 <a href=\"https:\/\/kiencang.net\/trich-xuat-critical-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">critical CSS<\/a>. N\u00f3 l\u00e0 nh\u1eefng CSS quan tr\u1ecdng c\u1ea7n thi\u1ebft cho vi\u1ec7c render n\u1ed9i dung thu\u1ed9c m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean (above the fold). Ph\u1ea7n CSS c\u00f2n l\u1ea1i s\u1ebd \u0111\u01b0\u1ee3c t\u1ea3i trong ch\u00e2n trang (footer) \u0111\u1ec3 <a href=\"https:\/\/kiencang.net\/loai-bo-css-chan-hien-thi\/\" target=\"_blank\" rel=\"noreferrer noopener\">lo\u1ea1i b\u1ecf CSS ch\u1eb7n hi\u1ec3n th\u1ecb<\/a>. C\u00f3 m\u1ed9t s\u1ed1 c\u00f4ng c\u1ee5 v\u00e0 plugin gi\u00fap <a href=\"https:\/\/kiencang.net\/critical-css-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">tr\u00edch xu\u1ea5t critical CSS trong WordPress<\/a>.<\/p>\n\n\n\n<p>D\u00f9 v\u1eady th\u00ec vi\u1ec7c tr\u00edch xu\u1ea5t &#8220;CSS kh\u00f4ng s\u1eed d\u1ee5ng&#8221; kh\u00f4ng d\u1ec5 d\u00e0ng nh\u01b0 vi\u1ec7c tr\u00edch xu\u1ea5t critical CSS. L\u00fd do n\u1eb1m \u1edf ch\u1ed7 file JS c\u00f3 th\u1ec3 ch\u00e8n th\u00eam class CSS khi c\u00f3 thao t\u00e1c click v\u00e0o button ho\u1eb7c h\u00e0nh \u0111\u1ed9ng t\u01b0\u01a1ng t\u00e1c n\u00e0o \u0111\u00f3.<\/p>\n\n\n\n<p>Khi b\u1ea1n th\u1eed click v\u00e0o icon t\u00ecm ki\u1ebfm tr\u00ean ph\u1ea7n \u0111\u1ea7u blog c\u1ee7a t\u00f4i (trang WP Speed Matters &#8211; t\u00e1c gi\u1ea3 g\u1ed1c b\u00e0i ti\u1ebfng Anh), m\u1ed9t div v\u00e0 class m\u1edbi s\u1ebd \u0111\u01b0\u1ee3c ch\u00e8n th\u00eam v\u00e0o b\u1eb1ng JavaScript.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/css-class-dong.gif\" alt=\"CSS v\u00e0 class \u0111\u1ed9ng\" class=\"wp-image-13968\"\/><\/figure><\/div>\n\n\n<p>Class CSS c\u1ea7n thi\u1ebft cho c\u00e1c hi\u1ec7u \u1ee9ng n\u00e0y n\u1eb1m trong JavaScript v\u00e0 r\u1ea5t kh\u00f3 \u0111\u1ec3 t\u00ecm th\u1ea5y t\u00ean nh\u1eefng class \u0111\u00f3. Tr\u01b0\u1eddng h\u1ee3p t\u01b0\u01a1ng t\u1ef1 c\u0169ng x\u1ea3y ra v\u1edbi trang gi\u1ecf h\u00e0ng (cart page), c\u00e1c trang b\u1eaft bu\u1ed9c ph\u1ea3i \u0111\u0103ng nh\u1eadp (account restricted pages), v\u00e2n v\u00e2n.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ph\u01b0\u01a1ng-phap-tach-ma-code-splitting\"><span class=\"ez-toc-section\" id=\"3_Phuong_phap_tach_ma_code-splitting\"><\/span>#3. Ph\u01b0\u01a1ng ph\u00e1p t\u00e1ch m\u00e3 (code-splitting)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>M\u1ed9t c\u00e1ch ti\u1ebfp c\u1eadn \u0111\u1ec3 l\u00e0m gi\u1ea3m CSS kh\u00f4ng s\u1eed d\u1ee5ng trong giao di\u1ec7n \u0111\u00f3 l\u00e0 chia file CSS l\u1edbn <em>style.css<\/em> th\u00e0nh nhi\u1ec1u file nh\u1ecf nh\u01b0 <em>base.css<\/em>, <em>form.css<\/em>, <em>typography.css<\/em>, <em>table.css<\/em>, <em>comment.css<\/em>, v\u00e2n v\u00e2n v\u00e0 ch\u00e8n c\u00e1c file c\u1ea7n thi\u1ebft trong c\u00e1c trang t\u01b0\u01a1ng \u1ee9ng (t\u1ee9c l\u00e0 trang A c\u1ea7n CSS n\u00e0o th\u00ec ch\u00e8n file CSS \u0111\u00f3 v\u00e0o, c\u00e1c trang B kh\u00f4ng c\u1ea7n th\u00ec kh\u00f4ng ch\u00e8n).<\/p>\n\n\n\n<p>Vi\u1ec7c chia nh\u1ecf t\u1ec7p CSS nh\u01b0 th\u1ebf kh\u00f4ng kh\u00f3 kh\u0103n g\u00ec, tuy nhi\u00ean \u0111\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c trang n\u00e0o s\u1eed d\u1ee5ng m\u00e3 CSS n\u00e0o l\u00e0 v\u00f4 c\u00f9ng kh\u00f3 kh\u0103n trong WordPress. Nguy\u00ean nh\u00e2n l\u00e0 v\u00ec c\u00f3 nhi\u1ec1u plugin kh\u00e1c, nhi\u1ec1u ph\u1ea7n t\u1eed HTML t\u00f9y ch\u1ec9nh c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng n\u00f3.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"plugin-chen-css-vao-trang-khong-c\u1ea7n-thi\u1ebft-mong-mu\u1ed1n\"><span class=\"ez-toc-section\" id=\"4_Plugin_chen_CSS_vao_trang_khong_can_thiet_mong_muon\"><\/span>#4. Plugin ch\u00e8n CSS v\u00e0o trang kh\u00f4ng c\u1ea7n thi\u1ebft \/ mong mu\u1ed1n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>M\u1ed9t s\u1ed1 ng\u01b0\u1eddi vi\u1ebft plugin ch\u00e8n t\u1ea5t c\u1ea3 file CSS v\u00e0 JS v\u00e0o c\u00e1c trang kh\u00f4ng c\u1ea7n s\u1eed d\u1ee5ng ch\u00fang!<\/p>\n\n\n\n<p>M\u1ed9t v\u00ed d\u1ee5 ti\u00eau bi\u1ec3u l\u00e0 <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/plugins\/contact-form-7\/\" target=\"_blank\">plugin Contact Form 7<\/a>. N\u00f3 ch\u00e8n c\u00e1c file CSS v\u00e0 JS v\u00e0o t\u1ea5t c\u1ea3 c\u00e1c trang m\u00e0 kh\u00f4ng quan t\u00e2m \u0111\u1ebfn vi\u1ec7c li\u1ec7u trang c\u00f3 bao g\u1ed3m form n\u00f3 t\u1ea1o ra hay l\u00e0 kh\u00f4ng. Nh\u01b0ng c\u00f3 m\u1ed9t s\u1ed1 plugin l\u00e0m \u0111i\u1ec1u n\u00e0y kh\u00f4n ngoan h\u01a1n, ch\u1eb3ng h\u1ea1n nh\u01b0 <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/plugins\/wpforms-lite\/\" target=\"_blank\">WP Forms<\/a>.<\/p>\n\n\n\n<p>Ng\u01b0\u1eddi l\u1eadp tr\u00ecnh th\u1eadt l\u01b0\u1eddi bi\u1ebfng \u0111\u00fang kh\u00f4ng?!<\/p>\n\n\n\n<p>Nh\u01b0ng th\u1eadm ch\u00ed n\u1ebfu ng\u01b0\u1eddi vi\u1ebft plugin ch\u00e8n n\u00f3 v\u00e0o t\u1ea5t c\u1ea3 m\u1ecdi n\u01a1i, v\u1eabn c\u00f3 m\u1ed9t s\u1ed1 c\u00e1ch lo\u1ea1i b\u1ecf ch\u00fang tr\u00ean c\u00e1c trang kh\u00f4ng c\u1ea7n thi\u1ebft. Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u \u0111i\u1ec1u \u0111\u00f3 ngay sau \u0111\u00e2y.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"li\u1ec7u-css-khong-s\u1eed-d\u1ee5ng-co-ph\u1ea3i-la-s\u1ed1-li\u1ec7u-phu-phi\u1ebfm-trong-google-pagespeed\"><span class=\"ez-toc-section\" id=\"5_Lieu_%E2%80%9CCSS_khong_su_dung%E2%80%9D_co_phai_la_so_lieu_phu_phiem_trong_Google_PageSpeed\"><\/span>#5. Li\u1ec7u &#8220;CSS kh\u00f4ng s\u1eed d\u1ee5ng&#8221; c\u00f3 ph\u1ea3i l\u00e0 s\u1ed1 li\u1ec7u ph\u00f9 phi\u1ebfm trong Google PageSpeed?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Trong WordPress, lo\u1ea1i b\u1ecf 100% CSS kh\u00f4ng s\u1eed d\u1ee5ng l\u00e0 c\u1ef1c k\u1ef3 kh\u00f3 kh\u0103n (m\u1eb7c d\u00f9 kh\u00f4ng ph\u1ea3i l\u00e0 kh\u00f4ng th\u1ec3 \u0111\u01b0\u1ee3c).<\/p>\n\n\n\n<p>\u0110i\u1ec1u n\u00e0y ch\u1ec9 c\u00f3 kh\u1ea3 n\u0103ng n\u1ebfu b\u1ea1n \u0111\u1ec3 \u00fd x\u00e2y d\u1ef1ng website ngay t\u1eeb l\u00fac ban \u0111\u1ea7u (k\u1ec3 c\u1ea3 khi b\u1ea1n s\u1eed d\u1ee5ng c\u00e1c th\u01b0 vi\u1ec7n CSS nh\u01b0 <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap<\/a> ho\u1eb7c <a href=\"https:\/\/tailwindcss.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tailwind<\/a>). C\u00f3 m\u1ed9t s\u1ed1 c\u00f4ng c\u1ee5 nh\u01b0 <a href=\"https:\/\/www.purgecss.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Purge CSS<\/a> c\u00f3 th\u1ec3 gi\u00fap b\u1ea1n &#8220;purge \/ thanh l\u1ecdc&#8221; CSS trong qu\u00e1 tr\u00ecnh x\u00e2y d\u1ef1ng n\u00e0y. R\u1ea5t d\u1ec5 \u0111\u1ec3 c\u00e0i \u0111\u1eb7t n\u00f3.<\/p>\n\n\n\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t s\u1ed1 website KH\u00d4NG c\u00f3 CSS kh\u00f4ng s\u1eed d\u1ee5ng:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">React<\/a><\/li><li><a href=\"https:\/\/airbnb.io\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Airbnb Engineering<\/a><\/li><li><a href=\"https:\/\/www.shopflamingo.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Flamingo<\/a><\/li><li><a href=\"https:\/\/www.hopper.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Hopper<\/a><\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"lam-th\u1ebf-nao-d\u1ec3-lo\u1ea1i-b\u1ecf-css-khong-s\u1eed-d\u1ee5ng-trong-wordpress\"><span class=\"ez-toc-section\" id=\"6_Lam_the_nao_de_loai_bo_CSS_khong_su_dung_trong_WordPress\"><\/span>#6. L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng trong WordPress?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cac-cong-c\u1ee5-d\u1ec3-tim-css-s\u1eed-d\u1ee5ng-khong-s\u1eed-d\u1ee5ng\">C\u00e1c c\u00f4ng c\u1ee5 \u0111\u1ec3 t\u00ecm CSS s\u1eed d\u1ee5ng\/kh\u00f4ng s\u1eed d\u1ee5ng<\/h3>\n\n\n\n<ul><li>T\u00ecm c\u00e1c selector (b\u1ed9 ch\u1ecdn) kh\u00f4ng s\u1eed d\u1ee5ng: <a href=\"https:\/\/www.jitbit.com\/unusedcss\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.jitbit.com\/unusedcss\/<\/a><\/li><li>T\u00ecm CSS kh\u00f4ng s\u1eed d\u1ee5ng: <a href=\"https:\/\/purifycss.online\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/purifycss.online\/<\/a><\/li><\/ul>\n\n\n\n<p>M\u1eb7c d\u00f9 ch\u00fang c\u00f3 th\u1ec3 gi\u00fap b\u1ea1n t\u00ecm c\u00e1c CSS &#8220;kh\u00f4ng s\u1eed d\u1ee5ng&#8221; ho\u1eb7c lo\u1ea1i b\u1ecf CSS &#8220;kh\u00f4ng s\u1eed d\u1ee5ng&#8221;, n\u00f3 c\u00f3 th\u1ec3 kh\u00f4ng hi\u1ec7u qu\u1ea3 v\u1edbi t\u1ea5t c\u1ea3 c\u00e1c trang v\u00ec l\u00fd do &#8220;class \u0111\u1ed9ng&#8221; m\u00e0 t\u00f4i \u0111\u00e3 \u0111\u1ec1 c\u1eadp \u1edf tr\u00ean.<\/p>\n\n\n\n<p>N\u1ebfu website c\u1ee7a b\u1ea1n ph\u1ea7n l\u1edbn l\u00e0 n\u1ed9i dung t\u0129nh v\u00e0 kh\u00f4ng bao g\u1ed3m nhi\u1ec1u ph\u1ea7n di chuy\u1ec3n th\u00f4ng qua h\u00e0nh vi click button, b\u1ea1n c\u00f3 th\u1ec3 th\u1eed c\u00e1c c\u00f4ng c\u1ee5 tr\u00ean.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"s\u1eed-d\u1ee5ng-unused-css-com\">S\u1eed d\u1ee5ng Unused-css.com<\/h3>\n\n\n\n<p><a href=\"https:\/\/unused-css.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Unused-css.com<\/a> l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 kh\u00e1c c\u00f3 th\u1ec3 d\u00f9ng \u0111\u1ec3 tr\u00edch xu\u1ea5t css kh\u00f4ng s\u1eed d\u1ee5ng t\u1eeb website. C\u00f4ng c\u1ee5 n\u00e0y t\u1ecf ra th\u00f4ng minh h\u01a1n c\u00e1c c\u00f4ng c\u1ee5 b\u00ean tr\u00ean. Unused-css qu\u00e9t c\u00e1c file JavaScript c\u1ee7a b\u1ea1n \u0111\u1ec3 xem c\u00f3 b\u1ea5t k\u1ef3 class n\u00e0o \u0111\u01b0\u1ee3c ch\u00e8n v\u00e0o hay kh\u00f4ng, \u0111i\u1ec1u n\u00e0y gi\u00fap kh\u1eafc ph\u1ee5c v\u1ea5n \u0111\u1ec1 &#8220;class \u0111\u1ed9ng&#8221; m\u00e0 t\u00f4i \u0111\u00e3 \u0111\u1ec1 c\u1eadp \u1edf tr\u00ean.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"unused-css-com-dang-tin-c\u1eady-d\u1ebfn-m\u1ee9c-nao\">unused-css.com \u0111\u00e1ng tin c\u1eady \u0111\u1ebfn m\u1ee9c n\u00e0o?<\/h3>\n\n\n\n<p>Trong tr\u01b0\u1eddng h\u1ee3p c\u1ee7a t\u00f4i, n\u00f3 \u0111\u00e3 b\u1ecf l\u1ee1 nhi\u1ec1u class CSS trong c\u00e1c file JS. Ngo\u00e0i ra, c\u00e1c t\u00ednh n\u0103ng ki\u1ec3m tra theo l\u1ecbch tr\u00ecnh, t\u1ea3i xu\u1ed1ng CSS s\u1eed d\u1ee5ng, v\u00e2n v\u00e2n c\u00f3 gi\u00e1 \u0111\u1ebfn 25$\/th\u00e1ng v\u00e0 h\u1ecd kh\u00f4ng h\u1ed7 tr\u1ee3 c\u00e1c v\u1ea5n \u0111\u1ec1 m\u00e0 t\u00f4i g\u1eb7p ph\u1ea3i. V\u00ec th\u1ebf cu\u1ed1i c\u00f9ng t\u00f4i kh\u00f4ng d\u00f9ng d\u1ecbch v\u1ee5 c\u1ee7a h\u1ecd.<\/p>\n\n\n\n<p>Nh\u01b0ng \u0111\u00f3 l\u00e0 tr\u01b0\u1eddng h\u1ee3p c\u1ee7a t\u00f4i, n\u1ebfu b\u1ea1n mu\u1ed1n lo\u1ea1i b\u1ecf 100% CSS kh\u00f4ng s\u1eed d\u1ee5ng, h\u00e3y d\u00f9ng th\u1eed xem th\u1ebf n\u00e0o!<\/p>\n\n\n\n<p>M\u1ed9t khi b\u1ea1n xu\u1ea5t CSS &#8220;s\u1eed d\u1ee5ng&#8221;, t\u1ea1o m\u1ed9t child theme, th\u00eam CSS v\u1eeba xu\u1ea5t n\u00e0y v\u00e0 lo\u1ea1i b\u1ecf t\u1ea5t c\u1ea3 CSS c\u00f2n l\u1ea1i!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cach-ti\u1ebfp-c\u1eadn-t\u1ed1t-h\u01a1n-dang-tin-c\u1eady-h\u01a1n-d\u1ec3-lo\u1ea1i-b\u1ecf-css-khong-s\u1eed-d\u1ee5ng-tr\u1ecdng-wordpress\"><span class=\"ez-toc-section\" id=\"7_Cach_tiep_can_tot_hon_dang_tin_cay_hon_de_loai_bo_CSS_khong_su_dung_trong_WordPress\"><\/span>#7. C\u00e1ch ti\u1ebfp c\u1eadn t\u1ed1t h\u01a1n, \u0111\u00e1ng tin c\u1eady h\u01a1n \u0111\u1ec3 lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng tr\u1ecdng WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Lo\u1ea1i b\u1ecf 100% CSS kh\u00f4ng s\u1eed d\u1ee5ng l\u00e0 \u0111i\u1ec1u g\u1ea7n nh\u01b0 kh\u00f4ng th\u1ec3 trong WordPress. D\u00f9 v\u1eady th\u00ec b\u1ea1n c\u00f3 th\u1ec3 gi\u1ea3m b\u1edbt v\u00e0 t\u1ed1i thi\u1ec3u h\u00f3a \u1ea3nh h\u01b0\u1edfng c\u1ee7a n\u00f3 b\u1eb1ng m\u1ed9t s\u1ed1 k\u1ef9 thu\u1eadt.<\/p>\n\n\n\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1c b\u01b0\u1edbc t\u00f4i \u00e1p d\u1ee5ng:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-phan-tich-cac-file-css-khong-s\u1eed-d\u1ee5ng\">1. Ph\u00e2n t\u00edch c\u00e1c file CSS kh\u00f4ng s\u1eed d\u1ee5ng<\/h3>\n\n\n\n<p>Tr\u01b0\u1edbc ti\u00ean, b\u1ea1n c\u1ea7n ph\u00e2n t\u00edch trang \u0111\u1ec3 xem file c\u1ee5 th\u1ec3 n\u00e0o c\u00f3 kh\u1ea3 n\u0103ng l\u00e0 CSS kh\u00f4ng s\u1eed d\u1ee5ng nh\u1ea5t v\u1edbi trang t\u01b0\u01a1ng \u1ee9ng.<\/p>\n\n\n\n<p>L\u01b0u \u00fd: \u0110\u1ec3 l\u00e0m \u0111i\u1ec1u n\u00e0y d\u1ec5 d\u00e0ng h\u01a1n b\u1ea1n n\u00ean <a href=\"https:\/\/kiencang.net\/bo-gop-minify-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">t\u1eaft ch\u1ebf \u0111\u1ed9 g\u1ed9p CSS<\/a> (ng\u01b0\u1ee3c l\u1ea1i <a href=\"https:\/\/kiencang.net\/plugin-autoptimize\/\" target=\"_blank\" rel=\"noreferrer noopener\">c\u00e1ch plugin Autoptimize th\u01b0\u1eddng l\u00e0m<\/a>).<\/p>\n\n\n\n<p>M\u1edf <strong>Chrome Dev tools &gt; Coverage<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/css-coverage.png\" alt=\"CSS coverage\" class=\"wp-image-13970\"\/><\/figure><\/div>\n\n\n<p>Click v\u00e0o &#8220;<strong>Start Instrumenting coverage and reload page<\/strong>&#8221; v\u00e0 b\u1ea1n s\u1ebd nh\u1eadn \u0111\u01b0\u1ee3c b\u00e1o c\u00e1o t\u01b0\u01a1ng t\u1ef1 nh\u01b0 th\u1ebf n\u00e0y:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/unused-css-and-coverage.png\" alt=\"CSS kh\u00f4ng s\u1eed d\u1ee5ng qua b\u00e1o c\u00e1o c\u1ee7a Coverage tr\u00ean Chrome\" class=\"wp-image-13971\"\/><\/figure><\/div>\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 click v\u00e0o t\u1eebng file v\u00e0 xem c\u00e1c \u0111o\u1ea1n m\u00e3 n\u00e0o \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng v\u00e0 kh\u00f4ng s\u1eed d\u1ee5ng.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-s\u1eed-d\u1ee5ng-plugin-asset-cleanup-d\u1ec3-lo\u1ea1i-b\u1ecf-cac-file-css-khong-s\u1eed-d\u1ee5ng\">2. S\u1eed d\u1ee5ng plugin Asset CleanUp \u0111\u1ec3 lo\u1ea1i b\u1ecf c\u00e1c file CSS kh\u00f4ng s\u1eed d\u1ee5ng<\/h3>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/wp-asset-clean-up\/\" target=\"_blank\" rel=\"noreferrer noopener\">Plugin Asser CleanUp<\/a> gi\u00fap b\u1ea1n ch\u1eb7n t\u1ea3i c\u00e1c file t\u1eeb plugin v\u00e0 giao di\u1ec7n tr\u00ean c\u00e1c trang c\u1ee5 th\u1ec3 (ho\u1eb7c d\u1ef1a v\u00e0o ki\u1ec3u trang).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/asset-cleanup.png\" alt=\"Plugin Asser CleanUp\" class=\"wp-image-13972\"\/><\/figure><\/div>\n\n\n<p>V\u00ed d\u1ee5, t\u00f4i kh\u00f4ng c\u1ea7n t\u1ea3i c\u00e1c file t\u1eeb Contact Form 7 cho trang ch\u1ee7. T\u01b0\u01a1ng t\u1ef1, lo\u1ea1i b\u1ecf tu\u1ea7n t\u1ef1 t\u1eebng file m\u00e0 b\u1ea1n ngh\u0129 r\u1eb1ng kh\u00f4ng c\u1ea7n thi\u1ebft.<\/p>\n\n\n\n<p>\u0110\u1ea3m b\u1ea3o l\u00e0 b\u1ea1n ki\u1ec3m tra k\u1ef9 l\u1ea1i sau khi l\u00e0m \u0111\u1ec3 tr\u00e1nh b\u1ea5t k\u1ef3 sai s\u00f3t n\u00e0o (sai s\u00f3t \u1edf \u0111\u00e2y c\u00f3 ngh\u0129a l\u00e0 c\u00f3 th\u1ec3 b\u1ea1n t\u1eaft nh\u1ea7m file CSS c\u1ea7n thi\u1ebft v\u00e0 h\u1eadu qu\u1ea3 l\u00e0 trang s\u1ebd tr\u00f4ng l\u1ed9n x\u1ed9n!).<\/p>\n\n\n\n<p>PS: hai plugin th\u01b0\u01a1ng m\u1ea1i c\u00f3 t\u00ednh n\u0103ng t\u01b0\u01a1ng t\u1ef1 l\u00e0 <a href=\"https:\/\/kiencang.net\/gioi-thieu-plugin-perfmatters\/\" target=\"_blank\" rel=\"noreferrer noopener\">Perfmatters<\/a> v\u00e0 <a href=\"https:\/\/kiencang.net\/plugin-gonzales\/\" target=\"_blank\" rel=\"noreferrer noopener\">Gonzales<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-t\u1ea1o-critical-css\">3. T\u1ea1o critical CSS<\/h3>\n\n\n\n<p><a href=\"https:\/\/kiencang.net\/critical-css-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Critical CSS<\/a> l\u00e0 CSS quan tr\u1ecdng c\u1ea7n thi\u1ebft cho vi\u1ec7c render n\u1ed9i dung thu\u1ed9c m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean c\u1ee7a trang. \u0110i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c khuy\u1ebfn kh\u00edch \u0111\u1ec3 c\u1ea3i thi\u1ec7n <a href=\"https:\/\/kiencang.net\/first-contentful-paint-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">FCP (First Contentful Paint)<\/a> v\u00e0 FMP (First Meaningful Paint).<\/p>\n\n\n\n<p>T\u1ea1o critical CSS d\u1ec5 d\u00e0ng h\u01a1n nhi\u1ec1u so v\u1edbi t\u1ea1o CSS &#8220;s\u1eed d\u1ee5ng&#8221;. C\u00f3 m\u1ed9t s\u1ed1 plugin gi\u00fap b\u1ea1n l\u00e0m \u0111i\u1ec1u n\u00e0y.<\/p>\n\n\n\n<p>Plugin \u01b0a th\u00edch c\u1ee7a t\u00f4i l\u00e0 <a href=\"https:\/\/wp-rocket.me\/\" target=\"_blank\" rel=\"noreferrer noopener\">WP-Rocket<\/a>. B\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u k\u1ef9 h\u01a1n v\u1ec1 critical CSS trong hai b\u00e0i t\u01b0\u01a1ng \u1ee9ng t\u00f4i d\u1eabn \u1edf ph\u1ea7n \u0111\u1ea7u.<\/p>\n\n\n\n<p>PS: <a href=\"https:\/\/kiencang.net\/hd-plugin-litespeed-cache-p1\/\" target=\"_blank\" rel=\"noreferrer noopener\">Plugin LiteSpeed Cache<\/a>, <a href=\"https:\/\/kiencang.net\/cach-dung-plugin-swift-performance\/\" target=\"_blank\" rel=\"noreferrer noopener\">Swift Peformance<\/a> ho\u1eb7c Autoptimize c\u0169ng c\u00f3 kh\u1ea3 n\u0103ng t\u1ea1o critical CSS r\u1ea5t t\u1ed1t.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-s\u1eed-d\u1ee5ng-cdn-d\u1ec3-phan-ph\u1ed1i-file-css\">4. S\u1eed d\u1ee5ng CDN \u0111\u1ec3 ph\u00e2n ph\u1ed1i file CSS<\/h3>\n\n\n\n<p><a href=\"https:\/\/kiencang.net\/cdn-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">CDN<\/a> c\u00f3 th\u1ec3 gi\u00fap gi\u1ea3m \u0111\u00e1ng k\u1ec3 \u0111\u1ed9 tr\u1ec5 c\u1ee7a m\u1ea1ng v\u00e0 th\u1eddi gian t\u1ea3i c\u00e1c file CSS (kh\u00f4ng ch\u1ec9 CSS, m\u00e0 c\u00f2n bao g\u1ed3m b\u1ea5t k\u1ef3 file t\u0129nh n\u00e0o). <\/p>\n\n\n\n<p>D\u00f9 cho CSS kh\u00f4ng s\u1eed d\u1ee5ng c\u1ee7a b\u1ea1n l\u00e0 100 KB hay 500 KB, CDN c\u00f3 th\u1ec3 ph\u00e2n ph\u1ed1i n\u00f3 trong v\u00f2ng ch\u01b0a \u0111\u1ea7y 50ms.<\/p>\n\n\n\n<p>M\u1ed9t trong c\u00e1c CDN \u01b0a th\u00edch c\u1ee7a t\u00f4i l\u00e0 <a href=\"https:\/\/kiencang.net\/gioi-thieu-bunnycdn\/\" target=\"_blank\" rel=\"noreferrer noopener\">BunnyCDN<\/a>. Xem th\u00eam: <a href=\"https:\/\/kiencang.net\/cdn-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">c\u00e1c d\u1ecbch v\u1ee5 CDN t\u1ed1t cho WordPress<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"k\u1ebft-lu\u1eadn\"><span class=\"ez-toc-section\" id=\"8_Ket_luan\"><\/span>#8. K\u1ebft lu\u1eadn<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Lo\u1ea1i b\u1ecf ho\u00e0n to\u00e0n t\u1eebng bit CSS kh\u00f4ng s\u1eed d\u1ee5ng ph\u1ea3i n\u00f3i l\u00e0 g\u1ea7n nh\u01b0 kh\u00f4ng th\u1ec3 trong WordPress.<\/p>\n\n\n\n<p>Nh\u01b0ng v\u1edbi c\u00e1c b\u01b0\u1edbc tr\u00ean, b\u1ea1n c\u00f3 th\u1ec3 gi\u1ea3m \u1ea3nh h\u01b0\u1edfng c\u1ee7a CSS kh\u00f4ng s\u1eed d\u1ee5ng v\u1edbi t\u1ef7 l\u1ec7 t\u1ed1t v\u00e0 c\u1ea3i thi\u1ec7n th\u1eddi gian t\u1ea3i trang c\u0169ng nh\u01b0 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n<p>N\u1ebfu b\u1ea1n c\u00f3 th\u1ec3 c\u1ea3i thi\u1ec7n <a href=\"https:\/\/kiencang.net\/first-contentful-paint-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">FCP<\/a>, FMP v\u00e0 <a href=\"https:\/\/kiencang.net\/time-to-interactive-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">TTI (Time to Interactive)<\/a>, Google PageSpeed Insights c\u0169ng s\u1ebd ng\u1eebng c\u1ea3nh b\u00e1o c\u00e1c l\u1ed7i n\u00e0y. H\u00e3y xem trang c\u1ee7a t\u00f4i tr\u00ean di \u0111\u1ed9ng (tr\u00ean m\u00e1y b\u00e0n, l\u1ed7i n\u00e0y h\u1ea7u nh\u01b0 kh\u00f4ng bao gi\u1edd xu\u1ea5t hi\u1ec7n):<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/pagespeed-insights-mobile-score.png\" alt=\"\u0111i\u1ec3m Google Speed Insights tr\u00ean di \u0111\u1ed9ng\" class=\"wp-image-13973\"\/><\/figure><\/div>\n\n\n<p><em>(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: The Tale of Removing Unused CSS from WordPress, t\u00e1c gi\u1ea3: Gijo Varghese, website: WPSpeedMatters)<\/em><\/p>\n\n\n\n<p>\u00dd ki\u1ebfn c\u1ee7a ng\u01b0\u1eddi d\u1ecbch: V\u1eady l\u00e0 qua b\u00e0i vi\u1ebft n\u00e0y, \u00fd t\u01b0\u1edfng lo\u1ea1i b\u1ecf ho\u00e0n to\u00e0n CSS kh\u00f4ng s\u1eed d\u1ee5ng g\u1ea7n nh\u01b0 l\u00e0 b\u1ea5t kh\u1ea3 thi, b\u1ea1n c\u00f9ng l\u1eafm ch\u1ec9 h\u1ea1n ch\u1ebf \u0111\u01b0\u1ee3c hi\u1ec7n t\u01b0\u1ee3ng n\u00e0y. <\/p>\n\n\n\n<p>C\u00e1ch duy nh\u1ea5t \u0111\u1ec3 kh\u00f4ng ph\u1ea3i lo l\u1eafng ch\u00fat n\u00e0o v\u1ec1 CSS kh\u00f4ng s\u1eed d\u1ee5ng, critical CSS, CSS ch\u1eb7n hi\u1ec3n th\u1ecb, JS ch\u1eb7n hi\u1ec3n th\u1ecb, jQuery \u0111\u00f3 l\u00e0 t\u1ed1i \u01b0u ho\u00e1 kh\u00e2u thi\u1ebft k\u1ebf theme c\u1ee7a b\u1ea1n ngay t\u1eeb l\u00fac ban \u0111\u1ea7u, v\u00e0 s\u1eed d\u1ee5ng plugin kh\u00e9o l\u00e9o (bi\u1ebft ch\u1ecdn c\u00e1c plugin kh\u00f4ng ch\u00e8n CSS v\u00f4 t\u1ed9i v\u1ea1). <\/p>\n\n\n\n<p>Tuy nhi\u00ean \u0111\u00e2y ch\u1eb3ng ph\u1ea3i l\u00e0 chuy\u1ec7n c\u00f3 th\u1ec3 l\u00e0m m\u1ed9t s\u1edbm m\u1ed9t chi\u1ec1u. B\u1ea1n c\u1ea7n th\u1eddi gian kh\u00f4ng nh\u1ecf \u0111\u1ec3 l\u00e0m \u0111\u01b0\u1ee3c vi\u1ec7c n\u00e0y m\u1ed9t c\u00e1ch tinh t\u1ebf.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Khi b\u1ea1n ph\u00e2n t\u00edch trang th\u00f4ng qua c\u00f4ng c\u1ee5 Google PageSpeed Insights, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y l\u1ed7i nh\u01b0 th\u1ebf n\u00e0y v\u1ec1 &#8220;Lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng \/ Remove unsued CSS&#8221;: T\u1ea1m d\u1ecbch ph\u1ea7n ch\u1ee5p m\u00e0n h\u00ecnh ph\u00eda tr\u00ean: Lo\u1ea1i b\u1ecf c\u00e1c quy t\u1eafc\/thu\u1ed9c t\u00ednh kh\u00f4ng d\u00f9ng \u0111\u1ebfn trong CSS v\u00e0 tr\u00ec ho\u00e3n t\u1ea3i CSS &hellip;<\/p>\n","protected":false},"author":1,"featured_media":21365,"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>Lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng trong WordPress: n\u00f3i d\u1ec5 h\u01a1n l\u00e0m &#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\/css-khong-su-dung-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng trong WordPress: n\u00f3i d\u1ec5 h\u01a1n l\u00e0m &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"Khi b\u1ea1n ph\u00e2n t\u00edch trang th\u00f4ng qua c\u00f4ng c\u1ee5 Google PageSpeed Insights, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y l\u1ed7i nh\u01b0 th\u1ebf n\u00e0y v\u1ec1 &#8220;Lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng \/ Remove unsued CSS&#8221;: T\u1ea1m d\u1ecbch ph\u1ea7n ch\u1ee5p m\u00e0n h\u00ecnh ph\u00eda tr\u00ean: Lo\u1ea1i b\u1ecf c\u00e1c quy t\u1eafc\/thu\u1ed9c t\u00ednh kh\u00f4ng d\u00f9ng \u0111\u1ebfn trong CSS v\u00e0 tr\u00ec ho\u00e3n t\u1ea3i CSS &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/css-khong-su-dung-wordpress\/\" \/>\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-13T14:51:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-30T01:19:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/loi-bo-css-khong-dung.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"352\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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":"Lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng trong WordPress: n\u00f3i d\u1ec5 h\u01a1n l\u00e0m &#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\/css-khong-su-dung-wordpress\/","og_locale":"vi_VN","og_type":"article","og_title":"Lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng trong WordPress: n\u00f3i d\u1ec5 h\u01a1n l\u00e0m &#8226; Ki\u1ebfn c\u00e0ng","og_description":"Khi b\u1ea1n ph\u00e2n t\u00edch trang th\u00f4ng qua c\u00f4ng c\u1ee5 Google PageSpeed Insights, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y l\u1ed7i nh\u01b0 th\u1ebf n\u00e0y v\u1ec1 &#8220;Lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng \/ Remove unsued CSS&#8221;: T\u1ea1m d\u1ecbch ph\u1ea7n ch\u1ee5p m\u00e0n h\u00ecnh ph\u00eda tr\u00ean: Lo\u1ea1i b\u1ecf c\u00e1c quy t\u1eafc\/thu\u1ed9c t\u00ednh kh\u00f4ng d\u00f9ng \u0111\u1ebfn trong CSS v\u00e0 tr\u00ec ho\u00e3n t\u1ea3i CSS &hellip;","og_url":"https:\/\/kiencang.net\/css-khong-su-dung-wordpress\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-13T14:51:20+00:00","article_modified_time":"2022-08-30T01:19:35+00:00","og_image":[{"width":640,"height":352,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/loi-bo-css-khong-dung.jpg","type":"image\/jpeg"}],"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\/css-khong-su-dung-wordpress\/","url":"https:\/\/kiencang.net\/css-khong-su-dung-wordpress\/","name":"Lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng trong WordPress: n\u00f3i d\u1ec5 h\u01a1n l\u00e0m &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-13T14:51:20+00:00","dateModified":"2022-08-30T01:19:35+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/css-khong-su-dung-wordpress\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/css-khong-su-dung-wordpress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/css-khong-su-dung-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"Lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng trong WordPress: n\u00f3i d\u1ec5 h\u01a1n l\u00e0m"}]},{"@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\/13965"}],"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=13965"}],"version-history":[{"count":1,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/13965\/revisions"}],"predecessor-version":[{"id":23181,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/13965\/revisions\/23181"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/21365"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=13965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=13965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=13965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}