CSS (Cascading Style Sheet) hiện này  được áp dụng rất nhiều trong việc hỗ trợ thiết kế giao diện web, tuy nhiên sử dụng CSS thế nào cho hiệu quả thì không phải là điều ai ai cũng nắm rõ.
Xin được giới thiệu với các bạn series bài về việc áp dụng CSS trong thực tế thiết kế web. Series nhắm đến đối tượng các bạn mới bắt đầu con đường khám-và-phá CSS, qua series tôi muốn chuyển đến các bạn một số kinh nghiệm sử dụng tối ưu CSS.

Bài 3 : Tối ưu CSS!

Tất cả trong một!

Lại trở lại vấn đề tốc độ, vâng một vấn đề muôn thuở! Bạn có biết với mỗi file CSS mà bạn đưa vào trang, trình duyệt sẽ phải thực hiện một HTTP Request tới máy chủ? Việc tách CSS của trang ra nhiều file sẽ giúp bạn dễ kiểm soát nội dung của chúng tuy nhiên lại là kẻ thù của tốc độ. Bản thân tôi cũng thấy nhiều trang web ở ngay phần header khai báo tới 4-5 liên kết tới các file CSS, với công thức mỗi file CSS là một HTTP Request, hãy tưởng tượng xem tốc độ tải trang sẽ bị ảnh hưởng thế nào!

Đoạn mã 1 : Giảm thiểu HTTP Request tới server bằng cách giảm số lượng file CSS
<!– Tách rời ra nhiều file sẽ làm tăng lượng HTTP Request đến server –>
<link rel=”stylesheet” type=”text/css” href=”css/layout.css” />
<link rel=”stylesheet” type=”text/css” href=”css/form.css” />
<link rel=”stylesheet” type=”text/css” href=”css/effect.css” /><!– Ghép chung CSS vào một file sẽ làm giảm thiểu thời gian tải trang –>
<link rel=”stylesheet” type=”text/css” href=”css/main.css” />

Tống ra ngoài!

Việc đưa CSS ra file, sau đó trỏ tới từ trang sẽ khiến cải thiện tốc độ đáng kể, kiểu sử dụng CSS này gọi là External Style. Nguyên nhân là các file CSS tĩnh đó là một trong những thứ được trình duyệt lưu lại trong bộ đệm (cache), khi trang thực hiện request tới máy chủ để liên kết tới file CSS, trình duyệt sẽ cố gắng lấy file CSS đã được lưu trong bộ đệm của trình duyệt trước đó. Trái lại nếu bạn để CSS trong trang bất kể là đặt chung ở trong thẻ <style> (còn gọi là Internal Style) hay đưa thẳng vào các phần tử trên trang qua thuộc tính style = “…” (còn gọi là Context Style – hoặc Inline Style) đều khiến dung lượng trang tăng lên ầm ầm và làm giảm tính tái sử dụng của CSS.

Đoạn mã 2 : Sử dụng External Style giúp giảm tốc độ tải trang và tăng tính tái sử dụng
<!– External Style : Khai báo trỏ tới một file CSS ngoài trang –>
<link rel=”stylesheet” type=”text/css” href=”css/main.css” /><!– Internal Style : Khai báo CSS trong cặp thẻ style, để các phần tử trong trang có thể tham chiếu tới –>
<style>
.wormy
{
font-weight: bold;
}
</style>

