Initializing, please wait a moment

Trinh rut gon CSS vs trinh nen - moi cai lam gi va khi nao dung cai nao

Xuat ban ngay 19 thang 4, 2026

"Rut gon" va "nen" duoc dung thay the cho nhau trong tro chuyen thong thuong, nhung do la hai thao tac khac nhau cung nhau lam giam CSS ma trinh duyet tai xuong. Rut gon loai bo cac ky tu trinh duyet khong can; nen ma hoa lai ket qua de truyen tai. Phat hanh mot ban build production thieu ca hai se de lai 60 den 80 phan tram trong luong tai xuong tren ban. Huong dan nay giai thich chinh xac moi giai doan lam gi, chung ket hop ra sao, va thu tu dung trong pipeline trien khai.

Rut gon: loai bo cac ky tu trinh duyet khong can

Mot tep CSS do con nguoi viet chua nhieu ky tu chi ton tai cho con nguoi:

Khoang trang - thut dau dong, ngat dong, khoang trang quanh dau ngoac nhon va toan tu.
Chu thich - cac khoi /* ... */ giai thich moi luat lam gi.
Dau cau thua - dau cham phay o cuoi khai bao cuoi trong khoi, so 0 dau trong so thap phan nhu 0.5em.
Gia tri mau dai - #ffffff thay vi #fff, rgb(255,255,255) thay vi white.
Luat khong nhom - hai bo chon co cung khoi khai bao co the duoc gop thanh mot bo chon cach nhau bang dau phay.

Trinh rut gon loai bo moi ky tu ma parser CSS khong yeu cau. html { font-family: sans-serif; } body { margin: 0; } tro thanh html{font-family:sans-serif}body{margin:0} - giam 30 den 50 phan tram ma nguon. Ket qua la CSS tuong duong; cay phan tich cua trinh duyet giong het.

Rut gon o muc nguon: no doi byte cua tep CSS. Khi da rut gon, tep van de doc theo nghia ban co the chay lai qua trinh lam dep de khoi phuc dinh dang, nhung ban se khong bao gio chinh tay o dang rut gon. Chay rut gon nhu mot phan cua build; dung Trinh rut gon CSS hoac Trinh rut gon JS cho tung tep le, hoac mot cong cu build (webpack, esbuild, parcel, Vite) cho pipeline toan du an.

Nen: ma hoa lai tep de truyen tai

Trinh nen lay byte CSS da rut gon va ma hoa lai thanh mot luong byte nho hon, dung thuat toan muc dich chung nhan biet cac khuon mau lap lai. Hai dinh dang thong tri web hien dai:

gzip (DEFLATE). Ho tro gan nhu pho quat (moi client HTTP tu ~2005). Ti le nen tot: thuong giam CSS da rut gon them 60 den 80 phan tram. Ma hoa va giai ma nhanh.
Brotli. Moi hon (2015), duoc moi trinh duyet hien dai ho tro. Nen tot hon gzip - thuong nho hon dau ra gzip 15 den 25 phan tram tren noi dung van ban. Ma hoa hoi cham hon, giai ma tuong duong. May chu production thuong phuc vu Brotli truoc voi gzip du phong qua header yeu cau Accept-Encoding.

Nen o muc truyen tai: byte cua tep CSS tren dia khong thay doi; may chu boc phan hoi trong mot phong bi nen va trinh duyet boc ra o dau kia. Tep nguon van la CSS thuan; phan hoi HTTP mang it byte hon qua duong truyen.

Tai sao ca hai deu quan trong - hieu ung cong don

Rut gon va nen bo tro cho nhau. Rut gon loai bo du thua ma parser CSS khong can; nen nhan biet cac khuon mau con lai o muc byte.

Giai doan	Kich thuoc mau	Giam so voi nguon
CSS nguon (de doc)	100 KB	-
Sau khi rut gon	~55 KB	~45%
Sau khi rut gon + gzip	~15 KB	~85%
Sau khi rut gon + Brotli	~11 KB	~89%
Khong rut gon + gzip (bo buoc 1)	~22 KB	~78%

Dong cuoi la cai bay: gui CSS chua rut gon voi gzip van cat tai xuong ~78%, nghe co ve tuyet cho den khi ban so voi 89% ban nhan duoc voi ca hai buoc. Tren mot bundle CSS dien hinh 250 KB, chenh lech la ~25 KB moi lan tai trang - nhan len voi luu luong cua ban, do la bang thong thuc.

Thu tu dung trong pipeline trien khai

Chay rut gon o thoi diem build. Nen dien ra o thoi diem phuc vu - thuong boi CDN, may chu web hoac trinh nen chay truoc app. Dung bao gio nen san CSS thanh tep .css.gz va bo qua nen runtime; cac trinh duyet khong ho tro gzip (rat hiem nhung co that) khi do se that bai tai hoan toan style sheet.

