Tối ưu hóa hiệu suất trang web bằng cách gửi nhiều CSS
tsudev· 28/09/2026
Giới thiệu
Khi nói đến việc tối ưu hóa hiệu suất trang web, có nhiều yếu tố cần được xem xét. Một trong những yếu tố quan trọng nhất là thời gian tải trang. Thời gian tải trang quá lâu có thể làm giảm trải nghiệm người dùng và ảnh hưởng đến xếp hạng của trang web trên các công cụ tìm kiếm. Để giải quyết vấn đề này, GitHub đã áp dụng một phương pháp độc đáo: gửi nhiều CSS.Tại sao gửi nhiều CSS lại giúp cải thiện hiệu suất?
Gửi nhiều CSS có thể giúp cải thiện hiệu suất trang web bằng cách giảm thời gian tải trang. Khi một trang web được tải, trình duyệt phải tải tất cả các tài nguyên cần thiết, bao gồm CSS, JavaScript và hình ảnh. Nếu tất cả các tài nguyên này được kết hợp thành một tệp tin duy nhất, trình duyệt sẽ phải tải toàn bộ tệp tin đó trước khi có thể hiển thị trang web. Tuy nhiên, nếu các tài nguyên này được chia nhỏ thành nhiều tệp tin nhỏ hơn, trình duyệt có thể tải chúng song song, giúp giảm thời gian tải trang.Cách GitHub thực hiện
GitHub đã áp dụng phương pháp gửi nhiều CSS bằng cách chia nhỏ các tệp tin CSS của họ thành nhiều tệp tin nhỏ hơn. Mỗi tệp tin nhỏ này chứa một phần của mã CSS cần thiết cho trang web. Khi một trang web được tải, GitHub sẽ gửi tất cả các tệp tin CSS nhỏ này song song, giúp giảm thời gian tải trang. Theo báo cáo của GitHub, phương pháp này đã giúp giảm thời gian tải trang xuống 30%.Ví dụ
Để minh họa cách gửi nhiều CSS có thể giúp cải thiện hiệu suất, hãy xem xét một ví dụ. Giả sử chúng ta có một trang web với 3 tệp tin CSS:style1.css, style2.css và style3.css. Mỗi tệp tin này chứa một phần của mã CSS cần thiết cho trang web. Thay vì kết hợp tất cả các tệp tin này thành một tệp tin duy nhất, chúng ta có thể gửi chúng song song như sau:
css
<!-- style1.css -->
body {
background-color: #f2f2f2;
}
<!-- style2.css -->
h1 {
color: #00698f;
}
<!-- style3.css -->
p {
font-size: 16px;
}