Tiết kiệm mã HTML như thế nào

Xem lại Phần 1, Phần 2

Ở 2 bài trước mình đã trình bày về tối ưu hóa CSS và Javascript, hôm nay mình xin trình bày về tối ưu hóa HTML. HTML là một phần mã không thể thiếu của một trang web, ở bất kỳ đâu cũng có HTML, vì vậy nếu ta tối ưu hóa được HTML là đã cải thiện tốc độ web khá nhiều. HTML như các bạn đã biết, là một ngôn ngữ đánh dấu có cấu trúc, nó có những cú pháp tùy tiện hơn Javascript và CSS, dù bạn có viết sai cú pháp thì nó vẫn có khả năng hiển thị, còn hiển thị "cái gì" thì không xác định được. Để tối ưu HTML gồm có những công việc sau:

Tối ưu cấu trúc sử dụng thẻ
Việc sử dụng thẻ một cách hợp lý, "tiết kiệm", nói chung là càng ít thẻ càng tốt. Ít thẻ thì được lợi gì ? Ít thẻ thì mã ít hơn, trong sáng hơn, dễ hiểu hơn, ít thẻ thì trình duyệt biên dịch nhẹ gánh biên dịch hơn, giảm thiểu trường hợp "cạn" bộ nhớ. Vậy tiêu hoang thẻ là như thế nào ? Xem đoạn mã dưới:

<table class="box">
<tr>
<td class="box-header"></td>
</tr>
<tr>
<td class="box-body">Nội dung</td>
</tr>
<tr>
<td class="box-footer"></td>
</tr>
</table>

"Tình hình" là đoạn mã trên có 7 thẻ, nếu sử dụng một cách khác:
[HR]



<div class="box">
<div class="box-header"></div>
<div class="box-body">Nội dung</div>
<div class="box-footer"></div>
</div>

Ta tiết kiệm được những 3 thẻ, hì hì. Vậy có thể rút ra được chút xíu kết luận là dùng DIV thay cho TABLE thì kinh tế hơn về thẻ, chỉ nên dùng TABLE trong những trường hợp bất khả kháng. Xem tiếp đoạn mã sau:

<div class="box">
<div class="box-header"><img src="box-icon.png"/><span>Tiêu đề</span></div>
<div class="box-body">Nội dung</div>
<div class="box-footer"></div>
</div>

Lần này chắc ăn dùng DIV rồi, nhưng khổ nỗi vẫn còn xài hoang:

<style type="text/css">
.box-header {background: url(box-icon.png) 5px center no-repeat; padding-left: 25px;}
</style>
<div class="box">
<div class="box-header">Tiêu đề</div>
<div class="box-body">Nội dung</div>
<div class="box-footer"></div>
</div>

Chúng ta lại "thu hồi" được vốn thêm 2 thẻ nữa bằng cách sử dụng background/background-image khi có thể, và nếu không có tác dụng gì đặt biệt thì đừng tự thêm những tag vô tri vào.

Chúng ta cũng tránh dùng <br/> mà nên thay bằng margin-top / margin-bottom, tránh dùng <b><i> mà hãy dùng những thuộc tính CSS thay thế. Tránh dùng nhiều thẻ cũng đồng thời giảm thiểu số cấp lồng nhau của các thẻ, làm cho mã HTML "sạch", mạch lạc và đễ đọc.

Sử dụng ứng dụng nén mã
Thực ra khi dùng cách tối ưu này, hiệu quả về kích thước tập tin HTML không giảm nhiều, để có thể cực kỳ tiết kiệm, ta nên sử dụng một ứng dụng "nén" mã HTML. Ứng dụng "nén" mã HTML sẽ làm thay ta những công việc sau:

Loại bỏ những đoạn chú thích
Chú thích trong HTML là những đoạn nằm bên trong cặp <!-- và -->. Tuy nhiên một số đoạn không phải là chú thích mà chính là phần khai báo điều kiện (condition comment) của những trình duyệt họ IE, vì vậy những đoạn này sẽ không bị loại bỏ.

"Xử" những khoảng trống thừa

<b>Hello </b> <span>world</span>

Trong đoạn mã trên có 2 điểm cần lưu ý:

1. Những khoảng trống nằm trong thẻ <b> và sau chữ "Hello" là cần thiết, nhưng nó chỉ có tác dụng tương đương một khoảng trống, cho dù là có hàng trăm khoảng trống tại đó.
2. Những khoảng trống nằm giữa thẻ <b> và <span> là không cần thiết, dù có bao nhiêu khoảng trống thì trình duyệt cũng không hiển thị lên, nhưng... riêng IE6 thì có, vì vậy đôi khi chúng ta dùng khoảng trống để tạo giãn cách giữa các mục, nhìn ngắm trên IE6 rất OK, nhưng sau khi khoảng trống bị loại bỏ đi thì nội sẽ bị dính lại với nhau trông rất phản cảm, chính vì vậy tránh dùng khoảng trống để phân cách các mục mà nên dùng margin-left/margin-right thay thế.

Đoạn mã trên sau khi "tỉa":

<b>Hello </b><span>world</span>



Loại bỏ những thuộc tính mặc định của thẻ
Trong HTML, một số thẻ có những thuộc tính mặc định riêng, ví dụ:

• Thẻ <style> có thuộc tính type mặc định là "text/css"
• Thẻ <script> có thuộc tính type mặc định là "text/javascript"
• Thẻ <input> có thuộc tính type mặc định là "text"
• Tuy nhiên ở một số trình duyệt thì những thuộc tính nêu trên sẽ bắt buộc phải khai báo

Rút gọn những thuộc tính theo chuẩn XHTML
Theo chuẩn XHTML thì một thuộc tính phải đi kèm với một giá trị, nhưng trong HTML thì có thể không cần, đơn cử như:

<input type="button" disabled="disabled"/>
<!-- Có thể rút gọn thành -->
<input type="button" disabled>

Tương tự vậy thì những thuộc tính <option selected="selected"> <input type="checkbox" checked="checked"/> đều có thể rút gọn được.

Loại bỏ những thẻ đóng không cần thiết
Đôi khi một số ứng dụng nén mã còn "cả gan" loại bỏ cả những thẻ đóng, nếu không có thẻ đóng thì mã của chúng ta sẽ bị lỗi ?? Tất nhiên là thế, nhưng vẫn có một số ngoại lệ:

<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>

Sau khi loại bỏ

<ul>
<li>Item1
<li>Item2
<li>Item3
<li>Item4
</ul>

Điều này hợp lệ, vì trình duyệt sẽ hiểu, thẻ li không bao giờ xuất hiện bên ngoài thẻ ul hoặc ol, chính vì vậy không thể nào có 2 thẻ li lồng nhau trực tiếp, vì vậy khi gặp một thẻ mở li thì có nghĩa tại điểm đó là phần kết thúc của thẻ li trước đó, điều này cũng đúng với những thẻ <option>

Công cụ "nén" mã HTML trực tuyến
http://prettydiff.com/ Trang này có công cụ khá phong phú vừa có thể "nén" được HTML, mà cũng kể thể "bung nén" HTML(làm đẹp lại HTML từ mớ bòng bong mã dính liền)
Đây chỉ là công cụ tham khảo, chỉ dùng để nén những tập tin HTML tĩnh, những đoạn HTML nhỏ, còn đối với những website động, thì khi nội dung trang được phát sinh thành HTML từ mã lập trình, ngay tại thời điểm trước khi truyền tải xuống cho máy khách, hệ thống sẽ gọi những bộ lọc (nếu có cài đặt) để thực hiện việc nén tương tự như những công cụ trực tuyến trên.