Cải thiện hiệu suất trang web thông qua tải xuống CSS song song?

Tôi đã tối ưu hóa thời gian tải trang của một trang web. Một trong những cách là bằng cách kết hợp nhiều yêu cầu HTTP cho CSS thành một yêu cầu HTTP kết hợp. Nhưng một trong những người đánh giá đã hỏi một câu hỏi thú vị: việc không tải xuống nhiều tệp CSS có làm giảm thời gian tải trang không?

Tôi chưa bao giờ xem xét tùy chọn này, vì điều duy nhất tôi đọc được trên internet là việc giảm số lượng (chặn) yêu cầu HTTP là chìa khóa cho một trang web nhanh hơn (mặc dù Google Pagespeed Insights dường như không nêu rõ điều này 1 ).

Tôi thấy một vài lý do tại sao việc tương tự hóa sẽ không cải thiện hiệu suất hoặc chỉ là vấn đề rất ít (vượt trội hơn so với lợi ích của việc sử dụng ít yêu cầu HTTP hơn):

Thiết lập một kết nối mới là tốn kém. Mặc dù việc thiết lập nhiều kết nối có thể được thực hiện song song, các trình duyệt sẽ sử dụng tối đa khoảng 4 - 6 kết nối (tùy thuộc vào trình duyệt), do đó, tải xuống CSS song song sẽ chặn tải xuống các tài sản khác như JavaScript và hình ảnh.
Thiết lập kết nối HTTPS cần thêm một số dữ liệu. Tôi đã đọc điều này có thể dễ dàng là một vài KB dữ liệu. Đây là một số dữ liệu bổ sung phải được gửi qua mạng, thay vì CSS mà chúng tôi thực sự muốn gửi.
Do thuật toán TCP Slow Start, càng nhiều dữ liệu được gửi qua kết nối, kết nối sẽ càng nhanh. Vì vậy, các kết nối tồn tại lâu hơn sẽ thực sự gửi dữ liệu nhanh hơn nhiều so với các kết nối mới. Xem ví dụ giao thức SPDY, sử dụng một kết nối duy nhất để cải thiện thời gian tải trang.
TCP là một sự trừu tượng: vẫn còn (thông thường) chỉ có một kết nối cơ bản. Vì vậy, trong khi nhiều yêu cầu được sử dụng, dữ liệu gửi qua dây có thể không nhất thiết được hưởng lợi từ nhiều kết nối để cải thiện tốc độ.
Kết nối Internet vốn không đáng tin cậy, đặc biệt là trên thiết bị di động. Một yêu cầu có thể được hoàn thành nhanh hơn đáng kể so với yêu cầu khác. Sử dụng nhiều yêu cầu cho CSS có nghĩa là hiển thị trang web bị chặn cho đến khi yêu cầu cuối cùng kết thúc, có thể muộn hơn đáng kể so với kết nối trung bình.

Vì vậy, có bất kỳ lợi ích nào trong việc song song hóa các yêu cầu HTTP cho các tệp CSS không?

Lưu ý / cập nhật: tất cả các tệp CSS đều bị chặn kết xuất. Các tệp CSS chưa được di chuyển ra ngoài đường dẫn quan trọng.

css performance

— ayke
nguồn

Tôi đã thấy một cái gì đó trên mã của etsy là trang web thủ công nơi họ khuyến nghị chỉ sử dụng một miền không nấu ăn duy nhất cho các đối tượng tĩnh (css, imss, js). Hóa ra các trình duyệt hiện đại làm rất tốt với các tải xuống song song từ một tên miền. Đối với nhiều tệp từ cùng một tên miền (10 tệp css so với 1 tệp lớn), tôi nghĩ bạn nên kết hợp và thu nhỏ một tệp lớn và chỉ thực hiện một yêu cầu. Đặc biệt với CSS, nơi trang web của bạn có thể sẽ cần tất cả các css để trông chính xác.

— Frank

