TỐI ƯU HÓA CHO CSS CHO SEO

TỐI ƯU HÓA CHO CSS CHO SEO

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ú... 05:42:00

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.
6. Rút gọn cú pháp css của một thành phần:
Thẻ p của bạn có css như sau:

 p {

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

Bạn nên viết gọn lại:

 p {
font: normal 1.33em/1.33 Georgia, serif;
}

Hay như bạn có thuộc tính margin cho div như sau:

margin-top:    10px;
margin-right:  20px;
margin-bottom: 10px;
margin-left:   20px;

Bạn có thể viết gọn lại là:

 margin: 10px 20px ;

7. Các giá trị số.
Bạn có:

padding:0px;

thì bạn có thể viết thành:

 padding:0;

Đối với các thuộc tính có 4 giá trị đối xứng nhau như ở ví dụ margin ở trên thì bạn nên viết lại thành 2 giá trị nếu chúng có giá trị giống nhau.
8. Cách viết comment
Comment trong css sẽ giúp bạn quản lí code tốt hơn nhưng comment thế nào cho hợp lí?
Nếu những comment không cần thiết thì bạn có thể bỏ, còn những comment khác thì bạn nên viết ngắn gọn xúc tích, mang nội dung phù hợp. Không nên viết comment theo kiểu này:

/************************************/
/*          Content Styles            */
/************************************/

Mà bạn nên viết lại thành:

 /* content styles */

 9.Nén CSS lại
Hạn chế việc xuống dòng và bạn có thể bỏ dấu ";" ở giá trị thuộc tính cuối cùng:

h2 {
    font-family:verdana;
    padding:0;
    margin:5px 0;
    color:#333;
    text-decoration:underline;
}

Viết lại thành:

h2 {font-family:verdana;padding:0;margin:5px 0;color:#333;text-decoration:underline}

 10. Sử dụng một vài công cụ giúp bạn tối ưu hóa và nén CSS online
CSS Optimizer
Flumpcakes CSS Optimizer
Clean CSS
CSS Drive CSS Compressor
Online YUI Compressor
Style Neat

11. CSS Sprite

Có thể đây là một khái niệm lại đối với 1 vài bạn nhưng nó khá hữu ích trong việc css cho ảnh. Ảnh là một tài nguyên chiếm khá nhiều băng thông và dung lượng trên server nên việc sprite ảnh là việc rất cần thiết. Để sử dụng CSS sprite cần có skill khá tốt trong css. Mình sẽ nói kĩ hơn về CSS Sprite trong một bài khác.

12. Validate CSS.

Sau khi làm xong bạn nên validate CSS để biết mình có sai ở đâu hay không, hay code vẫn chưa được chuẩn hóa. Có khá nhiều những validator CSS mình xin giới thiệu 1 cái của w3c: http://jigsaw.w3.org/css-validator/

Hy vọng với chút ít kiến thức trên bạn có thể hiểu thêm về css và seo.