Nén HTML

Khoảng trắng quan trọng, và khoảng trắng không quan trọng

Trong HTML, khoảng trắng giữa hai phần tử inline là một dấu cách thật, và đây chính là điều phân biệt một công cụ nén cẩn thận với một công cụ làm hỏng trang. Gộp mất dấu xuống dòng giữa hai liên kết thì các từ dính liền vào nhau trên màn hình; gộp phần thụt lề bên trong khối pre hoặc textarea thì chính nội dung bị thay đổi, vì khoảng trắng ở đó là nội dung. Vì vậy, khoảng trắng chỉ bị xóa ở những chỗ chắc chắn không hiển thị, và được giữ nguyên ở những chỗ có hiển thị. Một công cụ xóa mọi khoảng trắng như nhau sẽ cho ra file nhỏ hơn và một trang sai thấy rõ.

Chú thích bị xóa, vì chúng dành cho người bảo trì mã nguồn chứ không phải cho người đọc — ngoại trừ chú thích điều kiện, vốn là chỉ thị chứ không phải ghi chú. Các thuộc tính thừa bị bỏ đi: type="text/javascript" trên thẻ script đã là mặc định suốt một thập kỷ, còn method="get" trên form chỉ nói lại điều form vốn làm.

Bỏ dấu nháy của thuộc tính là HTML hợp lệ và mặc định tắt, một cách có chủ ý. Đặc tả cho phép giá trị thuộc tính không có dấu nháy, miễn là nó không chứa dấu cách hay ký tự khó xử lý, và trình duyệt xử lý hoàn hảo. Template engine thì thường không: một biểu thức Blade, Twig, Handlebars hay JSX bên trong thuộc tính không có dấu nháy sẽ không còn được phân tích đúng, và lỗi xuất hiện lúc build trong một file chẳng ai muốn đọc. Phần tiết kiệm được thì nhỏ còn rủi ro thì không, nên bạn phải tự bật nếu muốn.

Thước đo trung thực cho những gì bạn được lợi là sau khi nén gzip, không phải trước. Máy chủ gửi HTML đã nén bằng gzip hoặc brotli, và các thuật toán này cực kỳ giỏi xử lý khoảng trắng lặp lại — nên một tài liệu nén từ 100 KB xuống 70 KB có thể chỉ giảm từ 12 KB xuống 11 KB khi truyền đi. Nén HTML đáng làm, và đó là phần nhỏ nhất trong ba phần; stylesheet và script mới là nơi chiếm nhiều dung lượng thật sự.

Khi bạn cần công cụ khác

Với cả một website chứ không phải một file, việc này nên nằm trong quy trình build thay vì trong một tab trình duyệt. Mọi framework và trình tạo trang tĩnh hiện nay đều nén HTML khi build, còn làm thủ công thì việc đó sẽ dừng ngay khi có người quên. Các thư viện đứng sau chúng cho phép cấu hình đến từng phép biến đổi riêng lẻ, rất đáng dùng khi một quy tắc cụ thể gây rắc rối.

Trước khi tối ưu mã HTML, hãy kiểm tra xem trang thực sự nặng bao nhiêu. Ở gần như mọi website thực tế, HTML chỉ là số lẻ so với ảnh, phông chữ và JavaScript — Lighthouse hoặc bảng Network của chính trình duyệt sẽ cho bạn biết trong vài giây, và câu trả lời thường là một ảnh banner chưa tối ưu tốn nhiều hơn toàn bộ mã HTML trên trang.