Trình giảm thiểu HTML

Về việc minify HTML

HTML là thứ đầu tiên trình duyệt tải xuống, phân tích và dựng ở mỗi lần tải trang. Tài liệu HTML nằm trên đường dẫn render quan trọng: trình duyệt không thể bắt đầu lấy CSS, JS hay ảnh trước khi đã phân tích đủ HTML để biết chúng là gì. Mỗi kilobyte HTML được truyền và parse làm chậm Time to First Byte (TTFB) và Largest Contentful Paint (LCP), hai trong ba Core Web Vitals mà Google dùng làm tín hiệu xếp hạng. Việc minify HTML loại bỏ những byte mà con người đặt vào để dễ đọc (khoảng trắng giữa các thẻ, comment, cú pháp thuộc tính dư) mà không thay đổi điều trình duyệt nhìn thấy. Nén Gzip và Brotli tại biên CDN xử lý phần lớn trọng lượng, các tên thẻ lặp lại nén rất tốt, nhưng minify ở trên còn tiết kiệm thường thêm 5 đến 15% byte bằng cách bỏ những thứ bộ nén không thấy (byte chết về ngữ nghĩa nén ra đầu ra tương tự nhưng không giống hệt). Nghe ít cho đến khi bạn nhân với mỗi yêu cầu trang trên một site lưu lượng cao; cả hóa đơn băng thông và cải thiện LCP đều quan trọng ở quy mô.

Có hai trường hợp bổ trợ nơi tiết kiệm lớn hơn: trang dựng phía server (Next.js, Remix, Hugo, Eleventy) nơi HTML được sinh mới ở mỗi yêu cầu và template framework thường có thụt lề rộng rãi và comment hữu ích; và build site tĩnh nơi minify chạy một lần lúc build và sinh lợi mãi mãi. Các trình sinh site tĩnh hiện đại cung cấp minify HTML như tùy chọn build: cờ --minify của Hugo đến trong v0.47 (17 tháng 8 năm 2018), Eleventy dùng html-minifier-terser qua plugin, Next.js áp dụng qua SWC, và Astro 3.0 đi kèm minify HTML built-in với tích hợp tùy chọn astro-compress chồng lên trên. Cho HTML viết tay hoặc template không có pipeline build, trình minify trong-trình-duyệt này là con đường ít ma sát nhất.

Một trình minify thực sự làm gì

• Gộp khoảng trắng giữa các phần tử. Khoảng trắng và xuống dòng giữa các thẻ bị bỏ, <p> Hello </p> trở thành <p>Hello</p> khi an toàn. Điều kiện "khi an toàn" quan trọng: khoảng trắng giữa các phần tử inline (<span>, <a>, <em>) được dựng (nên "foo bar" phải giữ khoảng trắng giữa các span). Khoảng trắng giữa các phần tử block (<div>, <p>) thường thì không.
• Bỏ comment. Khối <!-- ... --> bị bỏ. Comment điều kiện (<!--[if IE]>...<![endif]-->) được giữ khi có, dù Microsoft đã bỏ xử lý comment điều kiện từ Internet Explorer 10 trở đi, ta có thể bỏ chúng an toàn trên mọi site không hỗ trợ IE9 hoặc cũ hơn.
• Đơn giản hóa thuộc tính. Dấu nháy thuộc tính được loại bỏ khi giá trị không chứa khoảng trắng, >, =, hay nháy nào: class="btn" trở thành class=btn. Thuộc tính boolean được đơn giản hóa: disabled="disabled", checked="checked", selected="selected", readonly="readonly" còn lại chỉ tên thuộc tính. Giá trị thuộc tính mặc định bị bỏ: type="text" trên input, type="text/javascript" trên thẻ script, method="get" trên form.
• Phần tử rỗng vẫn rỗng. <br>, <hr>, <img>, <input>, <meta> và <link> không có thẻ đóng trong HTML5. Dấu gạch tự đóng kiểu XHTML (<br />) bị bỏ: <br /> trở thành <br>.
• Nội dung được bảo vệ. Nội dung của <pre>, <textarea>, <script> và <style> được giữ nguyên vì khoảng trắng của chúng có ý nghĩa. JavaScript và CSS inline cần các lượt minify riêng (công cụ tách).

Các trường hợp khoảng trắng có ý nghĩa và có thể cắn bạn

