Công cụ Nén HTML

Vì sao cần thu nhỏ HTML

Đoạn HTML bạn viết cho con người đầy những thứ mà trình duyệt không cần: thụt lề, các dòng xuống giữa các thẻ, chú thích của lập trình viên, và thỉnh thoảng một thuộc tính rỗng. Không thứ nào trong số đó ảnh hưởng đến cách trang hiển thị, nhưng tất cả đều thêm byte. Nhân số byte đó với mỗi khách truy cập và mỗi lần tải trang thì sự lãng phí trở thành băng thông thật và thời gian chờ thật. Việc thu nhỏ cắt bỏ các ký tự mang tính trang trí để đoạn đánh dấu đi trên đường truyền nhỏ đúng mức trình duyệt cần và không nhỏ hơn.

HTML nhỏ hơn nghĩa là byte đầu tiên của nội dung có ý nghĩa đến nhanh hơn, chi phí băng thông hosting và CDN thấp hơn, và trải nghiệm tốt hơn trên các kết nối di động chậm hoặc tính theo dung lượng. Trên các trang web nhiều lưu lượng, khoản tiết kiệm được cộng dồn, và vì HTML là tài nguyên đầu tiên mà trình duyệt tải về, việc thu nhỏ nó giúp trang bắt đầu hiển thị sớm hơn.

Bộ nén loại bỏ những gì

Mỗi tùy chọn nhắm vào một nguồn gây phình kích thước cụ thể. Xóa chú thích HTML loại bỏ các ghi chú của lập trình viên và mã đã được chú thích lại mà khách truy cập không bao giờ thấy. Xóa khoảng trắng không cần thiết gộp các chuỗi dấu cách, tab và dòng mới giữa các thẻ vốn chỉ tồn tại để dễ đọc. Xóa thuộc tính rỗng loại bỏ những thuộc tính không có giá trị, còn Xóa thẻ HTML tùy chọn bỏ đi những thẻ đóng mà đặc tả HTML cho phép bạn lược bỏ, chẳng hạn các thẻ kết thúc của các mục danh sách trong một số ngữ cảnh.

Thu gọn thuộc tính boolean là một thắng lợi nhỏ nhưng gọn gàng: các thuộc tính như disabled hay checked không cần một giá trị trong HTML, nên một dạng viết đầy đủ chẳng hạn disabled được gán bằng chuỗi disabled sẽ được rút gọn chỉ còn tên thuộc tính. Cùng nhau, những lượt xử lý này loại bỏ các ký tự hoàn toàn không ảnh hưởng đến việc hiển thị, và đó là lý do việc thu nhỏ tiêu chuẩn an toàn cho các trang đúng cấu trúc.

Một ví dụ cụ thể

Hãy hình dung một đoạn mã có thụt lề bốn dấu cách, một chú thích HTML phía trên một div, và một ô nhập checkbox được viết với checked được gán bằng chuỗi checked. Sau khi nén, phần thụt lề và dòng xuống được gộp lại nên các thẻ nằm liền kề nhau, chú thích biến mất hoàn toàn, và ô checkbox đơn giản trở thành một input mang thuộc tính checked trơn. Trang trông và hoạt động y hệt trong trình duyệt, nhưng số byte giảm xuống, và bảng thống kê báo cáo kích thước gốc, kích thước sau khi nén và phần trăm tiết kiệm để bạn thấy được khoản lợi cho đúng tệp của mình.

Cái gì an toàn để cắt bỏ và cái gì thì rủi ro

Ranh giới cần tôn trọng là khoảng trắng mà trang thực sự phụ thuộc vào. Bên trong các phần tử pre và textarea, mọi dấu cách và dòng mới đều có ý nghĩa: chúng được hiển thị nguyên văn, nên gộp chúng lại sẽ làm thay đổi kết quả một cách thấy rõ. Sự thận trọng tương tự cũng áp dụng cho các phần tử có CSS đặt white-space để giữ nguyên định dạng. Chú thích thường an toàn để xóa, nhưng một số lại mang tính chịu lực, chẳng hạn các chú thích điều kiện cũ của Internet Explorer hay những chú thích mà một hệ thống mẫu hoặc framework đọc như dấu mốc; xóa chúng có thể làm hỏng hành vi.

