Tối ưu hóa CSS là một trong những cách giúp trang webblog của bạn load nhanh hơn. Trong phạm vi bài viết này, mình sẽ chia sẻ cùng bạn những cách tối ưu hóa CSS và kỹ thuật giảm kích cỡ file được hầu hết các nhà thiết kế web sử dụng. Tùy thuộc vào độ phức tạp của CSS trên trang của bạn mà những kỹ thuật này có thể được vận dụng linh hoạt, góp phần giảm số kylobyte cho CSS files.1. Sử dụng file ngoài, gọp tất cả các file ngoài thành một file chung và đặt trong phần Head (ở đỉnh đầu) của trang:Sử dụng file ngoài giúp trang load nhanh hơn do các file CSS được công cụ trình duyệt lưu giữ trong bộ nhớ cache. CSS được sắp xếp trong các tài liệu HTML được hạ tải mỗi khi tài liệu HTML được yêu cầu. Sử dụng file ngoài giúp hạn chế số HTTP requests cần thiết, nhưng tăng kích cỡ tài liệu HTML. Mặt khác, nếu CSS nằm trong các file ngoài được công cụ trình duyệt lưu nhớ cache thì kích cỡ tài liệu HTML được hạn chế mà không làm tăng số HTTP requests (Đây là quy tắc số 8 trong cuốn sách High Performance Web Sites của Steve Souders dành cho các nhà phát triển web chuyên nghiệp).Thông thường đối với blogspot, CSS được đặt trước dòng ]]></b:skin> hoặc trước thẻ </head>như thế này:<head>
......
......
......
<b:skin><![CDATA[/*
body {
font-family:verdana;
margin:0;
padding:0;
}
a {
text-decoration:none;
outline: none;
}
h1 {
font-weight:700;
margin:5px 0;
}
......
......
......
]]></b:skin>
<style>
......
......
......
</style>
</head>Nếu bạn có host thì nên gọp thành file chung (đặt tên default.css) rồi upload lên host, đặt file như thế này:<head>
......
<link rel="stylesheet"type="text/css"href="http://www.tenhost.com/css/default.css" />
......
</head>Để hạn chế số HTTP requests, người ta còn khuyến cáo gọp các file CSS thành một file chung. Ví dụ nếu bạn có 3 file CSS trên trang web thì trình duyệt sẽ gửi 3 HTTP requests đến server. Như vậy nếu dùng chung 1 file CSS thì thời gian load trang sẽ nhanh hơn rất nhiều.Nếu bạn có 3 file CSS như thế này:<link rel="stylesheet" type="text/css" href="content.css" />
<link rel="stylesheet" type="text/css" href="widget.css" />
<link rel="stylesheet" type="text/css" href="comment.css" />Thì nên gộp thành một file như sau:<link rel="stylesheet" type="text/css" href="default.css" />2. Rút gọn CSS:Việc gộp chung tất cả các thuộc tính giống nhau sẽ giúp hạn chế kích cỡ CSS. Thay vì sử dụng nhiều dòng thuộc tính, tại sao chúng ta không tạo thành một dòng.Đây là ví dụ đoạn CSS có nhiều thuộc tính giống nhau:/* MARGIN */
h1 {margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;
}
/* BORDER */
h1 {border-width:1px;
border-style:solid;
border-color:#000;
}
/* BORDER WIDTH */
h1 {border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;
}
/* BACKGROUND */
div {background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
}
/* FONT */
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-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
}
/* OUTLINE */
h1 {outline-color:#f00;
outline-style:solid;
outline-width:2px;
}
/* MARGIN */
h1 {margin:1em 0 2em 0.5em;}
/* BORDER */
h1 {border:1px solid #000;}
/* BORDER WIDTH */
h1 {border-width:1px 2px 3px 4px;}
/* BACKGROUND */
div {background:#f00 url(background.gif) no-repeat fixed 0 0;}
/* FONT */
h1 {font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;}
/* LIST STYLE */
ul {list-style:square inside url(image.gif);}
/* OUTLINE */
h1 {outline:#f00 solid 2px;}
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 5px5px}
#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}
Chúng ta nên gộp lại như sau:
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)}
Ví dụ đối với đoạn CSS này:
h2 {
font-family:verdana;
padding:0;
margin:5px 0;
color:#333;
text-decoration:underline;
}
Nên nén lại thành một dòng như sau:
h2 {font-family:verdana;padding:0;margin:5px 0;color:#333;text-decoration:underline}
Ví dụ đối với một đoạn chú thích phức tạp như thế này:
/************************************/
/* Content Styles */
/************************************/Thì nên đơn giản hóa lại như sau (hoặc có thể bỏ luôn chú thích):
/* content styles */- Loại bỏ 0px:Ví dụ đối với đoạn CSS này:
h2 {padding:0px; margin:0px;}Thì nên sửa lại như sau:
h2 {padding:0; margin:0}5. Sử dụng mã màu đơn giản:Đối với một số mã màu như thế này: #FFFFFF, #113344, #AABBCC, #FF0000
Thì chúng ta nên giản lượt lại như sau: #FFF, #134, #ABC, #F00
6. Loại bỏ các đoạn CSS không cần thiết:Trong quá trình thiết kế webblog, do nhiều khi thay đổi giao diện hoặc tháo các tiện ích, một số lớp/ID đã được tạo trước đây thì nay không còn dùng đến nữa. Chúng ta nên kiểm tra và loại bỏ chúng.
Dust-Me Selector và
CSS Roundup là hai Addon của Firefox giúp phân tích trang để tìm ra những phần CSS không được dùng đến. Bạn có thể cài đặt một trong hai tiện ích này để giúp bạn làm thay công việc này (tuy nhiên hai tiện ích này chưa hoạt động được với phiên bản mới nhất của FireFox, chỉ dùng được với các phiên bản từ FF6+ trở về trước).
7. Sử dụng các công cụ tối ưu hóa và nén CSS online để giúp bạn đỡ mệt nhọc hơn:CSS OptimizerFlumpcakes CSS OptimizerClean CSSCSS Drive CSS CompressorOnline YUI CompressorStyle Neat8. Sử dụng CSS Sprite:CSS Sprite là phương pháp tối ưu để hạn chế số lượng HTTP requests về hình ảnh. Kết hợp các ảnh nền thành một ảnh duy nhất và sử dụng các thuộc tính background-image và background-position để hiển thị ảnh theo ý muốn. Phương pháp này rất hữu ích cho các trang có lượng khách truy cập đông. CSS Sprite là một phạm trù kiến thức nâng cao, bạn có thể tham khảo ở một bài viết khác sau này.