Viet CSS de doc voi khoang trang, chu thich va bo chon mo ta. Nguon cho con nguoi.
Buoc build chay trinh rut gon tren moi tep .css, tao artifact nhu main.min.css. Trien khai cac artifact nay.
CDN hoac may chu web them ma hoa gzip/Brotli tren moi yeu cau cho text/css, ton trong Accept-Encoding. Cloudflare, Netlify, Vercel, GitHub Pages, va hau het cac host hien dai lam dieu nay mac dinh.
Dat header cache dai tren artifact da rut gon (Cache-Control: max-age=31536000, immutable) va pha cache tren ten tep khi noi dung thay doi (main.a3f5d9.min.css).

Neu nen tang trien khai cua ban khong tu xu ly nen, bat o lop CDN (Cloudflare, Fastly, CloudFront) thay vi ben trong may chu ung dung - nen ton CPU va CDN duoc toi uu cho viec do.

Do luong: xac nhan ca hai buoc dang hoat dong

Mo DevTools → tab Network → nhan vao tep CSS → kiem tra hai cot:

Size: so byte truyen (sau khi nen). Tren CSS nguon 100 KB da rut gon + nen Brotli, phai doc ~11 KB.
Header Content-Encoding trong phan hoi: br cho Brotli, gzip cho gzip, khong co gi neu khong nen.

Neu cot Size hien thi 55 KB tren CSS nguon 100 KB, ban co rut gon nhung khong nen - kiem tra cau hinh CDN/may chu. Neu hien thi 100 KB, khong co buoc nao chay - kiem tra dau ra build va trien khai lai.

Cac truong hop bien thong dung

CSS noi tuyen trong HTML. Cac khoi <style>...</style> nhung trong HTML duoc nen nhu mot phan cua phan hoi HTML, khong rieng biet. Van rut gon chung neu build san sinh ra (mot so thu vien CSS-in-JS lam vay), vi HTML da nen cung duoc tinh bang byte.

Source map. Trinh rut gon co the phat ra source map (.css.map) anh xa dau ra rut gon lai ve nguon de doc, cho phep DevTools hien thi tep goc khi go loi. Source map chi duoc tai khi DevTools mo, nen khong anh huong luu luong nguoi dung thuong. Phuc vu chung voi cung chinh sach nen nhu CSS.

CSS-in-JS / kieu chay runtime. Cac thu vien nhu styled-components tao CSS tai thoi diem runtime. Rut gon JS sinh ra CSS van ap dung; CSS duoc tiem vao DOM duoi dang khoi <style> dong va khong bao gio cham mang duoi dang tep rieng.

Tailwind / Atomic CSS. Cac framework utility-first sinh ra CSS tho khong lo thu hep xuong vai KB sau khi PurgeCSS/JIT loai bo luat khong dung. Cau hoi "trinh rut gon vs trinh nen" bi lu mo boi giai doan tree-shaking. Xac nhan kich thuoc bundle cuoi da rut gon + nen truoc khi toi uu rut gon hoac nen.

Cong cu lien quan

Trinh rut gon CSS - loai bo khoang trang, chu thich va ky tu thua tu tep CSS.
Trinh gian CSS - lam dep tep CSS da rut gon de go loi.
Trinh rut gon JS - cung ky thuat ap dung cho JavaScript.
Trinh gian JS - dinh dang lai JS da rut gon thanh bo cuc de doc.

← Quay lai Cong cu Lap trinh vien

Last updated: May 31, 2026

Reviewed by the Free Tool Online editorial team · Tested in the current versions of Chrome, Firefox, Safari, and Edge before publishing. Your file is processed in your browser and never uploaded. Report a bug - we triage within 72 hours. · Last refreshed April 2026.

Why trust these tools

Ten-plus years of web tooling. The freetoolonline editorial team has shipped browser-based utilities since 2015. The goal has never changed: get you to a working output fast, without an install.
Truly in-browser - no upload. Every file-processing tool on this site runs in your browser through modern Web APIs (File, FileReader, Canvas, Web Audio, WebGL, Web Workers). Your photo, PDF, audio, or text never leaves your device.
No tracking during tool use. Analytics ends at the page view. The actual input you paste, drop, or capture is never sent to any server and never written to any log.
Open-source core components. The processing engines underneath (libheif, libde265, pdf-lib, terser, clean-css, ffmpeg.wasm, and others) are public and audit-able. We link to each one in its tool page's footer.
Free, with or without ads. All tools are fully functional without sign-up. The Disable Ads button in the header is always available if you need a distraction-free run.