Các tùy chọn nén CSS và JavaScript được dán nhãn thử nghiệm vì một lý do chính đáng. Việc nén CSS nội tuyến trong các thẻ và thuộc tính style, hay JavaScript trong các thẻ script, liên quan đến việc viết lại mã chứ không chỉ cắt bớt khoảng trắng bố cục, và vẫn tồn tại các trường hợp biên. Hãy luôn kiểm thử một trang sau khi bật chúng, đặc biệt nếu các script của bạn dựa vào định dạng cụ thể, các chỉ thị dựa trên chú thích, hay cách xử lý chuỗi mong manh.

Thu nhỏ liên hệ với gzip như thế nào

Các máy chủ gần như luôn gửi HTML đã được nén bằng gzip hoặc Brotli, và đôi khi người ta cho rằng điều đó khiến việc thu nhỏ trở nên vô nghĩa. Không phải vậy. Gzip rất giỏi nén văn bản lặp lại, nên tỷ lệ phần trăm tương đối mà nó tiết kiệm thêm trên HTML đã thu nhỏ sẽ nhỏ hơn so với trên HTML thô, nhưng hai kỹ thuật xếp chồng lên nhau: thu-nhỏ-rồi-gzip vẫn nhỏ hơn in-đẹp-rồi-gzip. Việc thu nhỏ cũng giảm số byte mà trình duyệt phải phân tích cú pháp sau khi giải nén, và nó giảm kích thước được lưu trong bộ nhớ đệm.

Hãy nghĩ về chúng như những lớp bổ trợ cho nhau. Việc thu nhỏ loại bỏ nội dung mà trình duyệt không cần; gzip và Brotli sau đó nén phần còn lại để truyền tải. Dùng cả hai cho ra khối dữ liệu nhỏ nhất từ đầu đến cuối.

Thu nhỏ nằm ở đâu trong một quy trình build

Trên một trang web ở môi trường sản xuất, việc thu nhỏ lý tưởng nhất là diễn ra tự động như một phần của bước build hoặc triển khai, để mã nguồn bạn chỉnh sửa vẫn dễ đọc trong khi đầu ra bạn phát hành vẫn nhỏ gọn. Hầu hết các bộ đóng gói hiện đại và các trình tạo trang tĩnh đều có một giai đoạn thu nhỏ HTML, và công cụ này là một cách nhanh để làm điều tương tự cho một tệp đơn lẻ, một trang đích dựng bằng tay, một mẫu email, hay một đoạn mã bạn sắp nhúng vào.

Nó cũng tiện cho việc xem xét và học hỏi: hãy dán một trang, chạy nó, và đọc phần trăm giảm để ước lượng đoạn đánh dấu của bạn đang mang theo bao nhiêu phần mỡ thừa, điều này có thể để lộ những thói quen như chú thích quá nhiều hoặc các mẫu thụt lề quá sâu đáng được xử lý ngay tại nguồn.

Những lỗi thường gặp cần tránh

Lỗi gây hại nhất là thu nhỏ nội dung vốn phụ thuộc vào khoảng trắng, rồi phát hiện ra rằng văn bản bên trong một khối pre hoặc một mẫu mã đã mất định dạng; hãy để chúng yên hoặc kiểm tra chúng cẩn thận. Một lỗi khác là cắt bỏ các chú thích điều kiện hay chú thích chỉ thị mà một thứ gì đó ở phía sau dựa vào. Một cái bẫy tinh vi hơn là chỉnh sửa trực tiếp tệp đã thu nhỏ: một khi khoảng trắng đã mất thì mã rất khó bảo trì, nên hãy luôn giữ mã nguồn dễ đọc làm nguồn chân lý và xem bản đã thu nhỏ như một sản phẩm được tạo ra. Và mỗi khi bạn bật các lượt nén CSS hoặc JS thử nghiệm, hãy kiểm thử trang trực tiếp trước khi phát hành.