Khi CSS được đóng gói thành một file duy nhất, ngay cả sau khi đã loại bỏ các đoạn code không dùng (tree-shaking), nó vẫn chứa rất nhiều CSS thừa do các ngữ cảnh @media khác nhau (mobile, tablet, desktop, giao diện sáng/tối/các giao diện khác, v.v.).
Điều này gây ảnh hưởng xấu đến Core Web Vitals: First Input Delay (FID), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), cũng như các chỉ số quan trọng khác về hiệu năng và trải nghiệm người dùng: First Contentful Paint (FCP), Total Blocking Time (TBT), Time to Interactive (TTI) và sự kiện DOMContentLoaded.
Có một cách để cải thiện đáng kể tốc độ tải và hiển thị CSS bằng cách tách CSS thành các file khác nhau, mỗi file chỉ chứa code cần thiết cho ngữ cảnh cụ thể.
Hãy tách CSS của bạn thành các file riêng biệt:
📄main.css - chứa CSS cần thiết cho mọi điều kiện @media
📄screen.css - chứa CSS chỉ cần thiết cho điều kiện @media screen
📄print.css - chứa CSS chỉ cần thiết cho điều kiện @media print
📂breakpoints
📄x-small.css - chứa CSS chỉ cần thiết cho breakpoint X-Small
📄sm.css - chứa CSS chỉ cần thiết cho breakpoint Small
📄md.css - chứa CSS chỉ cần thiết cho breakpoint Medium
📄lg.css - chứa CSS chỉ cần thiết cho breakpoint Large
📄xl.css - chứa CSS chỉ cần thiết cho breakpoint Extra large
📄xxl.css - chứa CSS chỉ cần thiết cho breakpoint Extra extra large
📂themes
📄light.css - chứa CSS chỉ cần thiết cho giao diện sáng
📄dark.css - chứa CSS chỉ cần thiết cho giao diện tốiSau đó, nhúng các file CSS như sau:
<link rel="stylesheet" href="main.css" media="all">
<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="x-small.css" media="(max-width: 575px)">
<link rel="stylesheet" href="sm.css" media="(min-width: 576px)">
<link rel="stylesheet" href="md.css" media="(min-width: 768px)">
<link rel="stylesheet" href="lg.css" media="(min-width: 992px)">
<link rel="stylesheet" href="xl.css" media="(min-width: 1200px)">
<link rel="stylesheet" href="xxl.css" media="(min-width: 1400px)">
<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">Với cách tiếp cận này, các trình duyệt hiện đại ưu tiên tải CSS cho các điều kiện @media hiện tại, do đó trang web bắt đầu hiển thị nhanh hơn nhiều vì người dùng không cần phải chờ tải phần CSS không sử dụng.
Trong trường hợp bạn có tất cả CSS được đóng gói trong một file và không chỉ định điều kiện trong thuộc tính media của thẻ link, trình duyệt sẽ chờ toàn bộ CSS được tải xong trước khi bắt đầu hiển thị trang. Điều này làm chậm quá trình hiển thị trang một cách đáng kể.
Các breakpoint trong ví dụ này dựa trên Bootstrap 5. Cách tiếp cận này sẽ trở nên quan trọng hơn nữa đối với Bootstrap trong tương lai gần khi họ thêm hỗ trợ cho giao diện sáng/tối/các giao diện khác.
Nếu bạn muốn làm cho web trở nên tốt hơn và nhanh hơn, xin vui lòng:
- chia sẻ bài viết này,
- gửi bài viết này cho các nhà phát triển của các framework bạn đang sử dụng,
- áp dụng cách tách CSS này trên các trang web của bạn.
Chia sẻ trên mạng xã hội hoặc lưu lại để xem sau:
Nếu bạn muốn đọc thêm về tối ưu hóa này và hành vi của trình duyệt, vui lòng xem các tài liệu sau:
- Bài viết “Conditionally adaptive CSS. Browser behavior that might improve your performance” của Vadim Makeev. Ảnh chụp màn hình bìa cho bài viết này được lấy từ bài viết xuất sắc của ông, nơi ông có nhiều ảnh chụp màn hình và thí nghiệm hơn.
- MDN Web Docs: Tối ưu hóa hiệu năng CSS.