Trình thu nhỏ HTML

Trình thu nhỏ HTML là công cụ miễn phí giúp loại bỏ các ký tự không cần thiết khỏi HTML, tạo ra phiên bản gọn hơn và hiển thị số ký tự trước lẫn sau khi xử lý.

Thu nhỏ HTML có tác dụng gì?

Thu nhỏ HTML làm giảm kích thước tài liệu HTML bằng cách loại bỏ phần định dạng không cần thiết khi gửi nội dung đến trình duyệt. Công cụ thường xử lý thụt lề, dấu xuống dòng và khoảng trắng dư thừa giữa các phần tử. Kết quả mong muốn là mã đánh dấu tương đương nhưng có ít ký tự hơn.

Việc thu nhỏ thường được thực hiện trong quá trình dựng bản phát hành hoặc ngay trước khi triển khai HTML tĩnh. Cách này có thể giảm lượng dữ liệu truyền đi, dù cơ chế nén HTTP như Brotli hoặc gzip thường giúp giảm thêm và mức giảm thường lớn hơn. Hai thao tác bổ trợ cho nhau vì thu nhỏ thay đổi mã nguồn, còn nén thay đổi cách mã nguồn được truyền.

Hãy lưu mã nguồn HTML dễ đọc, chưa thu nhỏ trong hệ thống quản lý phiên bản. HTML đã thu nhỏ khó xem xét, so sánh và gỡ lỗi hơn, đặc biệt khi thông báo lỗi chỉ đến một dòng và cột trong tài liệu đã bị gộp thành một dòng rất dài.

Cách dùng Trình thu nhỏ HTML

Nhập tài liệu nguồn vào trường HTML rồi chạy công cụ. Mã nguồn rút gọn sẽ xuất hiện trong HTML đã thu nhỏ, kèm theo Số ký tự HTML và Số ký tự HTML đã thu nhỏ.

1. Dùng toàn bộ tài liệu HTML hoặc một đoạn mã độc lập, đầy đủ.
2. Chạy quá trình thu nhỏ rồi kiểm tra mã đánh dấu được trả về.
3. So sánh hai số lượng ký tự để xác nhận thao tác đã giúp giảm đáng kể.
4. Kiểm thử tài liệu HTML đã thu nhỏ và kết quả hiển thị của tài liệu trong trình duyệt trước khi thay thế tệp đang dùng trên hệ thống thực tế.

Quá trình xử lý diễn ra trên máy chủ. Dữ liệu bạn nhập được gửi đến máy chủ qua HTTPS và không được lưu trữ. Không gửi mã nguồn bí mật nếu tổ chức của bạn yêu cầu toàn bộ việc xử lý mã phải diễn ra trên máy cục bộ.

Cách đọc kết quả đã thu nhỏ

Kết quả hiển thị mã đánh dấu đã thu nhỏ cùng số ký tự trước và sau khi xử lý. Giá trị thấp hơn trong Số ký tự HTML đã thu nhỏ cho biết một số ký tự đã bị loại bỏ, nhưng đây không phải là phép đo kích thước tệp tải xuống.

Số lượng được tính bằng phương pháp đo độ dài chuỗi có hỗ trợ ký tự nhiều byte. Vì vậy, chữ cái có dấu và các hệ chữ viết không dùng bảng chữ cái Latin được tính là ký tự thay vì chỉ được đếm như từng byte riêng lẻ. Một ký hiệu hiển thị được tạo từ nhiều điểm mã Unicode vẫn có thể được tính là nhiều ký tự.

Các trường kết quả không có báo cáo xác thực, vì vậy không nên dùng công cụ này như một trình kiểm tra tính hợp lệ của HTML. Công cụ có thể trả về mã rút gọn mà không cảnh báo về cấu trúc lồng sai, ID trùng lặp, thiếu thẻ đóng bắt buộc hoặc giá trị thuộc tính chứa khoảng trắng nhưng không đặt trong dấu nháy. Dấu phẩy ở cuối không phải là lỗi cú pháp HTML, dù dấu phẩy như vậy trong JSON hoặc JavaScript nhúng vẫn có thể khiến nội dung nhúng bị lỗi.

Ví dụ thực tế và các trường hợp đầu vào phức tạp

Một trường hợp thu nhỏ đơn giản là loại bỏ phần thụt lề quanh các phần tử khối thông thường.

Đầu vào, trong đó \n biểu thị dấu xuống dòng <main>\n <p>Ready</p>\n</main>

Dạng rút gọn <main><p>Ready</p></main>

Khoảng trắng trong nội dung văn bản cần được xử lý cẩn thận hơn. Chẳng hạn, khoảng trắng giữa hai phần tử nội tuyến có thể xuất hiện trên trang được hiển thị.

Đầu vào <span>Account</span> <span>settings</span>

Dạng rút gọn không an toàn <span>Account</span><span>settings</span>

Dạng thứ hai có thể hiển thị thành "Accountsettings". Luôn kiểm tra nội dung nội tuyến, đừng cho rằng mọi khoảng cách giữa các thẻ đều có thể bỏ đi.

