Đã bao giờ bạn để ý tới kích thước tập tin CSS trong trang web của bạn, nếu tập tin CSS trên trang web của bạn có kích thước lớn, nó sẽ làm cho việc tải trang của bạn bị chậm đi.
Mặc dù CSS không phải là tập tin lớn nhất trong trang web của bạn nhưng đây là một trong những tập tin đầu tiên trình duyệt thấy. Bởi vì trình duyệt sẽ không hiển thị trang cho đến khi CSS được tải xuống và phân tích, vì vậy nó cần càng nhỏ gọn càng tốt.
Dưới đây là 5 mẹo để giúp bạn giảm kích thước của tập tin CSS và có thể tăng tốc độ tải trang.
Table of Contents
1. Sử dụng shallow selectors
Có thể hiểu shallow selectors một cách đơn giản là khi style chúng ta gọi trực tiếp class, id của các element mà không cần phải gọi qua class cha của element đó. Việc này có thể giúp tập tin CSS của bạn tiết kiệm được hàng kilobytes dữ liệu của tập tin.
Ví dụ chúng ta sử dụng selector sau:
nav ul li.nav-item
Đoạn code trên có thể được viết ngắn gọn hơn như sau:
.nav-item
Như vậy cũng giúp cho dòng code CSS của bạn gọn gàng hơn và trình duyệt cũng sẽ render các element một cách nhanh hơn.
Trình duyệt sẽ đọc các element từ phải qua trái, vì vậy khi style nếu chúng ta gọi element qua nhiều cấp cha thì trình duyệt sẽ mất nhiều thời gian hơn để render các element.
Lý tưởng nhất là bạn sử dụng các selector càng ít cấp càng tốt. Nhưng điều này không có nghĩa là bạn cần cắt ngắn mọi thứ. Đôi khi bạn cần gọi element muốn style thông qua element cha của nó vì độ ưu tiên trong css, tùy phụ thuộc vào element bạn muốn style mà chúng ta gọi qua các cấp cha, nhưng chúng ta sử dụng sao cho hợp lý và đoạn code càng ngắn càng tốt.
2. Viết tắt các thuộc tính khi style
Điều này xem qua có vẻ rất bình thường. Nhưng bạn sẽ ngạc nhiên với việc không cần thiết phải viết đầy đủ mã code theo cách thông thường và ta có thể rút ngắn đoạn code css của mình.
Dưới đây là một ví dụ về đoạn code mà ta thường xuyên không viết tắt khi sử dụng:
font-size: 1.5rem; line-height: 1.618; font-family: "Arial", "Helvetica", sans-serif;
Như đoạn mã trên thay vì chúng ta cần sử dụng tới 3 dòng code ta có thể viết gọn hơn như sau:
font: 1.5rem/1.618 "Arial", "Helvetica", sans-serif;
Ta có thể thấy rằng trong ví dụ ở trên thuộc tính font được viết gọn lại trong một dòng code như vậy nhìn có vẻ ngắn gọn hơn và có thể tiết kiệm được khoảng 60% tài nguyên so với cách viết thông thường. Việc viết tắt nhìn có vẻ khó hiểu hơn so với bạn viết mỗi thuộc tính một dòng, nhưng bạn sẽ quen sau một thời gian sử dụng cách viết này .
Chúng ta không chỉ viết tắt trong trường hợp style font chữ, ta còn có thể viết ngắn gọn hơn cho các thuộc tính khác như: margin, padding…..
Để có thể giúp code CSS của bạn gọn gàng và sạch sẽ hơn. Mozilla Developer Network cung cấp một danh sách các thuộc tính viết tắt rất hữu ích, bạn có thể tham khảo thêm tại đây.
Trong một vài trường hợp bạn muốn thay đổi font-size hoặc thay đổi các giá trị của thuộc tính khi website của bạn hiển thị trên các màn hình có kích thước khác nhau. Bạn có thể viết code css như sau:
h1{
font: 1.5rem/1.618 "Arial", "Helvetica", sans-serif;
}
@media (min-width: 60rem){
h1{
font-size: 2rem;
}
}
Điều này không những thuận tiện hơn mà còn làm tăng tính linh hoạt của các thành phần. Nếu có bất kỳ thành phần nào khác của thuộc tính font cơ bản thay đổi, những thay đổi này sẽ được áp dụng cho màn hình có kích thước lớn hơn.
3. Gợi ý những tài nguyên được tải trước với preload resource.
Điều này có nghĩa là cho trình duyệt biết khi tải trang cần phải tải thành phần nào trước và thành phần nào có thể tải sau. Ở đây bạn có thể cho trình duyệt biết khi trang được load thì có thể bắt đầu tải tập tin css nào trước.
Bạn có thể sử dụng preload như một thẻ <link> trong HTML:
<link rel="preload" href="/css/styles.css" as="style">
hoặc có thể sử dụng như một HTTP header trong cấu hình server:
Link: </css/styles.css>; rel=preload; as=style
Trong cả hai cách này, preload sẽ cho phép trình duyệt bắt đầu tải /css/styles.css. Nhưng sử dụng preload trong HTTP header sẽ thích hợp hơn, vì điều này có nghĩa là trình duyệt sẽ tìm thấy các gợi ý tải trang được trả về sớm hơn trong phần tiêu đề, thay vì để trong phần body trình duyệt sẽ tải chậm hơn.
Một lý do khác để sử dụng preload trong tiêu đề HTTP là nó sẽ mang lại những lợi ích về hiệu năng cũng tương tự như việc bạn sử dụng inline CSS.
4. Loại bỏ code dư thừa và trùng lặp với csscss
CSSCSS sẽ phân tích các tập tin CSS nào mà bạn đưa tới cho nó và cho bạn biết đoạn code css nào bị trùng lặp.
Bạn có thể cài đặt với mã lệnh:
gem install csscss
chú ý rằng csscss chỉ làm việc trên ruby 1.9.x hoặc cao hơn.
Sau khi cài đặt, bạn có thể kiểm tra code dư thừa và trùng lặp trong tập tin CSS bằng câu lệnh sau:
csscss -v styles.css
Lệnh này sẽ liệt kê những đoạn code mà bạn có thể sửa đổi hoặc gộp chúng lại để tiết kiệm tài nguyên. ví dụ:
{h1} AND {p} share 3 declarations
- color: #000
- line-height: 1.618
- margin: 0 0 1.5rem
Bạn có thể gộp các đoạn code bị trùng lặp vào làm một đoạn code như sau:
h1, p{
color: #000;
line-height: 1.618;
margin: 0 0 1.5rem;
}
Sau đó có lẽ bạn sẽ thấy bất ngờ với nhưng gì quá trình này có thể tiết kiệm được đặc biệt là trong các dự án lớn.
Bạn có thể sử dụng tùy chọn –help để xem thêm lệnh bạn có thể sử dụng để điều chỉnh thêm.
5. Sử dụng các công cụ, các thư viện hỗ trợ tối ưu hóa CSS
Việc tối ưu CSS có nghĩa là làm giảm các ký tự không cần thiết từ file CSS, chẳng hạn như: Loại bỏ các ký tự trắng không cần thiết, các comment, các dòng trống.
Dưới đây là một vài thư viện bạn có thể tham khảo và sử dụng để tự động tối ưu tập tin CSS trên trang của bạn
1. Grunt: grunt-contrib-cssmin
2. Gulp: gulp-minify-css
Kết luận
Tập tin CSS mặc dù không phải là tập tin nặng nhất trong trang web của bạn, nhưng để tăng tốc độ tải trang thì mọi thứ trong website của bạn cần được tối ưu. Tối ưu tập tin CSS cũng sẽ giúp bạn tiết kiệm được rất nhiều tài nguyên. Hiện nay chúng ta có rất nhiều cách để có thể tối ưu hoá và giảm dung lượng file CSS, trên đây mình giới thiệu nhanh về 5 mẹo nhỏ hy vọng bạn nó sẽ hữu ích trong công việc của bạn.
Previous post