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

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

Bài viết này sẽ hướng dẫn các bạn cách tối ưu CSS, nó sẽ giúp cải thiện được tốc độ tải trang phần nào. Trong quá trình thực hiện các dự án SEO và công việc Onpage của mình, trong bài viết này mình sẽ giúp các bạn hình dung được khi viết CSS cũng phải đảm bảo một số tiêu chí để website của bạn tốt hơn trong mắt của robot google.

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#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(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;

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

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

CSS optimization – LamSEO Consulting

Bài viết sẽ giúp các bạn nắm rõ hơn về một số cách viết tối ưu cho công cụ tìm kiếm nhất. Chúc các bạn thành công.

Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Tommy Tran

Tommy owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy

Tìm kiếm bất động sản

 

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Hướng dẫn tìm route name trên phiên bản Drupal 8

Hướng dẫn tìm route name trên phiên bản Drupal 8

In many cases, a route name is something you might need to get something done in Drupal 8. For example to generate a link, or maybe create a local task in your module.

Cài đặt lại GRUB vào Master Boot Record

Cài đặt lại GRUB vào Master Boot Record

Đã có các hệ điều hành Windows XP/Vista và muốn cài đặt thêm Ubuntu; Cài Ubuntu trước hoặc giữa các hệ điều hành

Kaspersky Internet Security, Virus

Cách sử dụng hiệu quả Kaspersky Internet Security 2010

Kaspersky Internet Security 2010 (KIS) ngoài tính năng quét virus mạnh mẽ còn có rất nhiều tiện ích đi kèm mà chưa chắc ai cũng biết tận dụng.

Công ty diệt chuột T&C

 

Diet con trung