Cải thiện hiệu suất trang GitHub bằng cách gửi nhiều CSS hơn

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, từ việc giảm kích thước tệp tin đến việc tối ưu hóa mã nguồn. Tuy nhiên, GitHub đã áp dụng một phương pháp khác biệt để cải thiện hiệu suất trang của mình, đó là gửi nhiều CSS hơn. Điều này có thể gây ngạc nhiên, vì thông thường, việc gửi nhiều dữ liệu hơn sẽ làm tăng thời gian tải trang. Nhưng trong trường hợp của GitHub, việc gửi nhiều CSS hơn đã giúp giảm thời gian tải trang và tăng trải nghiệm người dùng.

Cơ chế hoạt động

Trước đây, GitHub sử dụng một phương pháp gọi là "CSS inline", trong đó mã CSS được nhúng trực tiếp vào mã HTML của trang web. Điều này giúp giảm số lượng yêu cầu HTTP cần thiết để tải trang, nhưng nó cũng có một số hạn chế. Khi sử dụng CSS inline, trình duyệt phải tải lại mã CSS cho mỗi trang, điều này có thể làm tăng thời gian tải trang.

Để giải quyết vấn đề này, GitHub đã quyết định chuyển đổi hoàn toàn sang việc gửi CSS rời. Thay vì nhúng mã CSS vào mã HTML, GitHub sẽ gửi một tệp tin CSS riêng biệt cho mỗi trang. Điều này cho phép trình duyệt lưu trữ tệp tin CSS trong bộ nhớ cache, giúp giảm thời gian tải trang cho các trang tiếp theo.

Ưu điểm

Việc gửi nhiều CSS hơn có một số ưu điểm. Thứ nhất, nó giúp giảm thời gian tải trang, vì trình duyệt không cần phải tải lại mã CSS cho mỗi trang. Thứ hai, nó giúp tăng trải nghiệm người dùng, vì trang web sẽ được tải nhanh hơn và mượt mà hơn.

Ví dụ

Để minh họa cho ưu điểm của việc gửi nhiều CSS hơn, chúng ta có thể xem xét một ví dụ. Giả sử chúng ta có một trang web với 10 trang con, mỗi trang con có một tệp tin CSS riêng biệt. Nếu chúng ta sử dụng phương pháp CSS inline, trình duyệt sẽ phải tải lại mã CSS cho mỗi trang con, điều này có thể làm tăng thời gian tải trang. Nhưng nếu chúng ta sử dụng phương pháp gửi CSS rời, trình duyệt chỉ cần tải tệp tin CSS một lần, và sau đó có thể sử dụng nó cho tất cả các trang con.

Kết luận

Tóm lại, việc gửi nhiều CSS hơn là một phương pháp hiệu quả để cải thiện hiệu suất trang web. Bằng cách chuyển đổi hoàn toàn sang việc gửi CSS rời, GitHub đã giảm thời gian tải trang và tăng trải nghiệm người dùng. Điều này cho thấy rằng, trong một số trường hợp, việc gửi nhiều dữ liệu hơn có thể giúp cải thiện hiệu suất trang web. Để áp dụng phương pháp này, các nhà phát triển web nên xem xét việc chuyển đổi sang việc gửi CSS rời, và tối ưu hóa mã nguồn để giảm thời gian tải trang.

Nguồn: https://github.blog/engineering/architecture-optimization/improving-site-performance-by-shipping-more-css/