Tối ưu hóa CSS (lướt web nhanh)

 CSS là một ngôn ngữ khá cơ bản và thiết yếu trong thiết kế web. Tổ hợp CSS trong toàn bộ một trang web ảnh hưởng lớn đến tốc độ hạ tải trang web đó. Nếu CSS nặng thì sẽ gây tốn nhiều thời gian cho việc tải trang web và ngược lại. Vì thế việc tối ưu hóa CSS rất cần thiết.

Sau đây là một số mẹo nhỏ giúp bạn giải quyết vấn đề này.

1. Gộp tất cả các file CSS thành 1 file CSS duy nhất.

Việc gộp các file CSS lại thành một file duy nhất nhằm mục đích giảm các HTTP request đến server, tiết kiệm thời gian request của server. Khi gộp các file CSS lại, bạn nên đánh dấu và chia vùng cho các nhóm CSS để dễ dàng cho việc sửa chữa sau này.

2. Nén CSS.

Thay vì phải viết nhiều dòng để định dạng các thuộc tính, bạn thử tận dụng tính năng tốc kí của CSS, tức là ta gộp các dòng liên quan lại thành một dòng duy nhất. 

Ví dụ:

Đối với dòng mã CSS:

#sidebar h1 {padding-top:3px;
padding-right:0;
padding-bottom:3px;
padding-left:3px; 

Nên rút ngắn lại thành như sau: 

#sidebar h1 {padding:3px 0 3px 3px;} 

Ngoài ra có thể loại bỏ các chú thích (comments) và các khoảng trống để tinh giản CSS.

Đối với cả một trang web, nếu bạn muốn nén CSS nhanh chóng thì có thể sử dụng các công cụ online như:

CSSDrive CSS Compressor

CSS Compressor

CSS Compressor tại Blog này.