Rủi ro lớn nhất khi minify HTML là gộp khoảng trắng nơi chúng có ý nghĩa. Phần tử inline có khoảng trắng quanh chúng dựng các khoảng đó thành khoảng trắng nhìn thấy được; foo <em>bar</em> baz có khoảng trắng quanh bar; nếu trình minify gộp chúng về không, văn bản dựng ra trở thành "foobarbaz" không có dấu cách. Trình minify thận trọng luôn giữ một khoảng trắng đơn giữa văn bản và phần tử inline; trình minify quyết liệt (với conservativeCollapse: true tắt) bỏ nó. Khoảng trắng bên trong phần tử có CSS white-space: pre cũng được dựng; trình minify không thấy quy tắc CSS và có thể gộp sai. Comment bị bỏ bên trong comment điều kiện có thể phá hành vi riêng IE trên site lịch sử. Comment dùng làm marker build (placeholder <!---> của Vue, <!--bindings={...}--> của Angular) phải sống sót qua lượt minify. Trình minify hiện đại xử lý các trường hợp đó; cách tiếp cận thuần regex (công cụ này) là thận trọng, giữ khoảng trắng trong khối được bảo vệ nhưng không có nhận thức đầy đủ về inline-vs-block. Cho site production có nhiều prose giàu phần tử inline, hãy kiểm thử đầu ra đã minify trước khi triển khai.

Cú pháp dễ tha thứ của HTML5 và vì sao XHTML thua

Tính dễ tha thứ của HTML5 là điều khiến minify khả thi ngay từ đầu. XHTML (biến thể bị bỏ với cú pháp XML) đòi hỏi cú pháp nghiêm ngặt: mỗi thẻ đóng, mỗi thuộc tính trong nháy, mỗi thuộc tính chữ thường. XHTML 2.0 bị bỏ khi điều lệ W3C của nó hết hạn ngày 2 tháng 7 năm 2009; HTML5 trở thành W3C Recommendation ngày 28 tháng 10 năm 2014. HTML5 có chủ ý cho phép nhiều cú pháp tương đương: <br> và <br/> đều hợp lệ; type="text" trên input là mặc định và có thể bỏ qua; nháy quanh class=btn là tùy chọn khi giá trị đơn giản. Sự dễ tha thứ này chính là điều mà các trình minify khai thác: mỗi yếu tố cú pháp "tùy chọn" là byte trình minify có thể bỏ. Đánh đổi là HTML đã minify khó đọc hơn cho con người (không sao vì không ai đọc HTML production trừ qua View Source).

Lược sử ngắn về tooling minify HTML

