Hướng dẫn should i combine javascript files? - tôi có nên kết hợp các tệp javascript không?

Kết hợp các tệp CSS và JS từ lâu đã rất phổ biến như một kỹ thuật tối ưu hóa tốc độ trang web. Nhưng các tiêu chuẩn web đã thay đổi đáng kể trong vài năm qua. Vì vậy, đây là thời điểm tốt để xem xét lại liệu có còn ý nghĩa khi kết hợp các tệp CSS và JS của bạn hay không.

CSS và JS kết hợp là gì

CSS kết hợp hoặc hợp nhất có nghĩa là tất cả các tệp CSS khác nhau trong trang web sẽ được kết hợp thành một tệp CSS duy nhất. Tương tự, JS kết hợp hoặc hợp nhất có nghĩa là tất cả các tệp JS khác nhau trong trang web sẽ được kết hợp thành một tệp JS duy nhất.

Tại sao kết hợp các tệp CSS và JS

Chúng ta hãy đi một vài năm trước chính xác trước ngày 14 tháng 5 năm 2015 khi HTTP/2 được phát hành.

Đó là độ tuổi của HTTP/1 không cho phép thực hiện nhiều yêu cầu từ cùng một kết nối TCP giữa trình duyệt web và máy chủ. Vì vậy, các trình duyệt cần thiết để yêu cầu một tệp từ máy chủ và sau đó dành thời gian để chờ tệp đó được tải xuống trước khi nó có thể gửi một yêu cầu khác để tải xuống tệp tiếp theo. Do đó, việc tải xuống đồng thời nhiều tệp không thể có trong một kết nối giới thiệu sự chậm trễ giữa nhiều lần tải xuống và làm cho tổng thời gian tải xuống lâu hơn nhiều.

Các trình duyệt web đã cố gắng giải quyết vấn đề này bằng cách tạo nhiều kết nối TCP cùng một lúc và sau đó yêu cầu tải xuống các tệp riêng lẻ từ các kết nối khác nhau. Điều này làm cho nó có thể tải xuống đồng thời nhiều tập tin. Giải pháp tốt, phải không?

Ừ! Nhưng mỗi kết nối này yêu cầu một số sức mạnh xử lý từ các máy chủ web. Đó là bởi vì mỗi kết nối TCP yêu cầu một vài vòng tròn tự động giữa giao dịch và trình duyệt, quá trình này còn được gọi là cái bắt tay. Ngoài ra, máy chủ phải duy trì thông tin về mọi yêu cầu kết nối. Vì vậy, quá nhiều yêu cầu kết nối có thể thêm rất nhiều gánh nặng cho máy chủ cuối cùng có thể làm cho máy chủ chậm hoặc thậm chí gặp sự cố.

Vì vậy, để không quá tải máy chủ của bạn với quá nhiều kết nối cùng một lúc, các trình duyệt có giới hạn đặt ra số lượng kết nối tối đa có thể được thực hiện đồng thời.

Vì vậy, tổng số lượt tải xuống đồng thời từ máy chủ vẫn bị giới hạn bởi giới hạn bộ trình duyệt đó. Trên hết, nó cần một thời gian để thiết lập tất cả các kết nối TCP riêng lẻ giữa trình duyệt và máy chủ cũng ảnh hưởng đến tốc độ tải trang web.

Bạn có thể đọc thêm về các kết nối đồng thời này và các phiên bản HTTP trong bài viết này.

Do đó, bạn nên giảm tổng số yêu cầu cần thiết để tải các trang web của bạn cuối cùng có thể làm cho trang web của bạn tải nhanh hơn. Do đó, cũng là một ý tưởng tốt để kết hợp tất cả các tệp CSS thành một tệp CSS và tất cả các tệp JS thành một tệp JS. Bằng cách này, trình duyệt chỉ có thể thực hiện một yêu cầu và tải xuống tệp CSS hoặc JS kết hợp thay vì thực hiện nhiều kết nối và yêu cầu để tải xuống tất cả các tệp CSS và JS.

