14 cách giúp bạn tối ưu và giảm dung lượng file css
Tối ưu hóa và giảm dung lượng file css là một kỹ thuật mà các bạn chuyên nghành thiết kế và phát triển web cần nên biết , vì nó làm website của bạn chạy nhanh hơn, và đó là điều kiện cần để giữ 1 lượng độc giả đến với bạn, vì sẽ không ai muốn đọc nội dung ở một trang mà khi load nội dung lại ...
Tối ưu hóa và giảm dung lượng file css là một kỹ thuật mà các bạn chuyên nghành thiết kế và phát triển web cần nên biết , vì nó làm website của bạn chạy nhanh hơn, và đó là điều kiện cần để giữ 1 lượng độc giả đến với bạn, vì sẽ không ai muốn đọc nội dung ở một trang mà khi load nội dung lại phải chờ đợi lâu. Các bạn thử áp dụng 14 thủ thuật sau xem sao nhá :
1 Sử dụng Css Sprite
Đây là 1 phương pháp giảm số lượng yêu cầu load hình trong HTTP Request, để hiểu rõ hơn về phương pháp này các bạn tham khảo hình dưới đây :
Đây là 1 file hình sử dụng css sprite của youtube, từ logo, các nút bấm, background và các biểu tượng mạng xã hội đều được đưa vào chung 1 tấm hình, và để sử dụng chúng , chúng ta chỉ cần việc dùng backgrond-image và background-position để sắp xếp sao cho chính xác là được. Nếu bạn vẫn chưa hiểu rõ thì có thể tham khảo bài viết Hướng dẫn từng bước sử dụng css sprite
2 Kết nối tất cả các file css thành một file duy nhất :
Các bạn nên nhớ 1 điều là 1 CSS file = 1 HTTP request , vì thế càng dùng nhiều file css thì HTTP request càng cao, và kéo theo website của bạn cũng chậm đi vì phải xử lý nhiều request, vì thế nếu các file css mà bạn sử dụng không có gì quá đặc biệt hơn so với các file khác thì nên gộp chúng lại với nhau thành một file duy nhất. Các bạn có thể tham khảo ví dụ sau :
Trước lúc gộp file :
<link rel="stylesheet" type="text/css" href="content.css" /> <link rel="stylesheet" type="text/css" href="about.css" /> <link rel="stylesheet" type="text/css" href="contact.css" />
Sau khi gộp chúng lại
<link rel="stylesheet" type="text/css" href="layout.css" />
Như vậy file layout.css chứa toàn bộ nội dung trong các file content.css, about.css và contact.css
3 Gọi file css từ bên ngoài
Có rất nhiều bạn sử dụng các đoạn css ngay trong các phần tử HTML , và điều này là một sai lầm lớn, tuy rằng nó sẽ giảm HTTP request nhưng nó lại làm cho trang html của bạn phình to ra, và đặc biệt sau mỗi lần load trang, trình duyệt sẽ lại phải tải lại toàn bộ các đoạn css đó, vì thế mình khuyên các bạn nên đóng goi css là 1 file bên ngoài và gọi nó trong HTTM document, kỹ thuật này sẽ giúp bạn dễ dàng duy trì và quản lý, đặc biệt các file này sẽ được lưu trữ (cache) khi trang được load lần đầu tiên và sẽ không phải gọi lại trong lần kế tiếp.
4 Luôn luôn đặt file css nằm ở vị trí top trong thẻ <head>
Tại sao phải như vậy, lý do rất đơn giản, bạn thử nghĩ xem, khi load trang, trình duyệt sẽ load từ đầu cho đến cuối, và nếu bạn đặt css ở dưới cùng, thì các phần tử html sẽ được load trước, và các phần tử này sẽ rối tung lên khi xuất hiện vì file css chưa được định dạng bởi trình duyệt, thực ra điều này chỉ có thể thấy khi trang web của bạn load chậm, tuy nhiên bạn nên tạo cho mình 1 phong cách thiết kế tốt đó là luôn luôn đặt file css nằm ở top trong phần tử <head>
5 Sử dụng Link thay vì @import
Để hiểu rõ hơn thì các bạn có thể tìm hiểu ví dụ về vấn đề này tại đây
6 Sử dụng kỹ thuật viết tắt trong css (CSS Shorthand )
Bằng cách gộp lại các thuộc tính chung chung, bạn có thể rút ngắn câu lệnh css và điều này sẽ giúp bạn giảm và tối ưu file css, thay thì phải sử dụng nhiều dòng, bạn sẽ gộp lại thành 1 dòng, các bạn có thể tham khảo ví dụ sau :
/* MARGIN */
h1 {margin:1em 0 2em 0.5em;}
h1 {margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;
}
/* BORDER */
h1 {border:1px solid #000;}
h1 {border-awidth:1px;
border-style:solid;
border-color:#000;
}
/* BORDER WIDTH */
h1 {border-awidth:1px 2px 3px 4px;}
h1 {border-top-awidth:1px;
border-right-awidth:2px;
border-bottom-awidth:3px;
border-left-awidth:4px;
}
/* BACKGROUND */
div {background:#f00 url(background.gif) no-repeat fixed 0 0;}
div {background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
}
/* FONT */
h1 {font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;}
h1 {font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
}
/* LIST STYLE */
ul {list-style:square inside url(image.gif);}
ul {list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
}
/* OUTLINE */
h1 {outline:#f00 solid 2px;}
h1 {outline-color:#f00;
outline-style:solid;
outline-awidth:2px;
}
7 Gộp các file sử dụng chung thuộc tính:
Khi bạn có nhiều thuộc tính giống nhau cho nhiều thẻ thì nên gộp chúng lại với nhau, ví dụ như sau:
Trước lúc gộp
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;}
Sau khi gộp :
h1, #box1 .heading, #box2 .heading {padding:5px 0; font-family:verdana; font-weight:700;}
Tuy nhiên trong một số trường hợp thì cũng hơi khó để gộp như ví dụ sau :
Trước:
#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}
Sau :
#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)}
8 Giảm số lượng xuống dòng trong css
Các bạn có thể tham khảo ví dụ sau :
h2 {
font-family:verdana;
padding:0;
margin:5px 0;
color:#333;
text-decoration:underline;
}
/* bạn có thể thay thế như sau : */
h2 {font-family:verdana;padding:0;margin:5px 0;color:#333;text-decoration:underline;}
9 Xóa bỏ dấu chấm phẩy (;) ở cuối dòng:
h2 {font-family:verdana;color:#333;}
/* xóa bỏ như sau */
h2 {font-family:verdana;color:#333}
10 Sử dụng kiểu ghi chú (comments) đơn giản
/************************************/ /* Content Page */ /************************************/ nên sử dụng thằng này : /* content page */
11 Sử dụng mã màu rút gọn :
Thay vì bạn sử dụng các mã màu như : #FFFFFF,#113344,#AABBCC,#FF0000
Các bạn có thể rút gọn như sau :
#FFF, #134, #ABC, #F00
Tuy nhiên bạn không thể thay đổi được các mã màu như : #C4C4C4, #1A2B3C
12 Xóa bỏ “px” :
Các bạn có thể xóa bỏ dòng px sau mỗi thuộc tính kích thước như ví dụ sau :
h2 {padding:0px; margin:0px;}
/* removed */
h2 {padding:0; margin:0}
13 Xóa bỏ những thuộc tính class không còn sử dụng :
Trong quá trình thiết kế web, có thể bạn sẽ thêm hoặc không dùng 1 số class, vì thế hay xóa bỏ chúng, nếu các bạn thấy khó khăn trong việc này thì có thể sử dụng 1 tiện ích rất hay trong trình duyệt Firefox đó là Dust-Me Selector , tiện ích này sẽ giúp bạn làm điều đó.
14. Sử dụng những công cụ tối ưu CSS
Sau khi đọc hết những thủ thuật này và bạn không muốn phải mất công làm từng bước bằng tay thì có thể sử dụng 1 số công cụ giúp bạn tối ưu file css trong web của bạn, đặc biệt là các công cụ này hoàn toàn miễn phí, các bạn có thể tham khảo 1 số công cụ như sau :
CSS Optimizer
Flumpcakes CSS Optimizer
Clean CSS
CSS Drive CSS Compressor
Online YUI Compressor
Style Neat
Để hoàn thành bài viết này mình đã mất cả 1 ngày để tóm gọn lại những cái hay nhất mà mình biết, nếu bạn nào có thủ thuật hay hơn hoặc thấy có chỗ nào không đúng, thì chia sẻ cho mình và mọi người nhá.
Chúc các bạn thành công !
(Nhớ ghi lại nguồn nếu các bạn muốn copy bài viết sang những trang chia sẻ khác nhá. ^^ Cám ơn)
Chuyên Mục: Css
Bài viết được đăng bởi webmaster
-
vuishopping
