HTML5 & CSS3

5 cách để cải thiện tốc độ load CSS

Chia sẻ nhanh

Cải thiện tốc độ load CSS hay optimize CSS, minify CSS đều là những từ diễn tả chung một mục đích đó chính là đẩy nhanh tốc độ hiển thị style trên website của bạn.

Vấn đề này chắc chắn chẳng hề mới lạ với anh em nữa, vì hiện nay có thể search nhẹ trên google cũng có thể ra hàng loạt các tools online free phục vụ tới tận chân răng cho anh em. Tuy nhiên nếu có thể để ý một chút trong khi code, anh em có thể cải thiện được khá nhiều về tốc độ hiển thị style.

 

1. Lựa chọn chuẩn đối tượng

Các cụ có câu "uống nước nhớ nguồn", "ăn quả nhớ kẻ trồng cây", tuy nhiên các cụ đã sai trong tình huống này. Hãy so sánh hai cách viết như sau

//cach 1
nav ul li.nav-item

//cach 2
.nav-item

Để giúp cho bộ CSS của bạn trông sạch sẽ hơn, trình duyệt hiển thị nhanh hơn thì cách viết thứ 2 lại có nhiều ưu điểm hơn. Khi trình duyệt đọc các thẻ, nó sẽ đọc từ phải qua trái. Cách viết thứ 1 lựa chọn div .nav-item sâu hơn sẽ khiến cho trình duyệt mất nhiều thời gian render đi render lại từ cấp đầu tiên cho tới cuối cùng mới có thể hiển thị ra cho chúng ta xem.

 

2. Sử dụng thuộc tính ngắn gọn

Thay vì nếu muốn định nghĩa các thuộc tính theo dạng chi tiết, hay còn được gọi là longhand

font-size: 1.5rem;
line-height: 1.618;
font-family: "Arial", "Helvetica", sans-serif;

thì chúng ta sẽ cần cải thiện ngay với cách viết dạng thu gọn, shorthand

font: 1.5rem/1.618 "Arial", "Helvetica", sans-serif;

Tuy nhiên, để thay đổi thói quen khi coding, anh em chắc cũng phải mất một thời gian ngắn. Nhưng điều này là cần thiết.

 

3. Sử dụng thuộc tính rel="preload"

Thuộc tính preload sẽ "nhắc" trình duyệt phải load trước. Chúng ta có thể set thuộc tính rel này ở bất kỳ resource nào

<link rel="preload" href="/css/styles.css" as="style">

Hoặc có thể sử dụng HTTP header config

Link: </css/styles.css>; rel=preload; as=style

 

4. Cắt bỏ các thuộc tính thừa với csscss

csscss là công cụ khá hữu hiệu để thống kê các thuộc tính bị lập lại khi sử dụng.

Report từ nó sẽ có dạng như sau

{h1} AND {p} share 3 declarations
- color: #000
- line-height: 1.618
- margin: 0 0 1.5rem

Căn cứ vào đó chúng ta có thể khai báo gộp chung dạng

h1, p{
color: #000;
line-height: 1.618;
margin: 0 0 1.5rem;
}

 

5. Minify CSS với CSSNANO

CSSNANO sẽ giúp css của bạn được định dạng lại với cấu trúc format đẹp hơn và nhẹ nhàng hơn.

 

 

 

 

 

Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?