Tối ưu hóa CSS tốt nhất

Hê lô tất cả các bạn. Trong bài viết lần này mình sẽ đề cập đến một vấn đề mà không ít developer thường hay bỏ sót đó chính là tối ưu CSS. Nhiều lập trình viên thường chỉ chú ý đến việc tối ưu thuật toán, tối ưu xử lí ở phần controller, model hay là xử lí với database mà quên đi rằng HTML, CSS cũng chính là những đối tượng chính mà chúng ta trả về phía client.

Tốc độ của trang web ngoài các yêu tố do server thì còn phụ thuộc rất lớn vào kích thước, số lượng file phải tải về. Chính vì thế nên việc giảm được kích thước file lẫn số lượng file cần phải tải về thì cũng đồng thời tăng tốc độ tải file và giảm số lượng request lên server.

Và sau đây sẽ là 1 số tips để làm được điều đó.

1. Giảm số file CSS

Viết quá nhiều file CSS sẽ làm quá trình load trang chậm đi vì phải render nhiều file CSS, request tới server nhiều lần cho nên bạn có thể gom chúng thành một file css để chỉ render 1 file css và request tới server 1 lần.
Thay vì

Bạn có thể gom chúng thành 1 file css như sau

Tuy nhiên việc gom file này không áp cho các file CSS có kích thước lớn và những file CSS chỉ áp dụng cho 1 số trang nhất định.

2. Tăng số file CSS

Bạn đang nghĩ mình đọc nhầm? Không! Bạn đọc đúng rồi đấy. Việc này nghe có vẻ mâu thuẫn với mục đích ở trên nhưng nó lại đúng cho một số trường hợp. Với các trang chỉ dùng các thành phần CSS riêng và chỉ áp dụng cho file đó thì ta nên cho ra file CSS riêng.

Việc này tránh cho các trang khác load phần CSS không cần thiết và không dùng tới và giảm kích thước các file CSS gom chung.

3. Giảm kích thước file CSS

Việc này được thực hiện bằng cách loại bỏ các khoảng trắng không cần thiết, dấu xuống hàng, dấu chấm phẩy cuối cùng trong class hoặc id… Nó còn được gọi là minify. Khi bạn thực hiện minify thì bạn nên thêm .min vào tên file đã được minify để phân biệt với các file chưa được minify. Ví dụ:

Bạn có thể sử dụng trang web http://www.cleancss.com/css-minify/ để minify file CSS một cách nhanh chóng( đặc biệt với các file lớn)

4. Khai báo class bổ trợ

Class bổ trợ hay còn gọi là helper classes chính là những class được định sẵn các thuộc tính đơn giản và thường hay sử dụng. Ví dụ như là color, text-align, font-height …. Ý nghĩa của việc này chính là việc tránh trùng lặp các đoạn CSS giống nhau, viết chúng vào 1 class và tái sử dụng nó. Càng nhiều CSS thì việc sử dụng helper classes càng có lợi, tiết kiệm được nhiều thuộc tính không cần phải khai báo lại và giảm kích thước các file CSS.

Ví dụ mình có đoạn code sau:

<p class="text-center">
  <button type="button" class="btn btn-success btn-md text-uppercase">
    Show More
  </button>
</p>

Và mình muốn custom thêm như sau :

