{"id":13948,"date":"2019-12-13T06:18:44","date_gmt":"2019-12-13T06:18:44","guid":{"rendered":"https:\/\/kiencang.net\/?p=13948"},"modified":"2022-09-14T14:59:54","modified_gmt":"2022-09-14T07:59:54","slug":"loai-bo-css-khong-su-dung","status":"publish","type":"post","link":"https:\/\/kiencang.net\/loai-bo-css-khong-su-dung\/","title":{"rendered":"Lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng"},"content":{"rendered":"\n

Khu v\u1ef1c Opportunities (c\u01a1 h\u1ed9i) c\u1ee7a b\u00e1o c\u00e1o Lighthouse s\u1ebd li\u1ec7t k\u00ea t\u1ea5t c\u1ea3 c\u00e1c stylesheets g\u1ed3m CSS kh\u00f4ng s\u1eed d\u1ee5ng- v\u1edbi ti\u1ec1m n\u0103ng ti\u1ebft ki\u1ec7m \u0111\u01b0\u1ee3c t\u1eeb 2 KB tr\u1edf l\u00ean. Lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng gi\u00fap gi\u1ea3m l\u01b0\u1ee3ng bytes (d\u1eef li\u1ec7u) kh\u00f4ng c\u1ea7n thi\u1ebft ti\u00eau th\u1ee5 b\u1edfi ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng:<\/p>\n\n\n

\n
\"CSS
Nguy\u00ean v\u0103n: Lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng (unused). Lo\u1ea1i b\u1ecf c\u00e1c quy t\u1eafc CSS kh\u00f4ng d\u00f9ng v\u00e0 tr\u00ec ho\u00e3n t\u1ea3i CSS kh\u00f4ng s\u1eed d\u1ee5ng cho n\u1ed9i dung thu\u1ed9c m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean (above-the-fold)<\/a> \u0111\u1ec3 gi\u1ea3m ti\u00eau th\u1ee5 d\u1eef kh\u00f4ng c\u1ea7n thi\u1ebft b\u1edfi ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng.<\/figcaption><\/figure><\/div>\n\n\n
\n\n\n\n

#1. CSS kh\u00f4ng s\u1eed d\u1ee5ng l\u00e0m ch\u1eadm website nh\u01b0 th\u1ebf n\u00e0o?<\/h2>\n\n\n\n

S\u1eed d\u1ee5ng th\u1ebb link<\/em> l\u00e0 c\u00e1ch th\u1ee9c ph\u1ed5 bi\u1ebfn \u0111\u1ec3 th\u00eam style v\u00e0o trang web:<\/p>\n\n\n\n

<!doctype html>\n<html>\n  <head>\n    <link href=\"main.css\" rel=\"stylesheet\">\n    ...<\/code><\/pre>\n\n\n\n
file main.css<\/em> m\u00e0 tr\u00ecnh duy\u1ec7t t\u1ea3i xu\u1ed1ng c\u00f2n \u0111\u01b0\u1ee3c bi\u1ebft \u0111\u1ebfn v\u1edbi t\u00ean g\u1ecdi stylesheet ngo\u00e0i (external), b\u1edfi v\u00ec n\u00f3 \u0111\u01b0\u1ee3c l\u01b0u tr\u1eef t\u00e1ch bi\u1ec7t<\/em> v\u1edbi t\u00e0i li\u1ec7u HTML s\u1eed d\u1ee5ng n\u00f3.<\/p>\n\n\n\n
Theo m\u1eb7c \u0111\u1ecbnh, tr\u00ecnh duy\u1ec7t ph\u1ea3i t\u1ea3i, ph\u00e2n t\u00edch c\u00fa ph\u00e1p (parse), v\u00e0 x\u1eed l\u00fd t\u1ea5t c\u1ea3 c\u00e1c stylesheets ngo\u00e0i m\u00e0 tr\u00ecnh duy\u1ec7t g\u1eb7p tr\u01b0\u1edbc khi n\u00f3 c\u00f3 th\u1ec3 hi\u1ec3n th\u1ecb (hay c\u00f2n g\u1ecdi l\u00e0 render \/ k\u1ebft xu\u1ea5t) b\u1ea5t c\u1ee9 n\u1ed9i dung n\u00e0o tr\u00ean m\u00ecnh h\u00ecnh ng\u01b0\u1eddi d\u00f9ng<\/a>. S\u1ebd kh\u00f4ng c\u00f3 \u00fd ngh\u0129a khi tr\u00ecnh duy\u1ec7t c\u1ed1 g\u1eafng hi\u1ec3n th\u1ecb n\u1ed9i dung tr\u01b0\u1edbc khi stylesheets \u0111\u01b0\u1ee3c x\u1eed l\u00fd, b\u1edfi v\u00ec stylesheets c\u00f3 th\u1ec3 bao g\u1ed3m c\u00e1c quy t\u1eafc \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn style c\u1ee7a trang.<\/p>\n\n\n\n
T\u1eebng stylesheet b\u00ean ngo\u00e0i ph\u1ea3i \u0111\u01b0\u1ee3c t\u1ea3i xu\u1ed1ng t\u1eeb internet. Nh\u1eefng v\u00f2ng l\u1eb7p m\u1ea1ng b\u1ed5 sung n\u00e0y c\u00f3 th\u1ec3 l\u00e0m gia t\u0103ng \u0111\u00e1ng k\u1ec3 th\u1eddi gian m\u00e0 ng\u01b0\u1eddi d\u00f9ng ph\u1ea3i \u0111\u1ee3i tr\u01b0\u1edbc khi th\u1ea5y b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o tr\u00ean m\u00e0n h\u00ecnh c\u1ee7a h\u1ecd.<\/p>\n\n\n\n
CSS kh\u00f4ng s\u1eed d\u1ee5ng c\u0169ng l\u00e0m ch\u1eadm qu\u00e1 tr\u00ecnh x\u00e2y d\u1ef1ng c\u00e2y render c\u1ee7a tr\u00ecnh duy\u1ec7t. C\u00e2y render gi\u1ed1ng nh\u01b0 c\u00e2y DOM<\/a>, ngo\u1ea1i tr\u1eeb vi\u1ec7c n\u00f3 c\u00f2n bao g\u1ed3m c\u1ea3 style cho m\u1ed7i n\u00fat (node). \u0110\u1ec3 x\u00e2y d\u1ef1ng c\u00e2y render, tr\u00ecnh duy\u1ec7t ph\u1ea3i \u0111i qua to\u00e0n b\u1ed9 c\u00e2y DOM, v\u00e0 ki\u1ec3m tra CSS n\u00e0o \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho m\u1ed7i n\u00fat. C\u00f3 c\u00e0ng nhi\u1ec1u CSS kh\u00f4ng s\u1eed d\u1ee5ng, th\u00ec tr\u00ecnh duy\u1ec7t c\u00e0ng m\u1ea5t nhi\u1ec1u th\u1eddi gian (v\u00f4 \u00edch) d\u00f9ng \u0111\u1ec3 t\u00ednh to\u00e1n style cho m\u1ed7i n\u00fat.<\/p>\n\n\n\n
\n\n\n\n
#2. L\u00e0m th\u1ebf n\u00e0o x\u00e1c \u0111\u1ecbnh \u0111\u01b0\u1ee3c CSS kh\u00f4ng s\u1eed d\u1ee5ng<\/h2>\n\n\n\n
Tab coverage c\u1ee7a Chrome DevTools (c\u00f4ng c\u1ee5 cho nh\u00e0 ph\u00e1t tri\u1ec3n, \u0111\u01b0\u1ee3c t\u00edch h\u1ee3p s\u1eb5n tr\u00ean tr\u00ecnh duy\u1ec7t Chrome) c\u00f3 th\u1ec3 gi\u00fap b\u1ea1n ph\u00e1t hi\u1ec7n ra \u0111\u01b0\u1ee3c CSS quan tr\u1ecdng v\u00e0 CSS kh\u00f4ng quan tr\u1ecdng.<\/p>\n\n\n
\n
\"tab<\/figure><\/div>\n\n\n
B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 tr\u00edch xu\u1ea5t th\u00f4ng tin n\u00e0y t\u1eeb Puppeteer. Xem th\u00eam page.coverage<\/a><\/p>\n\n\n\n
\n\n\n\n
#3. N\u1ed9i tuy\u1ebfn CSS quan tr\u1ecdng v\u00e0 tr\u00ec ho\u00e3n CSS kh\u00f4ng quan tr\u1ecdng<\/h2>\n\n\n\n
T\u01b0\u01a1ng t\u1ef1 vi\u1ec7c b\u1ea1n n\u1ed9i tuy\u1ebfn (inline) m\u00e3 JS v\u00e0o trong th\u1ebb <script><\/code>, n\u1ed9i tuy\u1ebfn CSS quan tr\u1ecdng (critical CSS)<\/a> l\u00e0 y\u00eau c\u1ea7u c\u1ea7n thi\u1ebft cho m\u1ee5c ti\u00eau gi\u1ea3m thi\u1ec3u th\u1eddi gian c\u00f3 \u0111\u01b0\u1ee3c n\u1ed9i dung thu\u1ed9c m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean<\/a>. B\u1ea1n l\u00e0m \u0111i\u1ec1u n\u00e0y b\u1eb1ng c\u00e1ch \u0111\u01b0a CSS v\u00e0o trong kh\u1ed1i <style><\/code> thu\u1ed9c ph\u1ea7n head<\/em> c\u1ee7a trang HTML. Sau \u0111\u00f3 b\u1ea1n t\u1ea3i style c\u00f2n l\u1ea1i theo c\u00e1ch kh\u00f4ng \u0111\u1ed3ng b\u1ed9, s\u1eed d\u1ee5ng link preload<\/em><\/a>.<\/p>\n\n\n\n
Xem x\u00e9t vi\u1ec7c s\u1eed d\u1ee5ng bi\u1ec7n ph\u00e1p t\u1ef1 \u0111\u1ed9ng \u0111\u1ec3 x\u1eed l\u00fd vi\u1ec7c tr\u00edch xu\u1ea5t v\u00e0 n\u1ed9i tuy\u1ebfn CSS “trong m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean” b\u1eb1ng c\u00f4ng c\u1ee5 nh\u01b0 Critical tool<\/a>.<\/p>\n\n\n\n
T\u00ecm hi\u1ec3u th\u00eam b\u00e0i vi\u1ebft: tr\u00ec ho\u00e3n t\u1ea3i CSS kh\u00f4ng quan tr\u1ecdng<\/a> (non-critical CSS).<\/p>\n\n\n\n
(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: Remove unused CSS, tr\u00ean trang web[.]dev)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Khu v\u1ef1c Opportunities (c\u01a1 h\u1ed9i) c\u1ee7a b\u00e1o c\u00e1o Lighthouse s\u1ebd li\u1ec7t k\u00ea t\u1ea5t c\u1ea3 c\u00e1c stylesheets g\u1ed3m CSS kh\u00f4ng s\u1eed d\u1ee5ng- v\u1edbi ti\u1ec1m n\u0103ng ti\u1ebft ki\u1ec7m \u0111\u01b0\u1ee3c t\u1eeb 2 KB tr\u1edf l\u00ean. Lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng gi\u00fap gi\u1ea3m l\u01b0\u1ee3ng bytes (d\u1eef li\u1ec7u) kh\u00f4ng c\u1ea7n thi\u1ebft ti\u00eau th\u1ee5 b\u1edfi ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng: #1. CSS …<\/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":"\nLo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng • 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\/loai-bo-css-khong-su-dung\/\" \/>\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 • Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"Khu v\u1ef1c Opportunities (c\u01a1 h\u1ed9i) c\u1ee7a b\u00e1o c\u00e1o Lighthouse s\u1ebd li\u1ec7t k\u00ea t\u1ea5t c\u1ea3 c\u00e1c stylesheets g\u1ed3m CSS kh\u00f4ng s\u1eed d\u1ee5ng- v\u1edbi ti\u1ec1m n\u0103ng ti\u1ebft ki\u1ec7m \u0111\u01b0\u1ee3c t\u1eeb 2 KB tr\u1edf l\u00ean. Lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng gi\u00fap gi\u1ea3m l\u01b0\u1ee3ng bytes (d\u1eef li\u1ec7u) kh\u00f4ng c\u1ea7n thi\u1ebft ti\u00eau th\u1ee5 b\u1edfi ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng: #1. CSS …\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/loai-bo-css-khong-su-dung\/\" \/>\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-13T06:18:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-14T07:59:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/css-khong-su-dung.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=\"3 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng • 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\/loai-bo-css-khong-su-dung\/","og_locale":"vi_VN","og_type":"article","og_title":"Lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng • Ki\u1ebfn c\u00e0ng","og_description":"Khu v\u1ef1c Opportunities (c\u01a1 h\u1ed9i) c\u1ee7a b\u00e1o c\u00e1o Lighthouse s\u1ebd li\u1ec7t k\u00ea t\u1ea5t c\u1ea3 c\u00e1c stylesheets g\u1ed3m CSS kh\u00f4ng s\u1eed d\u1ee5ng- v\u1edbi ti\u1ec1m n\u0103ng ti\u1ebft ki\u1ec7m \u0111\u01b0\u1ee3c t\u1eeb 2 KB tr\u1edf l\u00ean. Lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng gi\u00fap gi\u1ea3m l\u01b0\u1ee3ng bytes (d\u1eef li\u1ec7u) kh\u00f4ng c\u1ea7n thi\u1ebft ti\u00eau th\u1ee5 b\u1edfi ho\u1ea1t \u0111\u1ed9ng m\u1ea1ng: #1. CSS …","og_url":"https:\/\/kiencang.net\/loai-bo-css-khong-su-dung\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-13T06:18:44+00:00","article_modified_time":"2022-09-14T07:59:54+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/css-khong-su-dung.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":"3 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/loai-bo-css-khong-su-dung\/","url":"https:\/\/kiencang.net\/loai-bo-css-khong-su-dung\/","name":"Lo\u1ea1i b\u1ecf CSS kh\u00f4ng s\u1eed d\u1ee5ng • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-13T06:18:44+00:00","dateModified":"2022-09-14T07:59:54+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/loai-bo-css-khong-su-dung\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/loai-bo-css-khong-su-dung\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/loai-bo-css-khong-su-dung\/#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"}]},{"@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\/13948"}],"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=13948"}],"version-history":[{"count":2,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/13948\/revisions"}],"predecessor-version":[{"id":23376,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/13948\/revisions\/23376"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=13948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=13948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=13948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}