Theo một cách nào đó, các trình duyệt đã tải xuống song song dựa trên số lượng kết nối có sẵn để sử dụng. Nó dựa trên HTML mà trình duyệt đang đọc.

— CN

Các tệp CSS được liên kết từ các tài liệu HTML được thêm vào hàng đợi tải xuống song song khi HTML được phân tích cú pháp; điều quan trọng là các liên kết JavaScript không đồng bộ chặn trình phân tích cú pháp HTML, ngăn các thẻ sau này được thêm vào hàng đợi tải xuống cho đến khi JavaScript được tải xuống, phân tích và thực thi. ^[1]

Dưới đây là một ví dụ buộc trình duyệt tải xuống ba trong số bốn tệp theo tuần tự (ít nhất là ba chuyến khứ hồi):

<head>
  <script src="js/fizz.js"></script>
  <link rel="stylesheet" href="css/foo.css"/>
  <script src="js/buzz.js"></script>
  <link rel="stylesheet" href="css/bar.css"/>
</head>

Dưới đây là ví dụ được làm lại để cả 4 tệp được tải xuống song song (ít nhất một chuyến khứ hồi):

<head>
  <link rel="stylesheet" href="css/foo.css"/>
  <link rel="stylesheet" href="css/bar.css"/>
  <script async src="js/fizz.js"></script>
  <script src="js/buzz.js"></script>
</head>

Một lưu ý khác: Các tệp CSS là (theo mặc định) chặn kết xuất, không chặn trình phân tích cú pháp; trang sẽ tiếp tục được phân tích cú pháp và DOM được xây dựng, nhưng kết xuất sẽ không bắt đầu cho đến khi CSSOM được xây dựng.

Lý do chính để phân tách CSS của bạn, là để có được các quy tắc tối thiểu cần thiết để hiển thị nội dung trong màn hình đầu tiên cho máy khách và phân tích cú pháp càng sớm càng tốt. Phần còn lại của các quy tắc, đối với những thứ không hiển thị ngay lập tức, có thể được đánh dấu là không nhất thiết phải chặn kết xuất với mediacác truy vấn trong thẻ liên kết hoặc được thêm vào trang bằng JavaScript được tải không đồng bộ.

Vì vậy, không có lợi ích rõ ràng nào cho việc song song tải xuống CSS của bạn chỉ vì lợi ích riêng của nó. Nhưng như mọi khi, đo lường và kiểm tra!

Để đọc thêm, tôi đề xuất các bài viết này về 'Nguyên tắc cơ bản về web: Tối ưu hóa hiệu suất' từ Google: https://developers.google.com/web/fundamentals/performance/

[1]: Đây là bỏ qua tính năng Phân tích cú pháp đầu cơ của một số trình duyệt:

https://docs.google.com/document/d/1JQZXrONw1RrjrdD_Z9jq1ZKsHguh8UVGHY_MZgE63II/preview?hl=vi-GB&forcehl=1

https://developer.mozilla.org/en-US/docs/Web/HTML/Optimizing_your_pages_for_speculators_parsing

— Robert K. Bell
nguồn

Một đọc tốt, khoảng cách giữ kịch bản của bạn tải đồng thời, là ở đây: stackoverflow.com/questions/436411/...

— joshreesjones

Điều đáng chú ý là tất cả các tệp .js phải được liên kết ở cuối mã ngay trước thẻ thân đóng, theo cách đó chúng không chặn bất cứ thứ gì.

— Chaoley

bạn có thể giải thích "Vì vậy, không có lợi ích rõ ràng nào cho việc song song tải xuống CSS của bạn chỉ vì lợi ích riêng của nó"? Bằng cách nào đó tôi không thể tìm ra nó từ câu trả lời trên

— gaurav5430

@ gaurav5430 Dường như không có lý do chính đáng để chia các tệp css, ngoài việc tối ưu hóa thời gian kết xuất trong màn hình đầu tiên (và có thể tối ưu hóa bộ đệm?)

— Robert K. Bell