Tại sao bạn không nên kết hợp CSS và JS trong một tệp duy nhất? Hãy cùng đi vào chi tiết để hiểu rõ lý do sau quyết định này và tại sao việc tách biệt chúng thường được ưu tiên trong phát triển web hiện đại.
CSS (Cascading Style Sheets) và JS (JavaScript) là hai ngôn ngữ lập trình quan trọng trong việc xây dựng và tùy chỉnh trải nghiệm người dùng trên web. Mỗi ngôn ngữ này có mục tiêu và chức năng riêng, và việc kết hợp chúng vào một tệp duy nhất có thể gây ra nhiều vấn đề không mong muốn.
Dừng việc kết hợp CSS/JS!
Lý do #1 – Nó làm chậm tải trang của bạn!
Đối với tôi, việc kết hợp CSS chỉ là một cải tiến bề ngoài, làm cho điểm kiểm tra của bạn trở nên tốt hơn vì bạn có ít yêu cầu hơn. Những kiểm tra tốc độ trang này chỉ được thiết kế để được sử dụng như hướng dẫn. Nhiều trong số chúng (nếu không phải tất cả) đã được thiết kế trước giao thức HTTP/2 mới.
Lịch sử phát triển từ giao thức HTTP cũ đến HTTP/2
Giao thức HTTP cũ chỉ có thể tải một số yêu cầu vào một thời điểm, xếp hàng các yêu cầu khác (hãy tưởng tượng 1 người thu ngân với nhiều khách hàng đứng xếp hàng). Vì vậy, vào những ngày đó, tốt hơn là có ít yêu cầu HTTP hơn. Chiến thuật như “CSS sprites” và kết hợp CSS/JS đã là một thực hành tiêu chuẩn. Với chỉ có một người thu ngân, việc đặt một đơn hàng lớn nhanh hơn so với nhiều đơn hàng nhỏ, mỗi đơn hàng có thời gian xử lý giao dịch riêng trong thời gian yêu cầu DNS.
Giao thức HTTP/2 ra đời, cho phép các yêu cầu song song (hãy tưởng tượng nhiều người thu ngân thay vì chỉ một người). Với nhiều người thu ngân, các yêu cầu được phục vụ nhanh hơn khi được gửi dưới dạng các yêu cầu nhỏ riêng biệt thay vì kết hợp. HTTP/2 mang lại sự tăng cường hiệu suất đáng kể đến mức bạn có thể mong đợi sự áp dụng gần như ngay lập tức. Thật không may, nó yêu cầu HTTPS (chứng chỉ TLS/SSL) mà vào thời điểm đó chưa được tiêu chuẩn hóa (cũng cần tiền và kỹ năng để triển khai).
Như dự kiến, các khách hàng héo hút về webhosting không sẵn sàng trả tiền cho SSL hoặc đối mặt với phiền toái kỹ thuật của việc thiết lập / gia hạn cho họ. Họ cũng không nhất thiết nếu bạn không có cửa hàng. (Vào thời điểm đó, không có giải pháp cài đặt chứng chỉ TLS/SSL bằng một cú nhấp chuột; bạn phải sao chép-dán các đoạn văn bản được mã hóa dài và tự hỏi liệu bạn đã làm đúng chưa.)
Nhưng sau đó, ngành công nghiệp đã thay đổi… Google bắt đầu yêu cầu tất cả các trang web phải có HTTPS hoặc có nguy cơ bị xử phạt trên xếp hạng trang web của họ trên công cụ tìm kiếm. Chỉ còn một điều duy nhất cản trở là việc có giấy phép TLS/SSL giá cả phải chăng. May mắn cho mọi người, Let’s Encrypt ra đời với giấy phép TLS/SSL miễn phí. Webhosting bắt đầu cung cấp các giải pháp cài đặt 1 cú nhấp chuột và HTTPS (cùng với HTTP/2) trở thành tiêu chuẩn.
Trong khi ngành công nghiệp webhosting và trình duyệt web đã làm cho HTTP/2 và HTTPS trở thành tiêu chuẩn; các kiểm tra tốc độ trang web lỗi thời (và nhiều hướng dẫn tăng tốc) vẫn khuyến nghị các thực hành như giảm số yêu cầu. Chúng ta vẫn đang sống trong hậu quả mâu thuẫn đó đến ngày nay. Về mặt ghi chú: Tôi ủng hộ việc giảm mã và thậm chí là các yêu cầu; tôi chỉ không thấy lý do để lãng phí tài nguyên máy chủ quý báu để kết hợp mã vào một tệp lớn mất thời gian xử lý.
Mọi người nghĩ rằng vì máy chủ của họ đã gửi ra ít yêu cầu hơn nên điều đó có nghĩa là máy chủ của họ đã làm ít công việc… nhưng đó là suy nghĩ sai lầm. Máy chủ của bạn gửi ra cùng lượng mã bất kể điều gì. Nếu có điều gì, máy chủ của bạn có thể làm việc nhiều hơn vì bạn đã kết hợp. Kết hợp CSS cũng có một số vấn đề phiền phức… thay vì cho phép trang web của bạn hiển thị ngay lập tức, bây giờ nó phải chờ cho toàn bộ CSS của bạn tải xong.
Hãy tưởng tượng bạn đang ăn tại một nhà hàng cùng với 20 người bạn. Bạn có muốn thức ăn được đưa ra càng sớm càng tốt khi nó sẵn sàng không? Hay chỉ khi mọi người đã đặt món của họ?
Với tôi… hầu hết CSS nên được tải càng nhanh càng tốt và hầu hết JS nên bị trì hoãn càng lâu càng tốt (TRỪ KHI có JS quan trọng như được sử dụng cho trình trượt ở trên phần hiển thị đầu tiên).
Còn về việc kết hợp JS (kịch bản)… tôi nghĩ rằng nó tốt nếu cơ chế kết hợp của bạn cũng có thể trì hoãn và đẩy chúng xuống footer (đó là lý do duy nhất tôi sẽ kết hợp chúng). Nhưng nói chung… và đặc biệt với các trang web được viết mã tốt, bạn không muốn làm điều đó.
Lý do #2 – Nó làm hỏng trang web của bạn
Bạn sẽ phải dành rất nhiều thời gian để sửa chữa các trang web bị hỏng do việc kết hợp CSS/JS. Tôi thấy câu nói “plugin bộ nhớ cache làm hỏng trang web của tôi” trên các nhóm WordPress trên Facebook xảy ra khoảng 2 lần mỗi tuần.
Và ngay cả khi mọi thứ trông ổn, trang web có thể không hoàn hảo hoặc không luôn luôn đạt được hiệu suất tốt nhất. Form liên hệ của bạn có thể bị hỏng, hoặc một số chức năng cuộn, hoặc một số chức năng ajax. Có vô số xung đột có thể xảy ra khi bạn kết hợp JS.
Lý do #3 – Nó thêm tải trang không cần thiết
Điều này là một trong những khía cạnh hài hước của việc kết hợp CSS/JS. Rất nhiều người nghĩ rằng việc thực hiện việc này sẽ giảm số yêu cầu và thời gian tải trang, nhưng thực tế thường đi ngược lại. Khi bạn kết hợp CSS/JS, tất cả các bảng điều khiển của bạn được kết hợp vào một tệp và tất cả mã JavaScript của bạn được kết hợp vào một tệp. Điều này là một vấn đề lớn nếu bạn có một trang web bận rộn với nhiều loại trang khác nhau.
Ví dụ:
- Trang thông thường sẽ tải trình tạo trang của bạn.
- Các trang không liên quan đến cửa hàng hoặc sản phẩm của bạn sẽ tải WooCommerce.
- Các trang không có biểu mẫu nào sẽ vẫn tải biểu mẫu của bạn.
- Và còn nữa. Hãy tưởng tượng nếu bạn có 30-40 plugin, vậy thì bây giờ trang web của bạn tải toàn bộ CSS/JS trên mỗi trang. Điều này là một sự lãng phí lớn!
Được rồi, tốt… có một số kỹ thuật “thông minh” kết hợp CSS/JS cho phép CSS/JS riêng biệt cho từng trang, nhưng bây giờ đây là quá đáng. Máy chủ của bạn mất nhiều thời gian hơn để kết hợp CSS/JS thay vì phục vụ trang cho người dùng. Hãy tự do thử nghiệm theo cách của bạn, nhưng quy tắc tổng quan của tôi là không nên kết hợp JS.
Lý do #4 – Nó làm trễ quá trình xây dựng bộ nhớ cache
Cuối cùng nhưng không kém quan trọng, bạn không muốn kết hợp CSS/JS bằng plugin bộ nhớ cache vì nó làm trễ quá trình xây dựng bộ nhớ cache. Hãy tưởng tượng một trang web lớn với 1.000 trang. Bạn không muốn plugin bộ nhớ cache xây dựng lại Html/CSS/JS cho tất cả 1.000 trang khi bạn cập nhật một bài viết. Tốt hơn… để Autoptimize hoặc JavaScript không đồng bộ thực hiện việc kết hợp. Sau đó, plugin bộ nhớ cache của bạn chỉ cần xây dựng bộ nhớ cache html.
Có hàng triệu chiến thuật và đôi khi đó là một nghệ thuật riêng. Phụ thuộc vào loại trang web, lưu lượng truy cập và tần suất cập nhật nội dung của bạn.
Nhưng (phản biện)…
“Việc kết hợp CSS/JS không giảm mã sao?”
Có, điều đó đúng! Kết hợp CSS/JS thường giảm mã, loại bỏ các khoảng trắng trống và mã không cần thiết. Vì vậy, có vẻ như trang web của bạn sẽ tải nhanh hơn vì tổng mã cần tải ít hơn. Vấn đề duy nhất là đó không phải là cách trang web hiển thị.
Bạn biết đấy, trang web bắt đầu hiển thị ngay khi tất cả tài sản được tải xong.
Hãy so sánh CSS chưa được kết hợp (split1.css + split2.css + split3.css = tổng cộng 60kb) so với CSS đã được kết hợp (combined.css = 50kb).
Dễ hiểu rằng CSS kết hợp sẽ tải nhanh hơn vì nó nhẹ hơn, nhưng điều này không luôn xảy ra. Có khả năng cao rằng trang web của bạn có thể bắt đầu hiển thị trang chỉ với split1.css (với split2.css & split3.css được sử dụng để hiển thị các phần dưới của trang). Trong trường hợp đó, bạn nên để các tệp không kết hợp để trang web bắt đầu hiển thị sớm hơn cho người dùng. Ý tưởng ở đây là bắt đầu hiển thị sớm hơn thay vì hoàn thành hiển thị sớm hơn. (Nói chung, đó là khái niệm đằng sau “Critical CSS”.)
“Nhưng CSS/JS kết hợp không cần phải tải nếu nó đã được lưu trữ trong bộ nhớ đệm!”
Điều đó cũng đúng. Nếu bạn kết hợp CSS/JS và sau đó lưu nó trong bộ nhớ đệm của trình duyệt người dùng, họ sẽ không cần phải tải nó! Vấn đề duy nhất là… hầu hết các lượt truy cập vào trang web của bạn sẽ là lần đầu tiên. Ngay cả nếu chỉ có một người… họ có thể truy cập từ máy tính để bàn, máy tính xách tay, điện thoại di động của họ. Có thể sử dụng trình duyệt khác, hoặc có thể đã xóa bộ nhớ đệm. Bất kể lý do là gì, đa số lưu lượng truy cập của bạn sẽ là lần đầu tiên.
Nói thêm điều này… bạn cũng có thể lưu trữ các tệp CSS/JS chưa được kết hợp! Đặt thời gian hết hạn dài cho chúng và đó chẳng khác gì.
“Vậy còn CSS Critical?”
Nếu trang web của bạn quá nặng đến mức bạn thực sự có CSS quan trọng so với CSS không quan trọng, bạn đang có một vấn đề khác. Dọn sạch mã của bạn. Nếu tổng mã CSS của bạn chỉ có 40-50kb, thì đó là tốt. Để nó không kết hợp.
“Bạn có chắc là KHÔNG nên kết hợp JS?”
Chủ đề về việc kết hợp JS là một vấn đề phức tạp riêng biệt. Hãy bắt đầu bằng việc xem xét những điểm mạnh và điểm yếu. Ngay từ đầu… việc kết hợp JS luôn luôn là một rủi ro vì có thể gây lỗi trang web của bạn. Thứ hai, chúng ta hiện đang ở trong thời đại của HTTP2, nơi việc tải nhiều tài sản song song vượt qua việc tải một tài sản kết hợp. Chỉ cần hai lý do này cũng đủ để tránh nó. Đó là một lựa chọn an toàn với hiệu suất tốt và ít vấn đề cần sửa.
Vậy là cách tốt nhất để quản lý JS và khi nào nên kết hợp JS là gì?
Tôi nghĩ hầu hết các JS không quan trọng cho việc hiển thị trang ban đầu. JS thường liên quan nhiều đến chức năng của trang hơn là thiết kế của nó. Hãy lưu ý từ “thường”. Một số JS có liên quan đến thiết kế… chẳng hạn như trình chiếu hình ảnh, nội dung tab, div có thể mở rộng/collapsible, hộp thoại popup, v.v.
Lý tưởng nhất, tất cả JS (trừ JS liên quan đến thiết kế được đặt ở phía trên fold) nên được trì hoãn cho cuối hàng đợi tải trang và không tải cho đến khi thiết kế của bạn tải trước. Tốt hơn cả là nếu bạn có thể ngăn cản một số JS cụ thể không tải cho đến khi người dùng cuộn đến hoặc tương tác với nó (lazyload/onload-event)… điều này sẽ rất tốt cho những thứ như Googlemaps iframe chứa mã lớn nằm ở cuối trang web.
Một số cơ chế kết hợp hiện tại sẽ thực hiện tất cả điều đó… kết hợp JS của bạn và trì hoãn nó. Và sau đó, bạn có thể loại trừ thủ công một số tệp JS quan trọng khỏi việc kết hợp và trì hoãn. Và cũng có thể đặt một số chúng trên lazyload nếu bạn muốn.
“Nhưng trang web của tôi có điểm tốc độ cao hơn khi kết hợp CSS/JS!”
Đây là lý do tốt mà nhiều người sử dụng để biện minh việc kết hợp CSS/JS. Và trong một số trường hợp, điều đó là đúng – kết hợp CSS/JS có thể giúp bạn có thời gian tải hoàn thành nhanh hơn. Nhưng điều quan trọng ở đây… chúng ta muốn thời gian bắt đầu tải nhanh hơn.
Hãy nhớ xu hướng tối ưu hóa TTFB? Đó là về việc bắt đầu sớm, không phải kết thúc sớm. Thời gian phản hồi nhanh có thể quan trọng không kém thời gian tải nhanh.
Chúng ta muốn trang web của bạn hiển thị nhanh hơn (không nhất thiết chỉ để tải nhanh hơn). Càng sớm trang web của bạn hiển thị, thì thời gian tải được cảm nhận sẽ nhanh hơn cho người dùng. Đó là lý do tại sao việc tải JS là một vấn đề khó chịu. Một số mục nên được tải trước, các mục khác nên được trì hoãn để không gây trở ngại cho các mục JS quan trọng!
Vậy quyết định của bạn là… bạn đang tối ưu hóa tốc độ trang web của mình cho điểm số trang hay cho người dùng?
Không có ngoại lệ nào sao?
Như với tất cả mọi thứ, có, có một số ngoại lệ nhưng chúng rất ít và không thường xuyên. Thậm chí tôi cũng không khuyên bạn làm điều đó nếu bạn muốn có trải nghiệm lưu trữ đơn giản.
Kết hợp CSS/JS từ cùng một chủ đề hoặc plugin là có lý!
Nếu bạn từng có chủ đề hoặc plugin trang tạo trang đề nghị kết hợp CSS hoặc JS riêng của nó. Vâng, hãy bật tính năng đó. Điều đó có lý. Vì tất cả CSS và JS đến từ một phần mở rộng đã tương thích/hòa hợp với chính nó. Không chỉ vậy, nó có thể kết hợp chúng một cách tự nhiên mà không cần xử lý máy chủ hoặc cơ chế quản lý thêm. Điều này giống như bạn có lựa chọn có đi chung xe với bạn cùng phòng, hay đi với bạn bè sống khắp nơi trong thành phố.
Tệp CSS/JS kết hợp đôi khi được lưu trữ tốt hơn
Từ khóa quan trọng ở đây là “đôi khi”. Đôi khi, tệp kết hợp có khả năng giữ thời gian hết hạn lâu hơn, hoặc tương thích tốt hơn với bộ nhớ đệm DNS của Cloudflare. Nó phụ thuộc vào các tình huống khác nhau. Luôn đáng thử nghiệm nếu bạn không hài lòng với tình hình của bạn. Ý tưởng chung là tệp CSS được lưu trữ trên máy tính của người dùng và không cần phải tải xuống trong các yêu cầu sau này. Vấn đề duy nhất còn lại là ngay cả sau điều này, lần tải đầu tiên của bạn vẫn sẽ chậm hơn vì CSS kết hợp chưa được lưu trữ.
Kết hợp CSS/JS đáng giá cho các tệp nhỏ
Tôi đặc biệt không thích khi bạn kết hợp một loạt các tệp CSS/JS lớn 20kb để tạo thành một tệp lớn 1MB. Nhưng nếu bạn có một loạt các tệp CSS/JS 0-3kb, tôi nghĩ rằng việc kết hợp chúng là ổn. Điều này hợp lý vì các tệp nhỏ tốn nhiều thời gian tra cứu DNS hơn là thời gian xử lý thực sự.
Kết hợp CSS/JS đôi khi giúp giảm xung đột
Điều này liên quan đến việc giải quyết xung đột hơn là hiệu suất. Đôi khi, bạn có thể có một loạt các tệp CSS hoặc JS xung đột với nhau và làm hỏng thiết kế hoặc chức năng của trang web. Đôi khi kết hợp giải quyết vấn đề đó. Nó là ngẫu nhiên nhưng tôi đã thấy nó xảy ra.
Kết hợp CSS/JS có thể làm nhanh các trang web nhỏ khi đặt trong HTML
Trên các trang web thực sự nhỏ/nhẹ, thời gian phân giải DNS dài hơn thời gian tải thực sự cho các tệp CSS/JS nhỏ. Trong trường hợp như vậy, có thể là một ý tưởng tốt để kết hợp mã CSS/JS và đặt nó trong HTML.
Trong trường hợp này, bạn đang làm nhanh trang web không phải bằng cách kết hợp CSS/JS mà là bằng cách giảm số lượng yêu cầu HTTP. Một lần nữa, điều này chỉ được khuyến nghị cho các trang nhẹ thực sự! Nếu tổng CSS và JS của bạn chỉ có 10kb hoặc ít hơn, bạn có thể là ứng viên lý tưởng cho chiến thuật này.
Kết luận
Tóm lại, việc kết hợp CSS và JS trên trang web không phải lúc nào cũng là một quyết định đúng đắn và không có quy tắc cứng nhắc nào áp dụng cho tất cả trường hợp. Dưới đây là một số điểm quan trọng để xem xét:
- Tự động kết hợp từ chủ đề hoặc plugin: Nếu chủ đề hoặc plugin của bạn cung cấp tùy chọn để kết hợp CSS hoặc JS riêng của nó, bạn có thể bật tính năng đó. Điều này thường là tùy chọn an toàn vì tất cả mã từ cùng một nguồn đã được thiết kế để tương thích với nhau.
- Lưu trữ tốt hơn: Đôi khi việc kết hợp CSS và JS có thể giúp lưu trữ hiệu quả hơn. Tuy nhiên, điều này không phải lúc nào cũng đúng và phụ thuộc vào tình huống cụ thể.
- Tệp nhỏ và nhẹ: Kết hợp CSS và JS thường hợp lý hơn cho các tệp nhỏ và nhẹ hơn. Những tệp này có thể tốn nhiều thời gian trong việc tra cứu DNS hơn là thời gian xử lý thực tế.
- Xung đột: Khi có xung đột giữa các tệp CSS hoặc JS trên trang web của bạn và gây ra lỗi thiết kế hoặc chức năng, việc kết hợp có thể giúp giải quyết vấn đề này.
- Trang web nhỏ và nhẹ: Trên các trang web thực sự nhỏ và nhẹ, kết hợp CSS/JS có thể giúp giảm thời gian phân giải DNS và tăng tốc độ tải trang.
Tuy nhiên, việc kết hợp CSS và JS cũng có nhược điểm, bao gồm:
- Khả năng xảy ra lỗi: Khi bạn kết hợp CSS và JS, có nguy cơ gây ra lỗi trên trang web của bạn, đặc biệt là khi các tệp không tương thích với nhau.
- Tải trang ban đầu chậm hơn: Trong một số trường hợp, việc kết hợp có thể làm cho thời gian tải trang ban đầu chậm hơn, do cần phải tải toàn bộ tệp kết hợp trước khi nó được lưu trữ trong bộ nhớ đệm của người dùng.
- Không phải lúc nào cũng tối ưu: Việc kết hợp CSS và JS không phải lúc nào cũng là tối ưu cho tất cả các trang web. Điều này phụ thuộc vào kích thước và đặc điểm của trang web của bạn.
Tóm lại, quyết định về việc kết hợp CSS và JS trên trang web của bạn cần dựa trên tình huống cụ thể của bạn và thực hiện kiểm tra để xem liệu việc này có thể cải thiện hiệu suất và tốc độ tải trang của bạn hay không. Không có một quy tắc cứng nhắc, và đôi khi việc giữ mã riêng lẻ có thể là một lựa chọn tốt hơn để đảm bảo tải trang nhanh chóng và tránh xung đột không mong muốn.
