Tối ưu hóa website (Phần 2)

Xem lại phần 1, Xem phần 3

Ở phần 1, mình đã trình bày về cách "nén" mã javascript, sang phần này mình sẽ giải quyết tới "anh chàng" CSS.
Vậy CSS có khả năng "nén" được như javascript không ?
Ngoài cách "nén" ra còn có cách nào để tối ưu hóa CSS không ?

Chúng ta sẽ đi vào từng vấn đề trên.
CSS cũng tương tự như javascript, là một dạng văn bản có cấu trúc, mà đã là văn bản thì ta đều có thể "nén" được, tuy nhiên, tỉ lệ nén ở CSS không nhiều, và chỉ có một cách nén duy nhất. Thông thường các trình nén CSS sẽ làm như sau:



Loại bỏ những đoạn chú thích
Chú thích của CSS được đặt trong cặp /* và */

1	/*Đây là một đoạn chú thích*/

2	body {font: normal 9pt arial;}

Sau khi loại bỏ

1	body {font: normal 9pt arial;}

Loại bỏ những khoảng trống thừa

1

body

2

{

3	background: red;

4	color: white;

5	font-size: 9pt;

6

}

Sau khi loại bỏ

1	body{background:red;color:white;font-size:9pt;}

Loại bỏ những dấu ; thừa sau mỗi thuộc tính
Thông thường dấu ; của thuộc tính cuối cùng hoặc những dấu ; liên tiếp nhau sẽ bị loại bỏ

1	body { background: red; color: white;; font-size: 9pt;}

Sau khi loại bỏ

1	body { background: red; color: white; font-size: 9pt}

Rút gọn khai báo CSS

01

body

02

{

03	border-top: 1px solid silver;

04	border-left: 1px solid silver;

05	border-right: 1px solid silver;

06	border-bottom: 1px solid silver;

07	margin-top: 5px;

08	margin-left: 10px;

09	margin-right: 10px;

10	margin-bottom: 2px;

11

}

Sau khi rút gọn

1	body { border: 1px solid silver; margin: 5px 10px 2px; }

Do thứ tự tham số của thuộc tính border: <size> <style> <color> và thứ tự tham số củamargin: <top> <left và right> <bottom>

Việc "nén" CSS không đòi hỏi khắt khe phải tuân thủ cú pháp chặt chẽ như javascript, nên chúng ta sẽ "dễ thở" hơn.

Ngoài việc "nén" mã thô ra, ta còn có thể tối ưu về tốc độ thực thi đoạn mã CSS bằng những cách sau:
Sử dụng cú pháp "chọn" (selector) đủ và đúng
Tránh tình trạng thừa không cần thiết

1	div#mydiv {...}

Chúng ta nên chuyển thành

1	#mydiv {...}

Vì id của thẻ là duy nhất, không thể tồn tại một thẻ nào khác loại với div mà có cùng id được.

Tránh sử dụng * selector

1	body * {...}

Nếu có thể, hãy sử dụng những id selector hoặc class selector

1	#mydiv {...}

2	.myclass {...}

Tránh sử dụng descendant selector

1	ul li {...}

Nên thay bằng tên class được nối bởi tên của thẻ cha, thẻ con, thẻ cháu

1	.myulclass {...}

2	.myulclass-myliclass {...}

Tránh sử dụng quá 2 cấp descendant selector
Cho dù là sử dụng class selector hay tag selector

1	.level0 .level1 .level2 level3 {...}

Nên thay bằng

1	.level0 .level1_2_3 {...}

Loại bỏ những style không cần thiết
Khi làm việc với nhiều dự án website, chúng ta thường "tái chế" lại mã, đó là đều tất yếu, nhưng cũng chính điều này làm cho những "dĩ vãng đã qua" luôn hiện hữu trong những dự án mới bởi sự "lười" chọn lọc và loại bỏ những style không cần thiết. Chúng ta cứ nghĩ rằng thôi cứ để đó, biết đâu sau này lại cần, hay để cũng chẳng sao, điều này sẽ khiến trình duyệt thêm nặng nề khi phải biên dịch mớ "kỷ niệm" đó. Nếu bạn không sử dụng, hoặc không muốn xóa đi thì hay đánh dấu chú thích bao quanh nó và những dòng chú thích này sẽ được tự động xóa đi khi sử dụng công cụ "nén" CSS mà không làm ảnh hưởng đến mã nguồn gốc.

Khai báo style nên để ở đầu trang
Nên đặt khai báo style hoặc link ở đầu tập tin html, điều này giúp cho trình duyệt biên dịch mã hiển thị cho toàn trang ngay từ ban đầu. Tránh đặt rải rác những khai báo style ở thân trang, điều này sẽ làm trình duyệt vừa biên dịch, sau đó lại phải biên dịch lại và tiến hành hiển thị lại theo cấu trúc style mới, cứ thể tiếp tục...

Khai báo kích thước hình ảnh một cách tường minh
Nên khai báo kích thước của hình ảnh (thẻ img) khi hiển thị, điều này giúp trình duyệt xác định được vùng hình ảnh sẽ chiếm dụng, từ đó tính toán được vùng hiển thị lân cận, ngược lại, trình duyệt phải tải đầy đủ hình ảnh mới có thể xác định được vùng chiếm dụng sau đó mới tải và tính toán những vùng lân cận.

1	<img src="..." width="100px" height="100px"/>

Hoặc

1	.aritcle-image {width: 100px; height: 100px;}

Sử dụng div thay vì table
Nên sử dụng div để dàn trang khi có thể, tránh dùng table để dàn trang hoặc chứa toàn bộ nội dung trang, điều này khiến trình duyệt phải tính toán lại vùng hiển thị của table ở mỗi bước tải về hay hiển thị một thẻ mới. Tất nhiên chúng ta vẫn nên sử dụng table trong những trường hợp hiển thị những dữ liệu dạng "bảng", "danh sách", "lưới" có nhiều mục

Công cụ "nén" CSS
Sử dụng công cụ nén trực tuyến tại http://www.minifycss.com/css-compressor/

• Khi vào trang ta sẽ thấy một khung nhập lớn nằm bên trái, bên phải là những tùy chọn để "nén"
• Nhập nội dung CSS cần nén vào khung CSS-Code bên trái.
• Nhấn vào nút Process CSS
• Kết quả sẽ hiển thị ngay bên dưới khung nhập.
• Với những tùy chọn từ Compression (code layout), bạn có thể chỉ định tỉ lệ nén cao hay thấp.
• Ngoài ra còn có những tùy chọn chi tiết nén khác tại khung Options