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

Giới thiệu

Khi nói đến hiệu suất trang web, mọi người thường nghĩ rằng gửi ít dữ liệu hơn sẽ giúp trang tải nhanh hơn. Tuy nhiên, GitHub đã chứng minh rằng gửi nhiều CSS hơn có thể cải thiện hiệu suất trang web. Điều này có vẻ counterintuitive, nhưng nó dựa trên cách trình duyệt xử lý CSS và cách GitHub tối ưu hóa kiến trúc của mình.

Vấn đề với CSS hiện tại

Trước khi GitHub thực hiện thay đổi, trang web của họ sử dụng một lượng lớn CSS được chia thành nhiều tệp nhỏ. Mỗi tệp này được tải riêng biệt, dẫn đến nhiều yêu cầu HTTP và tăng thời gian tải trang. Ngoài ra, trình duyệt phải chờ đợi từng tệp CSS được tải trước khi có thể hiển thị trang web, dẫn đến trải nghiệm người dùng không tốt.

Giải pháp của GitHub

Để giải quyết vấn đề này, GitHub đã quyết định gửi nhiều CSS hơn bằng cách hợp nhất các tệp CSS nhỏ thành một tệp lớn. Điều này có vẻ như sẽ làm tăng thời gian tải trang, nhưng thực tế nó giúp giảm số lượng yêu cầu HTTP và cho phép trình duyệt hiển thị trang web nhanh hơn. GitHub cũng sử dụng kỹ thuật gọi là "code splitting" để chia nhỏ tệp CSS lớn thành các phần nhỏ hơn, chỉ tải các phần cần thiết cho trang hiện tại.

Ưu điểm của giải pháp

Giải pháp của GitHub có một số ưu điểm. Thứ nhất, nó giảm số lượng yêu cầu HTTP, giúp giảm thời gian tải trang. Thứ hai, nó cho phép trình duyệt hiển thị trang web nhanh hơn, cải thiện trải nghiệm người dùng. Thứ ba, nó giúp giảm tải cho máy chủ, vì máy chủ không cần phải xử lý nhiều yêu cầu HTTP.

Ví dụ mã

Dưới đây là một ví dụ mã về cách GitHub hợp nhất các tệp CSS nhỏ thành một tệp lớn:

css
/* trước khi hợp nhất */
@import 'header.css';
@import 'footer.css';
@import 'content.css';

/* sau khi hợp nhất */
/* header.css */
.header {
  background-color: #333;
  color: #fff;
}

/* footer.css */
.footer {
  background-color: #333;
  color: #fff;
}

/* content.css */
.content {
  font-size: 16px;
  line-height: 1.5;
}

/* tệp CSS hợp nhất */
.header {
  background-color: #333;
  color: #fff;
}
.footer {
  background-color: #333;
  color: #fff;
}
.content {
  font-size: 16px;
  line-height: 1.5;
}

Kết luận

Cải thiện hiệu suất trang web bằng cách gửi nhiều CSS hơn là một giải pháp không ngờ, nhưng nó đã giúp GitHub giảm thời gian tải trang và cải thiện trải nghiệm người dùng. Để áp dụng giải pháp này, bạn nên xem xét việc hợp nhất các tệp CSS nhỏ thành một tệp lớn và sử dụng kỹ thuật code splitting để chia nhỏ tệp CSS lớn thành các phần nhỏ hơn. Điều này sẽ giúp giảm số lượng yêu cầu HTTP và cho phép trình duyệt hiển thị trang web nhanh hơn.

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