CSS là một phần không thể thiếu trong thiết kế. Nó chính là cách hiển thị giao diện bên ngoài của mỗi website. Nhưng không phải ai trong chúng ta cũng biết cách để tối ưu hóa chúng cho SEO cũng như tăng tốc cho web.Để hiểu hơn về bài này bạn nên xem trước bài
CSS là gì nhé.
1. Kết hợp các mã màu một cách tối đa
Ví dụ:
article { background-color: rgb(255,255,255);
/*Hoặc*/
article { background-color: #ffffff; }
Nhưng có thể viết lại ngắn hơn:
article { background: #fff; }
Với những mã màu thập lục có dạng #xxxxxx hoặc #xxyyzz thì lần lượt có thể viết gọn lại thành #xxx và #xyz. Ví dụ: #ff0000(màu đỏ) thành #f00, #000000(màu đen) thành #000
2. Các thuộc tính trùng lặp nên viết gọn lại
Ví dụ
p {
font-family: Arial;
font-weight: normal;
line-height: 1.33em;
font-size: 1.22em;
}
…
p {
font-family: Georgia, serif;
font-weight: normal;
line-height: 1.33em;
font-size: 1.33em;
}
Hoàn toàn có thể viết lại thành:
p {
font-family: Georgia, serif;
font-weight: normal;
line-height: 1.33em;
font-size: 1.33em;
}
3. Rút gọn cú pháp nếu có thể
Ví dụ về thẻ P được css lại:
p {
font-family: Georgia, serif;
font-weight: normal;
line-height: 1.33em;
font-size: 1.33em;
}
Nhưng có thể dùng cú pháp sau
p {
font: normal 1.33em/1.33 Georgia, serif;
}
Một số ví dụ hay gặp trong khi làm CSS
/* 4 thuộc tính background*/
background-color: #fff;
background-image: url(images/bg.png);
background-repeat: repeat-x;
background-position: 0 0;
/* Có thể viết gọn lại thành */
background: #fff url(i/dope.png) repeat-x 0 0;
/* 4 thuộc tính margin */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
/* Dưới là cách viết gọn cho 4 dòng trên */
margin: 10px 20px 10px 20px;
/* 3 thuộc tính border*/
border-width: 1px;
border-style: solid;
border-color: red;
/* Chỉ cần viết */
border: 1px solid red;
4. Các giá trị sử dụng số nên rút gọn lại
Ví dụ sử dụng thuộc tính margin:
margin: 10px 20px 10px 20px;
Vì margin-top và margin-bottom, margin-left và margin-right trùng nhau về giá trị, bạn hoàn toàn có thể viết lại thành
margin: 10px 20px;
5. Phần nguyên và đơn vị có giá trị bằng 0
Ví dụ:
opacity: 0.5; Có thể thay thế bằng: opacity: .5;
padding: 0px; Có thể thay thế bằng: padding: 0;
6. Có thể bỏ dấu ; nằm sau giá trị của thuộc tính cuối cùng
Ví dụ
p {
font-family: Georgia, serif;
font-weight: normal;
line-height: 1.33em;
font-size: 1.33em; (Có thể bỏ dấu
}
Và hoàn toàn có thể tối ưu hơn dưới dạng:
p { font: normal 1.33em/1.33 Georgia, serif }
7. Gỡ bỏ các dòng comment trong file css
Nhiều comment quá sẽ làm tổn hại đến tài nguyên server, băng thông, thời gian load, nếu muốn tối ưu tối đa bạn cũng có thể loại bỏ những comment.
8. Kết hợp toàn bộ các file css vào 1 tập tin css duy nhất
Việc kết hợp sẽ giảm tải được nhiều dòng, bớt việc làm cho Robot của SE (Search Engine). Tốt hơn cho page speed.
9. Validate CSS
Để các trình duyệt có thể duyệt file CSS một cách chính xác, tối ưu hoàn toàn thì file CSS cũng phải validate, hãy sử dụng công cụ CSS Validator của W3C để kiểm tra - http://jigsaw.w3.org/css-validator/
INCOMING SEARCH TERMS
- Tối ưu hóa CSS
- Toi uu hoa CSS
- CSS cho SEO
- Cách tối ưu hóa CSS