Tối ưu hóa SEO cho CSS của website

1 Kết hợp các mã màu một cách tối đa:

Ví dụ:

Mã:

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:

Mã:

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ụ:

Mã:

#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ụ

Mã:

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:

Mã:

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:

Mã:

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

Mã:

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*/

Mã:

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 */

Mã:

background: #fff url(i/dope.png) repeat-x 0 0;

/* 4 thuộc tính margin */

Mã:

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 */

Mã:

margin: 10px 20px 10px 20px;

/* 3 thuộc tính border*/

Mã:

border-width: 1px;
border-style: solid;
border-color: red;

/* Chỉ cần viết */

Mã:

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:

Mã:

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ụ

Mã:

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. 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.



Theo LamSeo

 

Có mỗi mục 2 hình như thiếu ở code viết gọn

theo mình đủ là

Mã:

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

Và lưu ý cho ai đang học CSS thì nếu sử dụng px thì có thể viết gọn trong 1 dòng (dạng: margin: 1px 2px 3px 4px) nhưng không dùng chung em và px dc (sáng nay ngịch tooltips mới sực nhớ ra điều này ^^)

 

Thanks! Bài viết tuy cơ bản nhưng rất có ích trong seo, các rút gọn này sẽ giảm tải khi load site

 

từ khi chú ý đến tốc độ load trang trong 1s. Mình đã bắt đầu "tiết kiệm" hơn, Tks chủ thớt

 

Cái này mình nghĩ là không quan trọng lắm đâu.

 

Bạn nghĩ sao mà không quan trọng. Mình nghĩ bây giờ google nó đang chú ý đến những site nào tối ưu nhất, load nhanh nhất. Bạn thử hình dùng cái máy chủ của google nó cũng chỉ có giới hạn thôi.

 

cái này cũng có tác dụng à mới thấy lần đầu :hehe_002: da ta bạn nhé

 

có tác dụng đó bạn ah.rất hay đó bạn

 

bài viết hay, tuy nhiên không quan trọng lắm đâu, ngồi mà sửa từng dòng code css thì chết chắc luôn ... hehe

 

Vấn đề cơ bản trong bài viết trên là:

1. Tìm cách tối ưu và giảm dung lượng file CSS.
2. Gộp các file CSS để giảm lượng request.

Ngoài ra:
1. Các bạn có thể tìm hiểu thêm về thủ thuật CSS Sprite để giảm lượng request.
2. Cấu hình server hay host để tạo cache cho các file static.
3. PHP cũng hiện đang cung cấp các loại tools/code để minify các javascript/css.

Các bạn chịu khó search Google tìm hiểu vì tôi chưa thể gửi được link tham khảo.