Tối ưu hóa cho CSS cho SEO - phần 1

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.
Hôm nay mình xin giới thiệu với mọi người một số cách mình học hỏi và tham khảo được.
1.Kết hợp mã màu.
- Nếu bạn có 1 background màu thuần(không có hiệu ứng gradient) thì bạn nên xem mã màu của nó để tạo css không nên sử dụng background ảnh nền.
- Nếu mã màu của bạn có dạng như #fffff hoặc background-color:rgb(226,226,226) thì bạn nên đưa nó về dạng
#fff và #226.(các dạng mã màu có thể chuyển đổi như #xxxxxx->#xxx, #xxyyzz->#xyz...)
2. Các thành phần có thuộc tính trùng lặp thì nên viết gọn lại.

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;
}

Các bạn có thể viết gọn lại thành:

p {
font-family: Georgia, serif;
font-weight: normal;
line-height: 1.33em;
font-size: 1.33em;
} 

Nếu bạn muốn 2 thành phần p này có điểm khác biệt thì có thể đặt chúng vào các class khác nhau và thêm các thuộc tính khác biệt của chúng. Còn các phần trùng lặp ta nên để vào chung.
3. Đưa CSS ra một file riêng.
Nếu trong một trang mà chúng ta có đoạn css khá dài chúng ta nên để chúng ra 1 file riêng và dùng thẻ link để link tới chúng.
4. Gộp tất cả các file CSS vào 1 file nếu có thể
Ví dụ trong 1 trang mà bạn có khoảng 4 hoặc 5 file css thì mỗi lần request nó sẽ phải gửi 4 hoặc 5 request tới server điều này sẽ làm chậm lại tốc độ load của trang web. Vì thế bạn có thể gộp chúng lại 1 thành 1 file. Nhưng ở đây mình dùng từ nếu có thể có nghĩa là không phải lúc nào ta cũng gọp chúng lại. Nếu có các css tách biệt hoàn toàn với các css khác như css của 1 jquery plugin bạn download được thì bạn nên để riêng để còn dễ sửa đổi hoặc thay thê.
5.Gộp các định dạng CSS giống nhau lại
Ví dụ bạn có 1 CSS như sau:

h1 {padding:5px 0; font-family:verdana; font-weight:700;}
#box1 .heading  {padding:5px 0; font-family:verdana; font-weight:700;}
#box2 .heading  {padding:5px 0; font-family:verdana; font-weight:700;}
#nav a.home {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(home.gif) no-repeat 5px 5px}
#nav a.portfolio {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(portfolio.gif) no-repeat 5px 5px}
#nav a.contact {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(contact.gif) no-repeat 5px 5px}
#nav a.about {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(about.gif) no-repeat 5px 5px}

Bạn có thể thấy có khá nhiều các thuộc tính như padding, font-weight, font-family... được lặp lại chúng ta nên gộp chúng lại:

h1, #box1 .heading, #box2 .heading  {padding:5px 0; font-family:verdana; font-weight:700}
#nav a {padding:5px 0; font-family:verdana; font-weight:700; background:#fff no-repeat 5px 5px}
#nav a.home {background:url(home.gif)}
#nav a.portfolio {background:url(portfolio.gif)}
#nav a.contact {background:url(contact.gif)}
#nav a.about {background:url(about.gif)}

Như thế này chúng sẽ dễ nhìn hơn.

Đọc phần 2