Tăng tốc ứng dụng bằng cách gửi nhiều CSS
tsudev· 05/10/2026
Giới thiệu
Khi nói đến việc tối ưu hóa hiệu suất của mộ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à cách quản lý và tải các tài nguyên như CSS. Gần đây, GitHub đã áp dụng một phương pháp thú vị để cải thiện hiệu suất trang web của họ bằng cách gửi nhiều CSS. Trong bài viết này, chúng ta sẽ tìm hiểu cách GitHub thực hiện phương pháp này và cách bạn có thể áp dụng nó vào dự án của mình.Vấn đề với CSS truyền thống
Trước khi tìm hiểu về phương pháp của GitHub, hãy xem xét cách CSS truyền thống được tải trên một trang web. Thông thường, CSS được tải từ một tệp tin duy nhất, chứa tất cả các样式 cần thiết cho trang web. Tuy nhiên, phương pháp này có thể dẫn đến việc tải các样式 không cần thiết, làm tăng thời gian tải trang và ảnh hưởng đến hiệu suất.Phương pháp của GitHub
GitHub đã giải quyết vấn đề này bằng cách chia nhỏ tệp tin CSS thành nhiều phần nhỏ hơn, mỗi phần chứa các样式 cần thiết cho một phần cụ thể của trang web. Điều này cho phép GitHub chỉ tải các样式 cần thiết cho phần hiện tại của trang web, giảm thiểu thời gian tải trang và cải thiện hiệu suất.Ví dụ
Ví dụ, nếu bạn có một trang web với nhiều phần khác nhau, như phần đầu trang, phần nội dung và phần chân trang, bạn có thể tạo ra ba tệp tin CSS riêng biệt cho mỗi phần. Khi người dùng truy cập vào trang web, chỉ tệp tin CSS cần thiết cho phần hiện tại sẽ được tải, giảm thiểu thời gian tải trang.Ưu điểm
Phương pháp này có nhiều ưu điểm, bao gồm:- Giảm thiểu thời gian tải trang
- Cải thiện hiệu suất trang web
- Tối ưu hóa việc sử dụng tài nguyên
Kết luận
Tóm lại, phương pháp của GitHub là một cách hiệu quả để cải thiện hiệu suất trang web bằng cách gửi nhiều CSS. Bằng cách chia nhỏ tệp tin CSS thành nhiều phần nhỏ hơn, bạn có thể giảm thiểu thời gian tải trang và cải thiện hiệu suất. Để áp dụng phương pháp này vào dự án của mình, bạn cần xem xét cách quản lý và tải các tài nguyên như CSS và tìm cách tối ưu hóa việc sử dụng tài nguyên.Nguồn: https://github.blog/engineering/architecture-optimization/improving-site-performance-by-shipping-more-css/