Các trang web ngày càng hiện đại và phức tạp vì vậy việc tối ưu trang web của bạn ngày càng quan trọng hơn. CSS cũng là một trong những thứ mà ta cần cải thiện, nó có thể gây ra nhưng trải nghiệm tồi tệ cho người dùng khi thiết bị của họ gặp vấn đề về đường truyền internet. Vì vậy trong bài viết này mình sẽ đưa ra một số biện pháp để cải thiện hiệu suất CSS.
1. Nén và loại bỏ CSS thừa
CSS Framework: Khi sử dụng các thư viện CSS chẳng hạn như Bootstrap việc import toàn bộ thư viện là điều không nên vì điều đó sẽ làm trình duyệt phải tải một tập tin có kích thước nặng hơn trong khi chúng ta thường chỉ sử dụng một vài tính năng của thư viện.
Lặp CSS: Việc loại bỏ các CSS không dùng thừa được loại bỏ theo cách thủ công, việc đó sẽ rất phức tạp nếu chúng ta có nhiều trang (xóa chỗ này có thể hỏng chỗ kia) do vậy chúng ta phải thật cẩn thận khi xóa code thừa và đảm bảo hiển thị tốt trên các trang và các thiết bị khác nhau. Một tool có loại bỏ code css không dùng một cách tự động là: Purifycss.
Nén tệp CSS: Việc nén tệp CSS thành một tệp có kích thước nhỏ hơn có thể làm tăng tốc độ tải của trình duyệt. Có rất nhiều tool hỗ trợ việc này như CSS Minifier.
2. Ưu tiên CSS cho phần quan trọng (Critical CSS)
Phần quan trọng ở đây chính là phần nửa trên website (là phần mà người dùng sẽ nhìn thấy đầu tiên trước khi cuộn trang, thuật ngữ này còn gọi là "Above the fold"). Để tăng trải nghiệm người dùng chúng ta có thể style cho phần quan trọng ngay trong phần head của trang web. Việc này sẽ làm giảm request lấy CSS và tăng tốc độ render.
<!DOCTYPE html> <html lang="en"> <head> <style> /* inlined critical CSS */ </style> <script> loadCSS('non-critical.css'); </script> </head> <body> </body>
</html>
3. Load CSS không đồng bộ
Phần CSS còn lại (Less critical css) tốt nhất nên được tải bằng cách không đồng bộ. Chúng ta có thể làm được điều này bằng cách set thuộc tính media="print" cho thẻ <link>.
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
Giá trị print của thuộc tính media sẽ cho trình duyệt biết đây là CSS khi người dùng in trang web và trình duyệt sẽ tải nó một cách bất đồng bộ để không làm block trang web. Thuộc tính onload="this.media='all' để đặt cho thuộc tính media thành all khi mà tệp tin được tải xong.
4. Tránh sử dụng @import trong file CSS
Sử dụng @import trong file CSS sẽ làm chậm tốc độ load trang bởi vì trình duyệt phải tải file CSS sau đó đọc để xem file đó có sử dụng @import không để tải tiếp các file CSS được import trước khi hiển thị cho người dùng.
Nếu chúng ta có một file CSS sử dụng @import url(imported.css) thì network request sẽ như sau:
Và khi không sử dụng @import:
5. Lưu ý khi sử dụng thuộc tính về kích thước, vị trí tạo Animation
Khi thay đổi kích thước một phần tử trên trang, trình duyệt thường phải tính toán lại vị trí và kích thước của nó trong trang. Ví dụ bạn thay đổi chiều rộng của một phần tử thi tất cả các phần tử con của nó sẽ bị ảnh hưởng và có thể một phần lớn bố cục sẽ ảnh hưởng theo. Điều này còn tùy thuộc vào phạm vị của phần tử trong toàn bộ tài liệu, do vậy bố cục các lớn trình duyệt tính toàn càng lâu.
Khi tạo Animation:
- Thay vì sử
widthvàheighthay sử dụngtransform: scale. - Khi di chuyển phần tử xung quanh, tránh thay đổi thuộc tính
top,right,bottom,leftmà hãy sử dụngtransform: translate(). - Làm mở hãy sử dụng
opacity.
6. Phần kết
CSS là một phần quan trọng không thể thiểu của bất kì trang web nào, việc cải thiện hiệu năng của nó sẽ giúp nâng cao trải nghiệm người dùng. Trên đây là một số kĩ thuật bạn có thể dùng để có thể làm được điều đó, hi vọng nó sẽ giúp ích cho mọi người! 