hot Tham gia nhóm thảo luận IDVS trên mạng xã hội Facebook hot
Diễn đàn IDVS là sân chơi chất lượng dành cho cộng đồng SEO trên báo Tuổi Trẻ
Giấy phép chứng nhận Mạng Xã Hội của diễn đàn IDVS được bộ Thông Tin Truyền Thông cấp
Xin HÃY nhấn nút REPORT khi gặp topic spam. Comment trong topic spam sẽ bị BAN NICK không thông báo trước

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

Thảo luận trong 'Thủ thuật SEO' bắt đầu bởi thanhphu0801, 3 Tháng năm 2012.

Lượt xem: 3,435

  1. thanhphu0801

    thanhphu0801 Dự bị

    Bài viết:
    14
    Đã được thích:
    7
    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
     
  2. olalavui

    olalavui Thành viên

    Bài viết:
    102
    Đã được thích:
    90
    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 ^^)
     
  3. baocongdong.com

    baocongdong.com Dự bị

    Bài viết:
    6
    Đã được thích:
    0
    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
     
  4. HoangtuYuzi

    HoangtuYuzi Thành viên

    Bài viết:
    69
    Đã được thích:
    9
    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
     
  5. chuyensuanhaa

    chuyensuanhaa Dự bị

    Bài viết:
    12
    Đã được thích:
    0
    Cái này mình nghĩ là không quan trọng lắm đâu.
     
  6. HoangtuYuzi

    HoangtuYuzi Thành viên

    Bài viết:
    69
    Đã được thích:
    9
    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.
     
  7. saigonkinhte

    saigonkinhte Dự bị

    Bài viết:
    20
    Đã được thích:
    4
    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é
     
  8. tuonghn

    tuonghn Thành viên

    Bài viết:
    159
    Đã được thích:
    19
    có tác dụng đó bạn ah.rất hay đó bạn
     
  9. onfoshe

    onfoshe Dự bị

    Bài viết:
    11
    Đã được thích:
    2
    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
     
  10. BabyWolf

    BabyWolf Dự bị

    Bài viết:
    9
    Đã được thích:
    5
    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.
     

Chia sẻ trang này