HTMLMinifier của Will Peavy (công cụ trên willpeavy.com, giữa thập niên 2000 đến khoảng 2010) là trình minify HTML dựa-trình-duyệt được trích dẫn nhiều nhất đầu tiên, một công cụ một-trang nhận HTML dán vào và phát ra phiên bản đã làm gọn. html-minifier của kangax (Juriy "kangax" Zaytsev, công bố ngày 9 tháng 3 năm 2010 trên blog Perfection Kills của ông) là trình minify HTML Node.js có nhận thức AST nghiêm túc đầu tiên; gần một thập niên đó là công cụ Node kinh điển, được webpack-html-plugin, pipeline Gulp và phần lớn các trình sinh site tĩnh dùng. Bản phát hành cuối của kangax là v4.0.0 ngày 1 tháng 4 năm 2019; repository về cơ bản không được bảo trì từ 2021 nhưng chưa được lưu trữ chính thức. html-minifier-terser (do Daniel Ruf bảo trì với đóng góp từ kangax, Alex Lam và những người khác) là fork đang được bảo trì tích cực tiếp nhận chỗ kangax dừng lại; đây là cái webpack-html-plugin dùng mặc định ngày nay và cái phần lớn pipeline build chạy. minify-html của Wilson Lin là trình minify viết bằng Rust với hiệu năng tốt hơn đáng kể trên HTML lớn. tdewolff/minify là phương án Go dùng trong Hugo và nhiều trình sinh site tĩnh Go khác. swc và Lightning CSS có hỗ trợ HTML trong các chuỗi Rust tương ứng, được Next.js (đã chuyển từ Babel sang SWC bắt đầu từ Next.js 12) và Parcel dùng. html-minifier-next (công bố qua issue GitHub #1165 ngày 10 tháng 7 năm 2025) là fork mới từ kangax mà một số dự án đang chuyển sang.

HTML email, một thế giới khác

HTML email là sân mìn minify riêng của nó. Client email có parser khác nhau khét tiếng: Outlook 2007-2019 dùng bộ render HTML của Microsoft Word (thiết kế cho tài liệu xử lý văn bản, không phải web), Gmail bỏ thẻ <style> vượt ngưỡng kích thước, Apple Mail và Yahoo Mail bám sát chuẩn web hơn. Quy tắc minify HTML web không phải tất cả áp dụng cho email: bỏ khoảng trắng giữa các thẻ có thể phá layout Outlook; bỏ nháy tùy chọn có thể phá một số parser webmail; bỏ thuộc tính type="text/css" trên thẻ <style> inline có thể bị Gmail âm thầm bỏ qua. Mức minify "đúng" cho email thận trọng hơn nhiều so với HTML web, thường chỉ bỏ comment và khoảng trắng, để phần còn lại yên. Công cụ riêng cho email như MJML và Foundation for Emails xử lý các quái dị của HTML email lúc compile; chạy một trình minify HTML web chung trên template Mailchimp có khả năng cao sẽ phá nó trong Outlook.

AMP HTML và cách tiếp cận bằng validator

Dự án Accelerated Mobile Pages của Google (ra mắt ngày 7 tháng 10 năm 2015) chọn cách tiếp cận ngược lại: thay vì minify sau, AMP định nghĩa một tập con HTML nghiêm ngặt, đã nhỏ ngay từ thiết kế. AMP đòi đúng một khối inline <style amp-custom> (tối đa 75 KB từ ngày 13 tháng 3 năm 2020, nâng từ 50 KB), cấm phần lớn JavaScript trừ amp-script, và dùng validator nghiêm để áp đặt mọi quy tắc. Dự án bị giảm ưu tiên năm 2021-2022 khi lợi ích xếp hạng từ carousel AMP bị giảm, và nhiều nhà xuất bản rời AMP để dùng HTML đã minify+tối-ưu cổ điển; nó vẫn được các nhà xuất bản tin tức dựa vào lưu lượng Google Discover dùng. Liên quan với một trình minify HTML chung: AMP cho thấy chuẩn HTML chú trọng-byte quyết liệt, có quan điểm, được xác thực và nhỏ trông như thế nào.

Phạm vi trung thực: công cụ này làm gì và không làm gì

Công cụ này là trình minify HTML dựa trên regex, khoảng 30 dòng JavaScript. Nó tokenize nội dung của <pre>, <textarea>, <script> và <style> thành placeholder để các biến đổi sau không thể làm hỏng chúng; bỏ comment <!-- ... --> (với lookahead để giữ comment điều kiện <!--[if); gộp khoảng trắng giữa các thẻ; bỏ nháy thuộc tính một cách thận trọng khi giá trị chỉ chứa ký tự an toàn ([a-zA-Z0-9_-]+); và đơn giản hóa danh sách 15 thuộc tính boolean được mã hóa cứng. Điều công cụ này không làm, mà các trình minify production xử lý: nó không bỏ thẻ đóng tùy chọn (</li>, </td> trong nhiều ngữ cảnh), điều đó đòi hiểu mô hình nội dung HTML5; nó không loại thuộc tính dư có giá trị mặc định (type="text" trên input, type="text/javascript" trên script) ngoài những cái được liệt kê tường minh; nó không minify nội dung inline <style> hay <script> (hãy dùng công cụ chuyên CSS Minifier và JS Minifier cho việc đó, rồi dán lại); nó không sắp xếp thuộc tính theo bảng chữ cái (có thể cải thiện chút nén gzip); nó không xử lý quy tắc minify riêng cho SVG. Cho dự án có pipeline build, hãy dùng html-minifier-terser, minify-html hoặc swc; cho HTML lẻ, công cụ này gỡ ma sát.

Quyền riêng tư: vì sao chỉ-trong-trình-duyệt quan trọng ở đây

Trình minify HTML phía server đòi hỏi gửi nguồn đi. Cho trang web đã xuất bản, không nghiêm trọng (HTML đã công khai). Cho template công cụ admin nội bộ, trang sản phẩm chưa công bố, HTML biến thể A/B hoặc template email với nội dung cá nhân hóa, minify phía server là một lỗ rò. Công cụ này thực hiện toàn bộ biến đổi trong trình duyệt qua JavaScript, không gì đi qua mạng. Hãy kiểm chứng trong tab Network của DevTools khi bạn bấm Minify, hoặc đặt trang offline (chế độ máy bay) sau khi đã tải xong và công cụ vẫn hoạt động.

Câu hỏi thường gặp