Tại sao việc kết hợp các tệp CSS và JS không cần thiết

Sự ra đời của các tiêu chuẩn web mới đã buộc chúng ta phải suy nghĩ lại về những gì bây giờ nên được coi là thực tiễn tốt nhất cho tốc độ trang web nhanh hơn. Một điều như vậy là kết hợp các tệp CSS và JavaScript. Dưới đây là một số lý do tại sao CSS và JS kết hợp có thể không còn là thực hành tốt nhất.

HTTP/2 làm cho CSS và JS kết hợp không cần thiết

Hãy bước vào kỷ nguyên của HTTP/2 trở lên.

HTTP/2 đã giới thiệu ghép kênh trong đó trình duyệt có thể gửi số lượng yêu cầu không giới hạn đến máy chủ và tải xuống tất cả các tệp đó chỉ trong một kết nối TCP. Vì vậy, vấn đề lớn với việc tạo nhiều kết nối TCP và thời gian chờ trước khi tải xuống tệp tiếp theo đã biến mất với HTTP/2. Điều này cũng làm cho việc kết hợp các tệp CSS và JS không cần thiết.

Ngoài ra, do tải xuống nhiều tệp trong HTTP/2, tổng thời gian tải xuống của tất cả các tệp có thể nhanh hơn nếu chúng là một tệp kết hợp duy nhất. Việc tải xuống đồng thời nhiều tệp này cũng có thể làm chậm tốc độ tải xuống của từng tệp riêng lẻ cũng có thể làm cho tổng thời gian tải xuống chậm hơn trong nhiều trường hợp.

Đó là lý do tại sao bạn có thể thấy sự gia tăng nhẹ hoặc giảm thời gian tải từ cả hai kịch bản có hoặc không kết hợp các tệp CSS khi thực hiện kiểm tra cho tốc độ trang web của bạn. Vì vậy, thật khó để chọn một lựa chọn tốt hơn trong vấn đề này. Nhưng bạn có thể kiểm tra trang web của mình để xem cái nào cung cấp cho bạn tốc độ nhanh hơn.So, it is hard to pick a better option in this regard. But you can test your website to see which one gives you a faster speed.

Bộ nhớ đệm trình duyệt không thích CSS và JS hợp nhất

Từ quan điểm của bộ nhớ đệm trình duyệt, việc kết hợp các tệp CSS và JS có thể không phải là một ý tưởng rất tốt nếu khách truy cập của bạn truy cập nhiều trang trang web của bạn. Điều đó bởi vì nếu tệp CSS hoặc JS là phổ biến cho các trang web khác của bạn, các trình duyệt có thể lưu trữ tệp đó và sử dụng nó trên các trang khác mà không yêu cầu tải xuống tệp.

Nhưng ngay cả khi hầu hết các tệp CSS và JS của một trang cũng giống như các trang khác, nếu bất kỳ một trong các tệp CSS và JS khác nhau, thậm chí hơi, trong trang, các tệp CSS và JS kết hợp sẽ trở nên hoàn toàn duy nhất từ Bất kỳ trang khác trên trang web của bạn. Vì vậy, bây giờ các tệp CSS và JS của trang đó không còn có thể được sử dụng trên bất kỳ trang nào khác mặc dù hầu hết các tệp CSS được sử dụng trên trang thực sự phổ biến đối với một số trang khác. Đó là lý do tại sao khách truy cập sẽ thấy tốc độ trang web nhanh hơn, bạn có thể có được tốc độ nhanh hơn trên các trang tiếp theo bằng cách không kết hợp các tệp CSS của bạn.

CSS và JS kết hợp lấy đi thời gian tải nhanh hơn xuất hiện