p { text-align: center; padding-bottom: 30px; }
p > button { background-color: #4285f4; padding-right: 20px; padding-left: 20px }

Thì mình chỉ sẽ viết thành class bổ trợ là

.padding-top-30 { padding-top: 30px; }
.padding-20 { padding-right: 20px; padding-left: 20px;}

.btn.btn-bg-blue { background-color: #4285f4; }

và trong HTML mình sẽ viết như sau

<p class="text-center padding-top-30">
 <button type="button" class="btn btn-success btn-md btn-bg-blue text-uppercase padding-right-20">Show More</button>
</p>

Và sau này mình có thể tái sử dụng những class này rất nhiều lần ở nhiều element khác nhau, đồng thời bỏ đi được nhiều đoạn CSS khi có thêm những element mới. Ở trong các helper classes bạn nên cố gắng tập hợp được càng nhiều thuộc tính chung càng tốt, như thế thì nó sẽ hiệu quả hơn.

5. Viết CSS ngắn gọn

Bạn hãy cố gắng viết code ngắn gọn để thiết lập các thuộc tính, với các đoạn CSS chỉ dùng cho một đối tượng thì bạn không nên viết trên nhiều dòng nếu như bạn muốn tốc độ trang nhanh hơn 1 chút nữa. Khi đó bạn sẽ dễ dàng kiểm soát, theo dõi code đồng thời giảm được số lượng kí tự trong file css và giảm kích thước file. Mỗi kí tự bạn viết ra đều cần một phần bộ nhớ để lưu trữ và cũng cần một phần băng thông để chuyển qua – hãy nhớ lấy điều đó.

Ví dụ mình thiết lập thuộc tính hình ảnh cho background

background-color:#fff;
background-image:url(background-image.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center center;

thì mình có thể viết ngắn gọn lại là

background:#fff url(background-image.jpg) no-repeat fixed center center;

cấu trúc của thuộc tính là

background: <color> <image> <repeat> <attachment> <position>;

Và còn rất nhiều thuộc tính khác mà bạn có thể sử dụng cách viết css ngắn gọn như border, margin, padding, outline, …. bạn có thể tham khảo thêm nữa tại https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties

Đồng thời khi bạn khai báo mã mầu với HEX thì bạn cũng có thể sử dụng một số số mã mầu thông dụng theo cách viết ngắn gọn như sau

#FFF thay cho #FFFFFF

#000 thay cho #000000

Tham khảo thêm tại http://maettig.com/?page=PHP/CSS_Color_Converter

6. Hạn chế dùng @import

Bạn nên hạn chế sử dụng @import hoặc tốt nhất là không nên dùng @import trong file CSS, bởi vì nó sẽ làm giảm quá trình tải file và cũng không sử dụng được khả năng tải file đồng thời của browser. Ví dụ :

Mình có đoạn nhúng 2 file CSS vào trong HTML như sau

<link rel='stylesheet' type='text/css' href='test1.css'>
<link rel='stylesheet' type='text/css' href='test2.css'>

và trong file test2.css mình có @import file test_import.css @import url(test_import.css);

kết quả là

Cụ thể các bước như sau

Request 1: browser gửi request để lấy HTML về Request 2: browser gửi request để lấy test1.css Request 3: browser gửi request để lấy test_import.css Request 4: browser gửi request để lấy test2.css

Như vậy thì để tải test2.css thì browser sẽ tải file test_import.css trước, sau khi tải xong test_import.css thì mới bắt đầu tải test2.css. Và nếu như bạn bỏ @import url(test_import.css) và nhúng trực tiếp vào trang HTML như sau

<link rel='stylesheet' type='text/css' href='a.css'>
<link rel='stylesheet' type='text/css' href='c.css'>
<link rel='stylesheet' type='text/css' href='b.css'>

thì kết quả là

Như vậy browser sẽ tải file đồng thời, giúp cho việc load trang web nhanh hơn

7. Hạn chế sử dụng inline trong các elements

Việc sử dụng nhiều inline trong các elements sẽ khiến cho bạn khó kiểm soát CSS của mình. Và dễ gây ra việc trùng lặp code. Trong một số trường hợp thì các attribute này sẽ bị chắn vì vi phạm chính sách bảo mật nội dung của W3.

8. Kĩ thuật OOCSS, tránh DRY code CSS

Đây chính là việc gom các thuộc tính giống nhau của các class thành một class riêng, tránh sự lặp lại code CSS.

Ví dụ với Bootstrap

.btn-primary {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}
 
.btn-success {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
}

thì bạn có thể sử dụng

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 4px;
}
 
.btn.btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}
 
.btn.btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
}

Như vậy bạn đã giảm thiểu được số dòng code CSS và đồng thời cũng dễ để thay đổi các thuộc tính chung cho 2 hay nhiều đối tượng.

TỔNG KẾT

Đó là một số tips cho CSS, nếu bạn có thêm cách nào khác có thể comment xuống phía dưới hoặc gửi gmail đến địa chỉ : tranthetien1998@gmail.com.

Hi vọng nó sẽ ít nhiều giúp cải thiện tốc độ trang web của bạn.