<!– Context Style : Đưa CSS trực tiếp vào thuộc tính style của phần tử (còn gọi là Inline Style –>
<div style=’color:red;’>Mr. Wormy</div>

Đặt lên đầu!

Qua những nghiên cứu về việc tải và dựng trang trên trình duyệt, nhiều đơn vị đã đưa ra kết luận rất thuyết phục rằng việc đưa tham chiếu CSS lên đầu trang sẽ cải thiện tốc độ dựng trang rất lớn. Việc đó không chỉ giúp quá trình dựng (render) trang nhanh hơn mà còn tránh được hiện tượng “màn-hình-trắng” do CSS chưa được tải về khiến trình duyệt lúng túng khi dựng các phần tử trên trang.

Đoạn mã 3 : Đưa CSS lên phần đầu trang, trong cặp thẻ <head> để tối ưu tốc độ của quá trình dựng trang
<head>
…
<link rel=”stylesheet” type=”text/css” href=”css/main.css” />
…
</head>
<body>
…

Hạn chế import

Ta có thể liên kết tới một External Style thông qua thẻ <link> hoặc <style> và @import, về mặt chức năng chúng đều đem lại kết quả như nhau. Tuy nhiên do được xử lý khác nhau dựa trên từng trình duyệt, việc sử dụng @import nhiều lúc đem lại những phiền toái không ngờ.
Theo nhiều nghiên cứu, việc sử dụng @import có thể gây cản trở việc tải xuống những CSS được liên kết tới bằng thẻ <link> hoặc những đoạn mã JavaScript dựa trên CSS (ví dụ hàm getElementsByClassName,…).

Đoạn mã 4 : Sử dụng @import có thể gây cản trở trong quá trình tải các tài nguyên được tham chiếu tới bên ngoài
<style>
@import url(‘tap.css’);
@import url(‘chi.css’);
@import url(‘lap.css’);
@import url(‘trinh.css’);
@import url(‘xin.css’);
@import url(‘chao.css’);
</style>
<script src=’wormy.js’ type=’text/javascript’></script>

Minh họa về quá trình tải trang của Đoạn mã 4, mỗi dòng ứng với một kết nối của tài nguyên


Như bạn có thể thấy ở hình trên, file script có thể sẽ được ưu tiên tải trước sau đó các file CSS được import vào sẽ tải về nối tiếp và song song nhau. Nếu trang gọi tới một script phụ thuộc vào class có thể gây ra lỗi không lường trước được. Hãy chú ý về cách sắp xếp mã ở Đoạn mã 4, cho dù tôi đã cố tình xếp thẻ <script> sau thẻ <style> nhưng do bên trong thẻ <style> lại dùng @import nên thứ tự ưu tiên bị thiết lập lại.

Đoạn mã 5 : Sử dụng <link> để đảm bảo việc liên kết tới các tài nguyên được thực hiện theo đúng thứ tự
<link rel=’stylesheet’ type=’text/css’ href=’tap_chi.css’>
<link rel=’stylesheet’ type=’text/css’ href=’lap_trinh.css’>
<script src=’wormy.js’ type=’text/javascript’></script>

Minh họa về quá trình tải trang của Đoạn mã 5, mỗi dòng ứng với một kết nối của tài nguyên

Viết tắt…

Bạn có thể giảm tối đa dung lượng cho file CSS của mình bằng cách gộp các thuộc tính chung vào nhau. Ta đi vào minh họa cho dễ hiểu nhé!

Trước hết hãy xem cách viết gọn CSS nếu các thuộc tính đó có kiểu viết tắt:

Đoạn mã 6 : Viết gọn CSS giúp giảm tải dung lượng
/* Viết rời các thuộc tính */
.wormy
{
border-color: royalblue;
border-width: 2px;
border-style: solid;
padding-left: 4px;
padding-right: 4px;
padding-top: 2px;
padding-bottom: 2px;
}/* Viết gọn lại các thuộc tính chung vào nhau khi có thể */
.wormy2
{
border: royalblue 2px solid;
padding: 4px 2px 4px 2px;
}

Tiếp đến hãy thử gom nhóm các định nghĩa tương tự nhau:

Đoạn mã 7 : Gom nhóm các định nghĩa tương tự nhau
/* Các định nghĩa tương tự nhau bị viết rời ra, dung lượng tăng vù vù */
h3
{
font-family: tahoma;
padding: 4px;
font-weight: bold;
}.w_form .header
{
font-family: tahoma;
padding: 4px;
font-weight: bold;
}

/* Gom chúng làm một */
h3, .w_form .header
{
font-family: tahoma;
padding: 4px;
font-weight: bold;
}

/* Trong thực tế các định nghĩa chỉ tương tự chứ không giống hệt nhau như trên, ví dụ như sau */
h3
{
font-family: tahoma;
padding: 4px;
font-weight: bold;
color: #0099ff;
}

.w_form .header
{
font-family: tahoma;
padding: 4px;
font-weight: bold;
color: #00ccff;
}

/* Gom chúng làm một và chỉ ra sự khác biệt, vẫn ngắn họn hơn nhiều đấy! */
h3, .w_form .header
{
font-family: tahoma;
padding: 4px;
font-weight: bold;
}
h3 {color: #0099ff;}
.w_form .header {color: #00ccff;}

Và … vài mẹo không chính thống

Gọi là không chính thống bởi nó không tuân thủ quy tắc chuẩn của CSS, tuy nhiên có khi đó lại là “mẹo” hay cho bạn!

Chú thích đơn giản, gọn nhẹ sẽ giúp bạn thu nhỏ kích thước của CSS phần nào:

Đoạn mã 8 : Chú thích đơn giản
/***********************************************
* Những chú thích kiểu này khiến nội dung file *
*   CSS của bạn trông thật sạch sẽ và rõ ràng  *
***********************************************//* Nhưng một chú thích thế này thôi đôi khi cũng đủ rồi! */

Gỡ bỏ dấu chấm phảy cuối cùng của mỗi định nghĩa:

Đoạn mã 9 : Bỏ dấu chấm phảy cuối cùng
/* Nếu trang của bạn có khoảng 200 định nghĩa như thế này */
.wormy {color: red; font-family: verdana;}/* Chỉ cần bỏ bớt dấu chấm phảy cuối cùng đi, bạn sẽ tiết kiệm được không ít đâu */
.wormy {color: red; font-family: verdana}

Viết gọn màu mè lại:

Đoạn mã 10 : Viết gọn màu có giá trị trùng lại
/* Ví dụ bạn có định nghĩa sau */
.wormy {color: #0099ff; font-family: verdana;}/* Bạn có thể viết gọn lại và CSS Engine của trình duyệt thật thông minh, chỉ viết một mà tự hiểu hai */
.wormy {color: #09f; font-family: verdana}

Cách trên áp dụng được với những mã màu trùng, ví dụ:

  • #0099FF > #09F
  • #BBBBBB > #BBB
  • #EE0000 > #E00

Những mã màu không trùng nhau thì chịu nhé! Ví dụ:

  • #123456
  • #42FFB1
  • #434343


Cuối cùng là mẹo vứt bỏ đơn vị “px” (pixel) của một số định nghĩa, trình duyệt mặc định hiểu các thuộc tính được viết theo đơn vị pixel nếu không chỉ ra đơn vị:

Đoạn mã 11 : Bỏ đơn vị mặc định
/* Ví dụ bạn có định nghĩa sau */
.wormy {padding: 4px 2px 4px 2px}/* Bạn có thể viết gọn lại, bỏ đơn vị “px” đi */
.wormy {padding: 4 2 4 2}

Đôi lời kết

Bài viết đem đến cho bạn một số kinh nghiệm tối ưu CSS để giảm bớt tốc độ truyền tải, dựng trang và dung lượng của bản thân các đoạn mã CSS. Quanh đi quẩn lại vẫn là vấn đề tốc độ, hãy cố gắng giảm thiểu nó tối đa có thể nhé. Hy vọng bài viết phần nào hỗ trợ được bạn trong công cuộc tăng tốc website. Hãy đón chờ thêm các bài khác thuộc series “CSS – Áp dụng trong thực tiễn” nhé 🙂

Nguyễn Trí Trung – FIS.PFS Developer

trungnt22@fpt.com.vn

facebook.com/trungnguyentri