Các trình duyệt web có thể bắt đầu kết xuất/xử lý các tệp trang web sau khi chúng được tải xuống. Vì vậy, khi bất kỳ tệp CSS và JS nhỏ hơn nào được tải xuống, trình duyệt có thể bắt đầu hiển thị tệp đó trong khi trình duyệt vẫn đang tải xuống các tệp khác.

Nhưng đối với tệp CSS và JS kết hợp lớn hơn, trình duyệt sẽ cần phải đợi thời gian dài hơn cho toàn bộ tệp để được tải xuống. Điều này tạo ra độ trễ dài hơn trước khi trình duyệt có thể bắt đầu hiển thị các tệp CSS và JS. Do đó, điều này gây ra sự kém hiệu quả và do đó làm tăng thời gian tải trang của bạn. Thời gian tải xuống CSS và JS dài hơn này cũng làm cho tốc độ trang web của bạn có vẻ chậm hơn đối với khách truy cập vì các tệp này thường bị chặn.

Nhân tiện, đọc bài viết này để biết cách khắc phục các vấn đề CSS và JS chặn kết xuất trong trang web WordPress của bạn.

Kết hợp CSS và JS tăng thời gian tải cho các lượt truy cập trang đầu tiên

Việc kết hợp các tệp CSS và JS này sẽ mất một thời gian và sử dụng một số tài nguyên máy chủ của bạn. Tuy nhiên, việc thu nhỏ sẽ chỉ cần thiết một lần trên mỗi trang web cho đến khi tệp CSS được thu nhỏ được xóa khỏi bộ đệm hoặc bộ đệm sẽ hết hạn. Vì vậy, thời gian tải trang của khách truy cập đầu tiên của bất kỳ trang web nào của bạn sẽ dài hơn vì sự cần thiết phải tạo các tệp kết hợp. Các tệp kết hợp sau đó có thể được gửi cho khách truy cập tiếp theo mà không cần dành thêm thời gian nữa.

Vì vậy, nếu trang web của bạn chỉ có một vài khách truy cập và các lượt truy cập của họ thường cần được phục vụ sau khi tạo các tệp CSS và JS, hay còn gọi là lượt truy cập trang web lần đầu, bạn sẽ không nhận được nhiều lợi ích từ việc kết hợp các tệp. Thay vào đó, việc kết hợp các tệp CSS và JS thực sự có thể làm chậm thời gian tải trang của khách truy cập đầu tiên của bất kỳ trang web nào vì thời gian cần thiết để kết hợp các tệp.

CSS và JS kết hợp các vấn đề gây ra

Kết hợp các tệp CSS và JS đôi khi có thể gây ra sự cố và làm cho trang web của bạn bị hỏng. Vì vậy, mặc dù bạn có thể kết hợp các tệp CSS và JS và kiểm tra kỹ lưỡng trang web của mình, nhưng đặt cược an toàn hơn sẽ không kết hợp các tệp đó. Và ngay cả sau khi mọi thứ trên trang web của bạn có vẻ ổn sau khi kết hợp các tệp CSS và JS, có khả năng một số chức năng của trang web của bạn đã bị hỏng dưới mui xe mà bạn sẽ khám phá cho đến sau này.

Chẳng hạn, bạn có thể tìm ra một nút không hoạt động, biểu mẫu liên hệ của bạn không gửi đúng, một thanh trượt không trượt, AJAX không hoạt động nữa hoặc một số vấn đề khác sau khi kết hợp hoặc hợp nhất các tệp CSS và JS .

Sự kết luận

Kết hợp hoặc hợp nhất các tệp CSS và JS đã hoạt động trong quá khứ vì những hạn chế của công nghệ lúc đó. Nhưng bây giờ bạn không nên kết hợp các tệp CSS và JS của mình để tận dụng các công nghệ web mới nhất và để có được hiệu suất tốt nhất từ ​​trang web của bạn.

Tôi có nên phân tách các tệp JavaScript không?

Bạn có nên kết hợp các tệp CSS?

Kết hợp JavaScript là gì?

Làm cách nào để gói tất cả các tệp JavaScript?