• Khoảng trắng và dấu xuống dòng bên trong <pre>, <textarea> cùng các nội dung tương tự có phụ thuộc vào khoảng trắng có thể mang ý nghĩa.
• Số và dấu câu trong văn bản hoặc giá trị thuộc tính là nội dung của tài liệu, không phải phần định dạng cần loại bỏ.
• Ký tự có dấu và ký tự không thuộc bảng chữ cái Latin là văn bản HTML hợp lệ khi tài liệu sử dụng đúng bảng mã ký tự.
• Biểu thức mẫu, chỉ thị phía máy chủ và chú thích có điều kiện có thể tuân theo những quy tắc mà một trình thu nhỏ HTML thông thường không hiểu được.
• Đầu vào HTML trống không có gì hữu ích để thu nhỏ. Với tài liệu HTML rất dài, hãy dùng quy trình dựng HTML có thể lặp lại thay vì sao chép thủ công.

Khi nào nên thu nhỏ HTML?

Nên thu nhỏ HTML khi cần chuẩn bị một tệp nguồn dễ đọc để đưa vào môi trường thực tế và kết quả sẽ được phân phối nhiều lần. Trang đích tĩnh, bản dựng tài liệu và mẫu được kết xuất phía máy chủ đều có thể thêm bước thu nhỏ trước khi triển khai.

Thường không cần thu nhỏ HTML vốn đã được thu nhỏ, vì xử lý thêm một lần có thể chỉ giảm rất ít hoặc không giảm được gì. Cũng không cần định dạng đẹp JSON hoặc HTML mà chỉ máy đọc, trừ khi có người cần gỡ lỗi. Với HTML của bên thứ ba, công cụ dành cho nhà phát triển trong trình duyệt hoặc trình định dạng thường hữu ích hơn, vì việc thu nhỏ khiến mã đánh dấu lạ trở nên khó kiểm tra.

Không dùng thao tác thu nhỏ HTML để sửa mã đánh dấu không hợp lệ hoặc sai cấu trúc. Nếu mã đánh dấu hoạt động khác nhau giữa các trình duyệt, hãy xác thực và kiểm thử mã nguồn dễ đọc trước. Khi trang được tạo từ Markdown, Markdown sang HTML có thể tạo mã đánh dấu trước bước thu nhỏ cuối cùng dành cho môi trường thực tế.

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

Có thể thu nhỏ HTML chứa CSS hoặc JavaScript nội tuyến không?

CSS và JavaScript nội tuyến tuân theo ngữ pháp riêng, vì vậy không nên cho rằng quá trình xử lý HTML sẽ tối ưu cả nội dung của chúng. Hãy dùng Trình thu nhỏ CSS hoặc Trình thu nhỏ JS cho các phần phù hợp, sau đó kiểm thử tài liệu hoàn chỉnh vì chuỗi thẻ đóng nhúng có thể ảnh hưởng đến cách HTML được phân tích.

HTML đã thu nhỏ có giúp cải thiện thứ hạng tìm kiếm không?

Bản thân việc thu nhỏ không làm cho nội dung trở nên liên quan hơn đối với công cụ tìm kiếm. Thao tác này có thể giảm kích thước dữ liệu truyền, nhưng bộ nhớ đệm, cơ chế nén, hình ảnh, tập lệnh và thời gian phản hồi của máy chủ cũng ảnh hưởng đến quá trình phân phối trang. Khi chuẩn bị tệp cho môi trường thực tế, hãy giữ nguyên tiêu đề, siêu dữ liệu, dữ liệu có cấu trúc và nội dung hiển thị.

Có thể thu nhỏ mẫu Twig, Blade hoặc các mẫu HTML khác không?

Cú pháp mẫu không phải HTML thông thường và có thể phụ thuộc vào khoảng trắng hoặc dấu phân cách mà một trình thu nhỏ phổ thông không nhận biết được. Cách an toàn hơn là thu nhỏ kết quả đã kết xuất, hoặc dùng quy trình dựng có hỗ trợ cú pháp mẫu rồi kiểm thử trên các trang đại diện.

Tại sao số ký tự khác với kích thước tệp?

Ký tự và byte là hai phép đo khác nhau trong các bảng mã Unicode như UTF-8. Nhiều ký tự ASCII chiếm một byte, trong khi các ký tự khác có thể chiếm nhiều byte. Tệp cũng có thể chứa dấu thứ tự byte hoặc dùng kiểu xuống dòng làm thay đổi kích thước tính theo byte.

Thu nhỏ HTML có xóa chú thích một cách an toàn không?

Chú thích thường có thể được xóa, nhưng một số chú thích chứa chỉ thị dựng, lệnh chèn nội dung phía máy chủ hoặc mã đánh dấu tương thích. Đừng cho rằng mọi chú thích đều có thể bỏ đi. Hãy kiểm tra mã nguồn được trả về và trang đã kết xuất nếu chú thích có vai trò vận hành trong dự án.

Kiểm tra lần cuối

So sánh trang được hiển thị trước và sau khi thu nhỏ, đặc biệt chú ý đến khoảng trắng nội tuyến, văn bản được định dạng sẵn, biểu mẫu và tập lệnh nhúng. Giữ lại bản gốc dễ đọc, xác thực riêng mã đánh dấu và chỉ triển khai bản đã thu nhỏ sau khi trang hoạt động đúng như mong đợi.