Tại sao phải tối ưu hóa CSS theo chuẩn SEO. Nó sẽ giúp bạn cải thiện tốc độ tải trang website và thân thiện hơn với các công cụ tìm kiếm.
Tại sao phải tối ưu hóa CSS theo chuẩn SEO. Nó sẽ giúp bạn cải thiện tốc độ tải trang website và thân thiện hơn với các công cụ tìm kiếm.
Ví dụ: thay vì
article { background-color: rgb(255,255,255); Hoặc article { background-color: #ffffff; }
Nhưng bạn nên 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
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; }
Bạn nên viết lại thành:
p { font-family: Georgia, serif; font-weight: normal; line-height: 1.33em; font-size: 1.33em; }
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; }
Ban nên 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(i/dope.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;
- Đây 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;
Ví dụ sử dụng thuộc tính margin:
margin: 10px 20px 10px 20px;
Thay vì trùng nhau về giá trị
margin-top và margin-bottom, margin-left và margin-right
- bạn hoàn toàn có thể viết lại thành:
margin: 10px 20px;
Ví dụ: Nếu ta viết
opacity: 0.5;
Có thể thay thế bằng:
opacity: .5;
Thay vì viết:
padding: 0px;
Có thể thay thế bằng:
padding: 0;
Ví dụ
p { font-family: Georgia, serif; font-weight: normal; line-height: 1.33em; font-size: 1.33em; }
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 }
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.
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. Tốt hơn cho page speed.
Để 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/
