Nén HTML online: ba tùy chọn, con số tiết kiệm thật và những chỗ nén hỏng trang
Công cụ rút gọn mã HTML bằng cách xóa chú thích, gộp khoảng trắng và bỏ thuộc tính rỗng, ba việc này bật tắt độc lập bằng ba công tắc. Kết quả hiện song song với bản gốc kèm bảng đối chiếu độ dài trước và sau cùng tỷ lệ tiết kiệm, cập nhật ngay sau mỗi ký tự bạn gõ.
Tính năng nổi bật
- Công tắc xóa toàn bộ chú thích trong mã, kể cả chú thích nhiều dòng
- Công tắc gộp khoảng trắng: bỏ khoảng trắng giữa các thẻ và gộp mọi chuỗi khoảng trắng còn lại thành một dấu cách
- Công tắc bỏ thuộc tính có giá trị rỗng
- Bảng đối chiếu độ dài bản gốc, độ dài bản nén, số ký tự tiết kiệm và tỷ lệ phần trăm
- Kết quả tính lại ngay sau mỗi thay đổi, không cần bấm nút xử lý
- Hai ô đặt song song để so trực tiếp bản gốc với bản đã nén
- Có sẵn một đoạn mã mẫu để bạn thử ngay trước khi dán mã thật
- Nút sao chép toàn bộ kết quả, chạy hoàn toàn trên trình duyệt
Nén HTML tiết kiệm được bao nhiêu, nói thẳng con số
Đây là chỗ nhiều bài viết nói quá lên nên cần nói rõ. Với một trang HTML viết tay có thụt đầu dòng đầy đủ, việc xóa chú thích và gộp khoảng trắng thường cắt được khoảng năm tới mười lăm phần trăm số ký tự, con số hiển thị trong bảng đối chiếu chính là mức đó. Nhưng con số ấy đo trên tệp thô, trong khi máy chủ gửi tệp tới trình duyệt gần như luôn qua một lớp nén, mà thuật toán nén lại rất giỏi xử lý những chuỗi lặp như dãy khoảng trắng ở đầu dòng. Vì vậy sau khi qua lớp nén, phần tiết kiệm thêm nhờ nén HTML thường chỉ còn quanh mức một tới ba phần trăm. Nói cách khác: nếu website của bạn chưa bật nén ở máy chủ thì việc cần làm trước tiên là bật nó, chứ không phải nén HTML bằng tay. Nén HTML vẫn đáng làm ở chỗ khác: khi mã được nhúng thẳng vào một trường dữ liệu có giới hạn ký tự, khi làm mẫu thư điện tử vốn bị nhiều dịch vụ cắt bớt nếu vượt ngưỡng dung lượng, hoặc khi bạn muốn giấu chú thích nội bộ trước khi giao mã cho bên ngoài.
Lợi ích khi sử dụng
- Thấy ngay mức tiết kiệm thực tế thay vì đoán mò
- Ba tùy chọn tách riêng nên bạn chỉ bật đúng thứ mình cần
- Xóa được chú thích nội bộ trước khi giao mã cho bên thứ ba
- Kết quả cập nhật tức thì nên thử được nhiều tổ hợp trong vài giây
- Mã nguồn không rời khỏi trình duyệt của bạn
Cách nén một khối HTML
- 1Dán mã HTML vào ô bên trái, thay cho đoạn mã mẫu có sẵn.
- 2Bật hoặc tắt ba công tắc tùy nhu cầu, kết quả ở ô bên phải đổi theo ngay lập tức.
- 3Nhìn bảng đối chiếu phía dưới để biết mức tiết kiệm thực tế trước khi quyết định có dùng bản nén hay không.
- 4Nếu mã có thẻ giữ nguyên định dạng, ô nhập nhiều dòng hoặc mã kịch bản nhúng, hãy tắt công tắc gộp khoảng trắng và xử lý riêng những vùng đó.
- 5Bấm sao chép rồi thử tải trang bằng bản nén trước khi đưa lên môi trường chạy thật.
Ba công tắc làm chính xác việc gì
Công tắc xóa chú thích tìm mọi đoạn nằm giữa cặp dấu mở và đóng chú thích của HTML rồi xóa sạch, kể cả chú thích trải dài nhiều dòng. Đây thường là phần tiết kiệm nhiều nhất trong mã do các hệ quản trị nội dung sinh ra, vì chúng hay chèn chú thích đánh dấu đầu và cuối từng khối. Công tắc gộp khoảng trắng chạy hai bước: bước đầu bỏ mọi khoảng trắng nằm giữa dấu đóng thẻ và dấu mở thẻ kế tiếp, bước sau gộp mọi chuỗi khoảng trắng còn lại trong toàn bộ tài liệu thành một dấu cách duy nhất, rồi cắt khoảng trắng thừa ở hai đầu. Công tắc bỏ thuộc tính rỗng xóa những thuộc tính được gán chuỗi rỗng, dạng tên thuộc tính kèm dấu bằng và hai dấu nháy liền nhau. Công tắc này mặc định tắt và bạn nên cân nhắc trước khi bật, vì không phải thuộc tính rỗng nào cũng vô nghĩa. Trường hợp rõ nhất là thuộc tính mô tả thay thế của ảnh: để trống có chủ ý là cách báo cho trình đọc màn hình biết ảnh chỉ mang tính trang trí và nên bỏ qua, còn xóa hẳn thuộc tính đó lại khiến trình đọc màn hình đọc tên tệp ảnh lên.
Những vùng mã bị hỏng khi gộp khoảng trắng
Vùng nguy hiểm nhất là mã kịch bản nhúng trong trang. Nếu trong đó có chú thích một dòng bắt đầu bằng hai dấu gạch chéo, việc gộp toàn bộ tài liệu về một dòng sẽ kéo tất cả mã phía sau nằm chung dòng với chú thích ấy, và trình duyệt sẽ coi cả phần còn lại là chú thích. Trang không báo lỗi hiển thị nhưng mọi chức năng chạy bằng mã kịch bản sẽ chết. Trường hợp tương tự xảy ra với những câu lệnh dựa vào dấu xuống dòng để tự chèn dấu chấm phẩy. Vùng nguy hiểm thứ hai là thẻ giữ nguyên định dạng và ô nhập nhiều dòng, nơi mọi khoảng trắng đều là nội dung hiển thị thật: một khối mã ví dụ trình bày trong thẻ giữ nguyên định dạng sẽ bị bóp thành một dòng liền. Vùng thứ ba tinh tế hơn là khoảng trắng giữa các phần tử hàng ngang. Trong HTML, một dấu cách giữa hai thẻ ngoài hàng là nội dung có ý nghĩa, nên bỏ nó đi khiến hai chữ dính liền nhau, hoặc khiến các ô danh sách xếp ngang mất khoảng cách. Nếu bạn dùng mã HTML thuần chưa qua khung dựng giao diện, đây là lỗi rất dễ gặp và rất khó nhận ra cho tới khi có người báo.
Con số trong bảng đối chiếu nên hiểu thế nào
Bảng đối chiếu đếm số ký tự của chuỗi trước và sau khi xử lý rồi tính hiệu số và tỷ lệ. Có một chi tiết cần biết với nội dung tiếng Việt: cách đếm này tính theo đơn vị ký tự trong bộ nhớ chứ không theo byte thật khi tệp được lưu. Với bảng mã phổ dụng hiện nay, chữ cái không dấu chiếm một byte, còn chữ có dấu tiếng Việt chiếm ba byte. Nghĩa là một trang tiếng Việt có dung lượng tệp thật lớn hơn khá nhiều so với con số hiển thị, nhưng phần bị xóa lại chủ yếu là khoảng trắng và chú thích vốn đều là ký tự một byte. Hệ quả thực tế là tỷ lệ tiết kiệm tính theo byte thật sẽ thấp hơn tỷ lệ phần trăm hiển thị trong bảng. Muốn biết con số thật, hãy lưu cả hai bản ra tệp rồi so dung lượng trong trình quản lý tệp. Còn muốn biết con số cuối cùng mà người dùng thực sự tải về, hãy mở thẻ mạng trong công cụ dành cho nhà phát triển và đọc cột dung lượng truyền, vì đó là dung lượng sau khi đã qua lớp nén của máy chủ.
Thứ tự việc cần làm nếu mục tiêu là trang tải nhanh
Nén HTML nằm khá cuối trong danh sách ưu tiên, nên hãy làm những việc có tác động lớn trước. Việc thứ nhất là bật nén ở máy chủ, ưu tiên thuật toán nén hiện đại và lùi về thuật toán cũ hơn cho trình duyệt không hỗ trợ; riêng bước này thường cắt được khoảng bảy mươi tới tám mươi phần trăm dung lượng tệp chữ. Việc thứ hai là tối ưu ảnh, vì ảnh chiếm phần lớn dung lượng của hầu hết trang: chuyển sang định dạng hiện đại, đặt kích thước đúng bằng kích thước hiển thị, và bật tải trễ cho ảnh nằm dưới màn hình đầu. Việc thứ ba là rà soát mã kịch bản của bên thứ ba, đây thường là thứ nặng nhất và cũng là thứ dễ cắt bớt nhất. Việc thứ tư là đặt thời gian lưu đệm hợp lý cho tài nguyên tĩnh. Sau bốn việc đó, nén HTML mới đáng bàn tới, và khi đó nên để công cụ dựng bản phát hành tự làm trong quy trình chứ không nén thủ công, vì nén thủ công là bước dễ bị quên và dễ khiến bản chạy thật lệch khỏi bản mã nguồn.
Khi nào nén thủ công thực sự có ích
Trường hợp thứ nhất là mã nhúng vào một trường dữ liệu có giới hạn ký tự: mô tả sản phẩm trong sàn thương mại điện tử, nội dung một khối tùy chỉnh trong hệ quản trị nội dung, hay giá trị của một biến cấu hình. Ở đó mỗi ký tự đều tính và không có lớp nén nào can thiệp. Trường hợp thứ hai là mẫu thư điện tử: một số dịch vụ thư cắt bớt nội dung khi vượt ngưỡng dung lượng nhất định và phần bị cắt sẽ hiện thành một liên kết xem thêm gây khó chịu, nên rút gọn mã giúp giữ toàn bộ nội dung trong thư. Trường hợp thứ ba là khi bạn cần xóa sạch chú thích trước khi giao mã cho khách hàng hoặc cho bên thứ ba, vì chú thích thường chứa ghi chú nội bộ, tên nhân sự, đường dẫn hệ thống hoặc thông tin phiên bản không nên để lộ. Trường hợp thứ tư là dán một đoạn HTML vào ô nhập chỉ nhận một dòng. Ngoài bốn nhóm này, nếu bạn đang tối ưu một website thật, hãy đưa việc nén vào quy trình dựng bản phát hành thay vì làm bằng tay trên trình duyệt.
Câu hỏi thường gặp (FAQ)
Nén HTML tiết kiệm được bao nhiêu phần trăm?
Trên tệp thô thường là năm tới mười lăm phần trăm với mã có thụt đầu dòng đầy đủ. Nhưng sau khi qua lớp nén của máy chủ, phần tiết kiệm thêm chỉ còn quanh một tới ba phần trăm, vì thuật toán nén vốn đã xử lý rất tốt các chuỗi khoảng trắng lặp lại.
Có nên nén HTML nếu máy chủ đã bật nén không?
Lợi ích còn lại rất nhỏ nên không đáng làm thủ công. Nếu vẫn muốn, hãy đưa bước nén vào quy trình dựng bản phát hành để nó chạy tự động, thay vì nén tay rồi dán lên, vì cách sau khiến bản chạy thật lệch khỏi mã nguồn và rất khó bảo trì.
Nén xong trang bị hỏng chức năng, nguyên nhân là gì?
Thủ phạm hay gặp nhất là mã kịch bản nhúng có chú thích một dòng bắt đầu bằng hai dấu gạch chéo. Khi mọi thứ bị gộp về một dòng, toàn bộ mã phía sau chú thích đó bị coi là chú thích và không chạy nữa. Hãy tách mã kịch bản ra tệp riêng, hoặc tắt công tắc gộp khoảng trắng.
Vì sao khối mã ví dụ trên trang bị bóp thành một dòng?
Vì nội dung trong thẻ giữ nguyên định dạng coi mọi dấu cách và dấu xuống dòng là nội dung hiển thị thật, mà công tắc gộp khoảng trắng lại xóa hết chúng. Với trang có khối mã ví dụ, hãy tắt công tắc đó hoặc dùng công cụ nén biết bỏ qua các thẻ giữ nguyên định dạng.
Có nên bật tùy chọn bỏ thuộc tính rỗng không?
Cân nhắc kỹ. Thuộc tính mô tả thay thế của ảnh để trống có chủ ý là cách báo cho trình đọc màn hình biết ảnh chỉ mang tính trang trí; xóa hẳn thuộc tính đó khiến trình đọc màn hình đọc tên tệp ảnh lên. Một số thuộc tính rỗng khác cũng có ý nghĩa với biểu mẫu.
Xóa chú thích có ảnh hưởng gì tới SEO không?
Không, vì công cụ tìm kiếm không đọc nội dung chú thích. Lợi ích thật của việc xóa chú thích nằm ở chỗ khác: chú thích thường chứa ghi chú nội bộ, tên nhân sự, đường dẫn hệ thống hay thông tin phiên bản mà bạn không nên để lộ ra mã nguồn công khai.
Vì sao hai chữ bị dính liền nhau sau khi nén?
Vì khoảng trắng giữa hai thẻ ngoài hàng là nội dung có ý nghĩa trong HTML, mà công cụ lại xóa mọi khoảng trắng nằm giữa dấu đóng thẻ và dấu mở thẻ. Đây cũng là nguyên nhân khiến các ô danh sách xếp ngang mất khoảng cách sau khi nén.
Con số byte trong bảng đối chiếu có chính xác không?
Nó đếm theo ký tự chứ không theo byte thật của tệp. Với nội dung tiếng Việt, chữ có dấu chiếm ba byte trong khi chữ không dấu chỉ chiếm một, nên dung lượng tệp thật lớn hơn con số hiển thị và tỷ lệ tiết kiệm thật cũng thấp hơn tỷ lệ hiển thị.
Mã HTML tôi dán vào có bị gửi đi đâu không?
Không. Ba phép xử lý đều chạy bằng JavaScript ngay trong tab trình duyệt, không có lời gọi mạng nào mang nội dung đi và không có lịch sử nào được ghi. Đóng tab là mã biến mất, nên bạn dùng được với mã nguồn nội bộ chưa công bố.
Công cụ có rút gọn tên lớp hay xóa thuộc tính thừa không?
Không. Nó chỉ làm ba việc là xóa chú thích, gộp khoảng trắng và bỏ thuộc tính rỗng. Việc rút gọn tên lớp đòi hỏi phải sửa đồng bộ cả tệp định kiểu và mã kịch bản, nên chỉ nên làm bằng công cụ chạy trong quy trình dựng bản phát hành.
Nén HTML có giúp cải thiện điểm tốc độ trang không?
Tác động rất nhỏ so với những việc khác. Xếp theo mức ảnh hưởng, trước tiên là bật nén ở máy chủ, rồi tối ưu ảnh, rồi cắt bớt mã kịch bản của bên thứ ba, rồi đặt thời gian lưu đệm hợp lý. Nén HTML chỉ nên là bước cuối trong danh sách đó.
Nén HTML cho mẫu thư điện tử có an toàn không?
Khá an toàn và cũng là một trong những trường hợp đáng làm nhất, vì nhiều dịch vụ thư cắt bớt nội dung khi vượt ngưỡng dung lượng. Chỉ cần lưu ý mẫu thư thường dùng bảng và thẻ ngoài hàng, nên hãy gửi thử tới vài dịch vụ thư khác nhau trước khi gửi hàng loạt.
Từ khóa liên quan
- nén html online
- html minifier online
- rút gọn code html
- xóa comment trong html
- giảm dung lượng file html
- minify html miễn phí
- tối ưu tốc độ tải trang
- nén gzip brotli máy chủ
- nén html cho email template
- gộp html thành một dòng
- xóa khoảng trắng trong html
- thuộc tính alt rỗng của ảnh
- lỗi sau khi minify html
- thẻ pre bị mất định dạng
- so sánh dung lượng trước và sau khi nén
- công cụ minify chạy trên trình duyệt
- tối ưu html cho seo
- nén file html không cần cài đặt
- minify html và css
- giảm kích thước trang web
